More two adoption. > half plot components, all axis components

Author: keller-mark

examples-src/App.vue

@@ -135,6 +135,7 @@
       :pMarginLeft="120"
       :pMarginRight="10"
       :pMarginBottom="100"
+      :showDownloadButton="true"
     >
       <Axis
         slot="axisLeft"
@@ -171,6 +172,7 @@
       :pMarginLeft="120"
       :pMarginRight="10"
       :pMarginBottom="100"
+      :showDownloadButton="true"
     >
       <Axis
         slot="axisLeft"
@@ -209,6 +211,7 @@
       :pMarginLeft="120"
       :pMarginRight="10"
       :pMarginBottom="100"
+      :showDownloadButton="true"
     >
       <Axis
         slot="axisLeft"
@@ -248,6 +251,7 @@
       :pMarginLeft="120"
       :pMarginRight="10"
       :pMarginBottom="100"
+      :showDownloadButton="true"
     >
       <Axis
         slot="axisLeft"
@@ -284,6 +288,7 @@
       :pMarginLeft="120"
       :pMarginRight="10"
       :pMarginBottom="50"
+      :showDownloadButton="true"
     >
       <Axis
         slot="axisLeft"
@@ -380,6 +385,7 @@
       :pMarginLeft="150"
       :pMarginRight="20"
       :pMarginBottom="80"
+      :showDownloadButton="true"
     > 
       <Axis
         slot="axisLeft"
@@ -419,6 +425,7 @@
       :pMarginLeft="150"
       :pMarginRight="20"
       :pMarginBottom="80"
+      :showDownloadButton="true"
     > 
       <Axis
         slot="axisLeft"
@@ -485,6 +492,7 @@
       :pMarginLeft="180"
       :pMarginRight="20"
       :pMarginBottom="200"
+      :showDownloadButton="true"
     >
       <DendrogramAxis
         slot="axisTop"
@@ -535,6 +543,7 @@
       :pMarginLeft="20"
       :pMarginRight="20"
       :pMarginBottom="80"
+      :showDownloadButton="true"
     > 
       <GenomeTrackPlot
         slot="plot"
@@ -565,6 +574,7 @@
       :pMarginLeft="150"
       :pMarginRight="20"
       :pMarginBottom="80"
+      :showDownloadButton="true"
     > 
       <Axis
         slot="axisLeft"
@@ -664,6 +674,7 @@
       :pMarginLeft="120"
       :pMarginRight="10"
       :pMarginBottom="180"
+      :showDownloadButton="true"
     >
       <Axis
         slot="axisLeft"
@@ -748,6 +759,7 @@
       :pMarginLeft="120"
       :pMarginRight="10"
       :pMarginBottom="180"
+      :showDownloadButton="true"
     >
       <Axis
         slot="axisLeft"
@@ -831,6 +843,7 @@
       :pMarginLeft="120"
       :pMarginRight="10"
       :pMarginBottom="180"
+      :showDownloadButton="true"
     >
       <Axis
         slot="axisLeft"

src/components/axes/Axis.vue

@@ -316,7 +316,7 @@ export default {
              * Create the SVG elements
              */
             
-            var container;
+            let container;
             if(d3Node) {
                 container = d3Node;
             } else {

src/components/axes/DendrogramAxis.vue

@@ -1,26 +1,46 @@
 <template>
-    <div 
-        :id="this.axisElemID" 
-        class="vdp-axis" 
-        :style="{
-            'height': this.computedHeight + 'px', 
-            'width': this.computedWidth + 'px',
-            'top': this.computedTop + 'px',
-            'left': this.computedLeft + 'px'
-        }"></div>
+    <div>
+        <canvas 
+            :id="this.axisElemID" 
+            class="vdp-axis" 
+            :style="{
+                'height': this.computedHeight + 'px', 
+                'width': this.computedWidth + 'px',
+                'top': this.computedTop + 'px',
+                'left': this.computedLeft + 'px'
+            }"
+        ></canvas>
+        <div v-show="this.highlightX !== null && this.highlightY != null" 
+            :style="{
+                'position': 'absolute',
+                'pointer-events': 'none',
+                'height': '14px', 
+                'width': '14px',
+                'border-radius': '50%',
+                'opacity': 0.6,
+                'background-color': '#555',
+                'top': (this.computedTop + this.highlightY - 7) + 'px',
+                'left': (this.computedLeft + this.highlightX - 7) + 'px'
+            }"
+            class="vdp-axis-highlight"
+        ></div>
+    </div>
 </template>
 
 <script>
+import Two from 'two.js';
 import { select as d3_select } from 'd3-selection';
 import { cluster as d3_cluster, hierarchy as d3_hierarchy } from 'd3-hierarchy';
-
-import { svgAsPngUri } from 'save-svg-as-png';
+import { mouse as d3_mouse } from 'd3';
+import debounce from 'lodash/debounce';
+import { TOOLTIP_DEBOUNCE } from './../../constants.js';
 
 import AbstractScale from './../../scales/AbstractScale.js';
 import DataContainer from './../../data/DataContainer.js';
 import HistoryEvent from './../../history/HistoryEvent.js';
 import HistoryStack, { computedParam } from './../../history/HistoryStack.js';
-import { filterHierarchy } from '../../helpers.js';
+import { filterHierarchy, getDelaunay } from '../../helpers.js';
+
 
 import { EVENT_TYPES, EVENT_SUBTYPES } from './../../history/base-events.js';
 
@@ -100,7 +120,8 @@ export default {
     },
     data() {
         return {
-            
+            highlightX: null,
+            highlightY: null,
         }
     },
     computed: {
@@ -202,7 +223,15 @@ export default {
         removeAxis() {
             d3_select(this.axisSelector).select("svg").remove();
         },
-        drawAxis() {
+        tooltip(x, y) {
+            this.highlightX = x;
+            this.highlightY = y;
+        },
+        tooltipDestroy() {
+            this.highlightX = null;
+            this.highlightY = null;
+        },
+        drawAxis(d3Node) {
             const vm = this;
             vm.removeAxis();
 
@@ -239,85 +268,115 @@ export default {
             const root = d3_hierarchy(hierarchyData);
             tree(root);
 
+            const descendants = root.descendants();
+
 
             /*
                 Draw the dendrogram
             */
-           const container = d3_select(vm.axisSelector)
-                .append("svg")
-                    .attr("width", vm.computedWidth)
-                    .attr("height", vm.computedHeight);
-            
-            const gTree = container.append("g")
-                .attr("transform", "translate(" + vm.computedTranslateX + "," + vm.computedTranslateY + ")");
+            let canvas;
+            if(d3Node) {
+                canvas = d3Node;
+            } else {
+                canvas = d3_select(this.axisSelector);
+            }
 
+            const canvasNode = canvas.node();
+
+            const two = new Two({ 
+                width: vm.computedWidth, 
+                height: vm.computedHeight, 
+                domElement: canvasNode
+            });
 
             let pathFunction;
             if(this._side === SIDES.TOP) {
                 pathFunction = (d) => {
-                    return "M" + d.parent.x + "," + d.parent.y
-                        + "H" + d.x
-                        + "M" + d.x + "," + d.y
-                        + "V" + d.parent.y;
+                    return two.makePath(
+                        d.parent.x + vm.computedTranslateX, d.parent.y + vm.computedTranslateY, // M
+                        d.x + vm.computedTranslateX, d.parent.y + vm.computedTranslateY, // H d.x
+                        d.x + vm.computedTranslateX, d.y + vm.computedTranslateY, // M
+                        d.x + vm.computedTranslateX, d.parent.y + vm.computedTranslateY // V d.parent.y
+                    );
                 }
             } else if(this._side === SIDES.BOTTOM) {
                 pathFunction = (d) => {
-                    return "M" + d.parent.x + "," + (vm.pMarginBottom - d.parent.y)
-                        + "H" + d.x
-                        + "M" + d.x + "," + (vm.pMarginBottom - d.y)
-                        + "V" + (vm.pMarginBottom - d.parent.y);
+                    return two.makePath(
+                        d.parent.x + vm.computedTranslateX, (vm.pMarginBottom - d.parent.y) + vm.computedTranslateY, // M
+                        d.x + vm.computedTranslateX, (vm.pMarginBottom - d.parent.y) + vm.computedTranslateY, // H d.x
+                        d.x + vm.computedTranslateX, (vm.pMarginBottom - d.y) + vm.computedTranslateY, // M
+                        d.x + vm.computedTranslateX, (vm.pMarginBottom - d.parent.y) + vm.computedTranslateY // V (vm.pMarginBottom - d.parent.y)
+                    );
                 }
             }
 
-            gTree.selectAll(".link")
-                .data(root.descendants().slice(1))
-                .enter().append("path")
-                .attr("class", "link")
-                .attr("d", pathFunction)
-                .attr("fill", "none")
-                .attr("stroke", "#555")
-                .attr("stroke-opacity", 0.6)
-                .attr("stroke-width", "1.5px");
-            
             let nodeTransformFunction;
             if(this._side === SIDES.TOP) {
                 nodeTransformFunction = (d) => { 
-                    return "translate(" + d.x + "," + d.y + ")"; 
+                    return [d.x + vm.computedTranslateX, d.y + vm.computedTranslateY]; 
                 }
             } else if(this._side === SIDES.BOTTOM) {
                 nodeTransformFunction = (d) => { 
-                    return "translate(" + d.x + "," + (vm.pMarginBottom - d.y) + ")"; 
+                    return [d.x + vm.computedTranslateX, (vm.pMarginBottom - d.y) + vm.computedTranslateY];
                 }
             }
 
-            const nodes = gTree.selectAll(".node")
-                .data(root.descendants())
-                .enter().append("g")
-                .attr("class", function(d) { return "node" + (d.children ? " node--internal" : " node--leaf"); })
-                .attr("transform", nodeTransformFunction);
-
-            /* nodes.append("text")
-                .style("display", (d) => { return d.children ? 'none' : 'normal'; })
-                .text((d) => { return d.data.name; })
-                .style("font", "10px sans-serif")
-                .style("text-anchor", "end")
-                .attr("dx", "-.6em")
-                .attr("dy", ".6em")
-                .attr("transform", "rotate(-65)"); */
-    
-            // filtering buttons
-            nodes.append("circle")
-                .attr("r", 7)
-                .attr("fill", "#555")
-                .attr("fill-opacity", 0)
-                .style("cursor", "pointer")
-                .on("mouseover", function() {
-                    d3_select(this).attr("fill-opacity", 0.6);
-                })
-                .on("mouseleave", function() {
-                    d3_select(this).attr("fill-opacity", 0);
-                })
-                .on("click", (d) => {
+            const nodePoints = [];
+
+            descendants.forEach((d, i) => {
+                if(i > 0) {
+                    const path = pathFunction(d);
+                    path.noFill();
+                    path.stroke = "#555";
+                    path.opacity = 0.6;
+                    path.linewidth = 1.5;
+                }
+                nodePoints.push(nodeTransformFunction(d));
+            });
+            
+
+            two.update();
+
+            if(d3Node) {
+                return;
+            }
+
+            const delaunay = getDelaunay(nodePoints, true);
+
+            /*
+             * Listen for mouse events
+             */
+            const getDataFromMouse = (mouseX, mouseY) => {
+                const i = delaunay.find(mouseX, mouseY);
+                return descendants[i];
+            };
+
+            const debouncedTooltipDestroy = debounce(vm.tooltipDestroy, TOOLTIP_DEBOUNCE);
+            canvas.on("mousemove", () => {
+                const mouse = d3_mouse(canvasNode);
+                const mouseX = mouse[0];
+                const mouseY = mouse[1];
+
+                const node = getDataFromMouse(mouseX, mouseY);
+
+                if(node) {
+                    const nodePoint = nodeTransformFunction(node);
+                    vm.tooltip(nodePoint[0], nodePoint[1]); 
+                } else {
+                    debouncedTooltipDestroy(node);
+                }
+            })
+            .on("mouseleave", vm.tooltipDestroy);
+
+            canvas.on("click", () => {
+                const mouse = d3_mouse(canvasNode);
+                const mouseX = mouse[0];
+                const mouseY = mouse[1];
+
+                const node = getDataFromMouse(mouseX, mouseY);
+
+                if(node) {
+                    /* 
                     varScale.sortByHierarchy(vm._hierarchyContainer);
                     stack.push(new HistoryEvent(
                         EVENT_TYPES.SCALE,
@@ -326,24 +385,18 @@ export default {
                         "sortByHierarchy",
                         [computedParam(EVENT_TYPES.DATA, [vm.h])]
                     ));
-                    varScale.filterByHierarchy(vm._hierarchyContainer, d.data.name);
+                    */
+                    varScale.filterByHierarchy(vm._hierarchyContainer, node.data.name);
                     stack.push(new HistoryEvent(
                         EVENT_TYPES.SCALE,
                         EVENT_SUBTYPES.SCALE_DOMAIN_FILTER,
                         vm.variable,
                         "filterByHierarchy",
-                        [computedParam(EVENT_TYPES.DATA, [vm.h]), d.data.name]
+                        [computedParam(EVENT_TYPES.DATA, [vm.h]), node.data.name]
                     ));
-                });
-            
-        },
-        downloadAxis() {
-            const node = d3_select(this.axisSelector).select("svg").node();
-            return new Promise((resolve, reject) => {
-                svgAsPngUri(node, {}, (uri) => {
-                    resolve(uri);
-                });
+                }
             });
+            
         }
     }
 }