Skip to content

Commit 3247592

Browse files
get4floget4flo
authored
Merge pull request #209 from amosproj/fix-final-stabilization-and-optimization-+-save-the-graph-into-local-storage
fix final stabilization and optimization + also save the current grap…
2 parents 354290f + 62c3041 commit 3247592

File tree

6 files changed

+406
-140
lines changed

6 files changed

+406
-140
lines changed

‎Project/frontend/src/components/Graph_page/FloatingControlCard.tsx‎

Lines changed: 23 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ const FloatingControlCard = ({
2828
handlePhysicsChange: (name: string, value: any) => void,
2929
restartStabilization: () => void,
3030
}) => {
31-
const handleSliderChange = (name: string) => (event, value: any) => {
31+
const handleSliderChange = (name: string) => (event: any, value: any) => {
3232
handlePhysicsChange(name, value);
3333
restartStabilization();
3434
};
@@ -40,31 +40,31 @@ const FloatingControlCard = ({
4040
<Box>
4141
<SliderControl
4242
label="Gravitational Constant"
43-
value={physicsOptions.gravitationalConstant}
43+
value={physicsOptions.gravitationalConstant ?? -2000}
4444
min={-30000}
4545
max={0}
4646
step={1000}
4747
onChange={handleSliderChange('gravitationalConstant')}
4848
/>
4949
<SliderControl
5050
label="Spring Length"
51-
value={physicsOptions.springLength}
51+
value={physicsOptions.springLength ?? 100}
5252
min={50}
5353
max={300}
5454
step={10}
5555
onChange={handleSliderChange('springLength')}
5656
/>
5757
<SliderControl
5858
label="Spring Constant"
59-
value={physicsOptions.springConstant}
59+
value={physicsOptions.springConstant ?? 0.04}
6060
min={0.01}
6161
max={0.5}
6262
step={0.01}
6363
onChange={handleSliderChange('springConstant')}
6464
/>
6565
<SliderControl
6666
label="Damping"
67-
value={physicsOptions.damping}
67+
value={physicsOptions.damping ?? 0.09}
6868
min={0.01}
6969
max={1}
7070
step={0.01}
@@ -77,31 +77,31 @@ const FloatingControlCard = ({
7777
<Box>
7878
<SliderControl
7979
label="Gravitational Constant"
80-
value={physicsOptions.gravitationalConstant}
80+
value={physicsOptions.gravitationalConstant ?? -50}
8181
min={-200}
8282
max={0}
8383
step={10}
8484
onChange={handleSliderChange('gravitationalConstant')}
8585
/>
8686
<SliderControl
8787
label="Spring Length"
88-
value={physicsOptions.springLength}
88+
value={physicsOptions.springLength ?? 100}
8989
min={50}
9090
max={300}
9191
step={10}
9292
onChange={handleSliderChange('springLength')}
9393
/>
9494
<SliderControl
9595
label="Spring Constant"
96-
value={physicsOptions.springConstant}
96+
value={physicsOptions.springConstant ?? 0.08}
9797
min={0.01}
9898
max={0.5}
9999
step={0.01}
100100
onChange={handleSliderChange('springConstant')}
101101
/>
102102
<SliderControl
103103
label="Damping"
104-
value={physicsOptions.damping}
104+
value={physicsOptions.damping ?? 0.4}
105105
min={0.01}
106106
max={1}
107107
step={0.01}
@@ -114,23 +114,23 @@ const FloatingControlCard = ({
114114
<Box>
115115
<SliderControl
116116
label="Level Separation"
117-
value={physicsOptions.levelSeparation}
117+
value={physicsOptions.levelSeparation ?? 150}
118118
min={50}
119119
max={500}
120120
step={10}
121121
onChange={handleSliderChange('levelSeparation')}
122122
/>
123123
<SliderControl
124124
label="Node Spacing"
125-
value={physicsOptions.nodeSpacing}
125+
value={physicsOptions.nodeSpacing ?? 100}
126126
min={50}
127127
max={200}
128128
step={10}
129129
onChange={handleSliderChange('nodeSpacing')}
130130
/>
131131
<SliderControl
132132
label="Tree Spacing"
133-
value={physicsOptions.treeSpacing}
133+
value={physicsOptions.treeSpacing ?? 200}
134134
min={50}
135135
max={500}
136136
step={10}
@@ -163,7 +163,7 @@ const FloatingControlCard = ({
163163
<FormControl fullWidth margin="normal">
164164
<InputLabel>Direction</InputLabel>
165165
<Select
166-
value={physicsOptions.direction}
166+
value={physicsOptions.direction ?? 'UD'}
167167
onChange={(e) => {
168168
handlePhysicsChange('direction', e.target.value);
169169
restartStabilization();
@@ -178,7 +178,7 @@ const FloatingControlCard = ({
178178
<FormControl fullWidth margin="normal">
179179
<InputLabel>Sort Method</InputLabel>
180180
<Select
181-
value={physicsOptions.sortMethod}
181+
value={physicsOptions.sortMethod ?? 'hubsize'}
182182
onChange={(e) => {
183183
handlePhysicsChange('sortMethod', e.target.value);
184184
restartStabilization();
@@ -191,7 +191,7 @@ const FloatingControlCard = ({
191191
<FormControl fullWidth margin="normal">
192192
<InputLabel>Shake Towards</InputLabel>
193193
<Select
194-
value={physicsOptions.shakeTowards}
194+
value={physicsOptions.shakeTowards ?? 'roots'}
195195
onChange={(e) => {
196196
handlePhysicsChange('shakeTowards', e.target.value);
197197
restartStabilization();
@@ -208,39 +208,39 @@ const FloatingControlCard = ({
208208
<Box>
209209
<SliderControl
210210
label="Node Distance"
211-
value={physicsOptions.nodeDistance}
211+
value={physicsOptions.nodeDistance ?? 100}
212212
min={50}
213213
max={500}
214214
step={10}
215215
onChange={handleSliderChange('nodeDistance')}
216216
/>
217217
<SliderControl
218218
label="Central Gravity"
219-
value={physicsOptions.centralGravity}
219+
value={physicsOptions.centralGravity ?? 0.2}
220220
min={0}
221221
max={1}
222222
step={0.01}
223223
onChange={handleSliderChange('centralGravity')}
224224
/>
225225
<SliderControl
226226
label="Spring Length"
227-
value={physicsOptions.springLength}
227+
value={physicsOptions.springLength ?? 200}
228228
min={50}
229229
max={300}
230230
step={10}
231231
onChange={handleSliderChange('springLength')}
232232
/>
233233
<SliderControl
234234
label="Spring Constant"
235-
value={physicsOptions.springConstant}
235+
value={physicsOptions.springConstant ?? 0.05}
236236
min={0.01}
237237
max={0.5}
238238
step={0.01}
239239
onChange={handleSliderChange('springConstant')}
240240
/>
241241
<SliderControl
242242
label="Damping"
243-
value={physicsOptions.damping}
243+
value={physicsOptions.damping ?? 0.09}
244244
min={0.01}
245245
max={1}
246246
step={0.01}
@@ -260,7 +260,6 @@ const FloatingControlCard = ({
260260
bottom: '16px',
261261
right: '46px',
262262
width: '300px',
263-
// background: '#121826',
264263
color: '#fff',
265264
zIndex: 1000,
266265
}}
@@ -285,20 +284,16 @@ const FloatingControlCard = ({
285284
style={{ color: '#fff' }}
286285
>
287286
<MenuItem value="barnesHut">Barnes Hut</MenuItem>
288-
<MenuItem value="forceAtlas2Based">
289-
Force Atlas 2 Based
290-
</MenuItem>
291-
<MenuItem value="hierarchicalRepulsion">
292-
Hierarchical Repulsion
293-
</MenuItem>
287+
<MenuItem value="forceAtlas2Based">Force Atlas 2 Based</MenuItem>
288+
<MenuItem value="hierarchicalRepulsion">Hierarchical Repulsion</MenuItem>
294289
<MenuItem value="repulsion">Repulsion</MenuItem>
295290
<MenuItem value="hierarchical">Hierarchical</MenuItem>
296291
</Select>
297292
</FormControl>
298293
{renderSliders()}
299294
<SliderControl
300295
label="Stabilization Iterations"
301-
value={physicsOptions.iterations}
296+
value={physicsOptions.iterations ?? 1000}
302297
min={0}
303298
max={5000}
304299
step={100}

‎Project/frontend/src/components/Graph_page/GraphInfoPanel.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -57,13 +57,12 @@ const GraphInfoPanel: React.FC<GraphInfoPanelProps> = ({
5757
searchIsLoading,
5858
fileId,
5959
}) => {
60-
6160
const formatdateTime = () => {
6261
const options: Intl.DateTimeFormatOptions = { year: 'numeric', month: 'numeric', day: 'numeric', hour: 'numeric', minute: 'numeric' };
6362
const date = new Date(graphData.graph_created_at).toLocaleDateString('UTC', options);
6463
return date;
6564
}
66-
65+
6766
return (
6867
<Drawer
6968
sx={{
@@ -78,7 +77,7 @@ const GraphInfoPanel: React.FC<GraphInfoPanelProps> = ({
7877
variant="persistent"
7978
anchor="left"
8079
open={open}
81-
>
80+
>
8281
<Box sx={{ overflow: 'auto', padding: 2 }}>
8382
<IconButton onClick={toggleDrawer}>
8483
{open ? <ChevronLeftIcon /> : <ChevronRightIcon />}
@@ -177,4 +176,5 @@ const GraphInfoPanel: React.FC<GraphInfoPanelProps> = ({
177176
);
178177
};
179178

180-
export default GraphInfoPanel;
179+
export default GraphInfoPanel;
180+

‎Project/frontend/src/components/Graph_page/GraphVisualization.tsx‎

Lines changed: 53 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,8 @@ interface GraphData {
3434
label?: string;
3535
topic: string;
3636
pages: string;
37+
x?: number;
38+
y?: number;
3739
[key: string]: any;
3840
}>;
3941
edges: Array<{ source: string; target: string; [key: string]: any }>;
@@ -144,7 +146,9 @@ const GraphVisualization: React.FC = () => {
144146
useEffect(() => {
145147
const fetchGraphData = async () => {
146148
if (sessionStorage.getItem(fileId)) {
147-
setGraphData(JSON.parse(sessionStorage.getItem(fileId) as string));
149+
const savedGraphData = JSON.parse(sessionStorage.getItem(fileId) as string);
150+
setGraphData(savedGraphData);
151+
setStabilizationComplete(true); // Assume layout was previously stabilized
148152
setIsLoading(false);
149153
} else {
150154
try {
@@ -161,6 +165,7 @@ const GraphVisualization: React.FC = () => {
161165
}
162166
}
163167
};
168+
164169
const fetchKeywords = async () => {
165170
try {
166171
const response = await fetch(
@@ -279,47 +284,50 @@ const GraphVisualization: React.FC = () => {
279284
edge="start"
280285
onClick={toggleDrawer}
281286
sx={{ position: 'absolute', left: 0, top: '64px', zIndex: 1300 }}
282-
>
283-
<ChevronRightIcon />
284-
</IconButton>
285-
)}
286-
<Main open={drawerOpen}>
287-
<DrawerHeader />
288-
<Card
289-
sx={{
290-
height: '95%',
291-
background: '#121826',
292-
width: '100%',
293-
overflow: 'hidden',
294-
padding: '5px',
295-
boxSizing: 'border-box',
296-
margin: '0',
297-
position: 'relative',
298-
}}
299-
>
300-
<CardContent sx={{ height: '102%', padding: 0 }}>
301-
{graphData && !isStabilizingRef.current && (
302-
<VisGraph
303-
graphData={graphData}
304-
options={options}
305-
setStabilizationComplete={setStabilizationComplete}
306-
topicColorMap={topicColorMap}
307-
isStabilizingRef={isStabilizingRef}
308-
/>
309-
)}
310-
<Legend topicColorMap={topicColorMap} />
311-
</CardContent>
312-
</Card>
313-
</Main>
314-
<FloatingControlCard
315-
layout={layout}
316-
setLayout={setLayout}
317-
physicsOptions={physicsOptions}
318-
handlePhysicsChange={handlePhysicsChange}
319-
restartStabilization={() => setStabilizationComplete(false)}
320-
/>
321-
</Box>
322-
);
323-
};
324-
325-
export default GraphVisualization;
287+
>
288+
<ChevronRightIcon />
289+
</IconButton>
290+
)}
291+
<Main open={drawerOpen}>
292+
<DrawerHeader />
293+
<Card
294+
sx={{
295+
height: '95%',
296+
background: '#121826',
297+
width: '100%',
298+
overflow: 'hidden',
299+
padding: '5px',
300+
boxSizing: 'border-box',
301+
margin: '0',
302+
position: 'relative',
303+
}}
304+
>
305+
<CardContent sx={{ height: '102%', padding: 0 }}>
306+
{graphData && (
307+
<VisGraph
308+
graphData={graphData}
309+
options={options}
310+
setStabilizationComplete={setStabilizationComplete}
311+
stabilizationComplete={stabilizationComplete}
312+
setGraphData={setGraphData}
313+
topicColorMap={topicColorMap}
314+
isStabilizingRef={isStabilizingRef}
315+
fileId={fileId} // Pass the fileId to the VisGraph component
316+
/>
317+
)}
318+
<Legend topicColorMap={topicColorMap} />
319+
</CardContent>
320+
</Card>
321+
</Main>
322+
<FloatingControlCard
323+
layout={layout}
324+
setLayout={setLayout}
325+
physicsOptions={physicsOptions}
326+
handlePhysicsChange={handlePhysicsChange}
327+
restartStabilization={() => setStabilizationComplete(false)}
328+
/>
329+
</Box>
330+
);
331+
};
332+
333+
export default GraphVisualization;

0 commit comments

Comments
 (0)