Skip to content

Commit cc9b1b9

Browse files
tzacks-cltzacks-cl
committed
feat: add graph legend component with color coding and edge color calculation details
- Introduced a new Legend component in the App to enhance user understanding of node and edge colors. - Added descriptions for node colors representing the start and end of sequences, along with a gradient explanation for intermediate nodes. - Included edge color popover detailing the calculation method. - Updated GraphvizProcessing to reflect changes in edge color terminology for consistency. These enhancements improve the clarity of the graph visualization, aiding users in interpreting the data more effectively.
1 parent 7cea867 commit cc9b1b9

File tree

2 files changed

+67
-6
lines changed

2 files changed

+67
-6
lines changed

‎src/App.tsx‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -219,6 +219,67 @@ function App() {
219219
/>
220220
</div>
221221
</div>
222+
{/* Legend component */}
223+
<div className="mt-4 p-4 border border-gray-300 rounded-lg bg-white">
224+
<h3 className="text-lg font-semibold mb-2">Graph Legend</h3>
225+
<div className="grid grid-cols-2 gap-4">
226+
<div>
227+
<h4 className="font-medium mb-2">Node Colors</h4>
228+
<div className="space-y-2">
229+
<div className="flex items-center">
230+
<div className="w-4 h-4 bg-white border border-gray-300 mr-2"></div>
231+
<span>Start of Sequence</span>
232+
</div>
233+
<div className="flex items-center">
234+
<div className="w-4 h-4 bg-[#00A6FF] mr-2"></div>
235+
<span>End of Sequence</span>
236+
</div>
237+
<div className="text-sm text-gray-600">Nodes in between are colored with a gradient from white to light blue based on their position</div>
238+
</div>
239+
</div>
240+
<div>
241+
<h4 className="font-medium mb-2">Edge Colors</h4>
242+
<div className="space-y-2">
243+
<div className="flex items-center">
244+
<div className="w-4 h-4 bg-red-500 mr-2"></div>
245+
<span>ERROR</span>
246+
</div>
247+
<div className="flex items-center">
248+
<div className="w-4 h-4 bg-green-500 mr-2"></div>
249+
<span>OK</span>
250+
</div>
251+
<div className="flex items-center">
252+
<div className="w-4 h-4 bg-blue-500 mr-2"></div>
253+
<span>INITIAL_HINT/HINT_LEVEL_CHANGE</span>
254+
</div>
255+
<div className="flex items-center">
256+
<div className="w-4 h-4 bg-yellow-500 mr-2"></div>
257+
<span>JIT/FREEBIE_JIT</span>
258+
</div>
259+
<Popover>
260+
<PopoverTrigger>
261+
<div className="text-sm text-blue-600 hover:text-blue-800 cursor-help">
262+
How are edge colors calculated?
263+
</div>
264+
</PopoverTrigger>
265+
<PopoverContent className="w-80">
266+
<div className="space-y-2">
267+
<h4 className="font-medium">Edge Color Calculation</h4>
268+
<p className="text-sm">
269+
When an edge has multiple outcomes, its color is calculated as a weighted average:
270+
</p>
271+
<ul className="text-sm list-disc pl-4 space-y-1">
272+
<li>Each outcome's color is weighted by its frequency</li>
273+
<li>For example, if an edge has 70% OK (green) and 30% ERROR (red), the resulting color will be a blend of these colors</li>
274+
<li>The final color includes 90% opacity to show overlapping edges</li>
275+
</ul>
276+
</div>
277+
</PopoverContent>
278+
</Popover>
279+
</div>
280+
</div>
281+
</div>
282+
</div>
222283
</div>
223284
)}
224285
</div>

‎src/components/GraphvizProcessing.ts‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -428,7 +428,7 @@ export function generateDotString(
428428
+ `- Ratio: \n\t\t${((ratioEdges[edgeKey] || 0) * 100).toFixed(2)}% of students at ${currentStep} go to ${nextStep}\n`
429429
+ `- Outcomes: \n\t\t${Object.entries(outcomes).map(([outcome, count]) => `${outcome}: ${count}`).join('\n\t\t')}\n`
430430
+`\nVisual Properties:\n`
431-
+ `- Color: \n\t\tHex: ${color}\n`;
431+
+ `- Edge Color: \n\t\tHex: ${edgeColor}\n`;
432432

433433
dotString += ` "${currentStep}" -> "${nextStep}" [penwidth=${thickness}, color="${edgeColor}", tooltip="${tooltip}"];\n`;
434434
}
@@ -440,8 +440,8 @@ export function generateDotString(
440440
const nodeTooltip = `Rank:\n\t\t${rank + 1}\nColor:\n\t\t${color}\nTotal Students:\n\t\t${totalNodeEdges[currentStep] || 0}`;
441441

442442
dotString += ` "${currentStep}" [rank=${rank + 1}, style=filled, fillcolor="${color}", tooltip="${nodeTooltip}"];\n`;
443-
}
444443

444+
}
445445
for (const edge of Object.keys(normalizedThicknesses)) {
446446
if (normalizedThicknesses[edge] >= threshold) {
447447
const [currentStep, nextStep] = edge.split('->');
@@ -450,7 +450,7 @@ export function generateDotString(
450450
const edgeCount = edgeCounts[edge] || 0;
451451
const visits = totalVisits[edge] || 0;
452452
const totalCount = totalNodeEdges[currentStep] || 0;
453-
const color = calculateEdgeColors(outcomes);
453+
const edgeColor = calculateEdgeColors(outcomes);
454454
const outcomesStr = Object.entries(outcomes)
455455
.map(([outcome, count]) => `${outcome}: ${count}`)
456456
.join('\n\t\t');
@@ -475,10 +475,10 @@ export function generateDotString(
475475
+ `- Ratio: \n\t\t${((ratioEdges[edge] || 0) * 100).toFixed(2)}% of students at ${currentStep} go to ${nextStep}\n`
476476
+ `- Outcomes: \n\t\t${outcomesStr}\n`
477477
+ `\nVisual Properties:\n`
478-
+ `- Color: \n\t\tHex: ${color}\n`
479-
+ `\t\tRGB: ${[parseInt(color.substring(1, 3), 16), parseInt(color.substring(3, 5), 16), parseInt(color.substring(5, 7), 16)]}`;
478+
+ `- Edge Color: \n\t\tHex: ${edgeColor}\n`
479+
+ `\t\tRGB: ${[parseInt(edgeColor.substring(1, 3), 16), parseInt(edgeColor.substring(3, 5), 16), parseInt(edgeColor.substring(5, 7), 16)]}`;
480480

481-
dotString += ` "${currentStep}" -> "${nextStep}" [penwidth=${thickness}, color="${color}", tooltip="${tooltip}"];\n`;
481+
dotString += ` "${currentStep}" -> "${nextStep}" [penwidth=${thickness}, color="${edgeColor}", tooltip="${tooltip}"];\n`;
482482
}
483483
}
484484
}

0 commit comments

Comments
 (0)