feat(): add ability to hover on all notes

src/domain/notes.js

@@ -3,13 +3,15 @@ import { createAction, handleActions } from "redux-actions";
 const defaultState = {
   byId:[],
   byHash: {
-  }
+  },
+  hoverStatus:false
 };
 
 // ACTIONS
 const addNote = createAction("ADD_NOTE");
 const setNotes = createAction("SET_NOTE");
 const removeNote = createAction("REMOVE_NOTE");
+const toggleNotesHover = createAction("TOGGLE_NOTES_HOVER");
 
 // REDUCERS
 const reducer = handleActions(
@@ -44,15 +46,23 @@ const reducer = handleActions(
         byHash: byhash,
       }
     },
+    [toggleNotesHover]: (state, { payload }) => {
+      const hoverStatus = payload;
+      return {
+        ...state,
+        hoverStatus: hoverStatus,
+      }
+    },
   },
   defaultState
 );
 
 // SELECTORS
 const getNotesIndexedByHash = (state) => state.notes.byHash;
 const getAllNotes = (state) => state.notes;
+const getNotesHoverStatus = (state) => state.notes.hoverStatus;
 
 
 export default reducer;
 
-export { addNote,setNotes,removeNote, getNotesIndexedByHash, getAllNotes};
+export { addNote,setNotes,removeNote, getNotesIndexedByHash, getAllNotes, toggleNotesHover, getNotesHoverStatus};

src/domain/notes.test.js.js

@@ -37,7 +37,7 @@ describe("Notes reducer", () => {
               content:" I'm the Content of a note"
             } 
           }
-        }
+        },
       };
 
       expect(getAllNotes(result)).to.deep.equal(defaultState);
@@ -58,7 +58,7 @@ describe("Notes reducer", () => {
       const emptyState = {
         byId:[],
         byHash: {
-        }
+        },
       };
 
       const add_action = addNote(note);
@@ -79,7 +79,8 @@ describe("Notes reducer", () => {
       const notes = {
         'byId':[],
         'byHash': {
-        }
+        },
+        'hoverStatus':false
       }
 
       const action = setNotes(notes);

src/features/note-selector/NoteSelector.js

@@ -2,30 +2,26 @@ import React from "react";
 import { connect } from "react-redux";
 
 import { 
+  toggleNotesHover,
   getNotesIndexedByHash
 } from "domain/notes";
 
 import style from './NoteSelector.module.css';
 
 class Note extends React.Component {
-  state = {
-    hover: false
-  };
-
-  hoverOn = () => {
-    this.setState({ hover: true });
-  }
-
-  hoverOff = () => { 
-    this.setState({ hover: false });    
+  constructor(props){
+    super(props);
+    this.state = {
+      hover: false
+    };
   }
 
   render() {
     return (
       <li
 
-        onMouseEnter={this.hoverOn}
-        onMouseLeave={this.hoverOff}
+        onMouseEnter={this.props.hoverOn}
+        onMouseLeave={this.props.hoverOff}
         className={style.tag}
       >
         {this.props.note_title}
@@ -35,11 +31,18 @@ class Note extends React.Component {
 }
 
 class NoteSelectorList extends React.Component {
+  hoverOn = () => {
+    this.props.toggleNotesHover(true);
+  }
+
+  hoverOff = () => { 
+    this.props.toggleNotesHover(false);  
+  }
   render() {
     return (
       <ul className={style.tags}>
         {Object.values(this.props.notes).map(note => {
-          return <Note key={`note-${note.id}`} index={note.id} note_title={note.note.title} />;
+          return <Note key={`note-${note.id}`} index={note.id} note_title={note.note.title} hoverOn={this.hoverOn} hoverOff={this.hoverOff} />;
         })}
       </ul>
     );
@@ -53,6 +56,7 @@ const mapStateToProps = (state) => {
 };
 
 const mapDispatchToProps = {
+  toggleNotesHover
 };
 
 export default connect(mapStateToProps, mapDispatchToProps)(NoteSelectorList);

src/features/visualization/Visualization.js

@@ -8,7 +8,7 @@ import { connect } from "react-redux";
 import { selectDatasetIntersection, selectMergedConfiguration } from "domain/dataset";
 import { getQueryString } from "epics/index-dataset-epic";
 import { selectControls, getPosition, setPosition, setSelectedDatum} from "domain/controls";
-import { getNotesIndexedByHash } from 'domain/notes';
+import { getNotesIndexedByHash, getNotesHoverStatus } from 'domain/notes';
 
 import d3Viz from './d3-viz';
 import styles from './Visualization.module.css';
@@ -46,7 +46,8 @@ class Visualization extends React.PureComponent {
       queryString: this.props.queryString,
       position: this.props.position,
       sendData: this.getData, //create and pass parent function prop to child (d3-viz.js) to retrieve datum 
-      notes:this.props.notes
+      notes:this.props.notes,
+      hoverStatus: this.props.hoverStatus
     });
   }
 
@@ -66,7 +67,8 @@ const mapStateToProps = (state, ownProps) => {
     controls: selectControls(state),
     queryString: getQueryString(state),
     position: getPosition(state),
-    notes: getNotesIndexedByHash(state)
+    notes: getNotesIndexedByHash(state),
+    hoverStatus: getNotesHoverStatus(state)
   };
 };
 const mapDispatchToProps = (dispatch) => ({

src/features/visualization/Visualization.module.css

@@ -14,8 +14,9 @@
   fill: black;
 }
 
-:global(.viz-isNoted) circle {
-  fill: red !important;
+:global(.viz-isNotNoted) circle {
+  /*fill: red !important;*/
+  opacity: 0.2;
 }
 
 .viz :global(.viz-node.viz-searchResult) circle {

src/features/visualization/d3-viz.js

@@ -164,14 +164,18 @@ function d3Viz(rootNode) {
     state.packedData = pack(hierarchy);
   };
 
+  //const hasnonotes = true; //toggle for notes
+  //const hasnonotes = props.hoverStatus;
+
   const rerender = (props, state) => {
     const [nodes] = appendCircles({
       nodeRoot: nodeRoot,
       labelRoot: labelRoot,
       packedData: state.packedData,
       showNodes: props.showNodes,
       hasSearch: props.queryString !== '',
-      notes: props.notes
+      notes: props.notes,
+      hasNoNotes: props.hoverStatus
     });
 
     setupTooltip({

src/features/visualization/d3-viz/append-circles.js

@@ -4,7 +4,7 @@ import { path } from "d3-path";
 import datumKey from "./datum-key";
 import className from "./class-name";
 
-const appendCircles = ({ nodeRoot, labelRoot, packedData, showNodes, hasSearch, notes }) => {
+const appendCircles = ({ nodeRoot, labelRoot, packedData, showNodes, hasSearch, notes, hasNoNotes }) => {
   const data = packedData.descendants();
   const firstLeaf = packedData.leaves()[0];
   const leafRadius = firstLeaf.r || 0;
@@ -29,7 +29,7 @@ const appendCircles = ({ nodeRoot, labelRoot, packedData, showNodes, hasSearch,
     .classed(className("isChanged"), (d) => d.data.CRVIZ._isChanged && d.depth > 0 && d.height === 0)
     .classed(className("isAdded"), (d) => d.data.CRVIZ._isAdded && d.depth > 0 && d.height === 0)
     .classed(className("isRemoved"), (d) => d.data.CRVIZ._isRemoved && d.depth > 0 && d.height === 0)
-    .classed(className('isNoted'), (d) => hasNotes(d,notes))
+    .classed(className('isNotNoted'), (d) => has_NoNotes(d,notes) && hasNoNotes)
     .classed(className("searchExcluded"), (d) => hasSearch && !d.data.CRVIZ._isSearchResult && d.depth > 0 && d.height === 0)
     .classed(className("leafNode"), (d) => d.height === 0)
     .attr("transform", (d) => `translate(${[d.x, d.y].join(",")})`)
@@ -177,58 +177,18 @@ const scaleAndTrimToLabelWidth = (node, datum, initialFontScale) => {
   }
 }
 
-const hasNotes = (datum, notes) =>{
+const has_NoNotes = (datum, notes) =>{
   const datum_key = datum.data.CRVIZ._SEARCH_KEY;
-    if(datum_key in notes){
-      return true
-    }
-    else {
-      return false
+    if (datum.parent !== undefined) {
+      if(datum_key in notes){
+        //if node has notes, don't make opaque
+        return false
+      }
+      else {
+        //if node doesn't have notes, make opaque
+        return true
+      }
     }
 }
-// const appendAggregations = (nodeRoot, groupData, showNodes, leafRadius, fontScale) =>{
-
-//   const groupingNodes = nodeRoot
-//     .selectAll(`g.${className("groupingNode")}`);
-//   const aggregations = groupingNodes
-//     .select(`g.${className("aggregation")}`)
-//     .data(groupData, datumKey);
-
-//   //aggregations.exit().remove();
-
-//   const newAggregations = groupingNodes.enter()
-//   .append("g")
-//     .classed(className("aggregation"), true)
-//     .attr("display", (d) => showNodes ? 'none' : null);
-
-
-
-//   const newTotalContainer = newAggregations
-//     .append('g')
-//       .classed(className("total-container"), true);
-//   newTotalContainer
-//     .append('g')
-//       .classed(className("node"), true)
-//     .append('circle')
-//       .attr('r', (d) => leafRadius)
-//       .attr('cx', (d) => 0)
-//       .attr('cy', (d) => 0);
-
-//   const newTotalText = newTotalContainer
-//   .append("text")
-//     .classed(className("annotation-text"), true)
-//     .style('font-size', (d) => (3 * d.height * fontScale) +"%")
-//     .attr('x', (d) => 0)
-//     .attr('y', (d) => 0)
-//     .text((d) => !isNaN(d.value) ? d.value : "0");
-
-//   aggregations
-//   .select(`g.${className("total-container")}`)
-//   .select('text')
-//   .merge(newTotalText)
-//     .attr("display", (d) => showNodes ? 'none' : null)
-//     .text((d) => !isNaN(d.value) ? d.value : "0");
-
-// }
 
 export default appendCircles;