Skip to content

Commit 571259a

Browse files
RemDelaporteMathurinRemDelaporteMathurin
authored
Merge pull request #167 from festim-dev/improve-sidebar
Improve sidebar
2 parents 4d5167c + 34beba2 commit 571259a

File tree

5 files changed

+293
-229
lines changed

5 files changed

+293
-229
lines changed

‎src/App.jsx‎

Lines changed: 115 additions & 142 deletions
Original file line numberDiff line numberDiff line change
@@ -1063,164 +1063,137 @@ const DnDFlow = () => {
10631063
{/* Graph Editor Tab */}
10641064
{activeTab === 'graph' && (
10651065
<div style={{ display: 'flex', flex: 1, height: 'calc(100vh - 50px)', overflow: 'hidden' }}>
1066-
{/* Sidebar Toggle Button */}
1067-
<button
1068-
onClick={() => setSidebarVisible(!sidebarVisible)}
1066+
{/* Sidebar */}
1067+
<div
1068+
data-sidebar-state={sidebarVisible ? 'expanded' : 'collapsed'}
1069+
className="sidebar-container"
10691070
style={{
1070-
position: 'absolute',
1071-
top: '60px',
1072-
left: sidebarVisible ? '240px' : '10px',
1073-
zIndex: 1000,
1074-
backgroundColor: '#2c2c54',
1075-
color: '#ffffff',
1076-
border: '1px solid #555',
1077-
borderRadius: '4px',
1078-
width: '32px',
1079-
height: '32px',
1080-
cursor: 'pointer',
1081-
display: 'flex',
1082-
alignItems: 'center',
1083-
justifyContent: 'center',
1084-
transition: 'left 0.3s ease',
1085-
boxShadow: '0 2px 4px rgba(0,0,0,0.3)',
1086-
padding: '4px'
1087-
}}
1088-
onMouseEnter={(e) => {
1089-
e.target.style.backgroundColor = '#3c3c64';
1090-
e.target.style.borderColor = '#78A083';
1091-
}}
1092-
onMouseLeave={(e) => {
1093-
e.target.style.backgroundColor = '#2c2c54';
1094-
e.target.style.borderColor = '#555';
1071+
position: 'relative',
1072+
width: sidebarVisible ? '250px' : '0px',
1073+
height: '100%',
1074+
transition: 'width 0.5s ease',
1075+
overflow: 'hidden'
10951076
}}
1096-
title={sidebarVisible ? 'Hide Sidebar' : 'Show Sidebar'}
10971077
>
1098-
<svg
1099-
width="20"
1100-
height="20"
1101-
viewBox="0 0 24 24"
1102-
fill="none"
1103-
xmlns="http://www.w3.org/2000/svg"
1078+
<div
1079+
style={{
1080+
position: 'fixed',
1081+
left: sidebarVisible ? '0px' : '-250px',
1082+
top: '50px', // Account for top bar height
1083+
width: '250px',
1084+
height: 'calc(100vh - 50px)',
1085+
transition: 'left 0.5s ease',
1086+
zIndex: 10,
1087+
borderRight: '1px solid #ccc',
1088+
backgroundColor: '#1e1e2f'
1089+
}}
11041090
>
1105-
{sidebarVisible ? (
1106-
// Hide sidebar icon (sidebar with left arrow)
1107-
<>
1108-
<rect x="2" y="3" width="6" height="18" rx="1" fill="currentColor" opacity="0.3" />
1109-
<rect x="10" y="3" width="12" height="18" rx="1" stroke="currentColor" strokeWidth="1.5" fill="none" />
1110-
<path d="M6 12L4 10M6 12L4 14M6 12H1" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
1111-
</>
1112-
) : (
1113-
// Show sidebar icon (sidebar with right arrow)
1114-
<>
1115-
<rect x="2" y="3" width="6" height="18" rx="1" stroke="currentColor" strokeWidth="1.5" fill="none" />
1116-
<rect x="10" y="3" width="12" height="18" rx="1" stroke="currentColor" strokeWidth="1.5" fill="none" />
1117-
<path d="M5 12L7 10M5 12L7 14M5 12H10" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
1118-
</>
1119-
)}
1120-
</svg>
1121-
</button>
1122-
1123-
{/* Sidebar */}
1124-
{sidebarVisible && (
1125-
<div style={{
1126-
width: 250,
1127-
height: '100%',
1128-
borderRight: '1px solid #ccc',
1129-
transition: 'width 0.3s ease'
1130-
}}>
11311091
<Sidebar />
11321092
</div>
1133-
)}
1134-
1135-
<GraphView
1136-
refEl={ref}
1137-
reactFlowWrapperRef={reactFlowWrapper}
1138-
nodes={nodes}
1139-
edges={edges}
1140-
onNodesChange={onNodesChange}
1141-
onEdgesChange={onEdgesChange}
1142-
onConnect={onConnect}
1143-
onNodeClick={onNodeClick}
1144-
onEdgeClick={onEdgeClick}
1145-
onPaneClick={onPaneClick}
1146-
onNodeContextMenu={onNodeContextMenu}
1147-
nodeTypes={nodeTypes}
1148-
onDrop={onDrop}
1149-
onDragStart={onDragStart}
1150-
onDragOver={onDragOver}
1151-
menu={menu}
1152-
duplicateNode={duplicateNode}
1153-
copyFeedback={copyFeedback}
1154-
ui={{
1155-
selectedNode, selectedEdge,
1156-
deleteSelectedNode, deleteSelectedEdge,
1157-
saveGraph, loadGraph, resetGraph, saveToPython, runPathsim,
1158-
shareGraphURL,
1159-
dockOpen, setDockOpen, onToggleLogs,
1160-
showKeyboardShortcuts, setShowKeyboardShortcuts,
1161-
}}
1162-
/>
1163-
{/* Log Dock */}
1164-
<LogDock
1165-
open={dockOpen}
1166-
onClose={() => setDockOpen(false)}
1167-
lines={logLines}
1168-
progress={null}
1169-
/>
1170-
{/* Node Sidebar */}
1171-
<NodeSidebar
1172-
selectedNode={selectedNode}
1173-
defaultValues={defaultValues}
1174-
setNodes={setNodes}
1175-
setSelectedNode={setSelectedNode}
1176-
isEditingLabel={isEditingLabel}
1177-
setIsEditingLabel={setIsEditingLabel}
1178-
tempLabel={tempLabel}
1179-
setTempLabel={setTempLabel}
1180-
nodeDocumentation={nodeDocumentation}
1181-
isDocumentationExpanded={isDocumentationExpanded}
1182-
setIsDocumentationExpanded={setIsDocumentationExpanded}
1183-
/>
1184-
{/* Edge Details */}
1185-
<EdgeDetails
1186-
selectedEdge={selectedEdge}
1187-
onClose={() => setSelectedEdge(null)}
1188-
onDelete={deleteSelectedEdge}
1189-
/>
1093+
</div>
1094+
1095+
{/* Main content area that moves with sidebar */}
1096+
<div style={{ position: 'relative', flex: 1, height: '100%' }}>
1097+
<GraphView
1098+
refEl={ref}
1099+
reactFlowWrapperRef={reactFlowWrapper}
1100+
nodes={nodes}
1101+
edges={edges}
1102+
onNodesChange={onNodesChange}
1103+
onEdgesChange={onEdgesChange}
1104+
onConnect={onConnect}
1105+
onNodeClick={onNodeClick}
1106+
onEdgeClick={onEdgeClick}
1107+
onPaneClick={onPaneClick}
1108+
onNodeContextMenu={onNodeContextMenu}
1109+
nodeTypes={nodeTypes}
1110+
onDrop={onDrop}
1111+
onDragStart={onDragStart}
1112+
onDragOver={onDragOver}
1113+
menu={menu}
1114+
duplicateNode={duplicateNode}
1115+
copyFeedback={copyFeedback}
1116+
ui={{
1117+
selectedNode, selectedEdge,
1118+
deleteSelectedNode, deleteSelectedEdge,
1119+
saveGraph, loadGraph, resetGraph, saveToPython, runPathsim,
1120+
shareGraphURL,
1121+
dockOpen, setDockOpen, onToggleLogs,
1122+
showKeyboardShortcuts, setShowKeyboardShortcuts,
1123+
sidebarVisible, setSidebarVisible,
1124+
}}
1125+
/>
1126+
1127+
{/* Log Dock */}
1128+
<LogDock
1129+
open={dockOpen}
1130+
onClose={() => setDockOpen(false)}
1131+
lines={logLines}
1132+
progress={null}
1133+
/>
1134+
1135+
{/* Node Sidebar */}
1136+
<NodeSidebar
1137+
selectedNode={selectedNode}
1138+
defaultValues={defaultValues}
1139+
setNodes={setNodes}
1140+
setSelectedNode={setSelectedNode}
1141+
isEditingLabel={isEditingLabel}
1142+
setIsEditingLabel={setIsEditingLabel}
1143+
tempLabel={tempLabel}
1144+
setTempLabel={setTempLabel}
1145+
nodeDocumentation={nodeDocumentation}
1146+
isDocumentationExpanded={isDocumentationExpanded}
1147+
setIsDocumentationExpanded={setIsDocumentationExpanded}
1148+
/>
1149+
1150+
{/* Edge Details */}
1151+
<EdgeDetails
1152+
selectedEdge={selectedEdge}
1153+
onClose={() => setSelectedEdge(null)}
1154+
onDelete={deleteSelectedEdge}
1155+
/>
1156+
</div>
11901157
</div>
11911158
)}
11921159

11931160
{/* Events tab */}
11941161
{activeTab === 'events' && <EventsTab events={events} setEvents={setEvents} />}
11951162

11961163
{/* Solver Parameters Tab */}
1197-
{activeTab === 'solver' && (
1198-
<SolverPanel
1199-
solverParams={solverParams}
1200-
setSolverParams={setSolverParams}
1201-
setActiveTab={setActiveTab}
1202-
/>
1203-
)}
1164+
{
1165+
activeTab === 'solver' && (
1166+
<SolverPanel
1167+
solverParams={solverParams}
1168+
setSolverParams={setSolverParams}
1169+
setActiveTab={setActiveTab}
1170+
/>
1171+
)
1172+
}
12041173

12051174
{/* Global Variables Tab */}
1206-
{activeTab === 'globals' && (
1207-
<GlobalVariablesTab
1208-
globalVariables={globalVariables}
1209-
setGlobalVariables={setGlobalVariables}
1210-
setActiveTab={setActiveTab}
1211-
pythonCode={pythonCode}
1212-
setPythonCode={setPythonCode}
1213-
/>
1214-
)}
1175+
{
1176+
activeTab === 'globals' && (
1177+
<GlobalVariablesTab
1178+
globalVariables={globalVariables}
1179+
setGlobalVariables={setGlobalVariables}
1180+
setActiveTab={setActiveTab}
1181+
pythonCode={pythonCode}
1182+
setPythonCode={setPythonCode}
1183+
/>
1184+
)
1185+
}
12151186

12161187
{/* Results Tab */}
1217-
{activeTab === 'results' && (
1218-
<ResultsPanel
1219-
simulationResults={simulationResults}
1220-
downloadHtml={downloadHtml}
1221-
downloadCsv={downloadCsv}
1222-
/>
1223-
)}
1188+
{
1189+
activeTab === 'results' && (
1190+
<ResultsPanel
1191+
simulationResults={simulationResults}
1192+
downloadHtml={downloadHtml}
1193+
downloadCsv={downloadCsv}
1194+
/>
1195+
)
1196+
}
12241197

12251198
{/* Share URL Modal */}
12261199
<ShareModal
@@ -1230,7 +1203,7 @@ const DnDFlow = () => {
12301203
urlMetadata={urlMetadata}
12311204
/>
12321205

1233-
</div>
1206+
</div >
12341207
);
12351208
}
12361209

‎src/components/GraphView.jsx‎

Lines changed: 47 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,8 @@ function FloatingButtons({
5050
deleteSelectedNode, deleteSelectedEdge,
5151
saveGraph, loadGraph, resetGraph, saveToPython, runPathsim,
5252
shareGraphURL,
53-
dockOpen, onToggleLogs
53+
dockOpen, onToggleLogs,
54+
sidebarVisible, setSidebarVisible
5455
}) {
5556
return (
5657
<>
@@ -142,6 +143,51 @@ function FloatingButtons({
142143
>
143144
New graph
144145
</button>
146+
147+
{/* Sidebar Toggle Button - strudel-flow style */}
148+
<button
149+
onClick={() => setSidebarVisible(!sidebarVisible)}
150+
className="sidebar-trigger"
151+
style={{
152+
position: 'absolute',
153+
left: 15,
154+
top: 20,
155+
zIndex: 1000,
156+
width: '20px',
157+
height: '20px',
158+
backgroundColor: 'transparent',
159+
color: '#ffffff',
160+
border: 'none',
161+
borderRadius: '4px',
162+
cursor: 'pointer',
163+
display: 'flex',
164+
alignItems: 'center',
165+
justifyContent: 'center',
166+
// transition: 'all 0.2s ease',
167+
padding: '0'
168+
}}
169+
title="Toggle Sidebar"
170+
>
171+
{/* PanelLeft icon - similar to lucide-react */}
172+
<svg
173+
width="16"
174+
height="16"
175+
viewBox="0 0 24 24"
176+
fill="none"
177+
stroke="currentColor"
178+
strokeWidth="2"
179+
strokeLinecap="round"
180+
strokeLinejoin="round"
181+
style={{
182+
color: '#ffffff',
183+
transition: 'color 0.2s ease'
184+
}}
185+
>
186+
<rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
187+
<line x1="9" y1="3" x2="9" y2="21" />
188+
</svg>
189+
</button>
190+
145191
<button
146192
style={{
147193
position: 'absolute',

‎src/components/ShareModal.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -94,7 +94,7 @@ const ShareModal = ({ isOpen, onClose, shareableURL, urlMetadata }) => {
9494
<p style={{ margin: 0, color: '#666', fontSize: 14 }}>
9595
Copy this URL to share your workflow with others.
9696
</p>
97-
97+
9898
{/* URL Length Warning */}
9999
{isLongURL && (
100100
<div style={{

0 commit comments

Comments
 (0)