Graph Response Area (Re-opened) by HongleiGu · Pull Request #8 · lambda-feedback/response-area-sandbox

HongleiGu · 2026-03-03T12:31:57Z

Sorry for messing up with the branches, I'll try to migrate the PR content here

… fix, I dont think it should be the same with Input

…ed to add more info for teacher mode and find ways to test backend connect, schema may need fix as JSON.stringfy can walk pass the zod schema check

…pe instead

refactor: Cytoscape

fix: remove debugging logs

…ity in FSA component

… cytoscape

feat: implement GraphQL data fetching and add live preview functional…

revert: before preview

… and corrected data logic for sending response and answer to backend

Sync

…-sandbox

HarrySu123 · 2026-03-03T12:42:39Z

Key features:

allows student to add nodes via inbuilt graph editor
allows student to draw in nodes and edges via graph editor draw mode
allows teacher to choose what sort of evaluation they want to apply to student's response , using the configuration panel in teacher's answer area
allows teacher to choose whether graph will be directed or not in teacher's answer area
currently only compatible with graphEval evaluation function

All changes done within src/types/Graph

Code structure

`src/types/Graph/components.tsx`

defines the react configuration panel component that allows the teacher to choose the sort of evaluation that should occur.

`src/types/Graph/GraphFeedbackPanel.tsx`

Currently unused, but allows potential implementation of feedbacks via preview. Not sure what sort of preview feedback would be beneficial for students

`src/types/Graph/ItemPropertiesPanel.tsx`

defines the sidebar of the graph editor, which allows node creation, deletion, and switch for turning on drawing mode.

`src/types/Graph/Graph.component.tsx`

defines the main interactive graph editor component, uses Cytoscape.js to redner and manage the graph, and uses Paper.js to allow drawing detection in drawing mode.

`src/types/Graph/validateGraph.ts`

Currently unused, allows immediate simple check for the graph, but this can be done in backend if needed. It is only here as an idea for preview.

m-messer

Thanks for your work on this! Some minor comments, mainly on refactoring a style.

How much of this code is duplicated in FSA? Might it be worth commenting on those files?

m-messer · 2026-03-03T12:44:39Z

FSA.md

This is the wrong Md file.

This is the wrong Md file.

yes absolutely, I wrote this when doing FSA, and it was copied to Graph and ignored, I'll fix this in the following commits

m-messer · 2026-03-03T12:45:20Z

.gitignore

Should this be ignored or just not added to the commit? (Do we want to ignore these in the future?)

I think this is here by accident, FSA and PropositionalLogic never existed in this repo, will definitely fix this

Oops, this was done by me, I had an issue with my laptop where I couldn't open more than 1 vscode open at the same time, but I wanted to see the code for PL config panel and FSA graph to take inspiration for Graph. Fixed now.

m-messer · 2026-03-03T12:45:36Z

README.md

References FSA.

Same issue as FSA.md, simple fix

m-messer · 2026-03-03T12:46:37Z

src/types/index.ts

  'ESSAY',
  'CODE',
  'MILKDOWN',
-  'LIKERT',


Why remove these? If removed also remove the imports?

m-messer · 2026-03-03T12:46:57Z

src/types/index.ts

+}
+
+class VoidResponseAreaTub extends ResponseAreaTub {
+  // public readonly responseType = 'VOID'


Remove commented out code

m-messer · 2026-03-03T12:49:22Z

src/types/Graph/utils.ts

+import { Graph, SimpleGraph } from './type'
+
+// BackendGraph type: what backend expects
+export interface BackendGraph {


Maybe add some explaination of why this is needed here.

m-messer · 2026-03-03T12:51:01Z

src/types/Graph/index.tsx

+        directed: provided.directed ?? false,
+        weighted: provided.weighted ?? false,
+        multigraph: provided.multigraph ?? false,
+        evaluation_type: Array.isArray(legacyEval)


Instead of multiline tenary, use if/else?

I think tenary for directed weighted and multigraph makes it easier to read, if you believe it is better to use if/else we can change it to that.

I may have put the comment on the wrong line here. I think there was a tenary that was formatted across multiple lines. Here it is fine.

m-messer · 2026-03-03T12:51:57Z

src/types/Graph/Graph.component.tsx

+import { Graph, Node, Edge, GraphFeedback, CheckPhase } from './type'
+
+/* ----------------------------- Local Styles ----------------------------- */
+export const useLocalStyles = makeStyles()((theme) => ({


Should these style not be in the styles file or somewhere similar?

m-messer · 2026-03-03T12:52:16Z

src/types/Graph/Graph.component.tsx

+    const cy: Core = cytoscape({
+      container: containerRef.current,
+      layout: { name: 'preset' },
+      style: [


Should these styles be in a style file or similar?

m-messer · 2026-03-03T12:53:24Z

src/types/Graph/components/GraphFeedbackPanel.tsx

+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+      <div
+        style={{


Style in the style file?

estifraca · 2026-03-03T14:42:39Z

package.json

    "typescript": "^5.4.5",
    "typescript-eslint": "^7.11.0",
-    "vite": "^7.0.0"
+    "vite": "^5.4.11"


Why to download a library? Could 7.0.0 be kept?

estifraca · 2026-03-03T14:44:15Z

src/types/Graph/index.tsx

+            multigraph: config.multigraph,
+            evaluation_type: config.evaluation_type,
+          }
+          console.log('[GraphTub] sending to backend:', flatAnswer)


Are you gonna keep the console.log ?
Many developers prefer to remove any console.log before merging.

estifraca · 2026-03-03T14:45:30Z

src/types/Graph/Graph.component.tsx

+    const isCircle = diameter > 20 && 
+                    strokeLength > circumference * 0.3 && 
+                    distance < diameter * 0.5


These 3 constants should be defined as constants, even if local constants in this file.

src/types/Graph/components/ItemPropertiesPanel.tsx

estifraca · 2026-03-03T15:02:11Z

src/types/Graph/Graph.component.tsx

+      target: e.target().id(),
+      label: (e.data('label') as string) ?? '',
+      metadata: {},
+      weight: 0


Are you accepting weighted graphs? If so, should it preserve the original weight? Something like parseFloat(e.data('weight')) ...

Weighted graphs are not currently accepted, none of the evaluation in the backend requires the graph to be weighted. However evaluation that requires weight could be an interesting thing to be implemented in the future, where the response area could easily allow weighted graphs to be made.

estifraca · 2026-03-03T15:05:35Z

src/types/Graph/utils.ts

+  static toSimple(graph: Graph): SimpleGraph {
+    return {
+      nodes: graph.nodes.map(n => `${n.id}|${n.label || ''}|${n.x || 0}|${n.y || 0}`),
+      edges: graph.edges.map(e => `${e.source}|${e.target}|${e.weight || 1}|${e.label || ''}`),
+      directed: graph.directed,
+      weighted: graph.weighted,
+      multigraph: graph.multigraph,
+      evaluation_type: [],
+    }
+  }


GraphConverter.toSimple() and GraphConverter.fromSimple() in utils.ts seems to do the same as toSimpleGraph() and fromSimpleGraph() in type.ts
Am I right? Should some refactoring make sense?

estifraca · 2026-03-03T15:07:53Z

src/types/Graph/type.ts

+// -----------------------------
+// Compressed Graph: JSON-stringified nodes/edges
+// -----------------------------
+export const CompressedGraphSchema = z.object({
+  nodes: z.array(z.string()), // JSON.stringify(nodes)
+  edges: z.array(z.string()), // JSON.stringify(edges)
+  directed: z.boolean().default(false),
+  weighted: z.boolean().default(false),
+  multigraph: z.boolean().default(false),
+  name: z.string().optional(),
+  metadata: z.record(z.any()).optional().default({}),
+});
+
+export type CompressedGraph = z.infer<typeof CompressedGraphSchema>
+
+// -----------------------------
+// Example: compress function
+// -----------------------------
+export function compressGraph(graph: z.infer<typeof GraphSchema>) {
+  return {
+    ...graph,
+    nodes: JSON.stringify(graph.nodes),
+    edges: JSON.stringify(graph.edges),
+  };
+}
+


CompressedGraphSchema, CompressedGraph, and compressGraph are never imported or used anywhere in the codebase. Like the intentionally-unused files you mentioned in your PR description, if this is a future idea, please add a comment explaining why it exists. Otherwise, remove

HongleiGu · 2026-03-04T00:02:00Z

Thanks for your work on this! Some minor comments, mainly on refactoring a style.

How much of this code is duplicated in FSA? Might it be worth commenting on those files?

Almost everything is copied from FSA, the only difference of graph and FSA is the feedback and the answer schema, which both use a temporary frontend-type to walk around the two-layer json requirement of the answer

Therefore if needed, we can try to unify the type and make graph and FSA combined, however, in this assignment we probably wont have time to finish this (Given its near the end and the exams)

m-messer · 2026-03-04T11:01:09Z

Thanks for your work on this! Some minor comments, mainly on refactoring a style.
How much of this code is duplicated in FSA? Might it be worth commenting on those files?

Almost everything is copied from FSA, the only difference of graph and FSA is the feedback and the answer schema, which both use a temporary frontend-type to walk around the two-layer json requirement of the answer

Therefore if needed, we can try to unify the type and make graph and FSA combined, however, in this assignment we probably wont have time to finish this (Given its near the end and the exams)

Thanks for confirming! No need to merge before the deadlines, it's just good to know if/when we pull the changes into the application.

HongleiGu and others added 28 commits January 16, 2026 01:00

feat: first FSA draft with Reactflow, the wizard definitely need some…

a39f305

… fix, I dont think it should be the same with Input

fix: dev notice in FSA.md

b9e9a30

fix: updated UI display, removed prompting, add information panel, ne…

675d612

…ed to add more info for teacher mode and find ways to test backend connect, schema may need fix as JSON.stringfy can walk pass the zod schema check

refactor: Reactflow is not so suitable for maths, changing to cytosca…

da333ba

…pe instead

fix: align with the backend, can pass basic tests

21e9a11

feat: added feedback

3e813d7

Merge pull request lambda-feedback#3 from HongleiGu/cytoscape

a467516

refactor: Cytoscape

fix: remove debugging logs

5456800

Merge pull request lambda-feedback#4 from HongleiGu/cytoscape

897f324

fix: remove debugging logs

feat: implement GraphQL data fetching and add live preview functional…

822f87e

…ity in FSA component

fix: style modification

8b60ada

Merge branch 'preview' of github.com:HongleiGu/FSA-response-area into…

107050e

… cytoscape

Merge pull request lambda-feedback#5 from HongleiGu/preview

ce94457

feat: implement GraphQL data fetching and add live preview functional…

revert: revert back to before preview

c88db1b

Merge pull request lambda-feedback#6 from HongleiGu/cytoscape

b7c8401

revert: before preview

fix: styles forgetten by the revert

1370a0d

feat: should be everything

04a1e4d

Merge pull request lambda-feedback#7 from HongleiGu/cytoscape

88b141a

feat: first draft, still need fix

690aff5

implemented feedback panel

3117859

fixed panels

605e6e6

functioning front end

06f1588

Merge branch 'main' into sync

544c107

Refactor code structure for improved readability and maintainability,…

1c4f985

… and corrected data logic for sending response and answer to backend

feat: added configuration panel to control evlauation type

c60111a

Merge pull request #1 from lambda-feedback/sync

f7cb4e1

Sync

feat: removed redundant graph eidotr in answer response area

01853f5

Merge branch 'main' of github.com:lambda-feedback/Graph-response-area…

5695892

…-sandbox

m-messer reviewed Mar 3, 2026

View reviewed changes

$estifraca$

estifraca reviewed Mar 3, 2026

View reviewed changes

src/types/Graph/components/ItemPropertiesPanel.tsx Show resolved Hide resolved

$estifraca$

estifraca reviewed Mar 3, 2026

View reviewed changes

$estifraca$

estifraca requested changes Mar 3, 2026

View reviewed changes

Conversation

HongleiGu commented Mar 3, 2026

Uh oh!

HarrySu123 commented Mar 3, 2026

Key features:

Code structure

src/types/Graph/components.tsx

src/types/Graph/GraphFeedbackPanel.tsx

src/types/Graph/ItemPropertiesPanel.tsx

src/types/Graph/Graph.component.tsx

src/types/Graph/validateGraph.ts

Uh oh!

m-messer left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

HongleiGu commented Mar 4, 2026

Uh oh!

m-messer commented Mar 4, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

`src/types/Graph/components.tsx`

`src/types/Graph/GraphFeedbackPanel.tsx`

`src/types/Graph/ItemPropertiesPanel.tsx`

`src/types/Graph/Graph.component.tsx`

`src/types/Graph/validateGraph.ts`