early merge graph branch for general bug fixes by Morten-Renner · Pull Request #38 · kashka-toolbox/toolbox

Morten-Renner · 2025-09-28T22:15:16Z

No description provided.

…op functionality

…ation

…sed-tools

Bumps the npm_and_yarn group with 1 update in the / directory: [form-data](https://github.com/form-data/form-data). Updates `form-data` from 4.0.2 to 4.0.4 - [Release notes](https://github.com/form-data/form-data/releases) - [Changelog](https://github.com/form-data/form-data/blob/master/CHANGELOG.md) - [Commits](form-data/form-data@v4.0.2...v4.0.4) --- updated-dependencies: - dependency-name: form-data dependency-version: 4.0.4 dependency-type: indirect dependency-group: npm_and_yarn ... Signed-off-by: dependabot[bot] <support@github.com>

Copilot

Pull Request Overview

This PR introduces a graph-based node editor system with internationalization improvements. The implementation includes a visual node editor with drag-and-drop functionality, edge connections between nodes, and type-safe node definitions for various operations.

Adds complete graph editor infrastructure with node management, edge rendering, and execution engine
Implements drag-and-drop canvas functionality with infinite scrolling
Enhances internationalization with client-side error handling and fallback mechanisms

Reviewed Changes

Copilot reviewed 26 out of 26 changed files in this pull request and generated 9 comments.

Show a summary per file

File	Description
src/styles/node.css	Node styling with animations and drag states
src/lib/graph/*	Core graph functionality including node execution, edge rendering, and type compatibility
src/components/graph/*	React components for the graph editor UI
src/i18n/request.ts	Server-side i18n error handling
src/components/intl-error-handling-client-provider.tsx	Client-side i18n error handling
src/app/[locale]/layout.tsx	Integration of new i18n provider
src/app/[locale]/debug/graph/page.tsx	Debug page showcasing graph functionality
next.config.mjs	Configuration update for i18n
i18n/en.json	Translation keys for graph components

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

Copilot · 2025-09-28T22:17:04Z

+    const formNodeIO = fromNode?.getAllIO().find(io => io.name === fromIO.nodeIOName);
+    const toNodeIO = toNode?.getAllIO().find(io => io.name === toIO.nodeIOName);
+
+    if (!formNodeIO || !toNodeIO) {


Variable reference 'formNodeIO' should be 'fromNodeIO' to match the corrected variable name.

Suggested change

const formNodeIO = fromNode?.getAllIO().find(io => io.name === fromIO.nodeIOName);

const toNodeIO = toNode?.getAllIO().find(io => io.name === toIO.nodeIOName);

if (!formNodeIO || !toNodeIO) {

const fromNodeIO = fromNode?.getAllIO().find(io => io.name === fromIO.nodeIOName);

const toNodeIO = toNode?.getAllIO().find(io => io.name === toIO.nodeIOName);

if (!fromNodeIO || !toNodeIO) {

Copilot · 2025-09-28T22:17:05Z

+    const isFromIoOutput = fromNode.outputs.some(output => output.name === fromIO.nodeIOName);
+    const isToIoInput = toNode.inputs.some(input => input.name === toIO.nodeIOName);
+
+    if(isFromIoOutput !== isToIoInput) { // only input to outpot or output to input is valid


Comment contains typo 'outpot' which should be 'output'.

Suggested change

if(isFromIoOutput !== isToIoInput) { // only input to outpot or output to input is valid

if(isFromIoOutput !== isToIoInput) { // only input to output or output to input is valid

Copilot · 2025-09-28T22:17:05Z

+                console.log({
+                    dragStartRef: dragStartRef.current,
+                    scrollStartRef: scrollStartRef.current,
+                    currentX: e.clientX,
+                    currentY: e.clientY,
+                    deltaX: e.clientX - dragStartRef.current.x,
+                    deltaY: e.clientY - dragStartRef.current.y,
+                });


Debug console.log statement should be removed from production code.

Copilot · 2025-09-28T22:17:05Z

+    useEffect(() => {
+        console.log("onEndDraggingCanvas");
+        return () => {
+            console.log("cleanup onEndDraggingCanvas");
+        };
+    }, [onEndDraggingCanvas]);
+    useEffect(() => {
+        console.log("setCurrentlyDraggingNode");
+        return () => {
+            console.log("cleanup setCurrentlyDraggingNode");
+        };
+    }, [onEndDraggingCanvas]);
+    useEffect(() => {
+        console.log("onMouseMoveDragCanvas");
+        return () => {
+            console.log("cleanup onMouseMoveDragCanvas");
+        };
+    }, [onEndDraggingCanvas]);


Multiple debug console.log statements and empty useEffect hooks should be removed from production code.

Copilot · 2025-09-28T22:17:05Z

+    }
+
+    areTypesCompatibleCache[cacheKey] = variant;
+    console.log(areTypesCompatibleCache);


Debug console.log statement should be removed from production code.

Suggested change

console.log(areTypesCompatibleCache);

Copilot · 2025-09-28T22:17:06Z

+        graphRef.current?.addEventListener("transitionend", recalculateEdges);
+        graphRef.current?.addEventListener("scroll", recalculateEdges);
+        return () => {
+            graphRef.current?.removeEventListener("transitionend", recalculateEdges);
+            graphRef.current?.removeEventListener("scroll", recalculateEdges);


Event listeners are being removed using a stale reference to graphRef.current. Store the reference in a variable within the useEffect to ensure proper cleanup.

Suggested change

graphRef.current?.addEventListener("transitionend", recalculateEdges);

graphRef.current?.addEventListener("scroll", recalculateEdges);

return () => {

graphRef.current?.removeEventListener("transitionend", recalculateEdges);

graphRef.current?.removeEventListener("scroll", recalculateEdges);

const graphEl = graphRef.current;

graphEl?.addEventListener("transitionend", recalculateEdges);

graphEl?.addEventListener("scroll", recalculateEdges);

return () => {

graphEl?.removeEventListener("transitionend", recalculateEdges);

graphEl?.removeEventListener("scroll", recalculateEdges);

Copilot · 2025-09-28T22:17:06Z

+        e.dataTransfer.dropEffect = "move";
+
+        const fromIoJSON = e.dataTransfer.getData("fromIO");
+        if (fromIoJSON == undefined || fromIoJSON.length == 0) {


Use strict equality (===) instead of loose equality (==) for type safety.

Suggested change

if (fromIoJSON == undefined || fromIoJSON.length == 0) {

if (fromIoJSON === undefined || fromIoJSON === null || fromIoJSON.length === 0) {

Copilot · 2025-09-28T22:17:06Z

+                    <Node
+                        key={nodeState.id}
+                        nodeState={nodeState}
+                        isBeingDragged={nodeState.id == currentlyDraggingNode?.nodeId}


Use strict equality (===) instead of loose equality (==) for type safety.

Suggested change

isBeingDragged={nodeState.id == currentlyDraggingNode?.nodeId}

isBeingDragged={nodeState.id === currentlyDraggingNode?.nodeId}

Copilot

Pull Request Overview

Copilot reviewed 28 out of 28 changed files in this pull request and generated 5 comments.

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

Copilot · 2025-09-28T22:38:54Z

+                console.log({
+                    dragStartRef: dragStartRef.current,
+                    scrollStartRef: scrollStartRef.current,
+                    currentX: e.clientX,
+                    currentY: e.clientY,
+                    deltaX: e.clientX - dragStartRef.current.x,
+                    deltaY: e.clientY - dragStartRef.current.y,
+                });


Debug console.log statement should be removed from production code. Consider using a proper logging solution or removing this debug output.

Suggested change

console.log({

dragStartRef: dragStartRef.current,

scrollStartRef: scrollStartRef.current,

currentX: e.clientX,

currentY: e.clientY,

deltaX: e.clientX - dragStartRef.current.x,

deltaY: e.clientY - dragStartRef.current.y,

});

Copilot · 2025-09-28T22:38:55Z

+    const isFromIoOutput = fromNode.outputs.some(output => output.name === fromIO.nodeIOName);
+    const isToIoInput = toNode.inputs.some(input => input.name === toIO.nodeIOName);
+
+    if(isFromIoOutput !== isToIoInput) { // only input to output or output to input is valid


The logic is inverted. The condition should be if(isFromIoOutput === isToIoInput) because connecting output-to-output or input-to-input should be invalid, not output-to-input or input-to-output.

Suggested change

if(isFromIoOutput !== isToIoInput) { // only input to output or output to input is valid

if(isFromIoOutput === isToIoInput) { // only input to output or output to input is valid

Copilot · 2025-09-28T22:38:55Z

+        e.dataTransfer.dropEffect = "move";
+
+        const fromIoJSON = e.dataTransfer.getData("fromIO");
+        if (fromIoJSON == undefined || fromIoJSON.length == 0) {


Use strict equality operators (=== and !==) instead of loose equality (== and !=) for better type safety and to avoid unexpected type coercion.

Suggested change

if (fromIoJSON == undefined || fromIoJSON.length == 0) {

if (fromIoJSON === undefined || fromIoJSON.length == 0) {

Copilot · 2025-09-28T22:38:55Z

+    OutputKeys extends readonly string[]
+>(
+    config: {
+        type: string;


The type parameter should be constrained to the valid node types ('input' | 'output' | 'operation') instead of accepting any string, to ensure type safety and prevent invalid node types.

Suggested change

type: string;

type: 'input' | 'output' | 'operation';

Copilot · 2025-09-28T22:38:56Z

+        <NextIntlClientProvider
+            locale={locale}
+            onError={(error) => {
+                if (error.code != "MISSING_MESSAGE") {


Use strict inequality operator (!==) instead of loose inequality (!=) for better type safety and to avoid unexpected type coercion.

Suggested change

if (error.code != "MISSING_MESSAGE") {

if (error.code !== "MISSING_MESSAGE") {

Morten-Renner added 30 commits July 15, 2025 22:02

add: implement graph and node components with non working drag-and-dr…

8da3ecb

…op functionality

fix: Move Node in Graph

610a79a

feat: visual node drag effect

b48a94f

add: data-node-dragable-handle and basic NodeIO

b934ad7

add: node edge basic bidirectional DND

54fec92

add: NodeIO isEdgeDropValid check

a8b180e

add: basic line rendering

5ba7891

add: drag effect & todo

0392db3

add: colored dots

22db7ae

fix: edge rendering by introducing useEdgeRenderer

a69c929

fix: node dragging transition causing visual lag

21ceaa0

add: enfoce direction of connection

37ca14b

add: executeGraph functionality

4de6ae6

fix: is-processing indicator

37ff0af

fix: adjust strokeDasharray and strokeDashoffset for PreviewEdge anim…

9971b0e

…ation

add: factory pattern for node defintions

163a6f6

fix: edge scrolling issue

aad5365

fix: edges not rendering when scrolled

430a5ff

add: graph dragging

674acca

fix: creating connections

87943b4

feat: cursor drag indicator

ef52b3f

add: curved paths

e46f1bd

feat: graph infinite scroll

78e219c

feat: advanced internationalization error handling

3991bbf

feat: graph translations

4428993

add: english graph translations

4a79bb5

add: edge color

b13c960

gergg remote-tracking branch 'origin/graph-based-tools' into graph-ba…

a22b9f1

…sed-tools

add: clean node look

ad3c3a7

add: io connection type checks

01b9996

Morten-Renner and others added 11 commits September 12, 2025 10:22

fix: JSON parsing error if e.dataTransfer is empty

b298e4e

fix: show warning for missing translations only once

e9af941

fix: keep error stream

ca42b65

refactor: separated graph files

75c703c

refactor: canvas drag functionality to useCanvasDrag hook

ebf6c23

refactor: auto resize canvas to GraphInfiniteCanvasScroll.tsx

ae031c8

refactor: extracted state to GraphContextProvider

2e2ab28

fix: reduce rerenders

078ba52

Merge remote-tracking branch 'origin/development' into graph-based-tools

ac81cd5

fix: missing displayName

c9ea2f2

Morten-Renner requested a review from Copilot September 28, 2025 22:15

Copilot AI reviewed Sep 28, 2025

View reviewed changes

Morten-Renner added 2 commits September 29, 2025 00:26

fix: warnings and Copilot suggestions

69e6254

fix: type bugs in pdf tools

d4c3fcd

Morten-Renner requested a review from Copilot September 28, 2025 22:38

Copilot AI reviewed Sep 28, 2025

View reviewed changes

Morten-Renner merged commit f8f3130 into development Sep 28, 2025
4 checks passed

	if(isFromIoOutput !== isToIoInput) { // only input to outpot or output to input is valid
	if(isFromIoOutput !== isToIoInput) { // only input to output or output to input is valid

	if (fromIoJSON == undefined \|\| fromIoJSON.length == 0) {
	if (fromIoJSON === undefined \|\| fromIoJSON === null \|\| fromIoJSON.length === 0) {

	isBeingDragged={nodeState.id == currentlyDraggingNode?.nodeId}
	isBeingDragged={nodeState.id === currentlyDraggingNode?.nodeId}

	if(isFromIoOutput !== isToIoInput) { // only input to output or output to input is valid
	if(isFromIoOutput === isToIoInput) { // only input to output or output to input is valid

	if (error.code != "MISSING_MESSAGE") {
	if (error.code !== "MISSING_MESSAGE") {

Conversation

Morten-Renner commented Sep 28, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Uh oh!

Copilot AI Sep 28, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Sep 28, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Sep 28, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Sep 28, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Sep 28, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Sep 28, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Sep 28, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Sep 28, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Uh oh!

Copilot AI Sep 28, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Sep 28, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Sep 28, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Sep 28, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Sep 28, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants