fix(clickable): update rects when clickable atoms change

See #67
iktos · Mar 28, 2023 · 226d486 · 226d486
1 parent da46171
commit 226d486
Showing 1 changed file with 19 additions and 7 deletions.
diff --git a/src/components/MoleculeRepresentation/MoleculeRepresentation.tsx b/src/components/MoleculeRepresentation/MoleculeRepresentation.tsx
@@ -66,7 +66,10 @@ export const MoleculeRepresentation: React.FC<MoleculeRepresentationProps> = mem
     const [svgContent, setSvgContent] = useState('');
     const [rects, setRects] = useState<Array<Rect>>([]);
     const isClickable = useMemo(() => !!onAtomClick, [onAtomClick]);
-    const [shouldComputeRects, setShouldComputeRects] = useState(false);
+    const [shouldComputeRectsDetails, setShouldComputeRectsDetails] = useState<{
+      shouldComputeRects: boolean;
+      computedRectsForAtoms: number[];
+    }>({ shouldComputeRects: false, computedRectsForAtoms: [] });
 
     const computeClickingRects = useCallback(async () => {
       if (!worker) return;
@@ -85,13 +88,16 @@ export const MoleculeRepresentation: React.FC<MoleculeRepresentationProps> = mem
         },
         100,
       );
-      setShouldComputeRects(false);
+      setShouldComputeRectsDetails({
+        shouldComputeRects: false,
+        computedRectsForAtoms: clickableAtoms?.clickableAtomsIds ?? [...Array(moleculeDetails.numAtoms).keys()],
+      });
     }, [smiles, smarts, isClickable, clickableAtoms, worker]);
 
     useEffect(() => {
-      if (!shouldComputeRects) return;
+      if (!shouldComputeRectsDetails.shouldComputeRects) return;
       computeClickingRects();
-    }, [shouldComputeRects, computeClickingRects]);
+    }, [shouldComputeRectsDetails, computeClickingRects]);
 
     useEffect(() => {
       if (!worker) return;
@@ -118,9 +124,15 @@ export const MoleculeRepresentation: React.FC<MoleculeRepresentationProps> = mem
         if (svgWithHitBoxes) {
           setSvgContent(svgWithHitBoxes);
         }
-        if (!rects.length && isClickable) {
-          setShouldComputeRects(true);
-        }
+        setShouldComputeRectsDetails((prev) => {
+          const shouldInitClickableRects = isClickable && !prev.computedRectsForAtoms.length;
+          const areClickableRectsOutOfDate =
+            isClickable && clickableAtoms && !isEqual(prev.computedRectsForAtoms, clickableAtoms?.clickableAtomsIds);
+          if (shouldInitClickableRects || areClickableRectsOutOfDate) {
+            return { ...prev, shouldComputeRects: true };
+          }
+          return prev;
+        });
       };
       computeSvg();
     }, [