Merge pull request #135 from open-source-labs/d3-implementation

got rid of d3-tip

Author: nusanam

.eslintrc

@@ -3,7 +3,9 @@
   "root": true,
   "plugins": ["jest", "react"],
   "rules": {
-    "arrow-parens": [2, "as-needed"]
+    "arrow-parens": [2, "as-needed"],
+    "import/no-unresolved": "off",
+    "import/extensions": "off"
   },
   "env": {
     "es6": true,
@@ -22,8 +24,5 @@
     },
     "ecmaVersion": 2018,
     "sourceType": "module"
-  },
-  "settings": {
-    "import/no-unresolved": "off"
   }
 }

src/app/__tests__/action.test.jsx

@@ -1,3 +1,4 @@
+/* eslint-disable react/jsx-props-no-spreading */
 import React from 'react';
 import { configure, shallow } from 'enzyme';
 import Adapter from 'enzyme-adapter-react-16';

src/app/__tests__/dropdown.test.js

@@ -1,3 +1,4 @@
+/* eslint-disable react/jsx-props-no-spreading */
 /* eslint-disable react/jsx-filename-extension */
 import React from 'react';
 import { configure, shallow } from 'enzyme';

src/app/components/Chart.jsx

@@ -12,7 +12,7 @@
 import React, { Component } from 'react';
 // import PropTypes from 'prop-types';
 import * as d3 from 'd3';
-import d3Tip from 'd3-tip';
+// import d3Tip from 'd3-tip';
 
 let root = {};
 class Chart extends Component {
@@ -78,10 +78,10 @@ class Chart extends Component {
     const d3root = tree(hierarchy);
 
     g.selectAll('.link')
-    // root.links() gets an array of all the links,
-    // where each element is an object containing a
-    // source property, which represents the link's source node,
-    // and a target property, which represents the link's target node.
+      // root.links() gets an array of all the links,
+      // where each element is an object containing a
+      // source property, which represents the link's source node,
+      // and a target property, which represents the link's target node.
       .data(d3root.links())
       .enter()
       .append('path')
@@ -104,21 +104,36 @@ class Chart extends Component {
       });
 
     node.append('circle')
-      .attr('r', 10);
-
-    // creating a d3.tip method where the html has a function that returns
-    // the data we passed into tip.show from line 120
-    const tip = d3Tip()
-      .attr('class', 'd3-tip')
-      .html(function (d) { return 'State: ' + d; });
-
-    // invoking tooltip for nodes
-    node.call(tip);
-
+      .attr('r', 10)
+      .on('mouseover', function (d) {
+        d3.select(this)
+          .transition(100)
+          .duration(20)
+          .attr('r', 20);
+
+        tooltipDiv.transition()
+          .duration(200)
+          .style('opacity', 0.9);
+
+        tooltipDiv.html(JSON.stringify(d.data.stateSnapshot.children[0].state), this)
+          .style('left', (d3.event.pageX) + 'px')
+          .style('top', (d3.event.pageY - 28) + 'px');
+      })
+      // eslint-disable-next-line no-unused-vars
+      .on('mouseout', function (d) {
+        d3.select(this)
+          .transition()
+          .duration(200)
+          .attr('r', 12);
+
+        tooltipDiv.transition()
+          .duration(500)
+          .style('opacity', 0);
+      });
     node
       .append('text')
       // adjusts the y coordinates for the node text
-      .attr('dy', '0.35em')
+      .attr('dy', '-1.5em')
       .attr('x', function (d) {
         // this positions how far the text is from leaf nodes (ones without children)
         // negative number before the colon moves the text of rightside nodes,
@@ -160,14 +175,12 @@ class Chart extends Component {
       g.attr('transform', d3.event.transform);
     }
 
+    // define the div for the tooltip
+    const tooltipDiv = d3.select('body').append('div')
+      .attr('class', 'tooltip')
+      .style('opacity', 0);
+
     // applying tooltip on mouseover and removes it when mouse cursor moves away
-    node
-      .on('mouseover', function (d) {
-        // without JSON.stringify, data will display as object Object
-        // console.log('d.data --> ', JSON.stringify(d.data))
-        tip.show(JSON.stringify(d.data.stateSnapshot.children[0].state), this);
-      })
-      .on('mouseout', tip.hide);
 
     function reinfeldTidierAlgo(x, y) {
       return [(y = +y) * Math.cos(x -= Math.PI / 2), y * Math.sin(x)];

src/app/components/MainSlider.jsx

@@ -1,3 +1,4 @@
+/* eslint-disable react/jsx-props-no-spreading */
 /* eslint-disable react/prop-types */
 
 import React from 'react';

src/app/styles/components/d3graph.css

@@ -43,7 +43,22 @@ body {
   stroke-width: 5px;
 }
 
-.d3-tip {
+div.tooltip {
+  position: absolute;
+  text-align: center;
+  display: inline;
+  max-width: 250px;
+  overflow-wrap: break-word;
+  padding: 6px;
+  color: #320a5c;
+  font-size: 12px;
+  font-family: "Overpass Mono", monospace;
+  background: #9cf4df;
+  border-radius: 8px;
+  pointer-events: none;
+}
+
+/* .d3-tip {
   line-height: 1;
   padding: 6px;
   background: #9cf4df;
@@ -53,7 +68,7 @@ body {
   max-width: 400px;
   overflow-wrap: break-word;
   font-family: "Overpass Mono", monospace;
-}
+} */
 
 /* Creates a small triangle extender for the tooltip
 .d3-tip:after {
@@ -68,8 +83,8 @@ body {
 } */
 
 /* Style northward tooltips specifically */
-.d3-tip.n:after {
+/* .d3-tip.n:after {
   margin: -2px 0 0 0;
   top: 100%;
   left: 0;
-}
+} */

src/extension/build/manifest.json

@@ -1,6 +1,6 @@
 {
   "name": "Reactime",
-  "version": "3.0",
+  "version": "3.1",
   "devtools_page": "devtools.html",
   "description": "A Chrome extension that helps debug state in React applications by memorizing the state of components with every render.",
   "manifest_version": 2,