Move DE2 into a shared component (#163)

This moves the entire Data Explorer 2 UI into a shared module so that it can be imported into Elara.
broadinstitute · Jan 8, 2025 · 4c21f40 · 4c21f40
1 parent 86537a2
commit 4c21f40
Show file tree

Hide file tree

Showing 104 changed files with 854 additions and 503 deletions.
diff --git a/frontend/package.json b/frontend/package.json
@@ -46,6 +46,7 @@
     "@typescript-eslint/parser": "^6.0.0",
     "assert-browserify": "^2.0.0",
     "clean-webpack-plugin": "^4.0.0",
+    "copy-webpack-plugin": "^12.0.2",
     "css-loader": "^6.8.1",
     "enzyme-adapter-react-16": "^1.15.7",
     "eslint": "^8.44.0",

diff --git a/frontend/packages/@depmap/data-explorer-2/index.ts b/frontend/packages/@depmap/data-explorer-2/index.ts
@@ -8,6 +8,7 @@ export { default as SliceLabelSelect } from "./src/components/DimensionSelect/Sl
 export { default as ContextBuilderModal } from "./src/components/ContextBuilder/ContextBuilderModal";
 export { default as ContextManager } from "./src/components/ContextManager";
 export { default as DatasetMetadataSelector } from "./src/components/DatasetMetadataSelector";
+export { default as DataExplorerPage } from "./src/components/DataExplorerPage/components/DataExplorer2";
 
 export {
   DataExplorerApiProvider,
@@ -26,6 +27,11 @@ export {
   useLaunchSettingsModal,
 } from "./src/contexts/DataExplorerSettingsContext";
 
+export {
+  PlotlyLoaderProvider,
+  usePlotlyLoader,
+} from "./src/contexts/PlotlyLoaderContext";
+
 export {
   contextsMatch,
   initializeDevContexts,
@@ -52,3 +58,29 @@ export {
 } from "./src/utils/misc";
 
 export { persistLegacyListAsContext } from "./src/components/ContextSelector/context-selector-utils";
+
+export {
+  logInitialPlot,
+  logReducerTransform,
+} from "./src/components/DataExplorerPage/debug";
+export { PointsSelector } from "./src/components/DataExplorerPage/components/ConfigurationPanel/selectors";
+export {
+  default as plotConfigReducer,
+  PlotConfigReducerAction,
+} from "./src/components/DataExplorerPage/reducers/plotConfigReducer";
+export {
+  DEFAULT_PALETTE,
+  LEGEND_ALL,
+  LEGEND_BOTH,
+  LEGEND_RANGE_1,
+  LEGEND_RANGE_2,
+  LEGEND_RANGE_3,
+  LEGEND_RANGE_4,
+  LEGEND_RANGE_5,
+  LEGEND_RANGE_6,
+  LEGEND_RANGE_7,
+  LEGEND_RANGE_8,
+  LEGEND_RANGE_9,
+  LEGEND_RANGE_10,
+  LegendKey,
+} from "./src/components/DataExplorerPage/components/plot/prototype/plotUtils";
diff --git a/frontend/packages/@depmap/data-explorer-2/package.json b/frontend/packages/@depmap/data-explorer-2/package.json
@@ -16,6 +16,7 @@
     "@depmap/globals": "1.0.0",
     "@depmap/interactive": "1.0.0",
     "@depmap/types": "1.0.0",
+    "@depmap/user-upload": "1.0.0",
     "@depmap/utils": "1.0.0",
     "classnames": "^2.3.1",
     "js-base64": "^3.7.2",
@@ -27,10 +28,14 @@
     "lodash.get": "^4.4.2",
     "lodash.omit": "^4.5.0",
     "lodash.setwith": "^4.3.2",
+    "pako": "^2.0.4",
     "qs": "^6.11.0",
     "react-bootstrap": "^0.32.3",
+    "react-bootstrap-typeahead": "^5.1.4",
     "react-select": "^3.2.0",
-    "react-windowed-select": "^3.1.2"
+    "react-tiny-virtual-list": "^2.2.0",
+    "react-windowed-select": "^3.1.2",
+    "seedrandom": "^3.0.5"
   },
   "devDependencies": {
     "@types/js-base64": "^3.3.1",
@@ -41,8 +46,12 @@
     "@types/lodash.get": "^4.4.7",
     "@types/lodash.omit": "^4.5.7",
     "@types/lodash.setwith": "^4.3.7",
+    "@types/pako": "^2.0.0",
+    "@types/plotly.js": "^2.35.1",
     "@types/react-bootstrap": "^0.32.24",
-    "@types/react-select": "3.1.2"
+    "@types/react-bootstrap-typeahead": "^5.1.3",
+    "@types/react-select": "3.1.2",
+    "@types/seedrandom": "2.4.28"
   },
   "peerDependencies": {
     "react": "^16.9.35",

diff --git a/...tend/packages/@depmap/data-explorer-2/src/components/DataExplorerPage/ExtendedPlotType.ts b/...tend/packages/@depmap/data-explorer-2/src/components/DataExplorerPage/ExtendedPlotType.ts
@@ -0,0 +1,31 @@
+import type {
+  PlotData,
+  Layout,
+  Config,
+  DownloadImgopts,
+  PlotlyHTMLElement,
+} from "plotly.js";
+
+type ExtendedPlotType = HTMLDivElement &
+  PlotlyHTMLElement & {
+    data: PlotData[];
+    layout: Layout;
+    config: Config;
+    // This is built into Plotly but not documented in its type definitions.
+    // eslint-disable-next-line @typescript-eslint/ban-types
+    removeListener: (eventName: string, callback: Function) => void;
+
+    // custom extensions
+    zoomIn: () => void;
+    zoomOut: () => void;
+    resetZoom: () => void;
+    annotateSelected: () => void;
+    removeAnnotations: () => void;
+    isPointInView: (pointIndex: number) => boolean;
+    setDragmode: (dragmode: Layout["dragmode"]) => void;
+    downloadImage: (options: DownloadImgopts) => void;
+    xValueMissing: (pointIndex: number) => boolean;
+    yValueMissing: (pointIndex: number) => boolean;
+  };
+
+export default ExtendedPlotType;
diff --git a/...r-2/__tests__/query-string-parser.test.ts → ...age/__tests__/query-string-parser.test.ts b/...r-2/__tests__/query-string-parser.test.ts → ...age/__tests__/query-string-parser.test.ts
@@ -1,6 +1,6 @@
 import qs from "qs";
 import { DataExplorerDatasetDescriptor } from "@depmap/types";
-import { parseShorthandParams } from "src/data-explorer-2/query-string-parser";
+import { parseShorthandParams } from "../query-string-parser";
 
 const MOCK_DATASETS_BY_INDEX_TYPE: Record<
   string,

diff --git a/...nts/ConfigurationPanel/AnalysisResult.tsx → ...nts/ConfigurationPanel/AnalysisResult.tsx b/...nts/ConfigurationPanel/AnalysisResult.tsx → ...nts/ConfigurationPanel/AnalysisResult.tsx
@@ -4,15 +4,15 @@ import omit from "lodash.omit";
 import { Button } from "react-bootstrap";
 import { Spinner } from "@depmap/common-components";
 import { ComputeResponseResult, CustomAnalysisResult } from "@depmap/compute";
-import { useDeprecatedDataExplorerApi } from "@depmap/data-explorer-2";
 import {
   DataExplorerPlotConfigDimension,
   PartialDataExplorerPlotConfig,
 } from "@depmap/types";
-import PlotlyLoader from "src/data-explorer-2/components/plot/PlotlyLoader";
-import { PlotConfigReducerAction } from "src/data-explorer-2/reducers/plotConfigReducer";
-import Section from "src/data-explorer-2/components/Section";
-import styles from "src/data-explorer-2/styles/ConfigurationPanel.scss";
+import { useDeprecatedDataExplorerApi } from "../../../../contexts/DeprecatedDataExplorerApiContext";
+import { usePlotlyLoader } from "../../../../contexts/PlotlyLoaderContext";
+import { PlotConfigReducerAction } from "../../reducers/plotConfigReducer";
+import Section from "../Section";
+import styles from "../../styles/ConfigurationPanel.scss";
 
 interface Props {
   plot: PartialDataExplorerPlotConfig;
@@ -30,6 +30,7 @@ const labelFromDimension = (dimension: DataExplorerPlotConfigDimension) => {
 
 function AnalysisResult({ plot, dispatch }: Props) {
   const api = useDeprecatedDataExplorerApi();
+  const PlotlyLoader = usePlotlyLoader();
   const [taskId, setTaskId] = useState<string | null>(null);
   const [result, setResult] = useState<ComputeResponseResult | null>(null);
   const [sliceType, setSliceType] = useState<string | null>(null);
@@ -123,7 +124,8 @@ function AnalysisResult({ plot, dispatch }: Props) {
               </button>
             </div>
             <CustomAnalysisResult
-              Plotly={Plotly}
+              // eslint-disable-next-line @typescript-eslint/no-explicit-any
+              Plotly={Plotly as any}
               result={result}
               analysisType={result.analysisType}
               queryLimit={1000}

diff --git a/...ConfigurationPanel/ColorByViewOptions.tsx → ...ConfigurationPanel/ColorByViewOptions.tsx b/...ConfigurationPanel/ColorByViewOptions.tsx → ...ConfigurationPanel/ColorByViewOptions.tsx
@@ -1,18 +1,13 @@
 import React from "react";
-import {
-  ContextSelector,
-  DatasetMetadataSelector,
-  DimensionSelect,
-  SliceLabelSelect,
-  useDataExplorerSettings,
-} from "@depmap/data-explorer-2";
 import { ContextPath, DataExplorerContext, FilterKey } from "@depmap/types";
-import { PlotConfigReducerAction } from "src/data-explorer-2/reducers/plotConfigReducer";
-import {
-  ColorByTypeSelector,
-  SortBySelector,
-} from "src/data-explorer-2/components/ConfigurationPanel/selectors";
-import styles from "src/data-explorer-2/styles/ConfigurationPanel.scss";
+import ContextSelector from "../../../ContextSelector";
+import DatasetMetadataSelector from "../../../DatasetMetadataSelector";
+import DimensionSelect from "../../../DimensionSelect";
+import SliceLabelSelect from "../../../DimensionSelect/SliceLabelSelect";
+import { useDataExplorerSettings } from "../../../../contexts/DataExplorerSettingsContext";
+import { PlotConfigReducerAction } from "../../reducers/plotConfigReducer";
+import { ColorByTypeSelector, SortBySelector } from "./selectors";
+import styles from "../../styles/ConfigurationPanel.scss";
 
 interface Props {
   show: boolean;

diff --git a/...ConfigurationPanel/DistinguishOptions.tsx → ...ConfigurationPanel/DistinguishOptions.tsx b/...ConfigurationPanel/DistinguishOptions.tsx → ...ConfigurationPanel/DistinguishOptions.tsx
@@ -4,10 +4,10 @@ import {
   DataExplorerContext,
   ContextPath,
 } from "@depmap/types";
-import { PlotConfigReducerAction } from "src/data-explorer-2/reducers/plotConfigReducer";
-import Section from "src/data-explorer-2/components/Section";
-import FilterViewOptions from "src/data-explorer-2/components/ConfigurationPanel/FilterViewOptions";
-import styles from "src/data-explorer-2/styles/ConfigurationPanel.scss";
+import { PlotConfigReducerAction } from "../../reducers/plotConfigReducer";
+import Section from "../Section";
+import FilterViewOptions from "./FilterViewOptions";
+import styles from "../../styles/ConfigurationPanel.scss";
 
 interface Props {
   show: boolean;

diff --git a/.../ConfigurationPanel/FilterViewOptions.tsx → .../ConfigurationPanel/FilterViewOptions.tsx b/.../ConfigurationPanel/FilterViewOptions.tsx → .../ConfigurationPanel/FilterViewOptions.tsx
@@ -5,8 +5,8 @@ import {
   FilterKey,
   PartialDataExplorerPlotConfig,
 } from "@depmap/types";
-import { ContextSelector } from "@depmap/data-explorer-2";
-import { PlotConfigReducerAction } from "src/data-explorer-2/reducers/plotConfigReducer";
+import ContextSelector from "../../../ContextSelector";
+import { PlotConfigReducerAction } from "../../reducers/plotConfigReducer";
 
 interface Props {
   plot: PartialDataExplorerPlotConfig;

diff --git a/...nfigurationPanel/LinearRegressionInfo.tsx → ...nfigurationPanel/LinearRegressionInfo.tsx b/...nfigurationPanel/LinearRegressionInfo.tsx → ...nfigurationPanel/LinearRegressionInfo.tsx
@@ -1,17 +1,15 @@
 import React, { useCallback, useEffect, useRef, useState } from "react";
 import cx from "classnames";
-import {
-  renderConditionally,
-  useDeprecatedDataExplorerApi,
-} from "@depmap/data-explorer-2";
-import { PartialDataExplorerPlotConfig } from "@depmap/types";
-import { PlotConfigReducerAction } from "src/data-explorer-2/reducers/plotConfigReducer";
-import { isCompletePlot } from "src/data-explorer-2/utils";
-import Section from "src/data-explorer-2/components/Section";
-import { ShowRegressionLineCheckbox } from "src/data-explorer-2/components/ConfigurationPanel/selectors";
 import { Spinner } from "@depmap/common-components";
 import { reformatLinRegTable, StaticTable } from "@depmap/interactive";
-import styles from "src/data-explorer-2/styles/ConfigurationPanel.scss";
+import { PartialDataExplorerPlotConfig } from "@depmap/types";
+import renderConditionally from "../../../../utils/render-conditionally";
+import { useDeprecatedDataExplorerApi } from "../../../../contexts/DeprecatedDataExplorerApiContext";
+import { PlotConfigReducerAction } from "../../reducers/plotConfigReducer";
+import { isCompletePlot } from "../../validation";
+import Section from "../Section";
+import { ShowRegressionLineCheckbox } from "./selectors";
+import styles from "../../styles/ConfigurationPanel.scss";
 
 interface Props {
   plot: PartialDataExplorerPlotConfig;

diff --git a/.../ConfigurationPanel/PlotConfiguration.tsx → .../ConfigurationPanel/PlotConfiguration.tsx b/.../ConfigurationPanel/PlotConfiguration.tsx → .../ConfigurationPanel/PlotConfiguration.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import qs from "qs";
 import cx from "classnames";
 import { Button } from "react-bootstrap";
-import { DimensionSelect } from "@depmap/data-explorer-2";
+import DimensionSelect from "../../../DimensionSelect";
 import {
   ContextPath,
   DataExplorerContext,
@@ -11,14 +11,11 @@ import {
   DimensionKey,
   PartialDataExplorerPlotConfig,
 } from "@depmap/types";
-import { isCompletePlot } from "src/data-explorer-2/utils";
-import { PlotConfigReducerAction } from "src/data-explorer-2/reducers/plotConfigReducer";
-import {
-  PlotTypeSelector,
-  PointsSelector,
-} from "src/data-explorer-2/components/ConfigurationPanel/selectors";
-import Section from "src/data-explorer-2/components/Section";
-import styles from "src/data-explorer-2/styles/ConfigurationPanel.scss";
+import { isCompletePlot } from "../../validation";
+import { PlotConfigReducerAction } from "../../reducers/plotConfigReducer";
+import { PlotTypeSelector, PointsSelector } from "./selectors";
+import Section from "../Section";
+import styles from "../../styles/ConfigurationPanel.scss";
 
 interface Props {
   plot: PartialDataExplorerPlotConfig;

diff --git a/...mputedAssociations/DatasetFilterModal.tsx → ...mputedAssociations/DatasetFilterModal.tsx b/...mputedAssociations/DatasetFilterModal.tsx → ...mputedAssociations/DatasetFilterModal.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import { Button, Modal } from "react-bootstrap";
-import styles from "src/data-explorer-2/styles/PrecomputedAssociations.scss";
+import styles from "../../../styles/PrecomputedAssociations.scss";
 
 interface Props {
   show: boolean;

diff --git a/...dAssociations/PrecomputedAssociations.tsx → ...dAssociations/PrecomputedAssociations.tsx b/...dAssociations/PrecomputedAssociations.tsx → ...dAssociations/PrecomputedAssociations.tsx
@@ -1,11 +1,11 @@
 import React, { useEffect, useRef, useState } from "react";
 import { Button, Checkbox } from "react-bootstrap";
 import { Spinner } from "@depmap/common-components";
-import { renderConditionally } from "@depmap/data-explorer-2";
+import renderConditionally from "../../../../../utils/render-conditionally";
 import { PartialDataExplorerPlotConfig } from "@depmap/types";
-import PrecomputedAssociationsTable from "src/data-explorer-2/components/ConfigurationPanel/PrecomputedAssociations/PrecomputedAssociationsTable";
-import { useAssociationsData } from "src/data-explorer-2/components/ConfigurationPanel/PrecomputedAssociations/utils";
-import styles from "src/data-explorer-2/styles/PrecomputedAssociations.scss";
+import PrecomputedAssociationsTable from "./PrecomputedAssociationsTable";
+import { useAssociationsData } from "./utils";
+import styles from "../../../styles/PrecomputedAssociations.scss";
 
 interface Props {
   plot: PartialDataExplorerPlotConfig;

diff --git a/...ciations/PrecomputedAssociationsTable.tsx → ...ciations/PrecomputedAssociationsTable.tsx b/...ciations/PrecomputedAssociationsTable.tsx → ...ciations/PrecomputedAssociationsTable.tsx
@@ -1,12 +1,9 @@
 import React, { useMemo, useRef, useState } from "react";
 import cx from "classnames";
 import { WordBreaker } from "@depmap/common-components";
-import {
-  Associations,
-  sliceToDataset,
-} from "src/data-explorer-2/components/ConfigurationPanel/PrecomputedAssociations/utils";
-import DatasetFilterModal from "src/data-explorer-2/components/ConfigurationPanel/PrecomputedAssociations/DatasetFilterModal";
-import styles from "src/data-explorer-2/styles/PrecomputedAssociations.scss";
+import { Associations, sliceToDataset } from "./utils";
+import DatasetFilterModal from "./DatasetFilterModal";
+import styles from "../../../styles/PrecomputedAssociations.scss";
 
 interface Props {
   associations: Associations;

diff --git a/...onPanel/PrecomputedAssociations/index.tsx → ...onPanel/PrecomputedAssociations/index.tsx b/...onPanel/PrecomputedAssociations/index.tsx → ...onPanel/PrecomputedAssociations/index.tsx
@@ -1,9 +1,9 @@
 import React, { useCallback, useRef, useState } from "react";
-import { renderConditionally } from "@depmap/data-explorer-2";
 import { PartialDataExplorerPlotConfig } from "@depmap/types";
-import { PlotConfigReducerAction } from "src/data-explorer-2/reducers/plotConfigReducer";
-import Section from "src/data-explorer-2/components/Section";
-import PrecomputedAssociations from "src/data-explorer-2/components/ConfigurationPanel/PrecomputedAssociations/PrecomputedAssociations";
+import renderConditionally from "../../../../../utils/render-conditionally";
+import { PlotConfigReducerAction } from "../../../reducers/plotConfigReducer";
+import Section from "../../Section";
+import PrecomputedAssociations from "./PrecomputedAssociations";
 
 interface Props {
   plot: PartialDataExplorerPlotConfig;

diff --git a/...ionPanel/PrecomputedAssociations/utils.ts → ...ionPanel/PrecomputedAssociations/utils.ts b/...ionPanel/PrecomputedAssociations/utils.ts → ...ionPanel/PrecomputedAssociations/utils.ts
@@ -1,12 +1,12 @@
 import { useEffect, useState } from "react";
-import {
-  DeprecatedDataExplorerApiResponse,
-  useDeprecatedDataExplorerApi,
-} from "@depmap/data-explorer-2";
 import {
   DataExplorerContext,
   PartialDataExplorerPlotConfig,
 } from "@depmap/types";
+import {
+  DeprecatedDataExplorerApiResponse,
+  useDeprecatedDataExplorerApi,
+} from "../../../../../contexts/DeprecatedDataExplorerApiContext";
 
 export type Associations = DeprecatedDataExplorerApiResponse["fetchAssociations"];
 export const sliceToDataset = (slice_id: string) => {

diff --git a/...onents/ConfigurationPanel/ViewOptions.tsx → ...onents/ConfigurationPanel/ViewOptions.tsx b/...onents/ConfigurationPanel/ViewOptions.tsx → ...onents/ConfigurationPanel/ViewOptions.tsx
@@ -6,16 +6,16 @@ import {
   DataExplorerContext,
   PartialDataExplorerPlotConfig,
 } from "@depmap/types";
-import { PlotConfigReducerAction } from "src/data-explorer-2/reducers/plotConfigReducer";
-import HelpTip from "src/data-explorer-2/components/HelpTip";
-import Section from "src/data-explorer-2/components/Section";
+import { PlotConfigReducerAction } from "../../reducers/plotConfigReducer";
+import HelpTip from "../HelpTip";
+import Section from "../Section";
 import {
   ShowIdentityLineCheckbox,
   ShowPointsCheckbox,
   UseClusteringCheckbox,
-} from "src/data-explorer-2/components/ConfigurationPanel/selectors";
-import FilterViewOptions from "src/data-explorer-2/components/ConfigurationPanel/FilterViewOptions";
-import ColorByViewOptions from "src/data-explorer-2/components/ConfigurationPanel/ColorByViewOptions";
+} from "./selectors";
+import FilterViewOptions from "./FilterViewOptions";
+import ColorByViewOptions from "./ColorByViewOptions";
 
 interface Props {
   plot: PartialDataExplorerPlotConfig;

diff --git a/...2/components/ConfigurationPanel/index.tsx → ...e/components/ConfigurationPanel/index.tsx b/...2/components/ConfigurationPanel/index.tsx → ...e/components/ConfigurationPanel/index.tsx
@@ -4,14 +4,14 @@ import {
   DataExplorerContext,
   PartialDataExplorerPlotConfig,
 } from "@depmap/types";
-import { PlotConfigReducerAction } from "src/data-explorer-2/reducers/plotConfigReducer";
-import PlotConfiguration from "src/data-explorer-2/components/ConfigurationPanel/PlotConfiguration";
-import AnalysisResult from "src/data-explorer-2/components/ConfigurationPanel/AnalysisResult";
-import ViewOptions from "src/data-explorer-2/components/ConfigurationPanel/ViewOptions";
-import LinearRegressionInfo from "src/data-explorer-2/components/ConfigurationPanel/LinearRegressionInfo";
-import PrecomputedAssociations from "src/data-explorer-2/components/ConfigurationPanel/PrecomputedAssociations";
-import DistinguishOptions from "src/data-explorer-2/components/ConfigurationPanel/DistinguishOptions";
-import styles from "src/data-explorer-2/styles/ConfigurationPanel.scss";
+import { PlotConfigReducerAction } from "../../reducers/plotConfigReducer";
+import PlotConfiguration from "./PlotConfiguration";
+import AnalysisResult from "./AnalysisResult";
+import ViewOptions from "./ViewOptions";
+import LinearRegressionInfo from "./LinearRegressionInfo";
+import PrecomputedAssociations from "./PrecomputedAssociations";
+import DistinguishOptions from "./DistinguishOptions";
+import styles from "../../styles/ConfigurationPanel.scss";
 
 interface Props {
   plot: PartialDataExplorerPlotConfig;