Context Builder manual selection mode (#452)

Author: rcreasi

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

@@ -1,22 +1,25 @@
 :global {
-  #confirmation-modal-container,
-  #prompt-modal-container {
-    & ~ div[role="dialog"] {
-      // Detect when the modal has a sibling later in the DOM. That suggests it
-      // has launched another modal that should take precedence.
-      &:has(~ div[role="dialog"]) {
-        .modal-content {
-          display: none;
-        }
-      }
-
-      // Hide the backdrop of that later sibling so there is only one backdrop
-      // at a time.
-      & ~ div[role="dialog"] {
-        .modal-backdrop {
-          display: none;
-        }
-      }
+  // 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
+  div[role="dialog"]:has(~ div[role="dialog"] .stackableConfirmationModal) {
+    .modal-content {
+      display: block !important;
+      filter: brightness(0.5);
+      transition: filter 0.3s ease;
     }
   }
 }
+
+.dontShowThisAgain {
+  label {
+    font-weight: normal;
+    cursor: pointer;
+  }
+
+  span {
+    margin: 5px;
+    vertical-align: top;
+  }
+}

frontend/packages/@depmap/common-components/src/utils/getConfirmation.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import ReactDOM from "react-dom";
 import { Button, Modal } from "react-bootstrap";
-import "../styles/modals.scss";
+import styles from "../styles/modals.scss";
 
 interface ConfirmationOptions {
   title?: string | null;
@@ -10,12 +10,24 @@ interface ConfirmationOptions {
   message: React.ReactNode;
   showModalBackdrop?: boolean | null;
   yesButtonBsStyle?: string | null | undefined;
+  dontShowAgainLocalStorageKey?: string;
 }
 
 const launchModal = (
   options: ConfirmationOptions,
   resolve: (ok: boolean) => void
 ) => {
+  if (options.dontShowAgainLocalStorageKey) {
+    const skip =
+      window.localStorage.getItem(options.dontShowAgainLocalStorageKey!) ===
+      "true";
+
+    if (skip) {
+      resolve(true);
+      return;
+    }
+  }
+
   const container = document.createElement("div");
   container.id = "confirmation-modal-container";
   document.body.append(container);
@@ -28,6 +40,7 @@ const launchModal = (
   ReactDOM.render(
     <Modal
       show
+      dialogClassName="stackableConfirmationModal"
       backdrop={
         typeof options.showModalBackdrop === "boolean"
           ? options.showModalBackdrop
@@ -43,6 +56,29 @@ const launchModal = (
       </Modal.Header>
       <Modal.Body>
         <section>{options.message}</section>
+        {options.dontShowAgainLocalStorageKey && (
+          <section className={styles.dontShowThisAgain}>
+            <label>
+              <input
+                type="checkbox"
+                defaultChecked={false}
+                onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                  if (e.target.checked) {
+                    window.localStorage.setItem(
+                      options.dontShowAgainLocalStorageKey!,
+                      "true"
+                    );
+                  } else {
+                    window.localStorage.removeItem(
+                      options.dontShowAgainLocalStorageKey!
+                    );
+                  }
+                }}
+              />
+              <span>Don’t show this again</span>
+            </label>
+          </section>
+        )}
       </Modal.Body>
       <Modal.Footer>
         <Button

frontend/packages/@depmap/common-components/src/utils/promptForValue.tsx

@@ -66,6 +66,7 @@ function launchModal<T>(
       {(value, onChange, acceptText, setAcceptText) => (
         <Modal
           backdrop="static"
+          dialogClassName="stackableConfirmationModal"
           {...options.modalProps}
           show
           onHide={() => {

frontend/packages/@depmap/common-components/src/utils/showInfoModal.tsx

@@ -37,6 +37,7 @@ export default function showInfoModal(
   ReactDOM.render(
     <Modal
       backdrop="static"
+      dialogClassName="stackableConfirmationModal"
       {...options.modalProps}
       show
       onHide={() => {

frontend/packages/@depmap/data-explorer-2/src/components/AnnotationSelect/AnnotationSourceSelect.tsx

@@ -2,7 +2,6 @@ import React, { useMemo } from "react";
 import { Dataset, TabularDataset } from "@depmap/types";
 import PlotConfigSelect from "../PlotConfigSelect";
 import showAnnotationDetailsModal from "./showAnnotationDetailsModal";
-import styles from "../../styles/DimensionSelect.scss";
 
 interface Props {
   axis: "sample" | "feature" | undefined;
@@ -51,21 +50,18 @@ function AnnotationSourceSelect({
   return (
     <PlotConfigSelect
       show
-      label={
-        <span className={styles.labelWithDetailsButton}>
-          Annotation Source
-          <button
-            type="button"
-            className={styles.detailsButton}
-            disabled={!value}
-            onClick={() => {
-              showAnnotationDetailsModal(value!);
-            }}
-          >
-            details
-          </button>
-        </span>
-      }
+      label="Annotation Source"
+      renderDetailsButton={() => (
+        <button
+          type="button"
+          disabled={!value}
+          onClick={() => {
+            showAnnotationDetailsModal(value!);
+          }}
+        >
+          details
+        </button>
+      )}
       value={value}
       enable={!isLoadingAnnotationDatasets}
       isLoading={isLoadingAnnotationDatasets}

frontend/packages/@depmap/data-explorer-2/src/components/ContextBuilderV2/ContextBuilderBody/ContextBuilderTableView/confirmManualSelectMode.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import { getConfirmation } from "@depmap/common-components";
+
+export default function confirmManualSelectMode() {
+  return getConfirmation({
+    title: "Switch to manual selection?",
+    message: (
+      <p>
+        This will discard your existing rules and create a fixed list of
+        selected rows.
+      </p>
+    ),
+    yesText: "Switch to Manual Mode",
+    noText: "Cancel",
+    yesButtonBsStyle: "primary",
+    dontShowAgainLocalStorageKey:
+      "suppress-context-builder-manual-mode-warning",
+  });
+}

frontend/packages/@depmap/data-explorer-2/src/components/ContextBuilderV2/ContextBuilderBody/ContextBuilderTableView/index.tsx

@@ -1,36 +1,64 @@
-import React, { useCallback, useEffect, useMemo, useRef } from "react";
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import { Button } from "react-bootstrap";
+import { Spinner } from "@depmap/common-components";
 import SliceTable from "@depmap/slice-table";
 import { areSliceQueriesEqual, SliceQuery } from "@depmap/types";
+import { isCompleteExpression } from "../../../../utils/misc";
 import { useContextBuilderState } from "../../state/ContextBuilderState";
 import NumberOfMatches from "../Expression/NumberOfMatches";
 import useMatches from "../../hooks/useMatches";
+import confirmManualSelectMode from "./confirmManualSelectMode";
 import styles from "../../../../styles/ContextBuilderV2.scss";
 
 function ContextBuilderTableView() {
   const {
     dimension_type,
+    isManualSelectMode,
     mainExpr,
-    setShowTableView,
-    uniqueVariableSlices,
-    tableOnlySlices,
-    setTableOnlySlices,
     name,
+    replaceExprWithSimpleList,
     setIsReadyToSave,
+    setShowTableView,
+    setTableOnlySlices,
+    tableOnlySlices,
+    undoManualSelectionMode,
+    uniqueVariableSlices,
   } = useContextBuilderState();
 
   const { isLoading, matchingIds } = useMatches(mainExpr);
+  const [isViewInitialized, setIsViewInitialized] = useState(() => {
+    // Edge case: we were dropped right into table mode before a valid
+    // expression was created. We can skip initialization.
+    if (!isCompleteExpression(mainExpr)) {
+      return true;
+    }
+
+    return false;
+  });
+  const wasLoading = useRef(false);
+
+  const viewOnlySlices = useRef<Set<SliceQuery>>(new Set(uniqueVariableSlices));
+  const initialSlices = useRef([...viewOnlySlices.current, ...tableOnlySlices]);
 
   useEffect(() => {
     if (isLoading) {
       setIsReadyToSave(false);
     } else {
       setIsReadyToSave(matchingIds.length > 0);
+
+      if (wasLoading.current) {
+        setIsViewInitialized(true);
+      }
     }
-  }, [isLoading, matchingIds, setIsReadyToSave]);
 
-  const viewOnlySlices = useRef<Set<SliceQuery>>(new Set(uniqueVariableSlices));
-  const initialSlices = useRef([...viewOnlySlices.current, ...tableOnlySlices]);
+    wasLoading.current = isLoading;
+  }, [isLoading, matchingIds, setIsReadyToSave]);
 
   const initialRowSelection = useMemo(() => {
     const rowSelection: Record<string, boolean> = {};
@@ -39,7 +67,9 @@ function ContextBuilderTableView() {
     });
 
     return rowSelection;
-  }, [matchingIds]);
+    // We only want to set the initialRowSelection on initialization.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isViewInitialized]);
 
   const handleChangeSlices = useCallback(
     (updatedSlices: SliceQuery[]) => {
@@ -54,8 +84,39 @@ function ContextBuilderTableView() {
     [uniqueVariableSlices, setTableOnlySlices]
   );
 
-  if (isLoading) {
-    return <div>Loading...</div>;
+  const shouldConfirmRowSelection = useRef(false);
+
+  const handleChangeRowSelection = useCallback(
+    (nextRowSelection: Record<string, boolean>) => {
+      const selectedIds = Object.entries(nextRowSelection)
+        .filter(([, included]) => included)
+        .map(([id]) => id);
+
+      replaceExprWithSimpleList(selectedIds);
+      shouldConfirmRowSelection.current = true;
+    },
+    [replaceExprWithSimpleList]
+  );
+
+  useEffect(() => {
+    if (isManualSelectMode && shouldConfirmRowSelection.current) {
+      shouldConfirmRowSelection.current = false;
+
+      confirmManualSelectMode().then((confirmed) => {
+        if (!confirmed) {
+          setIsViewInitialized(false);
+          undoManualSelectionMode();
+        }
+      });
+    }
+  }, [isManualSelectMode, undoManualSelectionMode]);
+
+  if (!isViewInitialized) {
+    return (
+      <div className={styles.ContextBuilderTableView}>
+        <Spinner position="absolute" left="calc(50vw - 100px)" />
+      </div>
+    );
   }
 
   return (
@@ -66,7 +127,25 @@ function ContextBuilderTableView() {
         initialSlices={initialSlices.current}
         onChangeSlices={handleChangeSlices}
         viewOnlySlices={viewOnlySlices.current}
+        enableRowSelection
+        onChangeRowSelection={handleChangeRowSelection}
         initialRowSelection={initialRowSelection}
+        renderCustomControls={() => {
+          return isManualSelectMode ? (
+            <div className={styles.manualSelectionControls}>
+              You’re now in manual selection mode.{" "}
+              <Button
+                bsStyle="info"
+                onClick={() => {
+                  setIsViewInitialized(false);
+                  undoManualSelectionMode();
+                }}
+              >
+                Restore previous rules
+              </Button>
+            </div>
+          ) : null;
+        }}
         renderCustomActions={() => {
           return (
             <div className={styles.customTableControls}>

frontend/packages/@depmap/data-explorer-2/src/components/ContextBuilderV2/ContextBuilderBody/Expression/RelationalExpression/RightHandSide/NumberInput.tsx

@@ -11,9 +11,16 @@ interface Props {
   path: (string | number)[];
   domain: { min: number; max: number; isAllIntegers: boolean } | null;
   isLoading: boolean;
+  onClickShowDistribution: () => void;
 }
 
-function NumberInput({ expr, path, domain, isLoading }: Props) {
+function NumberInput({
+  expr,
+  path,
+  domain,
+  isLoading,
+  onClickShowDistribution,
+}: Props) {
   const [value, setValue] = useState<number | null>(expr);
   const { dispatch, shouldShowValidation } = useContextBuilderState();
 
@@ -40,7 +47,16 @@ function NumberInput({ expr, path, domain, isLoading }: Props) {
 
   return (
     <div className={styles.NumberInput}>
-      <label htmlFor={`number-input-${path}`}>Value</label>
+      <div>
+        <label htmlFor={`number-input-${path}`}>Value</label>
+        <button
+          type="button"
+          className={styles.detailsButton}
+          onClick={onClickShowDistribution}
+        >
+          details
+        </button>
+      </div>
       <FormControl
         className={cx({
           [styles.invalidNumber]: