You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@ambari.apache.org by pa...@apache.org on 2017/04/29 07:14:51 UTC
ambari git commit: AMBARI-20146. HiveView2.0: Visual Explain graph
zooms out on scrolling down (pallavkul)
Repository: ambari
Updated Branches:
refs/heads/trunk 85ef37064 -> 7f10e446c
AMBARI-20146. HiveView2.0: Visual Explain graph zooms out on scrolling down (pallavkul)
Project: http://git-wip-us.apache.org/repos/asf/ambari/repo
Commit: http://git-wip-us.apache.org/repos/asf/ambari/commit/7f10e446
Tree: http://git-wip-us.apache.org/repos/asf/ambari/tree/7f10e446
Diff: http://git-wip-us.apache.org/repos/asf/ambari/diff/7f10e446
Branch: refs/heads/trunk
Commit: 7f10e446c75516087432768605a9ce25f4b82a67
Parents: 85ef370
Author: pallavkul <pa...@gmail.com>
Authored: Sat Apr 29 12:43:27 2017 +0530
Committer: pallavkul <pa...@gmail.com>
Committed: Sat Apr 29 12:43:27 2017 +0530
----------------------------------------------------------------------
.../src/main/resources/ui/app/styles/app.scss | 4 ++
.../app/templates/components/visual-explain.hbs | 7 +-
.../ui/app/utils/hive-explainer/processor.js | 1 -
.../ui/app/utils/hive-explainer/renderer.js | 67 ++++++++++++++++----
4 files changed, 64 insertions(+), 15 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/ambari/blob/7f10e446/contrib/views/hive20/src/main/resources/ui/app/styles/app.scss
----------------------------------------------------------------------
diff --git a/contrib/views/hive20/src/main/resources/ui/app/styles/app.scss b/contrib/views/hive20/src/main/resources/ui/app/styles/app.scss
index 29646cc..766157a 100644
--- a/contrib/views/hive20/src/main/resources/ui/app/styles/app.scss
+++ b/contrib/views/hive20/src/main/resources/ui/app/styles/app.scss
@@ -1005,3 +1005,7 @@ rect.operator__box {
.table-title {
padding: 0 15px;
}
+
+.button-container {
+ margin-top: 10px;
+}
http://git-wip-us.apache.org/repos/asf/ambari/blob/7f10e446/contrib/views/hive20/src/main/resources/ui/app/templates/components/visual-explain.hbs
----------------------------------------------------------------------
diff --git a/contrib/views/hive20/src/main/resources/ui/app/templates/components/visual-explain.hbs b/contrib/views/hive20/src/main/resources/ui/app/templates/components/visual-explain.hbs
index 2edeab2..8445582 100644
--- a/contrib/views/hive20/src/main/resources/ui/app/templates/components/visual-explain.hbs
+++ b/contrib/views/hive20/src/main/resources/ui/app/templates/components/visual-explain.hbs
@@ -16,9 +16,10 @@
* limitations under the License.
}}
-
-<div>
- <button class="btn btn-default" title="Expand/Collspse" {{action "expandQueryResultPanel" }} style="position: absolute;top: 10px; right: 10px;">{{fa-icon "expand"}}</button>
+<div class="pull-right button-container">
+ <button class="btn btn-default" type="button" id="zoom_in"> + </button>
+ <button class="btn btn-default" type="button" id="zoom_out"> - </button>
+ <button class="btn btn-default" title="Expand/Collspse" {{action "expandQueryResultPanel" }} >{{fa-icon "expand"}}</button>
</div>
{{#if isQueryRunning}}
http://git-wip-us.apache.org/repos/asf/ambari/blob/7f10e446/contrib/views/hive20/src/main/resources/ui/app/utils/hive-explainer/processor.js
----------------------------------------------------------------------
diff --git a/contrib/views/hive20/src/main/resources/ui/app/utils/hive-explainer/processor.js b/contrib/views/hive20/src/main/resources/ui/app/utils/hive-explainer/processor.js
index 298366f..1a6d4b3 100644
--- a/contrib/views/hive20/src/main/resources/ui/app/utils/hive-explainer/processor.js
+++ b/contrib/views/hive20/src/main/resources/ui/app/utils/hive-explainer/processor.js
@@ -263,7 +263,6 @@ export function getEdgesWithCorrectedUnion(edges) {
function findAllOutputOperators(vertices, outputOperatorsList, edges, patterns) {
vertices.forEach(cEdge => {
- console.log(cEdge);
edges.push(cEdge);
let outputOperator = cEdge["OutputOperators:"];
if(outputOperator) {
http://git-wip-us.apache.org/repos/asf/ambari/blob/7f10e446/contrib/views/hive20/src/main/resources/ui/app/utils/hive-explainer/renderer.js
----------------------------------------------------------------------
diff --git a/contrib/views/hive20/src/main/resources/ui/app/utils/hive-explainer/renderer.js b/contrib/views/hive20/src/main/resources/ui/app/utils/hive-explainer/renderer.js
index 4d9eff4..82627c8 100644
--- a/contrib/views/hive20/src/main/resources/ui/app/utils/hive-explainer/renderer.js
+++ b/contrib/views/hive20/src/main/resources/ui/app/utils/hive-explainer/renderer.js
@@ -21,10 +21,11 @@ import Ember from 'ember';
export default function doRender(data, selector, onRequestDetail, draggable) {
- const width = '1570', height = '800';
-
+ const width = '100%', height = '800';
+ var zoomInit = null;
d3.select(selector).select('*').remove();
var isSingleReducer = isSingleReducerAvailable(data);
+
const svg =
d3.select(selector)
.append('svg')
@@ -32,28 +33,72 @@ export default function doRender(data, selector, onRequestDetail, draggable) {
.attr('height', height);
const container = svg.append('g');
- const zoom =
- d3.behavior.zoom()
- .scale(1/10)
- .scaleExtent([1 / 10, 1])
- .on('zoom', () => {
- container.attr('transform', `translate(${d3.event.translate}) scale(${d3.event.scale})`);
- draggable.set('zoom' , true);
- });
+
+ d3.selectAll('button').on('click', function() {
+ if (this.id === 'zoom_in') {
+ transition(1.2); // increase on 0.2 each time
+ }
+ if (this.id === 'zoom_out') {
+ transition(0.8); // deacrease on 0.2 each time
+ }
+ });
+
+ function transition(zoomLevel) {
+
+ zoomInit = zoomInit || 1;
+ let newScale = parseFloat(zoomInit*zoomLevel).toFixed(5) ;
+
+ if(newScale < 0.2){
+ newScale = 0.2;
+ }else {
+ newScale = newScale;
+ }
+
+ zoomInit = newScale;
+
+ container.transition()
+ .duration(100)
+ .attr("transform", "translate(" + zoom.translate()[0] + "," + zoom.translate()[1] +")scale(" + newScale + ")");
+ }
+
+ const zoom = d3.behavior.zoom()
+ .scale(zoomInit)
+ .on('zoom', zoomed );
+
+ function zoomed() {
+ var presentScale = d3.transform(container[0][0].getAttribute('transform')).scale[0] || d3.event.scale ;
+ container.attr('transform', 'translate(' + d3.event.translate + ') scale(' + presentScale + ')');
+ draggable.set('zoom' , true);
+ };
+
+ var currentTransform = null;
const drag = d3.behavior.drag()
- .on("dragstart", () => {
+ .on("dragstart", (event) => {
+ let evt = window.event || event;
+ currentTransform = d3.transform(evt.currentTarget.firstElementChild.getAttribute('transform'));
draggable.set('dragstart', true);
draggable.set('zoom',false);
+
})
.on("dragend", () => {
draggable.set('dragend', true);
+
+ var latestTransformation = d3.transform(container[0][0].getAttribute('transform'));
+ container.transition()
+ .duration(100)
+ .attr("transform", "translate(" + latestTransformation.translate[0] + "," + latestTransformation.translate[1] +")scale(" + currentTransform.scale[0] + ")");
});
svg
.call(zoom)
.call(drag);
+ svg
+ .on("mousewheel.zoom", null)
+ .on("DOMMouseScroll.zoom", null) // disables older versions of Firefox
+ .on("wheel.zoom", null) // disables newer versions of Firefox
+
const root =
container
.selectAll('g.vertex')