From 2713d35b198c60b053b6de6f482f978b67e69f87 Mon Sep 17 00:00:00 2001
From: mchami <chamim@ethz.ch>
Date: Mon, 26 Aug 2024 16:25:22 +0200
Subject: [PATCH 1/3] interactive but issue displaying clusters

---
 src/Flowchart.tsx    | 35 +++++++++++++++++++++++++++++++----
 src/VizComponent.tsx | 34 ++++++++++++++++++++++++----------
 src/VizContent.tsx   | 20 ++++++++++++++++++++
 src/index.ts         |  2 +-
 4 files changed, 76 insertions(+), 15 deletions(-)

diff --git a/src/Flowchart.tsx b/src/Flowchart.tsx
index 6ab6933..2f11271 100644
--- a/src/Flowchart.tsx
+++ b/src/Flowchart.tsx
@@ -33,7 +33,12 @@ interface ClusterLink {
 }
 
 
-interface Props { }
+interface Props { 
+  handleClusterClick?: ((cluster: string) => void);
+  handleClassClick?: ((cls: string) => void);
+  selectedClusters?: string[];
+  seletedClasses?: string[];
+}
 
 interface State {
   selectedCells: NotebookCellWithID[];
@@ -123,7 +128,14 @@ class Flowchart extends Component<Props, State> {
       .attr('height', nodeHeight)
       .attr('rx', 10)
       .attr('ry', 10)
-      .attr('fill', d => colorScheme[d.id] || '#69b3a2'); // Replace with your color logic
+      .attr('fill', d => colorScheme[d.id] || '#69b3a2')
+      .on('click', d => {
+        const cls = d.target.__data__.id;
+        if (this.props.handleClassClick) {
+          this.props.handleClassClick(cls);
+        }
+      }
+      );
 
     svg.selectAll('text')
       .data(nodes)
@@ -249,7 +261,14 @@ class Flowchart extends Component<Props, State> {
       .attr('cx', d => d.x)
       .attr('cy', d => d.y)
       .attr('r', circleRadius)
-      .attr('fill', d => colorScheme[d.class] || '#69b3a2');  // Use color scheme based on class
+      .attr('fill', d => colorScheme[d.class] || '#69b3a2')
+      .on('click', d => {
+        const clstr = d.target.__data__.cluster;
+        if (this.props.handleClusterClick) {
+          this.props.handleClusterClick(clstr);
+        }
+      }
+      );
 
     // Draw text labels (cluster names)
     svg.selectAll('text')
@@ -373,6 +392,8 @@ class Flowchart extends Component<Props, State> {
 
 export class FlowchartWidget extends ReactWidget {
   graph: React.RefObject<Flowchart>;
+  handleClusterClick: ((cluster: string) => void) | undefined;
+  handleClassClick: ((cls: string) => void) | undefined;
 
   constructor() {
     super();
@@ -384,10 +405,16 @@ export class FlowchartWidget extends ReactWidget {
     this.graph.current?.updateSelectedCells(selectedCells);
   }
 
+  public addProps(handleClusterClick: (cluster: string) => void, handleClassClick: (cls: string) => void): void {
+    this.handleClusterClick = handleClusterClick;
+    this.handleClassClick = handleClassClick;
+    this.update();
+  }
+
   render(): JSX.Element {
     return (
       <div className="flowchart-widget">
-        <Flowchart ref={this.graph} />
+        <Flowchart ref={this.graph} handleClassClick={this.handleClassClick} handleClusterClick={this.handleClusterClick}/>
       </div>
     );
   }
diff --git a/src/VizComponent.tsx b/src/VizComponent.tsx
index 0870b21..ff851e8 100644
--- a/src/VizComponent.tsx
+++ b/src/VizComponent.tsx
@@ -32,11 +32,12 @@ interface GroupedCellsProps {
   className: string;
   cells: NotebookCellWithID[];
   onSelectNotebook: (notebookIds: [number]) => void;
+  selectedClusters: string[];
+  setSelectedClusters: (clusters: string[]) => void;
 }
 
-const GroupedCells: React.FC<GroupedCellsProps> = ({ className, cells, onSelectNotebook }) => {
+const GroupedCells: React.FC<GroupedCellsProps> = ({ className, cells, onSelectNotebook, selectedClusters, setSelectedClusters }) => {
   const [isOpen, setIsOpen] = useState(true);
-  const [openClusters, setOpenClusters] = useState<string[]>([]); // Manage multiple open clusters
 
   const toggleOpen = () => setIsOpen(!isOpen);
 
@@ -53,7 +54,7 @@ const GroupedCells: React.FC<GroupedCellsProps> = ({ className, cells, onSelectN
 
   const selectedCells = (clusterNames: string[]) => {
     return clusterNames.flatMap((clusterName) =>
-      clusters[clusterName].map(cell => ({ clusterName, cell }))
+      clusters[clusterName]?.map(cell => ({ clusterName, cell }))
     ).sort((a, b) => {
       if (a.cell.notebook_id === b.cell.notebook_id) {
         return a.cell.cell_id - b.cell.cell_id;
@@ -61,16 +62,20 @@ const GroupedCells: React.FC<GroupedCellsProps> = ({ className, cells, onSelectN
       return a.cell.notebook_id - b.cell.notebook_id;
     });
   };
+
   const handleClusterClick = (clusterName: string) => {
-    setOpenClusters((prev) =>
-      prev.includes(clusterName) ? prev.filter((name) => name !== clusterName) : [...prev, clusterName]
-    );
+    if(selectedClusters.includes(clusterName)) {
+      setSelectedClusters(selectedClusters.filter(cluster => cluster !== clusterName));
+    }
+    else {
+      setSelectedClusters([...selectedClusters, clusterName]);
+    }
   };
 
   const handleIdentifierClick = (clusterIdentifier: string) => {
     const cluster = clusterIdentifiers.find(ci => ci.identifier === clusterIdentifier);
     if (cluster) {
-      setOpenClusters([cluster.name as string]);
+      setSelectedClusters([cluster.name as string]);
     }
   };
 
@@ -98,7 +103,7 @@ const GroupedCells: React.FC<GroupedCellsProps> = ({ className, cells, onSelectN
             {clusterIdentifiers.map(({ name, identifier }) => (
               <button
                 key={name}
-                className={`cluster-button ${openClusters.includes(name) ? 'active' : ''}`}
+                className={`cluster-button ${selectedClusters.includes(name) ? 'active' : ''}`}
                 onClick={() => handleClusterClick(name)}
               >
                 <span className="cluster-identifier">{identifier}</span> {/* Identifier (A, B, C) */}
@@ -107,7 +112,7 @@ const GroupedCells: React.FC<GroupedCellsProps> = ({ className, cells, onSelectN
             ))}
           </div>
           <div className="cluster-cells-container">
-            {selectedCells(openClusters)?.map((cell) => (
+            {selectedCells(selectedClusters)?.map((cell) => (
                 <div
                   key={`${cell.cell.notebook_id}-${cell.cell.cell_id}`}
                   className="cell-container"
@@ -130,7 +135,14 @@ const GroupedCells: React.FC<GroupedCellsProps> = ({ className, cells, onSelectN
   );
 };
 
-const VizComponent: React.FC<{ data: VizData; onSelectNotebook: (notebookIds: [number]) => void }> = ({ data, onSelectNotebook }) => {
+interface VizComponentProps {
+  data: VizData;
+  onSelectNotebook: (notebookIds: [number]) => void;
+  selectedClusters: string[];
+  setSelectedClusters: (clusters: string[]) => void;
+}
+
+const VizComponent: React.FC<VizComponentProps> = ({data, onSelectNotebook, selectedClusters, setSelectedClusters}) => {
   if (!data.notebooks || !Array.isArray(data.notebooks)) {
     return <div>No valid notebook data found.</div>;
   }
@@ -167,6 +179,8 @@ const VizComponent: React.FC<{ data: VizData; onSelectNotebook: (notebookIds: [n
           className={className} 
           cells={cells} 
           onSelectNotebook={onSelectNotebook}
+          selectedClusters={selectedClusters}
+          setSelectedClusters={setSelectedClusters}
         />
       ))}
     </div>
diff --git a/src/VizContent.tsx b/src/VizContent.tsx
index c16bc62..f3a2116 100644
--- a/src/VizContent.tsx
+++ b/src/VizContent.tsx
@@ -20,6 +20,7 @@ interface VizContentProps {
 const VizContent: React.FC<VizContentProps> = ({ context, flowchartWidget }) => {
   const [selectedNotebookIds, setSelectedNotebookIds] = useState<number[]>([-2]);
   const [isReady, setIsReady] = useState<boolean>(context.isReady);
+  const [selectedClusters, setSelectedClusters] = useState<string[]>([]);
 
   useEffect(() => {
     if (!context.isReady) {
@@ -31,6 +32,23 @@ const VizContent: React.FC<VizContentProps> = ({ context, flowchartWidget }) =>
     }
   }, [context]);
 
+  // Function to handle Class selection
+  const handleClassSelection = (selectedClass: string) => {
+    console.log("Selected class", selectedClass);
+  };
+
+  // Function to handle cluster selection
+  const handleClusterSelection = (selectedCluster: string) => {
+    if(selectedClusters.includes(selectedCluster)) {
+      setSelectedClusters(selectedClusters.filter(cluster => cluster !== selectedCluster));
+    }
+    else {
+      setSelectedClusters([...selectedClusters, selectedCluster]);
+    }
+  };
+
+  flowchartWidget.addProps(handleClusterSelection, handleClassSelection);
+
   // Function to handle notebook selection
   const handleNotebookSelection = useCallback((selectedIds: number[]) => {
     setSelectedNotebookIds([...selectedIds]);
@@ -147,6 +165,8 @@ const VizContent: React.FC<VizContentProps> = ({ context, flowchartWidget }) =>
       <VizComponent
         data={{ notebooks: selectedNotebooks }}
         onSelectNotebook={handleNotebookSelection}
+        selectedClusters={selectedClusters}
+        setSelectedClusters={setSelectedClusters}
       />
     </div>
   );
diff --git a/src/index.ts b/src/index.ts
index ed7659a..c0d788a 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -45,7 +45,7 @@ const extension: JupyterFrontEndPlugin<void> = {
       preferKernel: false
     },
     flowchartWidget);
-
+    
     app.docRegistry.addWidgetFactory(factory);
 
     // Use the widget factory to create a new widget

From 10176586a5ebee994caafeeba5c698317ad1f207 Mon Sep 17 00:00:00 2001
From: mchami <chamim@ethz.ch>
Date: Wed, 28 Aug 2024 19:40:30 +0200
Subject: [PATCH 2/3] when clicking on graph changing right

---
 src/VizComponent.tsx | 24 ++++++++++++++++++++----
 src/VizContent.tsx   |  4 +++-
 2 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/src/VizComponent.tsx b/src/VizComponent.tsx
index b07927f..c21f6b7 100644
--- a/src/VizComponent.tsx
+++ b/src/VizComponent.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import colorScheme from './colorScheme';
 import '../style/VizComponent.css';
 import CodeCell from './CodeCell';
@@ -36,12 +36,20 @@ interface GroupedCellsProps {
   onSelectNotebook: (notebookIds: [number]) => void;
   selectedClusters: string[];
   setSelectedClusters: (clusters: string[]) => void;
+  scrolledClass: string;
 }
 
-const GroupedCells: React.FC<GroupedCellsProps> = ({ className, cells, onSelectNotebook, selectedClusters, setSelectedClusters }) => {
+const GroupedCells: React.FC<GroupedCellsProps> = ({ className, cells, onSelectNotebook, selectedClusters, setSelectedClusters, scrolledClass }) => {
   const [isOpen, setIsOpen] = useState(true);
+  const containerRef = useRef<HTMLDivElement>(null); // Add ref here
 
   const toggleOpen = () => setIsOpen(!isOpen);
+  
+  useEffect(() => {
+    if(scrolledClass === className && containerRef.current) {
+      containerRef.current.scrollIntoView({ behavior: 'smooth' });
+    }
+  }, [scrolledClass]);
 
   // Group cells by their cluster
   const clusters = cells.reduce((acc, cell) => {
@@ -88,7 +96,11 @@ const GroupedCells: React.FC<GroupedCellsProps> = ({ className, cells, onSelectN
   }));
 
   return (
-    <div className="group-container" style={{ borderColor: colorScheme[className] }}>
+    <div 
+      className="group-container" 
+      style={{ borderColor: colorScheme[className] }}
+      ref={containerRef}
+    >
       <div
         className="group-header"
         style={{ backgroundColor: colorScheme[className] || '#ddd' }}
@@ -143,9 +155,11 @@ interface VizComponentProps {
   onSelectNotebook: (notebookIds: [number]) => void;
   selectedClusters: string[];
   setSelectedClusters: (clusters: string[]) => void;
+  scrolledClass: string;
 }
 
-const VizComponent: React.FC<VizComponentProps> = ({data, onSelectNotebook, selectedClusters, setSelectedClusters}) => {
+const VizComponent: React.FC<VizComponentProps> = ({data, onSelectNotebook, selectedClusters, setSelectedClusters, scrolledClass}) => {
+
   if (!data.notebooks || !Array.isArray(data.notebooks)) {
     return <div>No valid notebook data found.</div>;
   }
@@ -184,12 +198,14 @@ const VizComponent: React.FC<VizComponentProps> = ({data, onSelectNotebook, sele
           onSelectNotebook={onSelectNotebook}
           selectedClusters={selectedClusters}
           setSelectedClusters={setSelectedClusters}
+          scrolledClass={scrolledClass}
         />
       ))}
     </div>
   );
 };
 
+
 export const LoadingComponent = () => <div>Loading...</div>;
 
 export const DataNotFoundComponent = () => <div>No data found.</div>;
diff --git a/src/VizContent.tsx b/src/VizContent.tsx
index d58fe27..f84c817 100644
--- a/src/VizContent.tsx
+++ b/src/VizContent.tsx
@@ -21,6 +21,7 @@ const VizContent: React.FC<VizContentProps> = ({ context, flowchartWidget }) =>
   const [selectedNotebookIds, setSelectedNotebookIds] = useState<number[]>([-2]);
   const [isReady, setIsReady] = useState<boolean>(context.isReady);
   const [selectedClusters, setSelectedClusters] = useState<string[]>([]);
+  const [scrolledClass, setScrolledClass] = useState<string>('');
 
   useEffect(() => {
     if (!context.isReady) {
@@ -35,6 +36,7 @@ const VizContent: React.FC<VizContentProps> = ({ context, flowchartWidget }) =>
   // Function to handle Class selection
   const handleClassSelection = (selectedClass: string) => {
     console.log("Selected class", selectedClass);
+    setScrolledClass(selectedClass);
   };
 
   // Function to handle cluster selection
@@ -155,7 +157,6 @@ const VizContent: React.FC<VizContentProps> = ({ context, flowchartWidget }) =>
     selectedNotebookIds.includes(notebook.notebook_id)
   );
  
-  console.log("notebook names"+ jsonData.notebooks.map(notebook=> notebook.notebook_name))
 
   return (
     <div style={{ height: '100%', overflowY: 'auto' }}>
@@ -170,6 +171,7 @@ const VizContent: React.FC<VizContentProps> = ({ context, flowchartWidget }) =>
         onSelectNotebook={handleNotebookSelection}
         selectedClusters={selectedClusters}
         setSelectedClusters={setSelectedClusters}
+        scrolledClass={scrolledClass}
       />
     </div>
   );

From b50e35af72d547f64921989f17d708d13784f6d1 Mon Sep 17 00:00:00 2001
From: mchami <chamim@ethz.ch>
Date: Wed, 28 Aug 2024 20:01:52 +0200
Subject: [PATCH 3/3] now left graph also bold and scrolls to cluster

---
 src/Flowchart.tsx  | 20 ++++++++++++++------
 src/VizContent.tsx |  5 +++--
 2 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/src/Flowchart.tsx b/src/Flowchart.tsx
index e93dee2..db25530 100644
--- a/src/Flowchart.tsx
+++ b/src/Flowchart.tsx
@@ -34,10 +34,9 @@ interface ClusterLink {
 
 
 interface Props { 
-  handleClusterClick?: ((cluster: string) => void);
+  handleClusterClick?: ((cluster: string, cls: string) => void);
   handleClassClick?: ((cls: string) => void);
   selectedClusters?: string[];
-  seletedClasses?: string[];
 }
 
 interface State {
@@ -81,6 +80,9 @@ class Flowchart extends Component<Props, State> {
     if (prevState.selectedCells !== this.state.selectedCells) {
       this.drawChart();
     }
+    if(prevProps.selectedClusters !== this.props.selectedClusters) {
+      this.drawChart();
+    }
   }
 
   updateSelectedCells = (newSelectedCells: NotebookCellWithID[], allNotebooks: boolean) => {
@@ -263,11 +265,14 @@ class Flowchart extends Component<Props, State> {
       .attr('cx', d => d.x)
       .attr('cy', d => d.y)
       .attr('r', circleRadius)
+      .attr('stroke', d => this.props.selectedClusters?.includes(d.cluster) ? 'black' : 'none')
+      .attr('stroke-width', d => this.props.selectedClusters?.includes(d.cluster) ? '2px' : '0px')
       .attr('fill', d => colorScheme[d.class] || '#69b3a2')
       .on('click', d => {
         const clstr = d.target.__data__.cluster;
+        const cls = d.target.__data__.class;
         if (this.props.handleClusterClick) {
-          this.props.handleClusterClick(clstr);
+          this.props.handleClusterClick(clstr, cls);
         }
       }
       );
@@ -283,6 +288,7 @@ class Flowchart extends Component<Props, State> {
       .attr('dominant-baseline', 'middle')
       .attr('fill', '#000')  // Set text color to black
       .style('font-size', '10px')  // Set font size to smaller
+      .style('font-weight', d => this.props.selectedClusters?.includes(d.cluster) ? 'bold' : 'normal')  // Make text bold if in selectedClusters
       .each(function (d) {
         const words = d.cluster.split(' ');  // Split cluster name into words
         let tspan = d3.select(this).append('tspan')
@@ -394,8 +400,9 @@ class Flowchart extends Component<Props, State> {
 
 export class FlowchartWidget extends ReactWidget {
   graph: React.RefObject<Flowchart>;
-  handleClusterClick: ((cluster: string) => void) | undefined;
+  handleClusterClick: ((cluster: string, cls: string) => void) | undefined;
   handleClassClick: ((cls: string) => void) | undefined;
+  selectedClusters: string[] | undefined;
 
   constructor() {
     super();
@@ -407,16 +414,17 @@ export class FlowchartWidget extends ReactWidget {
     this.graph.current?.updateSelectedCells(selectedCells, allNotebooks);
   }
 
-  public addProps(handleClusterClick: (cluster: string) => void, handleClassClick: (cls: string) => void): void {
+  public addProps(handleClusterClick: (cluster: string, cls: string) => void, handleClassClick: (cls: string) => void, selectedClusters: string[]): void {
     this.handleClusterClick = handleClusterClick;
     this.handleClassClick = handleClassClick;
+    this.selectedClusters = selectedClusters;
     this.update();
   }
 
   render(): JSX.Element {
     return (
       <div className="flowchart-widget">
-        <Flowchart ref={this.graph} handleClassClick={this.handleClassClick} handleClusterClick={this.handleClusterClick}/>
+        <Flowchart ref={this.graph} handleClassClick={this.handleClassClick} handleClusterClick={this.handleClusterClick} selectedClusters={this.selectedClusters}/>
       </div>
     );
   }
diff --git a/src/VizContent.tsx b/src/VizContent.tsx
index f84c817..eee99f7 100644
--- a/src/VizContent.tsx
+++ b/src/VizContent.tsx
@@ -40,16 +40,17 @@ const VizContent: React.FC<VizContentProps> = ({ context, flowchartWidget }) =>
   };
 
   // Function to handle cluster selection
-  const handleClusterSelection = (selectedCluster: string) => {
+  const handleClusterSelection = (selectedCluster: string, selectedClass: string) => {
     if(selectedClusters.includes(selectedCluster)) {
       setSelectedClusters(selectedClusters.filter(cluster => cluster !== selectedCluster));
     }
     else {
       setSelectedClusters([...selectedClusters, selectedCluster]);
+      setScrolledClass(selectedClass);
     }
   };
 
-  flowchartWidget.addProps(handleClusterSelection, handleClassSelection);
+  flowchartWidget.addProps(handleClusterSelection, handleClassSelection, selectedClusters);
 
   // Function to handle notebook selection
   const handleNotebookSelection = useCallback((selectedIds: number[]) => {