feat(): add position action to tooltip

src/App.js

@@ -30,7 +30,8 @@ import Visualization from 'features/visualization/Visualization';
 import DatasetControls from 'features/dataset-controls/DatasetControls';
 import DatasetSlider from 'features/dataset-controls/DatasetSlider';
 import DatasetUpload from 'features/dataset-controls/DatasetUpload';
-import { getDataToExport } from "features/dataset-controls/export"
+import { getDataToExport } from "features/dataset-controls/export";
+import TooltipControls from "features/tooltip/Tooltip";
 
 import style from './App.module.css';
 
@@ -492,6 +493,11 @@ class App extends Component {
             loading={this.props.shouldShowBusy}
           />
         </div>
+
+          <div >
+            <TooltipControls />
+          </div>
+
       </div>
     );
   }

src/domain/controls.js

@@ -8,9 +8,10 @@ const defaultState = {
   start: null, // The uuid of the dataset to use as the starting point for comparison
   end: null, // The uuid of the dataset to use as the end point for comparison
   showBusy: false, //display the activity icon
+  position: [0,0]
 };
 
-// ACTIONS
+// ACTION CREATORS
 
 const setControls = createAction("SET_CONTROLS");
 const setStartDataset = createAction("SET_START_DATASET");
@@ -20,6 +21,9 @@ const showNodes = createAction("SHOW_NODES");
 const useDarkTheme = createAction("USE_DARK_THEME");
 const colorBy = createAction("COLOR_BY");
 const showBusy = createAction("SHOW_BUSY");
+const setPosition = createAction("POSITION");
+
+// REDUCERS
 
 const reducer = handleActions(
   {
@@ -31,6 +35,7 @@ const reducer = handleActions(
       const start = payload.start || state.start;
       const end = payload.end || state.end;
       const showBusy = ('showBusy' in payload) ? !!payload.showBusy : state.showBusy;
+      const position = payload.position || state.position;
       return { 
         ...state,
         hierarchyConfig: hierarchyConfig,
@@ -40,6 +45,7 @@ const reducer = handleActions(
         start: start,
         end: end,
         showBusy: showBusy,
+        position: position
       }
     },
     [setStartDataset]: (state, { payload }) => ({ ...state, start: payload }),
@@ -49,11 +55,14 @@ const reducer = handleActions(
     [useDarkTheme]: (state, { payload }) => ({ ...state, darkTheme: !!payload }), // Convert payload to boolean for easier debugging
     [colorBy]: (state, { payload }) => ({ ...state, colorBy: payload }),
     [showBusy]: (state, { payload }) => ({ ...state, showBusy: !!payload }),
+    [setPosition]: (state, { payload }) => ({ ...state, position: payload }),
   },
   defaultState
 );
 
+// SELECTORS
 const selectControls = (state) => state.controls;
+const getPosition = (state) => state.controls.position;
 
 export default reducer;
-export { setControls, setHierarchyConfig, showNodes, colorBy, useDarkTheme, selectControls, setStartDataset, setEndDataset, showBusy };
+export { setControls, setHierarchyConfig, showNodes, colorBy, useDarkTheme, selectControls, setStartDataset, setEndDataset, showBusy, setPosition, getPosition };

src/features/tooltip/Tooltip.js

@@ -0,0 +1,62 @@
+import React from "react";
+//import ReactDOM from 'react-dom'
+//import PropTypes from "prop-types";
+import { connect } from "react-redux";
+import { getPosition } from '../../domain/controls';
+
+/*import { select, event as d3Event } from "d3-selection";
+
+import * as d3 from 'd3';
+
+
+import {
+  compose,
+  differenceWith,
+  eqBy,
+  equals,
+  find,
+  findIndex,
+  identity,
+  insert,
+  isEmpty,
+  isNil,
+  path,
+  remove
+} from "ramda"; */
+
+class TooltipControls extends React.Component {
+  constructor(props){
+    super(props)
+    this.state = {
+      position: [0,0],
+    }
+    console.log(props)
+  }
+
+
+  render() {
+    const style = {
+      display : 'block"',
+      position: "fixed",
+      top: `${this.props.position[0]}px`,
+      left: `${this.props.position[1]}px`
+      //transform:`transform3d(${this.props.x},${this.props.y},0)`
+
+    }
+
+    return (
+      <div style={style}>
+        <div>Data</div>
+        <div>Notes</div>
+      </div>
+    );
+  }
+}
+const mapStateToProps = (state, ownProps) => {
+  return {
+    position: getPosition(state)
+  };
+};
+
+export default connect(mapStateToProps)(TooltipControls);
+

src/features/visualization/Visualization.js

@@ -1,40 +1,61 @@
 import React from "react";
 import ReactDOM from 'react-dom';
 
+import { select,mouse } from "d3-selection";
+
 import { connect } from "react-redux";
 
 import { selectDatasetIntersection, selectMergedConfiguration } from "domain/dataset";
 import { getQueryString } from "epics/index-dataset-epic";
-import { selectControls } from "domain/controls";
+import { selectControls, getPosition, setPosition} from "domain/controls";
 
 import d3Viz from './d3-viz';
 import styles from './Visualization.module.css';
 
-class Visualization extends React.PureComponent {
+var position = [];
 
+class Visualization extends React.PureComponent {
   componentDidMount() {
     const el = ReactDOM.findDOMNode(this);
+
+
     this.viz = d3Viz(el);
     this.updateFromProps();
   }
 
+  onClick = () => {
+    const el = ReactDOM.findDOMNode(this);
+
+    select(el).on('click', function mouseMoveHandler() {
+      position = mouse(this)
+      console.log(position)
+      //this.props.setPosition(d3.mouse(this));  
+    })
+
+    this.props.setPosition(position);
+    //console.log(this.props.position)
+  }
+
+
   updateFromProps() {
     this.viz.update({
       hierarchyConfig: this.props.controls.hierarchyConfig,
       fields: this.props.configuration.fields || [],
       showNodes: this.props.controls.shouldShowNodes,
       coloredField: this.props.controls.colorBy,
       data: this.props.dataset || [],
-      queryString: this.props.queryString
+      queryString: this.props.queryString,
+      position: this.props.position
     });
   }
 
   componentDidUpdate() {
     this.updateFromProps();
   }
 
+
   render() {
-    return <div className={ styles.viz }></div>;
+    return <div onClick={this.onClick} className={ styles.viz }></div>;
   }
 }
 
@@ -43,8 +64,15 @@ const mapStateToProps = (state, ownProps) => {
     dataset: selectDatasetIntersection(state, ownProps.startUid, ownProps.endUid),
     configuration: selectMergedConfiguration(state),
     controls: selectControls(state),
-    queryString: getQueryString(state)
+    queryString: getQueryString(state),
+    position: getPosition(state)
   };
 };
+const mapDispatchToProps = (dispatch) => ({
+  setPosition: (position) => dispatch(setPosition(position))
+})
 
-export default connect(mapStateToProps, null)(Visualization);
+/*const mapDispatchToProps = {
+  setPosition
+};*/
+export default connect(mapStateToProps,mapDispatchToProps)(Visualization);

src/features/visualization/d3-viz/setup-tooltip.js

@@ -1,8 +1,6 @@
 import { map, join, path } from "ramda";
 import { select, event as d3Event } from "d3-selection";
 
-import { setupNotes, NotesOnViz } from '../d3-viz/setup-notes';
-
 const setupTooltip = ({ nodeRoot, tooltip, fields }) => {
   tooltip
     .style("display", "block")
@@ -20,39 +18,31 @@ const setupTooltip = ({ nodeRoot, tooltip, fields }) => {
   // not accurate.
   tooltip.style("display", "none")
 
-  /*nodeRoot.on("mousemove", () => {
-      const event = d3Event;
-      showTooltip(event, fields, offsetTop, offsetLeft, tooltip);
-    
-  });*/
-
   nodeRoot.on("click", () => {
     const event = d3Event;
     showTooltip(event, fields, offsetTop, offsetLeft, tooltip);
 
   });
 
-  /*nodeRoot.on("mousemove", () => {
-    const event = d3Event;
-    showTooltip(event, fields, offsetTop, offsetLeft, tooltip);
-  });*/
 };
 
 const showTooltip = (event, fields, offsetTop, offsetLeft, tooltip) => {
   const target = select(event.target);
   const datum = target.datum();
   const text = content(datum, fields);
+
+  let transformX = event.x + offsetLeft + 1 
+  let transformY = event.y + offsetTop + 1 
   if (text) {
     tooltip.node().innerHTML = text;
     tooltip
       .style("display", "block")
-      .style("transform", `translate3d(${ event.x + offsetLeft + 1 }px, ${ event.y + offsetTop + 1 }px, 0)`)
-      
+      .style("transform", `translate3d(${ transformX }px, ${ transformY }px, 0)`)
+    //console.log(transformX,transformY)
   } else {
     tooltip.style("display", "none");
   }
 
-  //tooltip.classed("searchResult", datum.data.isSearchResult);
 
 };
 
@@ -62,16 +52,14 @@ const content = (datum, fields) => {
     if(datum.data.CRVIZ._searchResultCount > 0){
       cont += `<br/><span>${datum.data.CRVIZ._searchResultCount} search results</span>`
     }
-    return setupNotes(cont);
+    return cont;
   } else if (datum.height === 0) {
     const pairs = map(
       (field) => [`<strong>${ field.displayName }</strong>`, path(field.path, datum.data)],
       fields
     );
-
-    //return notes(map(join(": "), pairs).join("<br />")); 
-    //return map(join(": "), pairs).join("<br />");
-    return setupNotes(map(join(": "), pairs).join("<br />"));
+
+    return map(join(": "), pairs).join("<br />");
   } else {
     return null;
   }