Merge pull request #97 from DiamondLightSource/restructure-repo-for-generalised-imaging-app

Restructure repo for generalised imaging app

Author: yousefmoazzam

.github/workflows/_tomohub.yml .github/workflows/_containers.yml.github/workflows/_tomohub.yml renamed to .github/workflows/_containers.yml

@@ -1,4 +1,4 @@
-name: Tomohub
+name: Build and Push Containers
 
 on:
   push:

README.md

@@ -1,35 +1,11 @@
-# TomoHub 
-Tomohub is a graphical tool created with React and FastAPI to generate and configure YAML processlists for [HTTOMO](https://diamondlightsource.github.io/httomo/index.html) pacakge and using React Relay and [Workflows](https://github.com/DiamondLightSource/workflows), it's able to run high throughput tomography jobs using [HTTOMO](https://diamondlightsource.github.io/httomo/index.html) as well.
-
-## How to use
-In order to run a tomography reconstruction jobs with HTTOMO package, you need to have your data and a processlist (pipeline), these processlists are
-basically YAML files with different methods and parameters for the reconstruction job, with both deployment and local versions of tomohub you are able generate these processlists without editting the YAML files directly and then simply download your config files and use them in order to run HTTOMO.
-beside generating config files, the local version is able to run HTTOMO jobs as well, after selecting your desired methods (or if you have your own config file as well), you can run HTTOMO by clicking on "Run HTTOMO (Local)" button 
-### cor finder tool
-the main available feature on the local version is COR finder tool, with this tool based on the [parameter sweeping](#parameter-sweeping) feature of HTTOMO, users are able to run a reconstruction job with either of gdric or FBP algorithms and a range of values for centre of rotation, in the result, users can see final png output of the reconstruction job and they can use the slider to see different outputs and select their desired one, this feture is currently implemented with power of workflows.
-### Loader
-- Configuring the loader for your pipeline is the first essential step to make a processlist, tomohub uses the standard_tomo_loader [see more](https://diamondlightsource.github.io/httomo/reference/loaders.html)
-- previewing feature allows you to change the dimensions of the input data by reducing them, in another way is a way to crop your data before the reconstruction job happens [see more](https://diamondlightsource.github.io/httomo/howto/httomo_features/previewing.html)
-  
-  you can select this fetature by clicking on the "Enable preview" button in the Loader section and select a range to crop in both X and Y axises 
-### methods
-- Tomohub contains all the method from both [httomolib](https://github.com/DiamondLightSource/httomolib) and [httomolibgpu](https://github.com/DiamondLightSource/httomolibgpu) libraries, after setting your Loader, it's needed to select a set of methods for your reconstruction job, a good approach to do so is by following the order of the vertical tab on left 
-- You can see the list of your methods in the pipeline on the right side bar, you can remove/edit your selected methods and you can also reorder your methods in the processlist by drag and dropping them
-### parameter sweeping 
-- HTTOMO supports parameter sweeping feature, sweeping in this context means you can set more than one value for a parameter in your selected methods [see more](https://diamondlightsource.github.io/httomo/howto/httomo_features/parameter_sweeping.html)
-- in order to select sweeping for a parameter, select GEAR_ICON next the parameter input, then simply select your values for your sweeping in the opened pop-up window
-- keep in mind as HTTOMO only allows one parameter sweeping per pipeline, you are only allowed to select 1 sweeping per processlist as well
-### ready to use pipelines
-you can select a ready to use pipelines as well, simply select your pipeline from the "Ready to use piplines"
-### Download your processlist
-after setting loader and selecting your methods, you can name download your config file and use it with HTTOMO
+# ImagingHub
 
 ## Setting up developer environment
 
 ### Clone the repo
 
 ```
-git clone https://github.com/DiamondLightSource/TomoHub
+git clone https://github.com/DiamondLightSource/ImagingHub
 ```
 
 ### Setup frontend
@@ -41,14 +17,14 @@ In `frontend/`, add an `.env.local` file with the following contents:
 VITE_API_BASE_URL = "http://localhost:8000"
 VITE_KEYCLOAK_URL = "https://identity-test.diamond.ac.uk"
 VITE_KEYCLOAK_REALM = "dls"
-VITE_KEYCLOAK_CLIENT_ID = "TomoHubDev"
+VITE_KEYCLOAK_CLIENT_ID = "ImagingHubDev"
 VITE_KEYCLOAK_SCOPE = "openid profile posix-uid email"
 ```
 
 #### Install dependencies and generate code from GraphQL schema
 
 ```
-cd Tomohub/frontend
+cd ImagingHub/frontend
 npm i
 npm run relay
 npm run dev
@@ -57,7 +33,7 @@ npm run dev
 ### Setup backend
 
 ```
-cd Tomohub/backend
+cd ImagingHub/backend
 pip install -r requirements.txt
 pip install httomolibgpu --no-deps
 pip install httomo_backends --no-deps

frontend/dashboard/src/App.tsx

@@ -0,0 +1,43 @@
+import {
+  Card,
+  CardActionArea,
+  CardContent,
+  Container,
+  Divider,
+  Grid2,
+  Typography,
+} from "@mui/material";
+import { Link } from "react-router-dom";
+
+const TomographyCard = () => {
+  return (
+    <Card variant="outlined" sx={{ margin: 2 }}>
+      <CardActionArea component={Link} to="tomography">
+        <CardContent sx={{ margin: 2 }}>
+          <Typography gutterBottom variant="h5">
+            Tomography
+          </Typography>
+          <Divider sx={{ marginTop: 2, marginBottom: 2 }} />
+          <Typography variant="body2">Web app for HTTomo</Typography>
+        </CardContent>
+      </CardActionArea>
+    </Card>
+  );
+};
+
+const Dashboard: React.FC = () => {
+  return (
+    <>
+      <Container>
+        <Typography fontSize={30} display="flex" justifyContent="center">
+          ImagingHub
+        </Typography>
+        <Grid2 display="flex">
+          <TomographyCard />
+        </Grid2>
+      </Container>
+    </>
+  );
+};
+
+export default Dashboard;

frontend/index.html

@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>TomoHub | GUI for HTTOMO</title>
+    <title>ImagingHub</title>
   </head>
   <body>
     <div id="root"></div>

frontend/package.json

@@ -1,7 +1,7 @@
 {
-  "name": "tomohub-prototype",
+  "name": "imaginghub",
   "private": true,
-  "version": "0.0.0",
+  "version": "0.5.0",
   "type": "module",
   "scripts": {
     "dev": "vite",

frontend/relay.config.json

@@ -1,7 +1,14 @@
 {
-  "src": "./src",
-  "language": "typescript",
-  "schema": "./src/workflows.graphql",
-  "exclude": ["**/node_modules/**", "**/__mocks__/**", "**/__generated__/**"],
-  "eagerEsModules": true
+  "root": ".",
+  "projects": {
+    "tomography": {
+      "language": "typescript",
+      "schema": "src/workflows.graphql",
+      "eagerEsModules": true
+    }
+  },
+  "sources": {
+    "tomography/src": "tomography"
+  },
+  "excludes": ["**/node_modules/**", "**/__mocks__/**", "**/__generated__/**"]
 }

frontend/src/App.tsx

@@ -1,46 +1,18 @@
-import React, { useState, Suspense } from "react";
-import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
-import Home from "./components/pages/Home";
-import Layout from "./components/common/Layout";
-import Methods from "./components/pages/Methods";
-import FullPipelines from "./components/pages/FullPipelines";
-import Submission from "./components/workflows/Submission";
-import Crop from "./components/pages/Crop";
-import { Visit } from "@diamondlightsource/sci-react-ui";
+import { Route, BrowserRouter, Routes } from "react-router-dom";
+import { default as TomographyApp } from "../tomography/src/App";
+import Dashboard from "../dashboard/src/App";
+import Layout from "./Layout";
 
 const App: React.FC = () => {
-  const [userVisit, setUserVisit] = useState<Visit>();
   return (
-    <Router>
-      <Suspense fallback={<div>Loading workflow...</div>}>
-        <Routes>
-          <Route path="/" element={<Layout />}>
-            <Route index element={<Home />} />
-            <Route path="methods" element={<Methods />} />
-            <Route path="fullpipelines" element={<FullPipelines />} />
-            <Route
-              path="workflow-run"
-              element={
-                <Submission
-                  workflowName="httomo-gpu-job"
-                  setVisit={setUserVisit}
-                />
-              }
-            />
-            <Route
-              path="workflow-cor"
-              element={
-                <Submission
-                  workflowName="httomo-cor-sweep"
-                  setVisit={setUserVisit}
-                />
-              }
-            />
-            <Route path="crop" element={<Crop setVisit={setUserVisit} />} />
-          </Route>
-        </Routes>
-      </Suspense>
-    </Router>
+    <BrowserRouter>
+      <Routes>
+        <Route path="/" element={<Layout />}>
+          <Route index element={<Dashboard />} />
+          <Route path="tomography/*" element={<TomographyApp />} />
+        </Route>
+      </Routes>
+    </BrowserRouter>
   );
 };
 

frontend/src/Layout.tsx

@@ -0,0 +1,94 @@
+import React from "react";
+import { Outlet, NavLink as RouterNavLink } from "react-router-dom";
+import { Box, CssBaseline, styled } from "@mui/material";
+import {
+  Footer,
+  Navbar,
+  NavLink,
+  NavLinks,
+  User,
+} from "@diamondlightsource/sci-react-ui";
+import keycloak from "./keycloak";
+
+const AppContainer = styled(Box)({
+  display: "flex",
+  flexDirection: "column",
+  minHeight: "100vh",
+  alignItems: "center",
+  backgroundColor: "#fff",
+  overflowX: "hidden",
+});
+
+const MainContainer = styled(Box)({
+  display: "grid",
+  gap: "30px",
+  padding: "20px",
+  flex: 1,
+  alignItems: "flex-start",
+  margin: "30px auto",
+});
+
+const Layout = () => {
+  // Determine the username to display
+  let username = "Guest User";
+
+  if (keycloak.authenticated && keycloak.tokenParsed) {
+    username =
+      keycloak.tokenParsed.preferred_username ||
+      keycloak.tokenParsed.name ||
+      keycloak.tokenParsed.email ||
+      "Authenticated User";
+  }
+
+  // Handle logout
+  const handleLogout = () => {
+    if (keycloak.authenticated) {
+      keycloak.logout();
+    }
+  };
+
+  return (
+    <>
+      <CssBaseline />
+      <AppContainer>
+        <Navbar
+          logo="theme"
+          leftSlot={
+            <NavLinks>
+              <NavLink to="/" linkComponent={RouterNavLink}>
+                Home
+              </NavLink>
+              <NavLink to="/tomography" linkComponent={RouterNavLink}>
+                Tomography
+              </NavLink>
+            </NavLinks>
+          }
+          rightSlot={
+            <User
+              color="white"
+              onLogout={handleLogout}
+              user={{
+                fedid: username,
+              }}
+            />
+          }
+        ></Navbar>
+        <MainContainer>
+          <Outlet />
+        </MainContainer>
+        <Footer
+          copyright=""
+          logo="theme"
+          style={{
+            width: "100%",
+            backgroundColor: "#4C5266",
+            display: "flex",
+            justifyContent: "center",
+          }}
+        ></Footer>
+      </AppContainer>
+    </>
+  );
+};
+
+export default Layout;