highlight graph links when hovering

4 files changed, 17 insertions, 8 deletions

diff --git a/frontend/api/crud.reducer.js b/frontend/api/crud.reducer.js
index baf2536..dd1fe48 100644
--- a/frontend/api/crud.reducer.js
+++ b/frontend/api/crud.reducer.js
@@ -115,12 +115,12 @@ export const crudReducer = (type) => {
           ...state,
           update: action.data,
           index: addToIndex(state.index, action.data.res, state.options.sort),
-          show: {
+          show: (state.show && state.show.res) ? {
             res: (state.show.res.id === action.data.res.id ? {
               ...state.show.res,
               ...action.data.res,
             } : state.show.res),
-          }
+          } : {}
         }
       case crud_type.index_error:
         return {
diff --git a/frontend/views/graph/components/graph.canvas.js b/frontend/views/graph/components/graph.canvas.js
index fa74e50..d10de4f 100644
--- a/frontend/views/graph/components/graph.canvas.js
+++ b/frontend/views/graph/components/graph.canvas.js
@@ -7,6 +7,8 @@ const BACKLINK_SPACING = 10
 const ARROWHEAD_LENGTH = 10
 const GRAPH_LINK_COLOR = "#ff88ff"
 const GRAPH_BACKLINK_COLOR = "#88ffff"
+const GRAPH_UNHOVER_LINK_COLOR = "#884488"
+const GRAPH_UNHOVER_BACKLINK_COLOR = "#448888"
 
 export default class GraphCanvas extends Component {
   constructor(props) {
@@ -26,7 +28,7 @@ export default class GraphCanvas extends Component {
 
   draw(prevProps) {
     const { current: canvas } = this.canvasRef
-    const { bounds, pages, currentPage, box, measurements } = this.props
+    const { bounds, pages, currentPage, box, measurements, highlightedPageId } = this.props
     const { width, height } = bounds
     if (prevProps.bounds !== bounds) {
       canvas.width = width
@@ -56,6 +58,7 @@ export default class GraphCanvas extends Component {
       page.backlinks.map(tile => {
         if (tile.target_page_id <= 0) return
         const targetCoord = coordsLookup[tile.page_id]
+        const isHighlightedPage = !highlightedPageId || highlightedPageId === page.id || highlightedPageId === tile.page_id
         let tile_measurement = measurements[tile.page_id] || DEFAULT_MEASUREMENT
         let target_measurement = measurements[tile.target_page_id] || DEFAULT_MEASUREMENT
         let theta = angle(targetCoord.x, targetCoord.y, sourceCoord.x, sourceCoord.y)
@@ -80,7 +83,9 @@ export default class GraphCanvas extends Component {
         // if this is the first time encountering this link...
         if (!targetCoord.backlinks.has(tile.target_page_id)) {
           sourceCoord.backlinks.add(tile.page_id)
-          ctx.strokeStyle = GRAPH_LINK_COLOR
+          ctx.strokeStyle = isHighlightedPage
+            ? GRAPH_LINK_COLOR
+            : GRAPH_UNHOVER_LINK_COLOR
         } else { // otherwise this is a two-way link
           x1_offset += BACKLINK_SPACING * Math.sin(theta)
           y1_offset += BACKLINK_SPACING * Math.cos(theta)
@@ -90,7 +95,9 @@ export default class GraphCanvas extends Component {
           // y1_offset += BACKLINK_SPACING * Math.sin(theta + Math.PI /2)
           // x2_offset += BACKLINK_SPACING * Math.cos(theta + Math.PI /2)
           // y2_offset += BACKLINK_SPACING * Math.sin(theta + Math.PI /2)
-          ctx.strokeStyle = GRAPH_BACKLINK_COLOR
+          ctx.strokeStyle = isHighlightedPage
+            ? GRAPH_BACKLINK_COLOR
+            : GRAPH_UNHOVER_BACKLINK_COLOR
         }
         ctx.beginPath()
         const x1 = targetCoord.x * width + x1_offset
diff --git a/frontend/views/graph/components/graph.editor.js b/frontend/views/graph/components/graph.editor.js
index a5c7c45..f0a5753 100644
--- a/frontend/views/graph/components/graph.editor.js
+++ b/frontend/views/graph/components/graph.editor.js
@@ -23,6 +23,7 @@ const defaultState = {
     w: 0, h: 0,
   },
   page: null,
+  highlightedPageId: null,
   measurements: {},
 }
 
@@ -161,13 +162,15 @@ class GraphEditor extends Component {
   }
 
   handleMouseEnter(e, page) {
+    this.setState({ highlightedPageId: page.id })
   }
   handleMouseLeave(e, page) {
+    this.setState({ highlightedPageId: null })
   }
 
   render(){
     // console.log(this.props.graph.show.res)
-    const { page: currentPage, box, measurements } = this.state
+    const { page: currentPage, box, measurements, highlightedPageId } = this.state
     const { res: graph } = this.props.graph.show
     // console.log(res.pages)
     return (    
@@ -176,6 +179,7 @@ class GraphEditor extends Component {
           bounds={this.state.bounds}
           pages={graph.pages}
           currentPage={currentPage}
+          highlightedPageId={highlightedPageId}
           measurements={measurements}
           box={box}
         />
diff --git a/frontend/views/page/page.reducer.js b/frontend/views/page/page.reducer.js
index bbbe6f9..462be37 100644
--- a/frontend/views/page/page.reducer.js
+++ b/frontend/views/page/page.reducer.js
@@ -21,7 +21,6 @@ export default function pageReducer(state = initialState, action) {
   state = reducer(state, action)
   switch (action.type) {
     case types.tile.create:
-      console.log(action.data.res)
       return {
         ...state,
         show: {
@@ -34,7 +33,6 @@ export default function pageReducer(state = initialState, action) {
       }
 
     case types.page.update:
-      console.log(action.data.res, state.show.res)
       if (state.show.res && state.show.res.id === action.data.res.id) {
         return {
           ...state,