Updates the network style (clear the cache of all memoize functions) after adding/removing nodes -- #12

Author: chrtannus

src/client/components/network-editor/bottom-drawer.js

@@ -9,6 +9,7 @@ import { NetworkEditorController } from './controller';
 import DataTable, { DEF_SORT_FN, PRECISION, roundNumber } from './data-table';
 import DataDetailsPanel from './data-details-panel';
 import SearchBar from './search-bar';
+import { updateNetworkStyle } from './network-style';
 import { motifName, motifTrackLinkOut, resultId } from '../util';
 import { useUIStateStore } from './store';
 
@@ -307,9 +308,11 @@ export function BottomDrawer({ controller, open, leftDrawerOpen, isMobile, isTab
     // Update the network
     if (checked) {
       controller.addToNetwork([{ ...row, transcriptionFactors: [tfs[0]] }]);
+      updateNetworkStyle();
       await controller.applyLayout();
     } else {
       controller.removeFromNetwork([row]);
+      updateNetworkStyle();
     }
   };
   const onRowClick = (row) => {
@@ -338,9 +341,11 @@ export function BottomDrawer({ controller, open, leftDrawerOpen, isMobile, isTab
     row = { ...row, transcriptionFactors: [tf] };
     if (checked) {
       controller.addToNetwork([row]);
+      updateNetworkStyle();
       await controller.applyLayout();
     } else {
       controller.removeFromNetwork([row]);
+      updateNetworkStyle();
     }
   };
 

src/client/components/network-editor/network-style.js

@@ -62,6 +62,8 @@ function getMinMaxValues(cy, attr) {
   };
 }
 
+// So we can update all memoize functions when necessary
+let memoizeFunctions = [];
 
 export const nodeLabel = _.memoize(node => {
   const label = node.data('label');
@@ -71,13 +73,17 @@ export const nodeLabel = _.memoize(node => {
   return name;
 }, node => node.id());
 
-export const clusterColor = (clusterNumber) => {
+export function clusterColor(clusterNumber) {
   const colorNumber = clusterNumber % CLUSTER_COLORS.length;
   const color = chroma(CLUSTER_COLORS[colorNumber]);
   return color.hex();
-};
+}
+
+export function updateNetworkStyle() {
+  memoizeFunctions?.forEach(f => f.cache.clear());
+}
 
-export const createNetworkStyle = (cy) => {
+export function createNetworkStyle(cy) {
   const { min:minNES, max:maxNES } = getMinMaxValues(cy, 'NES');
   const magNES = Math.max(Math.abs(maxNES), Math.abs(minNES));
 
@@ -108,6 +114,9 @@ export const createNetworkStyle = (cy) => {
     return clusterColor(cluster);
   }, e => e.id());
 
+  // Clear the memoize array
+  memoizeFunctions = [nodeLabel, getNodeColor, getNodeShape, getNodeSize, getNodeFontSize, getEdgeColor];
+
   return {
     maxNES,
     minNES,
@@ -210,6 +219,6 @@ export const createNetworkStyle = (cy) => {
       },
     ]
   };
-};
+}
 
 export default createNetworkStyle;