Merge branch 'main' into dunitz/166-seamless-cache

.dockerignore

@@ -1,5 +1,4 @@
 bin
-client
 dist
 docs
-server
+/server/eb/customize

client/__tests__/e2e/e2e.test.ts

@@ -30,7 +30,9 @@ import {
 const data = datasets[DATASET];
 
 const defaultBaseUrl = "d";
-const pageUrl = [appUrlBase, defaultBaseUrl, DATASET].join("/");
+const pageUrl = appUrlBase.includes("localhost")
+  ? [appUrlBase, defaultBaseUrl, DATASET].join("/")
+  : appUrlBase;
 
 describe("did launch", () => {
   test("page launched", async () => {

client/src/components/brushableHistogram/index.tsx

@@ -458,7 +458,7 @@ class HistogramBrush extends React.PureComponent {
         watchProps={{ annoMatrix, setGenes }}
       >
         <Async.Pending initial>
-          <StillLoading displayName={field} zebra={zebra} />
+          <StillLoading />
         </Async.Pending>
         <Async.Rejected>
           {(error) => (

client/src/components/brushableHistogram/loading.tsx

@@ -1,41 +1,10 @@
+import { SKELETON } from "@blueprintjs/core/lib/esnext/common/classes";
 import React from "react";
-import { Button } from "@blueprintjs/core";
 
-import * as globals from "../../globals";
-
-// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/no-explicit-any -- - FIXME: disabled temporarily on migrate to TS.
-const StillLoading = ({ zebra, displayName }: any) => (
-  /*
-    Render a loading indicator for the field.
-    */
-  <div
-    data-testclass="gene-loading-spinner"
-    style={{
-      padding: globals.leftSidebarSectionPadding,
-      backgroundColor: zebra ? globals.lightestGrey : "white",
-    }}
-  >
-    <div
-      style={{
-        display: "flex",
-        justifyContent: "space-between",
-        justifyItems: "center",
-        alignItems: "center",
-      }}
-    >
-      <div style={{ minWidth: 30 }} />
-      <div style={{ display: "flex", alignSelf: "center" }}>
-        <span style={{ fontStyle: "italic" }}>{displayName}</span>
-      </div>
-      <div
-        style={{
-          display: "flex",
-          justifyContent: "flex-end",
-        }}
-      >
-        <Button minimal loading intent="primary" />
-      </div>
-    </div>
-  </div>
+/**
+ * Render a loading indicator for the field.
+ */
+const StillLoading = (): JSX.Element => (
+  <div style={{ height: 211 }} className={SKELETON} />
 );
 export default StillLoading;

client/src/components/categorical/category/index.tsx

@@ -1,13 +1,8 @@
+import { SKELETON } from "@blueprintjs/core/lib/esnext/common/classes";
 import React, { useRef, useEffect } from "react";
 import { connect, shallowEqual } from "react-redux";
 import { FaChevronRight, FaChevronDown } from "react-icons/fa";
-import {
-  AnchorButton,
-  Button,
-  Classes,
-  Position,
-  Tooltip,
-} from "@blueprintjs/core";
+import { AnchorButton, Classes, Position, Tooltip } from "@blueprintjs/core";
 import { Flipper, Flipped } from "react-flip-toolkit";
 import Async from "react-async";
 import memoize from "memoize-one";
@@ -295,10 +290,7 @@ class Category extends React.PureComponent {
           }}
         >
           <Async.Pending initial>
-            <StillLoading
-              metadataField={metadataField}
-              checkboxID={checkboxID}
-            />
+            <StillLoading />
           </Async.Pending>
           <Async.Rejected>
             {(error) => (
@@ -354,55 +346,15 @@ class Category extends React.PureComponent {
 
 export default Category;
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any --- FIXME: disabled temporarily on migrate to TS.
-const StillLoading = ({ metadataField, checkboxID }: any) => (
-  /*
-  We are still loading this category, so render a "busy" signal.
-  */
-  <div
-    style={{
-      maxWidth: globals.maxControlsWidth,
-    }}
-  >
-    <div
-      style={{
-        display: "flex",
-        justifyContent: "space-between",
-        alignItems: "baseline",
-      }}
-    >
-      <div
-        style={{
-          display: "flex",
-          justifyContent: "flex-start",
-          alignItems: "flex-start",
-        }}
-      >
-        <label
-          htmlFor={checkboxID}
-          className={`${Classes.CONTROL} ${Classes.CHECKBOX}`}
-        >
-          <input disabled id={checkboxID} checked type="checkbox" />
-          <span className={Classes.CONTROL_INDICATOR} />
-        </label>
-        <Truncate>
-          <span
-            style={{
-              cursor: "pointer",
-              display: "inline-block",
-              width: LABEL_WIDTH,
-            }}
-          >
-            {metadataField}
-          </span>
-        </Truncate>
-      </div>
-      <div>
-        <Button minimal loading intent="primary" />
-      </div>
-    </div>
+/**
+ * We are still loading this category, so render a "busy" signal.
+ */
+export const StillLoading = (): JSX.Element => (
+  <div style={{ paddingBottom: 2.7 }}>
+    <div className={SKELETON} style={{ height: 30 }} />
   </div>
 );
+
 // eslint-disable-next-line @typescript-eslint/no-explicit-any --- FIXME: disabled temporarily on migrate to TS.
 const ErrorLoading = ({ metadataField, error }: any) => {
   console.error(error); // log error to console as it is unexpected.

client/src/components/datasetSelector/datasetMenu.tsx

@@ -4,6 +4,7 @@ import React from "react";
 
 /* App dependencies */
 import { Dataset } from "../../common/types/entities";
+import { maxMenuItemCount } from "../../globals";
 
 /* Styles */
 // @ts-expect-error --- TODO fix import
@@ -14,6 +15,11 @@ import styles from "./datasetSelector.css";
  */
 export type DatasetSelectedFn = (dataset: Dataset) => void;
 
+/* Maximum pixel height of dataset menu required to display 9.5 menu items */
+const MENU_MAX_HEIGHT =
+  (maxMenuItemCount + 0.5) * 30 +
+  5; /* show 9.5 datasets at 30px height each, plus top padding of 5px */
+
 interface Props {
   children: React.ReactNode;
   datasets: Dataset[];
@@ -70,33 +76,42 @@ const DatasetMenu = React.memo<Props>(
     datasets,
     onDatasetSelected,
     selectedDatasetId,
-  }): JSX.Element => (
-    <Popover
-      boundary="viewport"
-      content={
-        <Menu
-          style={{
-            maxHeight:
-              "290px" /* show 9.5 datasets at 30px height each, plus top padding of 5px */,
-            maxWidth: "680px",
-            overflow: "auto",
-          }}
-        >
-          {buildDatasetMenuItems(
-            datasets,
-            selectedDatasetId,
-            onDatasetSelected
-          )}
-        </Menu>
-      }
-      hasBackdrop
-      minimal
-      modifiers={{ offset: { offset: "0, 10" } }}
-      position={Position.BOTTOM_LEFT}
-      targetClassName={styles.datasetSelectorMenuPopoverTarget}
-    >
-      {children}
-    </Popover>
-  )
+  }): JSX.Element => {
+    const menuScrollable = datasets.length > maxMenuItemCount;
+    return (
+      <Popover
+        boundary="viewport"
+        content={
+          <Menu
+            className={
+              menuScrollable ? styles.datasetMenuScrollable : undefined
+            }
+            style={{
+              maxHeight: MENU_MAX_HEIGHT,
+              maxWidth: 680,
+              overflow: "auto",
+              paddingRight: menuScrollable
+                ? 0 /* override bp-menu default padding to accommodate scrollbar */
+                : undefined /* no need to override bp-menu default padding when menu is not scrollable */,
+            }}
+          >
+            {buildDatasetMenuItems(
+              datasets,
+              selectedDatasetId,
+              onDatasetSelected
+            )}
+          </Menu>
+        }
+        hasBackdrop
+        minimal
+        modifiers={{ offset: { offset: "0, 10" } }}
+        position={Position.BOTTOM_LEFT}
+        targetClassName={styles.datasetSelectorMenuPopoverTarget}
+      >
+        {children}
+      </Popover>
+    );
+  }
 );
+
 export default DatasetMenu;

client/src/components/datasetSelector/datasetSelector.css

@@ -1,5 +1,7 @@
 /* Equivalent to BP's Colors.BLACK */
 @value bp-black: #10161a;
+/* Equivalent to BP's Colors.LIGHT_GRAY1 */
+@value bp-light-gray1: #CED9E0;
 
 :local(.datasetSelectorBreadcrumb),
 :local(.datasetSelectorBreadcrumbDisabled) {
@@ -21,3 +23,14 @@
   cursor: default !important; /* Override BP's "not allowed" cursor */
   font-weight: 600;
 }
+
+:local(.datasetMenuScrollable):global(::-webkit-scrollbar) {
+  width: 14px; /* 5px left and right, 4px track */
+}
+
+:local(.datasetMenuScrollable):global(::-webkit-scrollbar-thumb) {
+  background-clip: content-box;
+  background-color: bp-light-gray1;
+  border: 5px solid transparent;
+  border-radius: 14px;
+}

client/src/components/graph/graph.tsx

@@ -5,7 +5,6 @@ import { mat3, vec2 } from "gl-matrix";
 import _regl from "regl";
 import memoize from "memoize-one";
 import Async from "react-async";
-import { Button } from "@blueprintjs/core";
 
 import setupSVGandBrushElements from "./setupSVGandBrush";
 import _camera from "../../util/camera";
@@ -1061,7 +1060,6 @@ const StillLoading = ({ displayName, width, height }: any) => (
         alignItems: "center",
       }}
     >
-      <Button minimal loading intent="primary" />
       <span style={{ fontStyle: "italic" }}>Loading {displayName}</span>
     </div>
   </div>

client/src/components/leftSidebar/leftSidebarSkeleton.tsx

@@ -1,15 +1,23 @@
 /* Core dependencies */
 import { SKELETON } from "@blueprintjs/core/lib/esnext/common/classes";
-import React from "react";
+import React, { CSSProperties } from "react";
 
 /* App dependencies */
 import Logo from "../framework/logo";
 import Title from "../framework/title";
 
 /* Styles */
 import { STYLE_LEFT_SIDEBAR } from ".";
+import StillLoading from "../brushableHistogram/loading";
+import { StillLoading as CategoryLoading } from "../categorical/category";
 import { STYLE_TOP_LEFT_LOGO_AND_TITLE } from "./topLeftLogoAndTitle";
 
+const STYLE_SUPER_CATEGORY: CSSProperties = {
+  height: 22,
+  margin: "8px 0",
+  width: 160,
+};
+
 /**
  * Skeleton of left side bar, to be displayed during data load.
  * @returns Markup displaying left side bar skeleton.
@@ -33,19 +41,24 @@ function LeftSidebarSkeleton(): JSX.Element {
         <div style={{ height: 30, width: 30 }} className={SKELETON} />
       </div>
       {/* Categorical */}
-      <div style={{ padding: 8 }}>
-        {[...Array(10).keys()].map((i) => (
-          <div
-            key={i}
-            style={{ height: 30, marginBottom: 4 }}
-            className={SKELETON}
-          />
+      <div style={{ padding: 10 }}>
+        <div style={STYLE_SUPER_CATEGORY} className={SKELETON} />
+        {[...Array(10)].map((_, i) => (
+          /* eslint-disable-next-line react/no-array-index-key -- array order won't change */
+          <CategoryLoading key={i} />
         ))}
       </div>
       {/* Continuous */}
-      {[...Array(2).keys()].map((i) => (
-        <div key={i} style={{ height: 211 }} className={SKELETON} />
-      ))}
+      <div>
+        <div
+          style={{ ...STYLE_SUPER_CATEGORY, marginLeft: 10 }}
+          className={SKELETON}
+        />
+        {[...Array(2)].map((_, i) => (
+          /* eslint-disable-next-line react/no-array-index-key -- array order won't change */
+          <StillLoading key={i} />
+        ))}
+      </div>
     </div>
   );
 }

client/src/globals.ts

@@ -139,6 +139,9 @@ export const maxGenes = 100;
 export const diffexpPopNamePrefix1 = "Pop1 high";
 export const diffexpPopNamePrefix2 = "Pop2 high";
 
+/* Maximum number of menu items displayable in menu before scroll is enabled */
+export const maxMenuItemCount = 9;
+
 /* various timing-related behaviors */
 export const tooltipHoverOpenDelay = 1000; /* ms delay before a tooltip displays */
 export const tooltipHoverOpenDelayQuick = 500;