rename slide to cluster

enjalot · Nov 26, 2024 · 37ab589 · 37ab589
1 parent 1b33f21
commit 37ab589
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 52 deletions.
diff --git a/web/src/components/Explore/ClusterFilter.jsx b/web/src/components/Explore/ClusterFilter.jsx
@@ -1,19 +1,19 @@
 import React from 'react';
 
-export default function ClusterFilter({ clusterLabels, slide, slideAnnotations, setSlide }) {
-  const handleSlideChange = (e) => {
+export default function ClusterFilter({ clusterLabels, cluster, clusterAnnotations, setCluster }) {
+  const handleClusterChange = (e) => {
     if (e.target.value === '-1') {
-      setSlide(null);
+      setCluster(null);
       return;
     }
     const cl = clusterLabels.find((cluster) => cluster.cluster === +e.target.value);
-    if (cl) setSlide(cl);
+    if (cl) setCluster(cl);
   };
 
   return (
-    <div className={`clusters-select filter-row ${slideAnnotations.length ? 'active' : ''}`}>
+    <div className={`clusters-select filter-row ${clusterAnnotations.length ? 'active' : ''}`}>
       <div className="filter-cell left">
-        <select onChange={handleSlideChange} value={slide?.cluster >= 0 ? slide.cluster : -1}>
+        <select onChange={handleClusterChange} value={cluster?.cluster >= 0 ? cluster.cluster : -1}>
           <option value="-1">Filter by cluster</option>
           {clusterLabels?.map((cluster, index) => (
             <option key={index} value={cluster.cluster}>
@@ -23,10 +23,10 @@ export default function ClusterFilter({ clusterLabels, slide, slideAnnotations,
         </select>
       </div>
       <div className="filter-cell middle">
-        {slideAnnotations.length ? (
+        {clusterAnnotations.length ? (
           <span>
-            {slideAnnotations.length} rows
-            <button className="deselect" onClick={() => setSlide(null)}>
+            {clusterAnnotations.length} rows
+            <button className="deselect" onClick={() => setCluster(null)}>
               X
             </button>
           </span>
@@ -37,7 +37,7 @@ export default function ClusterFilter({ clusterLabels, slide, slideAnnotations,
               style={{ visibility: 'hidden' }}
               className="deselect"
               disabled
-              onClick={() => setSlide(null)}
+              onClick={() => setCluster(null)}
             >
               X
             </button>

diff --git a/web/src/components/Explore/FilterActions.jsx b/web/src/components/Explore/FilterActions.jsx
@@ -10,9 +10,9 @@ const SELECT = 'select';
 
 export default function FilterActions({
   clusterLabels,
-  slide,
-  slideAnnotations,
-  setSlide,
+  cluster,
+  clusterAnnotations,
+  setCluster,
   searchIndices,
   searchLoading,
   setSearchText,
@@ -44,9 +44,9 @@ export default function FilterActions({
     filterComponent = (
       <ClusterFilter
         clusterLabels={clusterLabels}
-        slide={slide}
-        slideAnnotations={slideAnnotations}
-        setSlide={setSlide}
+        cluster={cluster}
+        clusterAnnotations={clusterAnnotations}
+        setCluster={setCluster}
       />
     );
   } else if (activeFilter === SELECT) {

diff --git a/web/src/pages/FullScreenExplore.jsx b/web/src/pages/FullScreenExplore.jsx
@@ -16,6 +16,27 @@ import LeftPane from '../components/Explore/LeftPane';
 import VisualizationPane from '../components/Explore/VisualizationPane';
 import FilterDataTable from '../components/FilterDataTable';
 
+function intersectMultipleArrays(filterMode, ...arrays) {
+  arrays = arrays.filter((d) => d.length > 0);
+  if (arrays.length === 0) return [];
+  if (arrays.length == 1) return arrays[0];
+
+  if (filterMode === 'all') {
+    // AND mode - intersection
+    return arrays.reduce((acc, curr) => {
+      const currSet = new Set(curr);
+      return acc.filter((x) => currSet.has(x));
+    });
+  } else {
+    // ANY mode - union
+    const unionSet = new Set();
+    arrays.forEach((arr) => {
+      arr.forEach((x) => unionSet.add(x));
+    });
+    return Array.from(unionSet);
+  }
+}
+
 function Explore() {
   const { dataset: datasetId, scope: scopeId } = useParams();
   const navigate = useNavigate();
@@ -185,33 +206,40 @@ function Explore() {
   // Clusters
   // ====================================================================================================
   // indices of items in a chosen slide
-  const [slide, setSlide] = useState(null);
-  const [slideAnnotations, setSlideAnnotations] = useState([]);
+  const [cluster, setCluster] = useState(null);
+  const [clusterAnnotations, setClusterAnnotations] = useState([]);
 
   useEffect(() => {
     if (scope) {
       fetchScopeRows();
     }
   }, [fetchScopeRows, scope, embeddings, setClusterLabels]);
 
+  // automatically set the first cluster filter when the scope rows are loaded
+  useEffect(() => {
+    if (clusterMap) {
+      setCluster(clusterMap[0]);
+    }
+  }, [clusterMap]);
+
   useEffect(() => {
-    if (slide) {
-      const annots = scopeRows.filter((d) => d.cluster == slide.cluster);
-      setSlideAnnotations(annots);
+    if (cluster) {
+      const annots = scopeRows.filter((d) => d.cluster == cluster.cluster);
+      setClusterAnnotations(annots);
       // scatter?.zoomToPoints(
       //   annots.map((d) => d.ls_index),
       //   { transition: true, transitionDuration: 1500, padding: 1.5 }
       // );
     } else {
       console.log('==== no slide', scatter);
-      setSlideAnnotations([]);
+      setClusterAnnotations([]);
       // if (scatter && scatter.zoomToOrigin) {
       //   console.log('==== zoom to origin', scatter.zoomToOrigin);
       //   // scatter?.zoomToLocation([0, 0], 1);
       //   scatter?.zoomToOrigin({ transition: true, transitionDuration: 1500 });
       // }
     }
-  }, [slide, scopeRows, scatter, setSlideAnnotations]);
+  }, [cluster, scopeRows, scatter, setClusterAnnotations]);
 
   // Handlers for responding to individual data points
   const handleClicked = useCallback(
@@ -236,42 +264,21 @@ function Explore() {
   );
 
   const clearScope = useCallback(() => {
-    setSlide(null);
+    setCluster(null);
   }, []);
 
   const clearFilters = useCallback(() => {
     setSelectedIndices([]);
     setSearchIndices([]);
     setIntersectedIndices([]);
-    setSlide(null);
+    setCluster(null);
   }, [setSelectedIndices, setSearchIndices]);
 
-  function intersectMultipleArrays(filterMode, ...arrays) {
-    arrays = arrays.filter((d) => d.length > 0);
-    if (arrays.length === 0) return [];
-    if (arrays.length == 1) return arrays[0];
-
-    if (filterMode === 'all') {
-      // AND mode - intersection
-      return arrays.reduce((acc, curr) => {
-        const currSet = new Set(curr);
-        return acc.filter((x) => currSet.has(x));
-      });
-    } else {
-      // ANY mode - union
-      const unionSet = new Set();
-      arrays.forEach((arr) => {
-        arr.forEach((x) => unionSet.add(x));
-      });
-      return Array.from(unionSet);
-    }
-  }
-
   const [intersectedIndices, setIntersectedIndices] = useState([]);
   // intersect the indices from the various filters
   useEffect(() => {
     const filteredClusterIndices = scopeRows
-      .filter((d) => d.cluster == slide?.cluster)
+      .filter((d) => d.cluster == cluster?.cluster)
       .map((d) => d.ls_index);
     let indices = intersectMultipleArrays(
       'all',
@@ -280,7 +287,7 @@ function Explore() {
       filteredClusterIndices || []
     );
     setIntersectedIndices(indices);
-  }, [scopeRows, selectedIndices, searchIndices, slide, tagset]);
+  }, [scopeRows, selectedIndices, searchIndices, cluster, tagset]);
 
   const handleScopeChange = useCallback(
     (e) => {
@@ -440,9 +447,9 @@ function Explore() {
             <div ref={filtersContainerRef}>
               <FilterActions
                 clusterLabels={clusterLabels}
-                slide={slide}
-                slideAnnotations={slideAnnotations}
-                setSlide={setSlide}
+                slide={cluster}
+                clusterAnnotations={clusterAnnotations}
+                setCluster={setCluster}
                 searchIndices={searchIndices}
                 searchLoading={searchLoading}
                 setSearchText={setSearchText}
@@ -497,7 +504,7 @@ function Explore() {
                 hoverAnnotations={hoverAnnotations}
                 intersectedIndices={intersectedIndices}
                 hoveredCluster={hoveredCluster}
-                slide={slide}
+                slide={cluster}
                 scope={scope}
                 containerRef={containerRef}
                 onScatter={setScatter}