Merge pull request #79 from AllenInstitute/feature/generalize-ui

Finish Integrating Multi-Data Source Feature + Revamp Style
AllenInstitute · May 7, 2024 · ce2207e · ce2207e
2 parents d2f49a5 + 15b5ae6
commit ce2207e
Show file tree

Hide file tree

Showing 225 changed files with 5,293 additions and 8,007 deletions.
diff --git a/package.json b/package.json
@@ -1,5 +1,6 @@
 {
   "name": "root",
+  "version": "6.5.1",
   "license": "2-clause BSD license plus a third clause that prohibits redistribution and use for commercial purposes without further permission.",
   "engines": {
     "node": "16.x",

diff --git a/packages/core/App.module.css b/packages/core/App.module.css
@@ -1,3 +1,8 @@
+.light-theme {
+    /* placeholder for until / if we do a light theme for the app */
+    color: orange;
+}
+
 .absolute {
     position: absolute;
 }
@@ -7,22 +12,10 @@
 }
 
 .root {
-    --annotation-hierarchy-max-width: 350px;
-    --blue: steelblue;
-    --grey: #c8c8c8;
-    --white: #ffffff;
-    --url-bar-height: 40px;
-    --file-details-width: 20%;
-    --margin: 12px;
-    --transition-duration: 0.5s;
-    --smaller-font-size: small;
-    /* AICS brand colors pulled from AICS style guide */
-    --primary-brand-dark-blue: #003057;
-    --primary-brand-purple: #827aa3;
-    --primary-brand-grey: #7c7d7f;
-    --secondary-brand-purple: #bab5c9;
-    --brand-error: #c23030;
+    --global-button-row-height: 40px;
 
+    background-color: var(--secondary-background-color);
+    color: var(--secondary-text-color);
     composes: relative;
     margin: 0;
     border: 0;
@@ -32,81 +25,69 @@
     overflow: hidden; /* TODO; should be unnecessary */
 }
 
+.small-font {
+    font-size: smaller;
+}
+
 /* Globally remove the ability to select text. Individual elements that need this should opt-in. */
 .root * {
     user-select: none;
 }
 
-.content {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-}
-
-.header-ribbon {
-    display: block;
-    width: 100%;
-}
-
-.everything-except-header-ribbon {
+.core-and-file-details {
     composes: relative;
     display: flex;
     flex: auto;
-    margin: var(--margin);
+    height: 100%;
+    /* margin: var(--margin); */
     overflow: hidden;
     width: calc(100% - (2 * var(--margin)));
 }
 
-.core {
+.query-sidebar-and-center {
     margin-right: var(--margin);
     width: calc(80% - var(--margin));
     height: 100%;
+    display: flex;
 
     /* flex child */
     flex: 1 0 auto;
     transition: flex var(--transition-duration);
 
     /* flex parent */
     display: flex;
-    flex-direction: column;
 }
 
-.everything-except-header-ribbon .core .file-details{
-    margin-right: 0;
-    width: 100%;
-}
-
-.url-bar {
-    width: 100%;
-    height: var(--url-bar-height);
-    margin-bottom: var(--margin);
+.query-sidebar {
+    height: 100%;
+    width: 30%;
+    max-width: var(--query-sidebar-max-width);
 }
 
-.annotation-hierarchy-and-file-list {
-    display: flex;
-    width: 100%;
-    height: calc(100% - var(--url-bar-height) - var(--margin));
+.center {
+    flex: auto;
+    height: 100%;
+    margin: var(--margin) 0 var(--margin) var(--margin);
+    width: calc(70% - var(--margin));
 }
 
-.annotation-hierarchy {
-    height: 100%;
-    width: 30%;
-    max-width: var(--annotation-hierarchy-max-width);
+.global-button-row {
+    height: var(--global-button-row-height);
 }
 
 .file-list {
     display: flex;
     flex-direction: column;
     flex: auto;
-    height: 100%;
-    width: calc(70% - var(--margin));
-    margin-left: var(--margin);
+    height: calc(100% - var(--global-button-row-height));
 }
 
 .file-details {
     height: 100%;
     transition: flex var(--transition-duration);
+    width: 100%;
 
     /* flex child */
     flex: 0 0 var(--file-details-width);
+    margin: var(--margin) 0 var(--margin) 0;
 }
diff --git a/packages/core/App.tsx b/packages/core/App.tsx
@@ -1,17 +1,17 @@
 import "normalize.css";
 import { initializeIcons, loadTheme } from "@fluentui/react";
+import classNames from "classnames";
 import * as React from "react";
 import { batch, useDispatch, useSelector } from "react-redux";
 
-import AnnotationSidebar from "./components/AnnotationSidebar";
 import ContextMenu from "./components/ContextMenu";
 import Modal from "./components/Modal";
 import DirectoryTree from "./components/DirectoryTree";
 import FileDetails from "./components/FileDetails";
-import FileExplorerURLBar from "./components/FileExplorerURLBar";
-import HeaderRibbon from "./components/HeaderRibbon";
+import GlobalActionButtonRow from "./components/GlobalActionButtonRow";
 import StatusMessage from "./components/StatusMessage";
 import TutorialTooltip from "./components/TutorialTooltip";
+import QuerySidebar from "./components/QuerySidebar";
 import { FileExplorerServiceBaseUrl } from "./constants";
 import { interaction, metadata, selection } from "./state";
 import { PlatformDependentServices } from "./state/interaction/actions";
@@ -48,6 +48,8 @@ export default function App(props: AppProps) {
     } = props;
 
     const dispatch = useDispatch();
+    const isDarkTheme = useSelector(selection.selectors.getIsDarkTheme);
+    const shouldDisplaySmallFont = useSelector(selection.selectors.getShouldDisplaySmallFont);
 
     // Set platform-dependent services in state
     React.useEffect(() => {
@@ -66,19 +68,22 @@ export default function App(props: AppProps) {
     }, [dispatch, fileExplorerServiceBaseUrl]);
 
     return (
-        <div id={ROOT_ELEMENT_ID} className={styles.root}>
-            <div className={styles.content}>
-                <HeaderRibbon className={styles.headerRibbon} />
-                <div className={styles.everythingExceptHeaderRibbon}>
-                    <div className={styles.core}>
-                        <FileExplorerURLBar className={styles.urlBar} />
-                        <div className={styles.annotationHierarchyAndFileList}>
-                            <AnnotationSidebar className={styles.annotationHierarchy} />
-                            <DirectoryTree className={styles.fileList} />
-                        </div>
+        <div
+            id={ROOT_ELEMENT_ID}
+            className={classNames(styles.root, {
+                [styles.lightTheme]: !isDarkTheme,
+                [styles.smallFont]: shouldDisplaySmallFont,
+            })}
+        >
+            <div className={styles.coreAndFileDetails}>
+                <div className={styles.querySidebarAndCenter}>
+                    <QuerySidebar className={styles.querySidebar} />
+                    <div className={styles.center}>
+                        <GlobalActionButtonRow className={styles.globalButtonRow} />
+                        <DirectoryTree className={styles.fileList} />
                     </div>
-                    <FileDetails className={styles.fileDetails} />
                 </div>
+                <FileDetails className={styles.fileDetails} />
             </div>
             <ContextMenu key={useSelector(interaction.selectors.getContextMenuKey)} />
             <StatusMessage />

diff --git a/packages/core/components/AggregateInfoBox/AggregateInfoBox.module.css b/packages/core/components/AggregateInfoBox/AggregateInfoBox.module.css
@@ -1,7 +1,6 @@
 .container {
-    background: var(--secondary-brand-purple);
+    background: var(--primary-background-color);
     opacity: 0.90;
-    border-radius: 3px;
     /* Allow the element to be fixed to the bottom of the file list */
     position: fixed;
     bottom: 10px;

diff --git a/packages/core/components/AnnotationFilterForm/AnnotationFilterForm.module.css b/packages/core/components/AnnotationFilterForm/AnnotationFilterForm.module.css
@@ -0,0 +1,10 @@
+.loading-container > div > div {
+    border-color: var(--secondary-text-color) var(--secondary-background-color) var(--secondary-background-color);
+}
+
+.loading-container, .picker {
+    background-color: var(--secondary-background-color);
+    color: var(--secondary-text-color);
+    padding: var(--margin);
+    width: 35vw;
+}