Skip to content

Commit 719a968

Browse files
Anchel123Anchel123
authored
Merge branch 'staging' into add-capture-image-in-canvas
2 parents a436b63 + 717755c commit 719a968

7 files changed

Lines changed: 179 additions & 93 deletions

File tree

‎app/components/code-graph.tsx‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { Dispatch, RefObject, SetStateAction, useContext, useEffect, useRef, useState } from "react";
2-
import { GraphData, Node } from "./model";
2+
import { GraphData, Link, Node } from "./model";
33
import { GraphContext } from "./provider";
44
import { Toolbar } from "./toolbar";
55
import { Labels } from "./labels";
@@ -21,7 +21,7 @@ const GraphView = dynamic(() => import('./graphView'));
2121
interface Props {
2222
data: GraphData,
2323
setData: Dispatch<SetStateAction<GraphData>>,
24-
onFetchGraph: (graphName: string) => void,
24+
onFetchGraph: (graphName: string) => Promise<void>,
2525
onFetchNode: (nodeIds: number[]) => Promise<GraphData>,
2626
options: string[]
2727
setOptions: Dispatch<SetStateAction<string[]>>
@@ -55,7 +55,7 @@ export function CodeGraph({
5555
let graph = useContext(GraphContext)
5656

5757
const [url, setURL] = useState("");
58-
const [selectedObj, setSelectedObj] = useState<Node>();
58+
const [selectedObj, setSelectedObj] = useState<Node | Link>();
5959
const [selectedObjects, setSelectedObjects] = useState<Node[]>([]);
6060
const [position, setPosition] = useState<Position>();
6161
const [graphName, setGraphName] = useState<string>("");
@@ -145,9 +145,10 @@ export function CodeGraph({
145145
}
146146

147147
run()
148+
148149
}, [graphName])
149150

150-
function handleSelectedValue(value: string) {
151+
async function handleSelectedValue(value: string) {
151152
setGraphName(value)
152153
onFetchGraph(value)
153154
}

‎app/components/dataPanel.tsx‎

Lines changed: 87 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,30 @@
1-
import { Dispatch, SetStateAction, useRef, useEffect, useState } from "react";
2-
import { Node } from "./model";
1+
import { Dispatch, SetStateAction } from "react";
2+
import { JSONTree } from 'react-json-tree';
3+
import { Link, Node } from "./model";
34
import { Copy, SquareArrowOutUpRight, X } from "lucide-react";
45
import SyntaxHighlighter from 'react-syntax-highlighter';
56
import { dark } from 'react-syntax-highlighter/dist/esm/styles/hljs';
67

78
interface Props {
8-
obj: Node | undefined;
9-
setObj: Dispatch<SetStateAction<Node | undefined>>;
9+
obj: Node | Link | undefined;
10+
setObj: Dispatch<SetStateAction<Node | Link | undefined>>;
1011
url: string;
1112
}
1213

1314
const excludedProperties = [
1415
"category",
16+
"label",
1517
"color",
1618
"expand",
1719
"collapsed",
1820
"isPath",
1921
"isPathStartEnd",
2022
"visible",
2123
"index",
24+
"curve",
2225
"__indexColor",
26+
"isPathSelected",
27+
"__controlPoints",
2328
"x",
2429
"y",
2530
"vx",
@@ -30,20 +35,16 @@ const excludedProperties = [
3035

3136
export default function DataPanel({ obj, setObj, url }: Props) {
3237

33-
const containerRef = useRef<HTMLDivElement>(null);
34-
const [containerHeight, setContainerHeight] = useState(0);
35-
36-
useEffect(() => {
37-
if (containerRef.current) {
38-
setContainerHeight(containerRef.current.clientHeight);
39-
}
40-
}, [containerRef.current]);
38+
debugger
4139

4240
if (!obj) return null;
4341

44-
const label = `${obj.category}: ${obj.name}`
42+
const type = "category" in obj
43+
const label = type ? `${obj.category}: ${obj.name}` : obj.label
4544
const object = Object.entries(obj).filter(([k]) => !excludedProperties.includes(k))
4645

46+
console.log(obj)
47+
4748
return (
4849
<div data-name="node-details-panel" className="z-20 absolute -top-10 left-20 bg-[#343434] text-white shadow-lg rounded-lg flex flex-col max-h-[88%] max-w-[56%] overflow-hidden" >
4950
<header className="bg-[#191919] flex items-center gap-8 justify-between p-8">
@@ -52,7 +53,7 @@ export default function DataPanel({ obj, setObj, url }: Props) {
5253
<X color="white" />
5354
</button>
5455
</header>
55-
<main ref={containerRef} className="bg-[#343434] flex flex-col grow overflow-y-auto p-4">
56+
<main className="bg-[#343434] flex flex-col grow overflow-y-auto p-4">
5657
{
5758
object.map(([key, value]) => (
5859
<div key={key} className="flex gap-2">
@@ -73,40 +74,86 @@ export default function DataPanel({ obj, setObj, url }: Props) {
7374
>
7475
{value}
7576
</SyntaxHighlighter>
76-
: <p className="text-white">{value}</p>
77+
: typeof value === "object" ?
78+
<JSONTree
79+
data={Object.fromEntries(Object.entries(value).filter(([k]) => !excludedProperties.includes(k)))}
80+
theme={{
81+
base00: '#343434', // background
82+
base01: '#000000',
83+
base02: '#CE9178',
84+
base03: '#CE9178', // open values
85+
base04: '#CE9178',
86+
base05: '#CE9178',
87+
base06: '#CE9178',
88+
base07: '#CE9178',
89+
base08: '#CE9178',
90+
base09: '#b5cea8', // numbers
91+
base0A: '#CE9178',
92+
base0B: '#CE9178', // close values
93+
base0C: '#CE9178',
94+
base0D: '#99E4E5', // * keys
95+
base0E: '#ae81ff',
96+
base0F: '#cc6633'
97+
}}
98+
valueRenderer={(valueAsString, value, keyPath) => {
99+
if (keyPath === "src") {
100+
return <SyntaxHighlighter
101+
language="python"
102+
style={{
103+
...dark,
104+
hljs: {
105+
...dark.hljs,
106+
maxHeight: `9rem`,
107+
background: '#343434',
108+
padding: 2,
109+
}
110+
}}
111+
>
112+
{value as string}
113+
</SyntaxHighlighter>
114+
}
115+
return <span className="text-white">{value as string}</span>
116+
}}
117+
/>
118+
: <span className="text-white">{value}</span>
77119
}
78120
</div>
79121
))
80122
}
81123
</main>
82124
<footer className="bg-[#191919] flex items-center justify-between p-4">
83-
<button
84-
className="flex items-center gap-2 p-2"
85-
title="Copy src to clipboard"
86-
onClick={() => navigator.clipboard.writeText(obj.src || "")}
87-
>
88-
<Copy color="white" />
89-
Copy
90-
</button>
91-
<a
92-
className="flex items-center gap-2 p-2"
93-
href={url}
94-
target="_blank"
95-
title="Go to repo"
96-
onClick={() => {
97-
const newTab = window.open(url, '_blank');
125+
{
126+
"category" in obj &&
127+
<>
128+
<button
129+
className="flex items-center gap-2 p-2"
130+
title="Copy src to clipboard"
131+
onClick={() => navigator.clipboard.writeText(obj.src || "")}
132+
>
133+
<Copy color="white" />
134+
Copy
135+
</button>
136+
<a
137+
className="flex items-center gap-2 p-2"
138+
href={url}
139+
target="_blank"
140+
title="Go to repo"
141+
onClick={() => {
142+
const newTab = window.open(url, '_blank');
98143

99-
if (!obj.src_start || !obj.src_end || !newTab) return
144+
if (!obj.src_start || !obj.src_end || !newTab) return
100145

101-
newTab.scroll({
102-
top: obj.src_start,
103-
behavior: 'smooth'
104-
})
105-
}}
106-
>
107-
<SquareArrowOutUpRight color="white" />
108-
Go to repo
109-
</a>
146+
newTab.scroll({
147+
top: obj.src_start,
148+
behavior: 'smooth'
149+
})
150+
}}
151+
>
152+
<SquareArrowOutUpRight color="white" />
153+
Go to repo
154+
</a>
155+
</>
156+
}
110157
</footer>
111158
</div>
112159
)

‎app/components/elementMenu.tsx‎

Lines changed: 48 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
"use client"
22

33
import { Dispatch, RefObject, SetStateAction, useEffect, useState } from "react";
4-
import { Node } from "./model";
4+
import { Link, Node } from "./model";
55
import { ChevronsLeftRight, Copy, EyeOff, Globe, Maximize2, Minimize2, Waypoints } from "lucide-react";
66
import DataPanel from "./dataPanel";
77
import { Path } from "../page";
88
import { Position } from "./graphView";
99

1010
interface Props {
11-
obj: Node | undefined;
11+
obj: Node | Link | undefined;
1212
objects: Node[];
1313
setPath: Dispatch<SetStateAction<Path | undefined>>;
1414
handleRemove: (nodes: number[]) => void;
@@ -20,7 +20,7 @@ interface Props {
2020

2121

2222
export default function ElementMenu({ obj, objects, setPath, handleRemove, position, url, handleExpand, parentRef }: Props) {
23-
const [currentObj, setCurrentObj] = useState<Node>();
23+
const [currentObj, setCurrentObj] = useState<Node | Link>();
2424
const [containerWidth, setContainerWidth] = useState(0);
2525

2626
useEffect(() => {
@@ -81,50 +81,65 @@ export default function ElementMenu({ obj, objects, setPath, handleRemove, posit
8181
</button>
8282
</>
8383
: <>
84-
<button
85-
className="p-2"
86-
title="Copy src to clipboard"
87-
onClick={() => navigator.clipboard.writeText(obj.src || "")}
88-
>
89-
<Copy color="white" />
90-
</button>
84+
{
85+
"category" in obj &&
86+
<>
87+
<button
88+
className="p-2"
89+
title="Copy src to clipboard"
90+
onClick={() => navigator.clipboard.writeText(obj.src || "")}
91+
>
92+
<Copy color="white" />
93+
</button>
94+
</>
95+
}
9196
<button
9297
className="p-2"
9398
title="Remove"
9499
onClick={() => handleRemove([obj.id])}
95100
>
96101
<EyeOff color="white" />
97102
</button>
98-
<a
99-
className="p-2"
100-
href={objURL}
101-
target="_blank"
102-
title="Go to repo"
103-
onClick={() => {
104-
window.open(objURL, '_blank');
105-
}}
106-
>
107-
<Globe color="white" />
108-
</a>
103+
{
104+
"category" in obj &&
105+
<>
106+
<a
107+
className="p-2"
108+
href={objURL}
109+
target="_blank"
110+
title="Go to repo"
111+
onClick={() => {
112+
window.open(objURL, '_blank');
113+
}}
114+
>
115+
<Globe color="white" />
116+
</a>
117+
</>
118+
}
109119
<button
110120
className="flex p-2"
111121
title="View Node"
112122
onClick={() => setCurrentObj(obj)}
113123
>
114124
<ChevronsLeftRight color="white" />
115125
</button>
116-
<button
117-
className="p-2"
118-
onClick={() => handleExpand([obj], true)}
119-
>
120-
<Maximize2 color="white" />
121-
</button>
122-
<button
123-
className="p-2"
124-
onClick={() => handleExpand([obj], false)}
125-
>
126-
<Minimize2 color="white" />
127-
</button>
126+
{
127+
"category" in obj &&
128+
<>
129+
<button
130+
className="p-2"
131+
onClick={() => handleExpand([obj as Node], true)}
132+
>
133+
<Maximize2 color="white" />
134+
</button>
135+
<button
136+
className="p-2"
137+
onClick={() => handleExpand([obj as Node], false)}
138+
>
139+
<Minimize2 color="white" />
140+
</button>
141+
</>
142+
}
128143
</>
129144
}
130145
</div>

‎app/components/graphView.tsx‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,8 @@ interface Props {
1515
setData: Dispatch<SetStateAction<GraphData>>
1616
graph: Graph
1717
chartRef: RefObject<any>
18-
selectedObj: Node | undefined
19-
setSelectedObj: Dispatch<SetStateAction<Node | undefined>>
18+
selectedObj: Node | Link | undefined
19+
setSelectedObj: Dispatch<SetStateAction<Node | Link | undefined>>
2020
selectedObjects: Node[]
2121
setSelectedObjects: Dispatch<SetStateAction<Node[]>>
2222
setPosition: Dispatch<SetStateAction<Position | undefined>>
@@ -102,13 +102,13 @@ export default function GraphView({
102102
setSelectedObjects([])
103103
}
104104

105-
const handleNodeRightClick = (node: Node, evt: MouseEvent) => {
106-
if (evt.ctrlKey) {
105+
const handleRightClick = (node: Node | Link, evt: MouseEvent) => {
106+
if (evt.ctrlKey && "category" in node) {
107107
if (selectedObjects.some(obj => obj.id === node.id)) {
108108
setSelectedObjects(selectedObjects.filter(obj => obj.id !== node.id))
109109
return
110110
} else {
111-
setSelectedObjects([...selectedObjects, node])
111+
setSelectedObjects([...selectedObjects, node as Node])
112112
}
113113
} else {
114114
setSelectedObjects([])
@@ -291,7 +291,8 @@ export default function GraphView({
291291
onNodeDragEnd={(n, translate) => setPosition(prev => {
292292
return prev && { x: prev.x + translate.x * chartRef.current.zoom(), y: prev.y + translate.y * chartRef.current.zoom() }
293293
})}
294-
onNodeRightClick={handleNodeRightClick}
294+
onNodeRightClick={handleRightClick}
295+
onLinkRightClick={handleRightClick}
295296
onLinkClick={handleLinkClick}
296297
onBackgroundRightClick={unsetSelectedObjects}
297298
onBackgroundClick={unsetSelectedObjects}

‎app/components/model.ts‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,8 +30,6 @@ export type Link = LinkObject<Node, {
3030
target: Node,
3131
label: string,
3232
visible: boolean,
33-
expand: boolean,
34-
collapsed: boolean,
3533
isPathSelected: boolean,
3634
isPath: boolean,
3735
curve: number,

0 commit comments

Comments
 (0)