Starting work on adding screens to quick screen display

src/components/QuickScreenSettings.tsx

@@ -28,10 +28,13 @@ const Drawer = styled(MuiDrawer)(() => ({
   }
 }));
 
-export default function QuickScreenSettings() {
+interface Props {
+  onAdd: () => void;
+}
+
+export default function QuickScreenSettings({onAdd}: Props) {
   const theme = useTheme();
   const navigate = useNavigate();
-
   /**
    * Loads a new blank quick screen
    */
@@ -47,7 +50,7 @@ export default function QuickScreenSettings() {
    * Adds a new screen to the current view to draw components from
    */
   const onClickAdd = () => {
-    console.log("clicked add");
+    onAdd();
   };
 
   /**
@@ -80,7 +83,7 @@ export default function QuickScreenSettings() {
     },
     {
       name: "Add",
-      text: "Add a .bob file to the view",
+      text: "Open a screen to add to the current Quick Screen",
       icon: <LibraryAddIcon />,
       onClick: onClickAdd
     },

src/components/QuickScreens.tsx

@@ -11,22 +11,31 @@ import {
 import { useRef } from "react";
 import QuickScreenSettings from "./QuickScreenSettings";
 import { useLocation } from "react-router";
+import {useState} from "react";
+import SourcePanel from "./SourcePanel";
 
 const Paper = styled(MuiPaper)(({ theme }) => ({
   height: `calc(${useWindowHeight()}px - ${APP_BAR_HEIGHT}px - 50px)`,
   margin: `calc(${APP_BAR_HEIGHT}px + 15px) 5px 5px 5px`,
-  width: `calc(${useWindowWidth()}px - 10px - ${theme.spacing(7)} - 8px)`
+  width: `calc(${useWindowWidth()}px - 10px - ${theme.spacing(7)} - 8px)`,
+  overflow: "hidden"
 }));
 
 export default function QuickScreens() {
   const displayUuidRef = useRef<string>();
   const location = useLocation();
   const quickScreen = location.state?.pageState?.quickScreen;
+  const [showSourcePanel, setShowSourcePanel] = useState(false);
 
   return (
     <Paper elevation={12}>
-      <Box sx={{ display: "flex", height: "100%" }}>
-        <QuickScreenSettings />
+      <Box sx={{ display: "flex", height: "100%", overflow: "hidden" }}>
+        <QuickScreenSettings onAdd = {() => setShowSourcePanel(true)}/>
+        {showSourcePanel && (
+          <SourcePanel
+            onScreenSelected={() => {}}
+          />
+        )}
         {quickScreen ? (
           <DynamicPageWidget
             location={"quickScreen"}

src/components/ScreenTreeView.tsx

@@ -3,13 +3,15 @@ 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/SynopticPage";
 import { executeOpenPageActionWithFileGuid } from "../utils/csWebLibActions";
-import { FileIDs } from "../store";
+import { FileIDs, FileMetadata } from "../store";
 
-export default function ScreenTreeView() {
+interface ScreenTreeViewProps {
+  onScreenSelected?: (file: FileMetadata) => void;
+}
+
+export default function ScreenTreeView({onScreenSelected}: ScreenTreeViewProps) {
   const { state } = useContext(BeamlineTreeStateContext);
-  const { menuOpen } = useContext(MenuContext);
   const fileContext = useContext(FileContext);
   const [expandedScreens, setExpandedScreens] = useState<string[]>([]);
 
@@ -18,6 +20,22 @@ export default function ScreenTreeView() {
   };
 
   const handleClick = (itemId: string) => {
+    if (onScreenSelected) {
+        const metadata = currentFileMetadata[itemId];
+
+        if (!metadata || metadata.exists === false) {
+            console.warn(`No metadata found for itemId: ${itemId}`);
+            return;
+        }
+
+        if (onScreenSelected) {
+        onScreenSelected(metadata);
+        return;
+        }
+
+        return;
+    }
+
     const selectedBeamlineId = state.currentBeamline;
     const beamlineState = state.beamlines[selectedBeamlineId];
 
@@ -62,8 +80,6 @@ export default function ScreenTreeView() {
   }, [state.currentBeamline, state.beamlines, currentScreenTree]);
 
   return (
-    <>
-      {menuOpen ? (
         <RichTreeView
           items={currentScreenTree}
           selectedItems={state.currentScreenId}
@@ -82,9 +98,5 @@ export default function ScreenTreeView() {
             currentFileMetadata[item.id]?.exists === false
           }
         />
-      ) : (
-        <></>
-      )}
-    </>
   );
 }

src/components/SourceDisplay.tsx

@@ -0,0 +1,43 @@
+import {EmbeddedDisplay, newRelativePosition} from "@diamondlightsource/cs-web-lib";
+import {Box, Typography} from "@mui/material";
+import {FileMetadata} from "../store";
+import FileStateContext from "../routes/DemoPage";
+import {useContext} from "react";
+
+interface SourceDisplayProps {
+    file?: FileMetadata;
+}
+
+export default function SourceDisplay({file}: SourceDisplayProps) {
+    const {state} = useContext(FileStateContext);
+
+    if (!file) {
+        return (
+            <Box sx={{flex:1, display: "flex", justifyContent: "center", alignItems: "center"}}>
+                <Typography variant="h6">Select a screen</Typography>
+            </Box>
+        );
+    }
+
+    const displayFile = state.files.find(
+        f => f.name.endsWith(file.file)
+    );
+
+    console.log("Selected:", file);
+    console.log("Resolved:", displayFile);
+    return (
+        <Box sx={{flex:1, overflowY: "auto", height: "100%"}}>
+            <EmbeddedDisplay
+                height={800}
+                position={newRelativePosition()}
+                scroll={true}
+                resize={0}
+                file={{
+                    path: displayFile?.name || file.file,
+                    macros: displayFile?.macros || {},
+                    defaultProtocol: displayFile?.protocol || "ca"
+                }}
+            />
+        </Box>
+    );
+}

src/components/SourcePanel.tsx

@@ -0,0 +1,47 @@
+import { Box } from "@mui/material";
+import SourceDisplay from "./SourceDisplay";
+import ScreenTreeView from "./ScreenTreeView";
+import {useState} from "react";
+import { FileMetadata } from "../store";
+import BeamlineSelect from "./BeamlineSelect";
+
+interface SourcePanelProps {
+  onScreenSelected: (file: FileMetadata) => void;
+}
+
+export default function SourcePanel({onScreenSelected}: SourcePanelProps){
+
+
+    const [selectedFile, setSelectedFile] =
+    useState<FileMetadata>();
+
+
+    const handleSelect = (file: FileMetadata) => {
+    setSelectedFile(file);
+    onScreenSelected(file);
+    };
+
+    return (
+    <Box
+        sx={{
+            width: "40%",
+            display: "flex",
+            flexDirection: "column",
+            borderRight: 1,
+            borderColor: "divider",
+            overflow: "hidden"
+        }}
+    >
+        <Box sx={{ display: "flex", flex: 1, minHeight: 0, overflow: "hidden" }}>
+            <Box sx={{ width: 150, overflow: "auto" }}>
+                <BeamlineSelect />
+                <ScreenTreeView
+                    onScreenSelected={handleSelect}
+                />
+            </Box>
+            <SourceDisplay file={selectedFile} />
+        </Box>
+
+    </Box>
+    );
+}