[feat] Persist explorer state on Figures and Base Explorers (#2214)

Added support to sync explorer state through url on core renderer and Figures Explorer
aimhubio · Oct 28, 2022 · 5db8c63 · 5db8c63
1 parent ff83bc4
commit 5db8c63
Show file tree

Hide file tree

Showing 29 changed files with 754 additions and 124 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,11 +1,11 @@
 # Changelog
 
-- Support syntax error highlighting in Figures Explorer (KaroMourad)
-- Fix issue with applying solid stroke styles on stroke badge in table (KaroMourad)
-- Fix active runs indicators overlapping issue in LineChart (KaroMourad)
-
 ## 3.14.2
 
+- Add support to sync explorer state through url on Base and Figures Explorers (rubenaprikyan)
+- Add support to highlight syntax error in Figures Explorer (KaroMourad)
+- Fix issue with applying solid stroke styles on stroke badge in table (KaroMourad)
+- Fix active runs indicators overlapping issue in LineChart (KaroMourad)
 - Add support for text style formatting in the logs tab (VkoHov)
 - Fix "`TypeError: check()` keywords must be strings" for `Run.metrics()` method (alberttorosyan)
 - Fix run info API call error when tag color/description is None (alberttorosyan)

diff --git a/aim/web/ui/package-lock.json b/aim/web/ui/package-lock.json
diff --git a/aim/web/ui/package.json b/aim/web/ui/package.json
@@ -8,6 +8,7 @@
     "@material-ui/icons": "^4.11.2",
     "@material-ui/lab": "^4.0.0-alpha.60",
     "@monaco-editor/react": "4.4.4",
+    "@types/history": "^5.0.0",
     "@types/marked": "^4.0.7",
     "@uiw/react-textarea-code-editor": "^1.4.14",
     "bs58check": "^2.1.2",
@@ -19,6 +20,7 @@
     "formik": "^2.2.9",
     "highcharts": "^9.3.1",
     "highcharts-react-official": "^3.1.0",
+    "history": "^5.3.0",
     "humanize-duration": "^3.27.0",
     "lodash-es": "^4.17.21",
     "marked": "^4.1.1",

diff --git a/aim/web/ui/src/components/AutocompleteInput/AutocompleteInput.d.ts b/aim/web/ui/src/components/AutocompleteInput/AutocompleteInput.d.ts
@@ -20,4 +20,5 @@ export interface IAutocompleteInputProps {
     ev?: monaco.editor.IModelContentChangedEvent,
   ) => void;
   error?: ISyntaxErrorDetails;
+  forceRemoveError?: boolean;
 }
diff --git a/aim/web/ui/src/components/AutocompleteInput/AutocompleteInput.tsx b/aim/web/ui/src/components/AutocompleteInput/AutocompleteInput.tsx
@@ -25,6 +25,7 @@ function AutocompleteInput({
   refObject,
   error,
   disabled = false,
+  forceRemoveError = false,
   //callback functions
   onEnter,
   onChange,
@@ -71,8 +72,12 @@ function AutocompleteInput({
 
   React.useEffect(() => {
     setMarkers();
+    if (forceRemoveError && !error) {
+      setErrorMessage('');
+      deleteMarkers();
+    }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [error, monaco]);
+  }, [error, monaco, forceRemoveError]);
 
   React.useEffect(() => {
     if (focused) {

diff --git a/aim/web/ui/src/modules/BaseExplorer/components/Explorer/Explorer.tsx b/aim/web/ui/src/modules/BaseExplorer/components/Explorer/Explorer.tsx
@@ -12,9 +12,9 @@ function Explorer({ configuration, engineInstance }: ExplorerProps) {
   );
 
   useEffect(() => {
-    engineInstance.initialize().then().catch();
+    const finalize = engineInstance.initialize();
     return () => {
-      engineInstance.finalize();
+      finalize();
     };
   }, [engineInstance]);
 

diff --git a/aim/web/ui/src/modules/BaseExplorer/components/QueryForm/QueryForm.tsx b/aim/web/ui/src/modules/BaseExplorer/components/QueryForm/QueryForm.tsx
@@ -22,6 +22,7 @@ import {
   QueryFormState,
   QueryRangesState,
 } from 'modules/core/engine/explorer/query';
+import getQueryParamsFromState from 'modules/core/utils/getQueryParamsFromState';
 
 import { Badge, Button, Icon, Text } from 'components/kit';
 import AutocompleteInput from 'components/AutocompleteInput';
@@ -120,9 +121,14 @@ function QueryForm(props: Omit<IQueryFormProps, 'visualizationName'>) {
       return;
     } else {
       engine.pipeline.search({
-        q: getQueryStringFromSelect(query, sequenceName),
+        ...getQueryParamsFromState(
+          {
+            form: query,
+            ranges,
+          },
+          sequenceName,
+        ),
         report_progress: true,
-        ...getQueryFromRanges(ranges),
       });
     }
   }, [engine, isExecuting, query, sequenceName, ranges]);
@@ -259,6 +265,7 @@ function QueryForm(props: Omit<IQueryFormProps, 'visualizationName'>) {
                     onChange={onInputChange}
                     onEnter={onSubmit}
                     error={processedError}
+                    forceRemoveError={true}
                   />
                 </div>
               </ErrorBoundary>
@@ -392,6 +399,7 @@ function QueryForm(props: Omit<IQueryFormProps, 'visualizationName'>) {
                 context={autocompleteContext.suggestions}
                 onEnter={onSubmit}
                 error={processedError}
+                forceRemoveError={true}
               />
             </div>
           )}

diff --git a/aim/web/ui/src/modules/BaseExplorer/components/RangePanel/RangePanel.tsx b/aim/web/ui/src/modules/BaseExplorer/components/RangePanel/RangePanel.tsx
@@ -1,14 +1,13 @@
 import React from 'react';
 
 import { QueryFormState } from 'modules/core/engine/explorer/query/state';
-import { getQueryFromRanges } from 'modules/core/utils/getQueryFromRanges';
-import { getQueryStringFromSelect } from 'modules/core/utils/getQueryStringFromSelect';
+import getQueryParamsFromState from 'modules/core/utils/getQueryParamsFromState';
 
 import { Button, Icon, Text } from 'components/kit';
 
 import { SequenceTypesEnum } from 'types/core/enums';
 
-import { getRangeAndDensityData } from './helpers';
+import { getRecordState } from './helpers';
 import RangePanelItem from './RangePanelItem';
 
 import { IRangePanelProps } from './';
@@ -35,9 +34,14 @@ function RangePanel(props: IRangePanelProps) {
         isApplyButtonDisabled: true,
       });
       engine.pipeline.search({
-        q: getQueryStringFromSelect(query, sequenceName),
+        ...getQueryParamsFromState(
+          {
+            ranges: rangeState,
+            form: query,
+          },
+          sequenceName,
+        ),
         report_progress: true,
-        ...getQueryFromRanges(rangeState),
       });
     }
   }, [engine, isFetching, query, sequenceName, rangeState]);
@@ -67,35 +71,7 @@ function RangePanel(props: IRangePanelProps) {
 
   React.useEffect(() => {
     // creating the empty ranges state
-    const updatedRangesState: {
-      record?: { slice: [number, number]; density: number };
-      index?: { slice: [number, number]; density: number };
-    } = {};
-
-    // checking is record data exist
-    if (props.rangesData?.ranges?.record_range_total) {
-      const { record_range_used, record_range_total } =
-        props.rangesData?.ranges;
-
-      // setting record range slice and density
-      updatedRangesState.record = getRangeAndDensityData(
-        record_range_total,
-        record_range_used,
-        rangeState.record?.density ?? 50,
-      );
-    }
-
-    // checking is index data exist
-    if (props.rangesData?.ranges?.index_range_total) {
-      const { index_range_total, index_range_used } = props.rangesData?.ranges;
-
-      // setting index range slice and density
-      updatedRangesState.index = getRangeAndDensityData(
-        index_range_total,
-        index_range_used,
-        rangeState.index?.density ?? 5,
-      );
-    }
+    const updatedRangesState = getRecordState(props.rangesData, rangeState);
 
     //updating the ranges data and setting the apply button disability
     engine.query.ranges.update({

diff --git a/aim/web/ui/src/modules/BaseExplorer/components/RangePanel/helpers.ts b/aim/web/ui/src/modules/BaseExplorer/components/RangePanel/helpers.ts
@@ -32,3 +32,36 @@ export function getRangeAndDensityData(
 
   return { density, slice };
 }
+
+export function getRecordState(rangesData: any, rangeState: any) {
+  const updatedRangesState: {
+    record?: { slice: [number, number]; density: number };
+    index?: { slice: [number, number]; density: number };
+  } = {};
+
+  // checking is record data exist
+  if (rangesData?.ranges?.record_range_total) {
+    const { record_range_used, record_range_total } = rangesData?.ranges;
+
+    // setting record range slice and density
+    updatedRangesState.record = getRangeAndDensityData(
+      record_range_total,
+      record_range_used,
+      rangeState.record?.density ?? 50,
+    );
+  }
+
+  // checking is index data exist
+  if (rangesData?.ranges?.index_range_total) {
+    const { index_range_total, index_range_used } = rangesData?.ranges;
+
+    // setting index range slice and density
+    updatedRangesState.index = getRangeAndDensityData(
+      index_range_total,
+      index_range_used,
+      rangeState.index?.density ?? 5,
+    );
+  }
+
+  return updatedRangesState;
+}
diff --git a/aim/web/ui/src/modules/BaseExplorer/getDefaultHydration.tsx b/aim/web/ui/src/modules/BaseExplorer/getDefaultHydration.tsx
@@ -38,6 +38,7 @@ const controls: ControlsConfigs = {
         displayBoxCaption: true,
         selectedFields: ['run.name', 'figures.name', 'figures.context'],
       },
+      persist: 'url',
     },
   },
 };
@@ -125,6 +126,7 @@ const defaultHydration = {
   documentationLink:
     'https://aimstack.readthedocs.io/en/latest/ui/pages/explorers.html',
   box: {
+    persist: true,
     initialState: {
       width: 400,
       height: 400,