Merge pull request #29 from DiamondLightSource/synoptic-page-banner

Synoptic page banner fix and rename MainPage to SynopticPage

Author: tomkane-dls

src/App.tsx

@@ -5,7 +5,7 @@ import { Provider } from "react-redux";
 import { ThemeProvider } from "@mui/material/styles";
 import { diamondTheme } from "./theme";
 import { DemoPage } from "./routes/DemoPage";
-import { MainPage } from "./routes/MainPage";
+import { SynopticPage } from "./routes/SynopticPage";
 import { EditorPage } from "./routes/EditorPage";
 import { LandingPage } from "./routes/LandingPage";
 import { DataBrowserPage } from "./routes/DataBrowserPage";
@@ -73,11 +73,11 @@ function App({}) {
                 <Route path="/demo" element={<DemoPage />} />
                 <Route path="/data-browser" element={<DataBrowserPage />} />
                 <Route path="/editor" element={<EditorPage />} />
-                <Route path="/synoptic" element={<MainPage />} />
-                <Route path="/synoptic/:beamline" element={<MainPage />} />
+                <Route path="/synoptic" element={<SynopticPage />} />
+                <Route path="/synoptic/:beamline" element={<SynopticPage />} />
                 <Route
                   path="/synoptic/:beamline/:screenUrlId"
-                  element={<MainPage />}
+                  element={<SynopticPage />}
                 />
                 <Route path="/" element={<LandingPage />} />
               </Routes>

src/components/MenuBar.tsx

@@ -11,7 +11,7 @@ import BeamlineSelect from "./BeamlineSelect";
 import ScreenTreeView from "./ScreenTreeView";
 import { useContext } from "react";
 import { DRAWER_WIDTH } from "../utils/helper";
-import { MenuContext } from "../routes/MainPage";
+import { MenuContext } from "../routes/SynopticPage";
 
 const openedMixin = (theme: Theme): CSSObject => ({
   width: DRAWER_WIDTH,

src/components/ScreenDisplay.tsx

@@ -17,7 +17,7 @@ import {
   APP_BAR_HEIGHT
 } from "../utils/helper";
 import { BeamlineTreeStateContext } from "../App";
-import { MenuContext } from "../routes/MainPage";
+import { MenuContext } from "../routes/SynopticPage";
 import { useLocation, useNavigate } from "react-router-dom";
 
 interface PaperProps extends MuiPaperProps {

src/components/ScreenTreeView.tsx

@@ -3,7 +3,7 @@ import { useContext, useEffect, useMemo, useState } from "react";
 import { TreeViewBaseItem, TreeViewItemId } from "@mui/x-tree-view";
 import { FileContext } from "@diamondlightsource/cs-web-lib";
 import { BeamlineTreeStateContext } from "../App";
-import { MenuContext } from "../routes/MainPage";
+import { MenuContext } from "../routes/SynopticPage";
 import { executeOpenPageActionWithFileGuid } from "../utils/csWebLibActions";
 
 export default function ScreenTreeView() {

src/routes/MainPage.tsx src/routes/SynopticPage.tsxsrc/routes/MainPage.tsx renamed to src/routes/SynopticPage.tsx

@@ -24,11 +24,11 @@ export const MenuContext = createContext<{
   setMenuOpen: any;
 }>({ menuOpen: true, setMenuOpen: () => null });
 
-export function MainPage() {
+export function SynopticPage() {
   const { state, dispatch } = useContext(BeamlineTreeStateContext);
   const params: { beamline?: string; screenUrlId?: string } = useParams();
   const fileContext = useContext(FileContext);
-  const [menuOpen, setMenuOpen] = useState(false);
+  const [menuOpen, setMenuOpen] = useState(true);
 
   useEffect(() => {
     // Only trigger once