Make cluster identifiers clickable

src/CodeCell.tsx

@@ -8,10 +8,11 @@ interface CodeCellProps {
   clusterLabel: string; // Existing prop
   notebook_id: number;   // Existing prop
   onSelectNotebook: (notebookId: [number]) => void; // New prop to handle notebook selection
+  setCurrentCluster: (identifier: string) => void; // Existing prop
 }
 
 
-const CodeCell: React.FC<CodeCellProps> = ({ code, clusterLabel, notebook_id, onSelectNotebook }) => {
+const CodeCell: React.FC<CodeCellProps> = ({ code, clusterLabel, notebook_id, onSelectNotebook, setCurrentCluster }) => {
   const editorRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
@@ -38,7 +39,12 @@ const CodeCell: React.FC<CodeCellProps> = ({ code, clusterLabel, notebook_id, on
         Student {notebook_id}
       </button> {/* Button to select this student */}
       <div ref={editorRef} className="code-editor" />
-      <div className="cluster-label">{clusterLabel}</div> {/* Display the cluster label */}
+      <button 
+        className="cluster-label-button" 
+        onClick={() => setCurrentCluster(clusterLabel)}
+      >
+        {clusterLabel}
+      </button> {/* Button to set the current cluster */}
     </div>
   );
 };

src/VizComponent.tsx

@@ -51,17 +51,21 @@ const GroupedCells: React.FC<GroupedCellsProps> = ({ className, cells, onSelectN
 
   const totalCells = cells.length; // Total number of cells within the class
 
-  // Filter openClusters to remove clusters that no longer exist
-  // useEffect(() => {
-  //   setOpenClusters((prev) => prev.filter(clusterName => clusters[clusterName] && clusters[clusterName].length > 0));
-  // }, [clusters]);
 
   const handleClusterClick = (clusterName: string) => {
     setOpenClusters((prev) =>
       prev.includes(clusterName) ? prev.filter((name) => name !== clusterName) : [...prev, clusterName]
     );
   };
 
+  const handleIdentifierClick = (clusterIdentifier: string) => {
+    const cluster = clusterIdentifiers.find(ci => ci.identifier === clusterIdentifier);
+    console.log(cluster);
+    if (cluster) {
+      setOpenClusters([cluster.name as string]);
+    }
+  };
+
   // Generate identifiers (A, B, C, etc.) for each cluster
   const clusterIdentifiers = Object.keys(clusters).map((clusterName, index) => ({
     name: clusterName,
@@ -107,6 +111,7 @@ const GroupedCells: React.FC<GroupedCellsProps> = ({ className, cells, onSelectN
                     clusterLabel={clusterIdentifiers.find(c => c.name === clusterName)?.identifier || ''}
                     notebook_id={cell.notebook_id} // Pass the notebook ID
                     onSelectNotebook={onSelectNotebook} // Pass the function to CodeCell
+                    setCurrentCluster={handleIdentifierClick}
                   />
                 </div>
               ))

style/CodeCell.css

@@ -39,7 +39,7 @@
     flex-grow: 1;
   }
 
-  .cluster-label {
+  .cluster-label-button {
     width: 20px;
     height: 20px;
     display: inline-flex;
@@ -50,5 +50,18 @@
     font-weight: bold;
     color: #000;
     margin-left: 10px;
+    border: none; /* Remove default button border */
+    cursor: pointer; /* Change cursor to pointer on hover */
+    transition: background-color 0.3s, transform 0.2s; /* Smooth transitions */
+  }
+
+  .cluster-label-button:hover {
+    background-color: #a0a0a0; /* Darker background on hover */
+    transform: scale(1.1); /* Slightly enlarge on hover */
+  }
+
+  .cluster-label-button:active {
+    background-color: #808080; /* Even darker background on click */
+    transform: scale(1); /* Return to normal size on click */
   }