Frontend support for reindex_through, nested contexts... (#670)

...and null-safe operators.

Companion to three backend PRs:

  #668  Add reindex_through support to SliceQuery
  #667  Refactor ContextEvaluator and add nested context references
  #666  Null-guarded negated operators and is_null/not_null

Author: rcreasi

frontend/.eslintrc.js

@@ -37,7 +37,7 @@ module.exports = {
     "@typescript-eslint/indent": "off",
     "@typescript-eslint/naming-convention": "off",
     "@typescript-eslint/no-explicit-any": "warn",
-    // "@typescript-eslint/no-use-before-define": "off",
+    "@typescript-eslint/no-use-before-define": ["error", { functions: false }],
     "@typescript-eslint/quotes": "off",
     "arrow-body-style": "off",
     "class-methods-use-this": "off",

frontend/packages/@depmap/api/src/breadboxAPI/resources/temp.ts

@@ -38,6 +38,7 @@ export async function evaluateContext(
   if (
     typeof context.expr !== "boolean" &&
     "in" in context.expr &&
+    Array.isArray(context.expr.in[1]) &&
     Object.keys(context.vars).length > 0
   ) {
     const slice = Object.values(context.vars)[0];
@@ -73,22 +74,6 @@ export async function evaluateContext(
     }
   }
 
-  const varsAsSliceQueries = Object.fromEntries(
-    Object.entries(context.vars).map(([varName, variable]) => [
-      varName,
-      {
-        // The `DataExplorerContextVariable` type has some extra fields that
-        // aren't part of the SliceQuery format. We'll only include the
-        // relevant fields so the backend doesn't get confused.
-        dataset_id: variable.dataset_id,
-        identifier: variable.identifier,
-        identifier_type: variable.identifier_type,
-      },
-    ])
-  );
-
-  const contextToEval = { ...context, vars: varsAsSliceQueries };
-
   const response = await postJson<
     | {
         ids: string[];
@@ -105,7 +90,7 @@ export async function evaluateContext(
           error_type: string;
         };
       }
-  >("/temp/context", contextToEval);
+  >("/temp/context", context);
 
   if ("detail" in response) {
     window.console.warn("Could not evaluate context", context);

frontend/packages/@depmap/api/src/breadboxAPI/resources/types.ts

@@ -43,7 +43,6 @@ export function getDimensionTypeIdentifiers(
   dimTypeName: string,
   params?: {
     data_type?: string;
-    // NOTE: This is known to affect performance.
     show_only_dimensions_in_datasets?: boolean;
   }
 ) {

frontend/packages/@depmap/common-components/src/components/Markdown/index.tsx

@@ -9,7 +9,7 @@ export interface MarkdownRendererProps {
 
 function Markdown({ children, className = undefined }: MarkdownRendererProps) {
   return (
-    <Suspense fallback={<Spinner />}>
+    <Suspense fallback={<Spinner position="static" />}>
       <LazyMarkdownCore className={className}>{children}</LazyMarkdownCore>
     </Suspense>
   );

frontend/packages/@depmap/common-components/src/styles/modals.scss

@@ -1,17 +1,20 @@
 :global {
-  // A parent modal that launches a confirmation modal
-  //  should not be fully hidden, just darkened.
-  // This overrides the behavior specified here:
-  // https://github.com/broadinstitute/depmap-portal/blob/e1e9134/frontend/packages/@depmap/data-explorer-2/src/styles/ContextBuilderV2.scss#L16-L36
+  // A parent modal that launches a confirmation modal should get darkened.
   div[role="dialog"]:has(~ div[role="dialog"] .stackableConfirmationModal) {
     .modal-content {
-      display: block !important;
       filter: brightness(0.5);
       transition: filter 0.3s ease;
     }
   }
 }
 
+// Never allow modal backdrops to stack.
+:global div[role="dialog"] ~ div[role="dialog"] {
+  .modal-backdrop {
+    display: none;
+  }
+}
+
 .dontShowThisAgain {
   label {
     font-weight: normal;

frontend/packages/@depmap/custom-analyses/src/components/AnalysisConfigurationPanel/selects/AnalysisFilterSelect.tsx

@@ -30,6 +30,7 @@ function AnalysisFilterSelect({ dimension_type, value, onChange }: Props) {
         onClickCreateContext={handleClickCreateContext}
         onClickSaveAsContext={handleClickSaveAsContext}
         selectClassName={styles.AnalysisContextSelect}
+        linkToContextManager
       />
     </div>
   );

frontend/packages/@depmap/data-explorer-2/index.ts

@@ -4,7 +4,6 @@ export { default as renderConditionally } from "./src/utils/render-conditionally
 export { default as DimensionSelectV2 } from "./src/components/DimensionSelectV2";
 export { default as ContextBuilderV2 } from "./src/components/ContextBuilderV2";
 export { default as ContextManager } from "./src/components/ContextManager";
-export { default as AnnotationSelect } from "./src/components/AnnotationSelect";
 export { default as DataExplorerPage } from "./src/components/DataExplorerPage/components/DataExplorer2";
 export { default as ContextTypeSelect } from "./src/components/ContextManager/ContextTypeSelect";
 

frontend/packages/@depmap/data-explorer-2/package.json

@@ -15,6 +15,7 @@
     "@depmap/globals": "1.0.0",
     "@depmap/slice-table": "1.0.0",
     "@depmap/statistics": "1.0.0",
+    "@depmap/selects": "1.0.0",
     "@depmap/types": "1.0.0",
     "@depmap/user-upload": "1.0.0",
     "@depmap/utils": "1.0.0",