Skip to content

Commit

Permalink
Now we are using colorScheme order
Browse files Browse the repository at this point in the history
  • Loading branch information
@mchami02
mchami02 committed Sep 5, 2024
1 parent 537b563 commit eb8ba85
Show file tree
Hide file tree
Showing 3 changed files with 88 additions and 50 deletions.
61 changes: 44 additions & 17 deletions src/Flowchart.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ interface ClusterLink {
}


interface Props {
interface Props {
handleClusterClick?: ((cluster: string, cls: string) => void);
handleClassClick?: ((cls: string) => void);
selectedClusters?: string[];
Expand Down Expand Up @@ -80,7 +80,7 @@ class Flowchart extends Component<Props, State> {
if (prevState.selectedCells !== this.state.selectedCells) {
this.drawChart();
}
if(prevProps.selectedClusters !== this.props.selectedClusters) {
if (prevProps.selectedClusters !== this.props.selectedClusters) {
this.drawChart();
}
}
Expand All @@ -103,21 +103,39 @@ class Flowchart extends Component<Props, State> {
svg.selectAll('*').remove(); // Clear existing graph

// Extract unique classes from selected cells
const classes = selectedCells.map(cell => cell.class);
const nodes: ClassNode[] = [];

const sortedSelectedCells = selectedCells.sort((a, b) => {
// First, compare by originalNotebookId
if (a.originalNotebookId !== b.originalNotebookId) {
return a.originalNotebookId - b.originalNotebookId;
}
// If originalNotebookId is the same, compare by cell_id
return a.cell_id - b.cell_id;
});
const classes = sortedSelectedCells.map(cell => cell.class);
const nodesSet = new Set<string>();
const links: ClassLink[] = [];
let nodeCounter = 0;

for (let i = 0; i < classes.length; i++) {
if (!nodesSet.has(classes[i])) {
nodes.push({ id: classes[i], x: 100, y: 50 + (nodeCounter++) * 100 });
nodesSet.add(classes[i]);
}
nodesSet.add(classes[i]);
if (i < classes.length - 1 && classes[i] !== classes[i + 1]) {
links.push({ source: classes[i], target: classes[i + 1] });
}
}
// Step 1: Extract class names in color scheme order
const colorSchemeOrder = Object.keys(colorScheme);

// Step 2: Filter and sort the class names set based on colorScheme order
const sortedClassNames = Array.from(nodesSet).sort(
(a, b) => colorSchemeOrder.indexOf(a) - colorSchemeOrder.indexOf(b)
);

// Step 3: Create a list of nodes (for example with dummy coordinates)
const nodes: ClassNode[] = sortedClassNames.map((className, index) => ({
id: className,
x: 100, // Dummy x coordinate, you can adjust this
y: 50 + index * 100, // Dummy y coordinate, you can adjust this
}));

const nodeWidth = 120;
const nodeHeight = 50;
Expand Down Expand Up @@ -190,7 +208,7 @@ class Flowchart extends Component<Props, State> {

// Calculate the required width and height
const width = 300; // Fixed width
const height = nodeCounter * 100 + 50; // Based on number of nodes
const height = nodes.length * 100 + 50; // Based on number of nodes

return { width, height };
}
Expand All @@ -213,14 +231,23 @@ class Flowchart extends Component<Props, State> {
let yCounter = 0;

// Generate nodes, sorting by the order in colorScheme
const sortedSelectedCells = selectedCells.sort((a, b) => {
// First, compare by notebook_id
if (a.notebook_id !== b.notebook_id) {
return a.notebook_id - b.notebook_id;
}
// If notebook_id is the same, compare by cell_id
return a.cell_id - b.cell_id;
});

const clusterFrequencies = d3.rollup(
selectedCells,
sortedSelectedCells,
v => v.length,
d => d.cluster
);

// Generate nodes, sorting by the order in colorScheme
const classGroups = d3.group(selectedCells, d => d.class);
const classGroups = d3.group(sortedSelectedCells, d => d.class);

// Sort classGroups by the frequency of clusters
classGroups.forEach((cells, cls) => {
Expand All @@ -234,7 +261,7 @@ class Flowchart extends Component<Props, State> {
}
);
});

classGroups.forEach((cells, cls) => {
cells.sort((a, b) => {
const colorOrderA = Object.keys(colorScheme).indexOf(a.cluster);
Expand Down Expand Up @@ -264,7 +291,7 @@ class Flowchart extends Component<Props, State> {
});

// Create links between consecutive cells by cell_id and notebook_id
selectedCells.forEach((cell, index) => {
sortedSelectedCells.forEach((cell, index) => {
if (index < selectedCells.length - 1) {
const sourceNode = nodes.find(node => node.cluster === cell.cluster);
const targetCell = selectedCells[index + 1];
Expand Down Expand Up @@ -352,7 +379,7 @@ class Flowchart extends Component<Props, State> {
// Calculate the control point for the curve
const midX = (sourceX + targetX) / 2;
const midY = (sourceY + targetY) / 2;
const curvature = (targetX > sourceX ? -20 : 20 ) * Math.abs(sourceX - targetX) / 150; // Adjust this value to control the curvature
const curvature = (targetX > sourceX ? -20 : 20) * Math.abs(sourceX - targetX) / 150; // Adjust this value to control the curvature
const controlPointX = midX;
const controlPointY = midY + curvature;

Expand Down Expand Up @@ -444,7 +471,7 @@ export class FlowchartWidget extends ReactWidget {
render(): JSX.Element {
return (
<div className="flowchart-widget">
<Flowchart ref={this.graph} handleClassClick={this.handleClassClick} handleClusterClick={this.handleClusterClick} selectedClusters={this.selectedClusters}/>
<Flowchart ref={this.graph} handleClassClick={this.handleClassClick} handleClusterClick={this.handleClusterClick} selectedClusters={this.selectedClusters} />
</div>
);
}
Expand Down
65 changes: 38 additions & 27 deletions src/VizComponent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,9 +44,9 @@ const GroupedCells: React.FC<GroupedCellsProps> = ({ className, cells, onSelectN
const containerRef = useRef<HTMLDivElement>(null); // Add ref here

const toggleOpen = () => setIsOpen(!isOpen);

useEffect(() => {
if(scrolledClass === className && containerRef.current) {
if (scrolledClass === className && containerRef.current) {
containerRef.current.scrollIntoView({ behavior: 'smooth' });
}
}, [scrolledClass]);
Expand All @@ -56,7 +56,7 @@ const GroupedCells: React.FC<GroupedCellsProps> = ({ className, cells, onSelectN
if (!acc[cell.cluster]) {
acc[cell.cluster] = [];
}
acc[cell.cluster].push(cell);
acc[cell.cluster].push(cell);
return acc;
}, {} as { [key: string]: NotebookCellWithID[] });

Expand All @@ -74,7 +74,7 @@ const GroupedCells: React.FC<GroupedCellsProps> = ({ className, cells, onSelectN
};

const handleClusterClick = (clusterName: string) => {
if(selectedClusters.includes(clusterName)) {
if (selectedClusters.includes(clusterName)) {
setSelectedClusters(selectedClusters.filter(cluster => cluster !== clusterName));
}
else {
Expand All @@ -96,8 +96,8 @@ const GroupedCells: React.FC<GroupedCellsProps> = ({ className, cells, onSelectN
}));

return (
<div
className="group-container"
<div
className="group-container"
style={{ borderColor: colorScheme[className] }}
ref={containerRef}
>
Expand Down Expand Up @@ -127,21 +127,21 @@ const GroupedCells: React.FC<GroupedCellsProps> = ({ className, cells, onSelectN
</div>
<div className="cluster-cells-container">
{selectedCells(selectedClusters)?.map((cell) => (
<div
key={`${cell.cell.notebook_id}-${cell.cell.cell_id}`}
className="cell-container"
style={{ borderColor: colorScheme[className] }}
>
<CodeCell
code={cell.cell.code}
clusterLabel={clusterIdentifiers.find(c => c.name === cell.clusterName)?.identifier || ''}
notebook_id={cell.cell.notebook_id} // Pass the notebook ID
onSelectNotebook={onSelectNotebook} // Pass the function to CodeCell
setCurrentCluster={handleIdentifierClick}
notebook_name={cell.cell.notebook_name}
/>
</div>
))
<div
key={`${cell.cell.notebook_id}-${cell.cell.cell_id}`}
className="cell-container"
style={{ borderColor: colorScheme[className] }}
>
<CodeCell
code={cell.cell.code}
clusterLabel={clusterIdentifiers.find(c => c.name === cell.clusterName)?.identifier || ''}
notebook_id={cell.cell.notebook_id} // Pass the notebook ID
onSelectNotebook={onSelectNotebook} // Pass the function to CodeCell
setCurrentCluster={handleIdentifierClick}
notebook_name={cell.cell.notebook_name}
/>
</div>
))
}
</div>
</div>
Expand All @@ -158,7 +158,7 @@ interface VizComponentProps {
scrolledClass: string;
}

const VizComponent: React.FC<VizComponentProps> = ({data, onSelectNotebook, selectedClusters, setSelectedClusters, scrolledClass}) => {
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>;
Expand Down Expand Up @@ -188,13 +188,24 @@ const VizComponent: React.FC<VizComponentProps> = ({data, onSelectNotebook, sele
});
});

const colorSchemeOrder = Object.keys(colorScheme);

const sortedGroupedCells = Object.entries(groupedCells).sort(([classNameA], [classNameB]) => {
// Get the index of the class names in colorSchemeOrder
const indexA = colorSchemeOrder.indexOf(classNameA);
const indexB = colorSchemeOrder.indexOf(classNameB);

// Sort based on their index
return indexA - indexB;
});

return (
<div style={{ padding: '20px' }}>
{Object.entries(groupedCells).map(([className, cells]) => (
<GroupedCells
key={className}
className={className}
cells={cells}
{sortedGroupedCells.map(([className, cells]) => (
<GroupedCells
key={className}
className={className}
cells={cells}
onSelectNotebook={onSelectNotebook}
selectedClusters={selectedClusters}
setSelectedClusters={setSelectedClusters}
Expand Down
12 changes: 6 additions & 6 deletions src/colorScheme.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,17 +8,17 @@ type ColorScheme = {

// Create the color scheme mapping
const colorScheme: ColorScheme = {
"Data Extraction": "#4e79a7", // Example class names, replace with actual class names
"Visualization": "#59a14f",
"Model Evaluation": "#9c755f",
"Imports and Environment": "#f28e2b",
"Data Extraction": "#4e79a7",
"Data Transform": "#b07aa1",
"Exploratory Data Analysis": "#edc948",
// "Model Interpretation": "#bab0ac",
"Visualization": "#59a14f",
"Model Training": "#ff9da7",
"Model Evaluation": "#9c755f",
"Data Export": "#e15759",
// "Model Interpretation": "#bab0ac",
// "Hyperparam Tuning": "#b07aa1",
// "Debug": "#76b7b2",
"Model Training": "#ff9da7",
"Data Transform": "#b07aa1",
};

export default colorScheme;
Expand Down

0 comments on commit eb8ba85

Please sign in to comment.