Merge pull request #25 from CLIMB-TRE/development

Development
CLIMB-TRE · Jul 30, 2024 · df1ec27 · df1ec27
2 parents 4587782 + 0ba04b2
commit df1ec27
Show file tree

Hide file tree

Showing 15 changed files with 943 additions and 533 deletions.
diff --git a/lib/Onyx.css b/lib/Onyx.css
@@ -1,16 +1,54 @@
+[data-bs-theme=light] {
+  --onyx-dropdown-control-border-color: var(--bs-gray-300);
+  --onyx-dropdown-control-background-color: var(--bs-white);
+  --onyx-dropdown-menu-background-color: var(--bs-white);
+  --onyx-dropdown-multivalue-label-background-color: var(--bs-gray-300);
+  --onyx-dropdown-label-color: var(--bs-black);
+  --onyx-dropdown-option-background-color: var(--bs-white);
+  --onyx-dropdown-option-hover-background-color: var(--bs-gray-300);
+  --onyx-dropdown-option-description-color: var(--bs-secondary);
+}
+
+[data-bs-theme=dark] {
+  --onyx-dropdown-control-border-color: var(--bs-gray-700);
+  --onyx-dropdown-control-background-color: var(--bs-gray-900);
+  --onyx-dropdown-menu-background-color: var(--bs-black);
+  --onyx-dropdown-multivalue-label-background-color: var(--bs-gray-700);
+  --onyx-dropdown-label-color: var(--bs-white);
+  --onyx-dropdown-option-background-color: var(--bs-black);
+  --onyx-dropdown-option-hover-background-color: var(--bs-gray-700);
+  --onyx-dropdown-option-description-color: var(--bs-gray-500);
+}
+
+[data-bs-theme=dark] .btn-dark {
+  --bs-btn-border-color: var(--bs-gray-700);
+  --bs-btn-hover-border-color: var(--bs-gray-500);
+}
+
 .table {
+  font-family: monospace;
+  font-size: 10pt;
   display: block;
   overflow-x: auto;
   overflow-y: scroll;
-  overscroll-behavior-x: none; 
   height: 47vh;
   white-space: nowrap;
+  border-collapse: separate;
+  border-spacing: 0;
 }
 
-.table thead{
+.table thead {
   position: sticky;
   top: 0px;
-  margin: 0 0 0 0;
+}
+
+.table th {
+  user-select: none;
+  cursor: pointer;
+}
+
+.table td {
+  vertical-align: middle
 }
 
 .card-header {
@@ -22,42 +60,24 @@
   height: 50px;
 }
 
-.panel {
+.onyx-parameters-panel {
   height: 15vh;
   overflow-y: scroll;
 }
 
-.graph-panel {
+.onyx-graphs-panel {
   height: 78vh;
   overflow-y : scroll;
 }
 
-.table-panel {
+.onyx-results-panel {
   height: 48vh;
 }
 
-[data-bs-theme=light] {
-  --onyx-dropdown-control-border-color: var(--bs-gray-300);
-  --onyx-dropdown-control-background-color: var(--bs-white);
-  --onyx-dropdown-menu-background-color: var(--bs-white);
-  --onyx-dropdown-multivalue-label-background-color: var(--bs-gray-300);
-  --onyx-dropdown-label-color: var(--bs-black);
-  --onyx-dropdown-option-background-color: var(--bs-white);
-  --onyx-dropdown-option-hover-background-color: var(--bs-gray-300);
-}
-
-[data-bs-theme=dark] {
-  --onyx-dropdown-control-border-color: var(--bs-gray-700);
-  --onyx-dropdown-control-background-color: var(--bs-gray-900);
-  --onyx-dropdown-menu-background-color: var(--bs-black);
-  --onyx-dropdown-multivalue-label-background-color: var(--bs-gray-700);
-  --onyx-dropdown-label-color: var(--bs-white);
-  --onyx-dropdown-option-background-color: var(--bs-black);
-  --onyx-dropdown-option-hover-background-color: var(--bs-gray-700);
-}
-
-[data-bs-theme=dark] .btn-dark {
-  --bs-btn-border-color: var(--bs-gray-700);
-  --bs-btn-hover-border-color: var(--bs-gray-500);
+.onyx-record-detail .table {
+  height: 58vh;
 }
 
+.onyx-text-pink {
+  color: var(--bs-code-color);
+}
diff --git a/lib/Onyx.tsx b/lib/Onyx.tsx
@@ -14,7 +14,7 @@ import { OnyxProps, ProjectField } from "./types";
 import "./Onyx.css";
 import "./bootstrap.css";
 
-const VERSION = "0.11.1";
+const VERSION = "0.12.0";
 
 function flattenFields(fields: Record<string, ProjectField>) {
   const flatFields: Record<string, ProjectField> = {};
@@ -57,9 +57,7 @@ function App(props: OnyxProps) {
         .then((data) => {
           return [
             ...new Set(
-              data.data.map(
-                (project: Record<string, unknown>) => project.project
-              )
+              data.data.map((project: { project: string }) => project.project)
             ),
           ] as string[];
         });
@@ -82,7 +80,7 @@ function App(props: OnyxProps) {
         .then((response) => response.json())
         .then((data) => {
           return new Map(
-            data.data.map((type: Record<string, unknown>) => [
+            data.data.map((type: { type: string; lookups: string[] }) => [
               type.type,
               type.lookups,
             ])
@@ -100,7 +98,7 @@ function App(props: OnyxProps) {
         .then((response) => response.json())
         .then((data) => {
           return new Map(
-            data.data.map((lookup: Record<string, unknown>) => [
+            data.data.map((lookup: { lookup: string; description: string }) => [
               lookup.lookup,
               lookup.description,
             ])
@@ -111,6 +109,7 @@ function App(props: OnyxProps) {
 
   // Fetch project information
   const {
+    isFetching: projectInfoPending,
     data: { projectName, projectFields, fieldDescriptions } = {
       projectName: "",
       projectFields: new Map<string, ProjectField>(),
@@ -146,13 +145,14 @@ function App(props: OnyxProps) {
         });
     },
     enabled: !!project,
+    staleTime: 1 * 60 * 1000,
   });
 
   return (
     <Stack gap={2} className="Onyx">
       <Header
         {...props}
-        projectName={projectName}
+        projectName={projectInfoPending ? "Loading..." : projectName}
         projectList={projects}
         handleProjectChange={setProject}
         guiVersion={VERSION}

diff --git a/lib/components/Dropdowns.tsx b/lib/components/Dropdowns.tsx
@@ -32,9 +32,20 @@ interface ChoiceProps extends DropdownProps, GenericChoiceProps {}
 interface MultiChoiceProps extends MultiDropdownProps, GenericChoiceProps {}
 
 const Option = (optionProps: OptionProps) => {
+  const splitLabel = optionProps.label.split("|", 2);
+
   return (
     <code>
-      <components.Option {...optionProps} />
+      <components.Option {...optionProps}>
+        {splitLabel.length > 0 && <div>{splitLabel[0]}</div>}
+        {splitLabel.length > 1 && (
+          <div
+            style={{ color: "var(--onyx-dropdown-option-description-color)" }}
+          >
+            {splitLabel[1]}
+          </div>
+        )}
+      </components.Option>
     </code>
   );
 };
@@ -45,6 +56,7 @@ const getLabel = (option: string, titles?: Map<string, string>) =>
 function Dropdown(props: DropdownProps) {
   return (
     <Select
+      menuPosition="fixed"
       isClearable={props.isClearable}
       isDisabled={props.isDisabled}
       components={{ Option }}
@@ -84,6 +96,7 @@ function MultiDropdown(props: MultiDropdownProps) {
   return (
     <Select
       isMulti
+      menuPosition="fixed"
       closeMenuOnSelect={false}
       components={{ Option }}
       menuPortalTarget={document.body}
@@ -127,6 +140,7 @@ const useChoiceQuery = (props: GenericChoiceProps) => {
           return choices;
         });
     },
+    staleTime: 5 * 60 * 1000,
   });
 };
 

diff --git a/lib/components/ErrorMessages.tsx b/lib/components/ErrorMessages.tsx
@@ -0,0 +1,20 @@
+import Alert from "react-bootstrap/Alert";
+import { ErrorType } from "../types";
+
+function ErrorMessages(props: { messages: ErrorType }) {
+  return Object.entries(props.messages).map(([key, value]) =>
+    Array.isArray(value) ? (
+      value.map((v: string) => (
+        <Alert key={key} variant="danger">
+          {key}: {v}
+        </Alert>
+      ))
+    ) : (
+      <Alert key={key} variant="danger">
+        {key}: {value}
+      </Alert>
+    )
+  );
+}
+
+export default ErrorMessages;
diff --git a/lib/components/Filter.tsx b/lib/components/Filter.tsx
@@ -95,7 +95,7 @@ function Filter(props: FilterProps) {
     <Stack direction="horizontal" gap={1}>
       <Container fluid className="g-0">
         <Row className="g-1">
-          <Col sm={4}>
+          <Col sm={6} lg={4}>
             <Dropdown
               options={props.fieldList}
               titles={props.fieldDescriptions}
@@ -104,7 +104,7 @@ function Filter(props: FilterProps) {
               onChange={props.handleFieldChange}
             />
           </Col>
-          <Col sm={4}>
+          <Col sm={6} lg={4}>
             <Dropdown
               options={
                 props.typeLookups.get(
@@ -117,7 +117,9 @@ function Filter(props: FilterProps) {
               onChange={props.handleLookupChange}
             />
           </Col>
-          <Col sm={4}>{f}</Col>
+          <Col sm={12} lg={4}>
+            {f}
+          </Col>
         </Row>
       </Container>
       <Button variant="dark" onClick={props.handleFilterAdd}>

diff --git a/lib/components/Header.tsx b/lib/components/Header.tsx
@@ -49,7 +49,10 @@ interface HeaderProps {
 
 function Header(props: HeaderProps) {
   // Fetch user profile
-  const { data: { username, site } = { username: "", site: "" } } = useQuery({
+  const {
+    isFetching: profilePending,
+    data: { username, site } = { username: "", site: "" },
+  } = useQuery({
     queryKey: ["profile"],
     queryFn: async () => {
       return props
@@ -62,54 +65,78 @@ function Header(props: HeaderProps) {
   });
 
   return (
-    <Navbar bg="dark" variant="dark" collapseOnSelect expand="sm">
+    <Navbar bg="dark" variant="dark" collapseOnSelect expand="lg">
       <Container fluid>
-        <Navbar.Brand>Onyx</Navbar.Brand>
-        <Navbar.Toggle aria-controls="responsive-navbar-nav" />
-        <Navbar.Collapse id="responsive-navbar-nav">
-          <Stack direction="horizontal" gap={3}>
-            <NavDropdown
-              title={<HeaderText label="Project" value={props.projectName} />}
-              id="collapsible-nav-dropdown"
-              style={{ color: "white" }}
-            >
-              {props.projectList.map((p) => (
-                <NavDropdown.Item
-                  key={p}
-                  onClick={() => props.handleProjectChange(p)}
+        <Navbar.Brand>⬗ Onyx</Navbar.Brand>
+        <Navbar.Toggle aria-controls="navbarScroll" />
+        <Navbar.Collapse id="navbarScroll">
+          <Nav className="me-auto">
+            <Nav style={{ maxHeight: "200px" }} navbarScroll>
+              <Stack direction="horizontal" gap={2}>
+                <NavDropdown
+                  title={
+                    <HeaderText label="Project" value={props.projectName} />
+                  }
+                  id="navbarScrollingDropdown"
+                  style={{ color: "white" }}
                 >
-                  {p}
-                </NavDropdown.Item>
-              ))}
-            </NavDropdown>
-            <HeaderText label="User" value={username} />
-            <HeaderText label="Site" value={site} />
-            <HeaderVersion label="GUI" version={props.guiVersion} />
-            <HeaderVersion label="Extension" version={props.extVersion} />
-          </Stack>
-        </Navbar.Collapse>
-        <Stack direction="horizontal" gap={3}>
+                  {props.projectList.map((p) => (
+                    <NavDropdown.Item
+                      key={p}
+                      onClick={() => props.handleProjectChange(p)}
+                    >
+                      {p}
+                    </NavDropdown.Item>
+                  ))}
+                </NavDropdown>
+                <div></div>
+              </Stack>
+            </Nav>
+            <Nav>
+              <Stack direction="horizontal" gap={3}>
+                <HeaderText
+                  label="User"
+                  value={profilePending ? "Loading..." : username}
+                />
+                <HeaderText
+                  label="Site"
+                  value={profilePending ? "Loading..." : site}
+                />
+                <HeaderVersion label="GUI" version={props.guiVersion} />
+                <HeaderVersion label="Extension" version={props.extVersion} />
+              </Stack>
+            </Nav>
+          </Nav>
           <Tab.Container
             activeKey={props.tabKey}
             onSelect={(k) => props.setTabKey(k || "data")}
           >
             <Nav variant="underline">
-              <Nav.Item>
-                <Nav.Link eventKey="data">Data</Nav.Link>
-              </Nav.Item>
-              <Nav.Item>
-                <Nav.Link eventKey="stats">Statistics</Nav.Link>
-              </Nav.Item>
+              <Stack direction="horizontal" gap={3}>
+                <Nav.Item>
+                  <Nav.Link eventKey="data">Data</Nav.Link>
+                </Nav.Item>
+                <Nav.Item>
+                  <Nav.Link eventKey="stats">Statistics</Nav.Link>
+                </Nav.Item>
+                <Form.Check
+                  type="switch"
+                  id="theme-switch"
+                  label={
+                    <span className="text-light">
+                      {props.darkMode ? "☾" : "☼"}{" "}
+                    </span>
+                  }
+                  title={`Switch to ${
+                    props.darkMode ? "light mode" : "dark mode"
+                  }`}
+                  checked={props.darkMode}
+                  onChange={props.handleThemeChange}
+                />
+              </Stack>
             </Nav>
           </Tab.Container>
-          <Form.Check
-            type="switch"
-            id="theme-switch"
-            label={<span className="text-light">Switch Theme</span>}
-            checked={props.darkMode}
-            onChange={props.handleThemeChange}
-          />
-        </Stack>
+        </Navbar.Collapse>
       </Container>
     </Navbar>
   );