All default and student button not updating notebook Selector yet

src/CodeCell.tsx

@@ -5,11 +5,13 @@ import '../style/CodeCell.css';
 
 interface CodeCellProps {
   code: string;
-  clusterLabel: string; // Add the cluster label as a prop
-    notebook_id: number; // add the notebook_id as a prop
+  clusterLabel: string; // Existing prop
+  notebook_id: number;   // Existing prop
+  onSelectNotebook: (notebookId: [number]) => void; // New prop to handle notebook selection
 }
 
-const CodeCell: React.FC<CodeCellProps> = ({ code, clusterLabel,notebook_id }) => {
+
+const CodeCell: React.FC<CodeCellProps> = ({ code, clusterLabel, notebook_id, onSelectNotebook }) => {
   const editorRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
@@ -29,7 +31,12 @@ const CodeCell: React.FC<CodeCellProps> = ({ code, clusterLabel,notebook_id }) =
 
   return (
     <div className="code-cell-container">
-        <div className="notebook-id">Student {notebook_id}</div> {/* Display the notebook ID */}
+      <button 
+        className="notebook-id-button" 
+        onClick={() => onSelectNotebook([notebook_id])}
+      >
+        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 */}
     </div>

src/Flowchart.tsx

@@ -39,22 +39,25 @@ interface State {
   selectedCells: NotebookCellWithID[];
 }
 
-function resizeSVG(svgRef: React.RefObject<SVGSVGElement>): void {
-  const svg = svgRef.current;
-
-  if (svg) {
-    // Get the bounds of the SVG content
-    const bbox = svg.getBBox();
-
-    // Update the width and height using the size of the contents
-    svg.setAttribute("width", (bbox.x + bbox.width + bbox.x).toString());
-    svg.setAttribute("height", (bbox.y + bbox.height + bbox.y).toString());
-
-    console.log('Resized SVG to', (bbox.x + bbox.width + bbox.x).toString(), (bbox.y + bbox.height + bbox.y).toString());
-  } else {
-    console.error("SVG element not found.");
-  }
-}
+// function resizeSVG(svgRef: React.RefObject<SVGSVGElement>): void {
+//   const svg = svgRef.current;
+
+//   if (svg) {
+//     // Get the bounds of the SVG content
+//     const bbox = svg.getBBox();
+//     console.log(bbox);
+
+//     const newWidth = bbox.x + bbox.width + bbox.x;
+//     const newHeight = bbox.y + bbox.height + bbox.y;
+//     // Update the width and height using the size of the contents
+//     svg.setAttribute("width", newWidth.toString());
+//     svg.setAttribute("height", newHeight.toString());
+
+//     console.log('Resized SVG to', newWidth.toString(), newHeight.toString());
+//   } else {
+//     console.error("SVG element not found.");
+//   }
+// }
 
 class Flowchart extends Component<Props, State> {
   svgRef: React.RefObject<SVGSVGElement>;
@@ -80,9 +83,8 @@ class Flowchart extends Component<Props, State> {
 
   drawClassChart = () => {
     const { selectedCells } = this.state;
-    console.log('Drawing chart for selected cells', selectedCells);
     if (selectedCells.length === 0) {
-      return;
+      return { width: 0, height: 0 };
     }
 
     const svg = d3.select(this.svgRef.current)
@@ -156,12 +158,19 @@ class Flowchart extends Component<Props, State> {
       })
       .attr('stroke', '#999')
       .attr('fill', 'none');
+
+    // Calculate the required width and height
+    const width = 300;  // Fixed width
+    const height = nodeCounter * 100 + 50;  // Based on number of nodes
+
+    return { width, height };
+
   }
 
   drawClusterChart = () => {
     const { selectedCells } = this.state;
     if (selectedCells.length === 0) {
-      return;
+      return { width: 0, height: 0 };
     }
 
     const svg = d3.select(this.svgRef.current);
@@ -194,7 +203,7 @@ class Flowchart extends Component<Props, State> {
             id: nodes.length + 1,
             cluster: cells[i].cluster,
             class: cls,
-            x: 150 + clusterSet.size * 150,  // Horizontally position nodes with the same class next to each other
+            x: 50 + clusterSet.size * 150,  // Horizontally position nodes with the same class next to each other
             y: 100 + yCounter * 150,  // Vertically space classes
             cell_id: cells[i].cell_id,
             notebook_id: cells[i].notebook_id,  // Add notebook_id to the node
@@ -312,6 +321,11 @@ class Flowchart extends Component<Props, State> {
       .attr('d', 'M 0,-5 L 10 ,0 L 0,5')
       .attr('fill', '#666')
       .style('stroke', 'none');
+
+      const width = Math.max(...nodes.map(node => node.x)) + circleRadius * 2 + 50;  // Plus padding
+      const height = yCounter * 150 + circleRadius * 2 + 50;  // Based on number of classes
+
+      return { width, height };
   }
 
   drawChart() {
@@ -320,17 +334,22 @@ class Flowchart extends Component<Props, State> {
     if (selectedCells.length === 0) {
       return;
     }
-
+
+    let dimensions: { width: number, height: number };
+
     if (selectedCells.length > 100) {
-      this.drawClassChart();
-      resizeSVG(this.svgRef);
-      return;
+      dimensions = this.drawClassChart();
+    } else {
+      dimensions = this.drawClusterChart();
+    }
+
+    const svg = this.svgRef.current;
+    if (svg) {
+      svg.setAttribute("width", dimensions.width.toString());
+      svg.setAttribute("height", dimensions.height.toString());
     }
-
-    this.drawClusterChart();
-    resizeSVG(this.svgRef);
-
   }
+
 
   render() {
     return (

src/NotebookSelector.tsx

@@ -1,4 +1,3 @@
-// NotebookSelector.tsx
 import React, { useState, useEffect } from 'react';
 import '../style/notebookSelector.css';
 
@@ -8,46 +7,53 @@ interface NotebookSelectorProps {
 }
 
 const NotebookSelector: React.FC<NotebookSelectorProps> = ({ notebookIds, onSelectionChange }) => {
-  const [shownNotebooks, setShownNotebooks] = useState<Set<number>>(new Set());
+  const [shownNotebooks, setShownNotebooks] = useState<Set<number>>(new Set([-2])); // Initialize with "ALL"
   const [selectedValue, setSelectedValue] = useState<string>('');
 
   useEffect(() => {
     // Trigger the callback when shownNotebooks changes
     onSelectionChange(Array.from(shownNotebooks));
   }, [shownNotebooks, onSelectionChange]);
+
+
 
   const handleRemoveNotebook = (notebookId: number) => {
     const newShownNotebooks = new Set(shownNotebooks);
-    if(newShownNotebooks.has(notebookId)){
+    if (newShownNotebooks.has(notebookId)) {
       newShownNotebooks.delete(notebookId);
+      // If the last notebook is removed, add "ALL" again
+      if (newShownNotebooks.size === 0) {
+        newShownNotebooks.add(-2);
+      }
       setShownNotebooks(newShownNotebooks);
     }
-  };     
+  };
 
   const handleAddNotebook = () => {
     const notebookId = selectedValue === "ALL" ? -2 : Number(selectedValue);
 
     if (notebookId === -2) {
-      // Remove all selected notebooks before adding ALL
+      // If "ALL" is selected, clear all other selections and set "ALL"
       const newShownNotebooks = new Set<number>();
       newShownNotebooks.add(-2);
       setShownNotebooks(newShownNotebooks);
     } else if (!shownNotebooks.has(notebookId) && notebookIds.includes(notebookId)) {
-      if (shownNotebooks.has(-2)) {
-        console.log("nxdjwkn");
-        handleRemoveNotebook(-2);  // Remove ALL (-2) before adding a specific notebook
-        console.log("COME ON")
-      }   
-      console.log("notebooks")
-      console.log(shownNotebooks)
+
+      console.log(notebookId);
       const newShownNotebooks = new Set(shownNotebooks);
       newShownNotebooks.add(notebookId);
+      if (newShownNotebooks.has(-2)) {
+        newShownNotebooks.delete(-2);  // Remove "ALL" (-2) before adding a specific notebook
+      }
+      console.log(newShownNotebooks);
       setShownNotebooks(newShownNotebooks);
+      console.log(newShownNotebooks);
+
     }
     setSelectedValue(''); // Clear the input after adding
-  };   
-   
-  return ( 
+  };
+
+  return (
     <div className="selector-container">
       <div className="current-selection-text">Current selection:</div>
       <div className="selected-elements" id="selected-elements">

src/VizComponent.tsx

@@ -31,9 +31,10 @@ export interface VizData {
 interface GroupedCellsProps {
   className: string;
   cells: NotebookCellWithID[];
+  onSelectNotebook: (notebookIds: [number]) => void;
 }
 
-const GroupedCells: React.FC<GroupedCellsProps> = ({ className, cells }) => {
+const GroupedCells: React.FC<GroupedCellsProps> = ({ className, cells, onSelectNotebook }) => {
   const [isOpen, setIsOpen] = useState(true);
   const [openClusters, setOpenClusters] = useState<string[]>([]); // Manage multiple open clusters
 
@@ -105,6 +106,7 @@ const GroupedCells: React.FC<GroupedCellsProps> = ({ className, cells }) => {
                     code={cell.code}
                     clusterLabel={clusterIdentifiers.find(c => c.name === clusterName)?.identifier || ''}
                     notebook_id={cell.notebook_id} // Pass the notebook ID
+                    onSelectNotebook={onSelectNotebook} // Pass the function to CodeCell
                   />
                 </div>
               ))
@@ -116,7 +118,7 @@ const GroupedCells: React.FC<GroupedCellsProps> = ({ className, cells }) => {
   );
 };
 
-const VizComponent: React.FC<{ data: VizData }> = ({ data }) => {
+const VizComponent: React.FC<{ data: VizData; onSelectNotebook: (notebookIds: [number]) => void }> = ({ data, onSelectNotebook }) => {
   if (!data.notebooks || !Array.isArray(data.notebooks)) {
     return <div>No valid notebook data found.</div>;
   }
@@ -148,7 +150,12 @@ const VizComponent: React.FC<{ data: VizData }> = ({ data }) => {
   return (
     <div style={{ padding: '20px' }}>
       {Object.entries(groupedCells).map(([className, cells]) => (
-        <GroupedCells key={className} className={className} cells={cells} />
+        <GroupedCells 
+          key={className} 
+          className={className} 
+          cells={cells} 
+          onSelectNotebook={onSelectNotebook}
+        />
       ))}
     </div>
   );

src/VizContent.tsx

@@ -29,8 +29,20 @@ class VizContent extends ReactWidget {
     });
   }
 
+
   handleNotebookSelection = (selectedIds: number[]) => {
-    this.selectedNotebookIds = selectedIds;
+    // Remove every element from selectedNotebookIds directly in the
+    while(this.selectedNotebookIds.length > 0){
+      this.selectedNotebookIds.pop();
+    }
+
+    // Add every element from selectedIds that is not in selectedNotebookIds
+    selectedIds.forEach(selectedId => {
+      if (!this.selectedNotebookIds.includes(selectedId)) {
+        this.selectedNotebookIds.push(selectedId);
+      }
+    });
+
     this.update(); // Re-render the widget when the selection changes
 
     const content = this.context.model.toString();
@@ -69,19 +81,6 @@ class VizContent extends ReactWidget {
       jsonData.notebooks.push(newNotebook);
       this.update(); // Re-render the widget when the selection changes
 
-
-/*
-      jsonData.notebooks.forEach(notebook => {
-        notebook.cells.forEach(cell => {
-          const classMetadata = jsonData.metadata.clusters[cell.class];
-          if (classMetadata && classMetadata[cell.cluster]) {
-            cell.cluster = classMetadata[cell.cluster]; // Replace cluster ID with the title
-          }
-        });
-      });
-
- */
-
       // Filter cells from selected notebooks only
       const selectedCells: NotebookCellWithID[] = jsonData.notebooks
         .filter(notebook => selectedIds.includes(notebook.notebook_id))
@@ -162,7 +161,10 @@ class VizContent extends ReactWidget {
           notebookIds={jsonData.notebooks.map(notebook => notebook.notebook_id)}
           onSelectionChange={this.handleNotebookSelection}
         />
-        <VizComponent data={{ notebooks: selectedNotebooks }} />
+        <VizComponent 
+          data={{ notebooks: selectedNotebooks }}
+          onSelectNotebook={this.handleNotebookSelection}
+        />
       </div>
     );
   }

style/CodeCell.css

@@ -10,7 +10,7 @@
     position: relative;
   }
 
-  .notebook-id {
+  .notebook-id-button {
     width: 60px;
     display: inline-flex;
     justify-content: center;
@@ -20,8 +20,21 @@
     font-weight: bold;
     color: #000;
     margin-right: 10px;
+    border: none;
+    cursor: pointer;
+    transition: background-color 0.3s, transform 0.1s;
   }
 
+  .notebook-id-button:hover {
+    background-color: #e0e0e0; /* Slightly darker on hover */
+  }
+
+  .notebook-id-button:active {
+    background-color: #d0d0d0; /* Even darker when clicked */
+    transform: scale(0.95);    /* Slightly shrink the button on click */
+  }
+
+
   .code-editor {
     flex-grow: 1;
   }