fix DataControls in the bottom of the leftSideBar (#125)

* fixed DataControls in the bottom of the leftSideBar, the rest is still scrollable * lint fixes
royerlab · Oct 8, 2024 · 91ca28f · 91ca28f
1 parent 09a5793
commit 91ca28f
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 7 deletions.
diff --git a/src/components/App.tsx b/src/components/App.tsx
@@ -332,7 +332,15 @@ export default function App() {
                         {brandingLogoPath && brandingName && <Divider orientation="vertical" flexItem />}
                         {brandingName && <h2>{brandingName}</h2>}{" "}
                     </Box>
-                    <Box flexGrow={0} padding="2em">
+
+                    {/* Scrollable section for other controls */}
+                    <Box
+                        sx={{
+                            flexGrow: 1, // CHANGED: Allows the middle section to expand
+                            overflowY: "auto", // CHANGED: Makes this section scrollable
+                            padding: "2em",
+                        }}
+                    >
                         <CellControls
                             clearTracks={() => {
                                 dispatchCanvas({ type: ActionType.REMOVE_ALL_TRACKS });
@@ -354,9 +362,7 @@ export default function App() {
                                 dispatchCanvas({ type: ActionType.SELECTION_MODE, selectionMode: value });
                             }}
                         />
-                    </Box>
-                    <Divider />
-                    <Box flexGrow={4} padding="2em">
+                        <Divider sx={{ marginY: "1em" }} />
                         <LeftSidebarWrapper
                             hasTracks={numSelectedCells > 0}
                             trackManager={trackManager}
@@ -380,7 +386,15 @@ export default function App() {
                         />
                     </Box>
                     <Divider />
-                    <Box flexGrow={0} padding="1em">
+                    <Box
+                        sx={{
+                            flexGrow: 0,
+                            padding: "1em",
+                            position: "sticky",
+                            bottom: 0,
+                            backgroundColor: "#fff",
+                        }}
+                    >
                         <DataControls
                             dataUrl={dataUrl}
                             initialDataUrl={initialViewerState.dataUrl}

diff --git a/src/components/CellControls.tsx b/src/components/CellControls.tsx
@@ -67,7 +67,7 @@ export default function CellControls(props: CellControlsProps) {
                         min={0.05}
                         max={1}
                         step={0.01}
-                        valueLabelDisplay="on"
+                        valueLabelDisplay="off"
                         valueLabelFormat={(value) => `${value}`}
                         onChange={(_, value) => {
                             props.setPointSize(value as number);

diff --git a/src/components/leftSidebar/ControlInstructions.tsx b/src/components/leftSidebar/ControlInstructions.tsx
@@ -38,7 +38,7 @@ export default function ControlInstructions(props: ControlInstructionsProps) {
             break;
     }
     return (
-        <Callout title="Select Cells" intent="info" sx={{ width: "auto" }}>
+        <Callout intent="info" sx={{ width: "auto" }}>
             {instructionText}
         </Callout>
     );