[code-health] Separate state slices on explorer engine and improve code quality

aim/web/ui/config-overrides.js

@@ -1,3 +1,4 @@
+const webpack = require('webpack');
 const WebpackDynamicPublicPathPlugin = require('webpack-dynamic-public-path');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 
@@ -44,6 +45,12 @@ module.exports = {
         externalPublicPath: 'window.externalPublicPath',
       }),
     );
+
+    config.plugins.push(
+      new webpack.DefinePlugin({
+        __DEV__: !isEnvProduction,
+      }),
+    );
     return config;
   },
 };

aim/web/ui/package.json

@@ -43,7 +43,7 @@
     "typeface-roboto": "^1.1.13",
     "web-vitals": "^1.0.1",
     "yup": "^0.32.9",
-    "zustand": "^4.0.0-rc.4"
+    "zustand": "^4.1.1"
   },
   "scripts": {
     "start": "react-app-rewired --max_old_space_size=4096 start",

aim/web/ui/src/components/SliderWithInput/SliderWithInput.tsx

@@ -76,7 +76,7 @@ function SliderWithInput({
             />
           ) : (
             <Slider
-              value={selectedRangeValue}
+              value={[...selectedRangeValue]}
               onChange={((e: any, value: any) => onRangeChange(value)) as any}
               min={min}
               max={max}

aim/web/ui/src/config/enums/routesEnum.ts

@@ -13,6 +13,7 @@ enum PathEnum {
   Images_Explore = '/images',
   Images_Explore_Id = '/images/:appId',
   Figures_Explorer = '/figures',
+  New_Figures_Explorer = '/new-fig',
 }
 
 export { PathEnum };

aim/web/ui/src/config/illustrationConfig/illustrationConfig.tsx

@@ -1,4 +1,4 @@
-import { PipelineStatusEnum } from 'modules/core/engine';
+import { PipelineStatusEnum } from 'modules/core/engine/types';
 
 import emptyBookmarks from 'assets/illustrations/emptyBookmarks.svg';
 import emptySearch from 'assets/illustrations/emptySearch.svg';

aim/web/ui/src/config/pageTitles/pageTitles.ts

@@ -9,6 +9,7 @@ const pageTitles = {
   BOOKMARKS: 'Bookmarks',
   TAGS: 'Tags',
   RUN_DETAIL: '',
+  FIGURES_EXPLORER_NEW: 'New Figures',
 };
 
 export default pageTitles;

aim/web/ui/src/hooks/useDepthMap.ts

@@ -53,17 +53,17 @@ function useDepthMap<T>({
     (value: number, groupId: string): void => {
       if (sync) {
         const syncedDepthMap = generateMapBy(value);
-        state.methods.update(syncedDepthMap);
+        state.update(syncedDepthMap);
       } else {
-        state.methods.update({ [groupId]: value });
+        state.update({ [groupId]: value });
       }
     },
-    [sync, generateMapBy, state.methods],
+    [sync, generateMapBy, state],
   );
 
   React.useEffect(() => {
     // set/reset depth map
-    state.methods.update(initialMap);
+    state.update(initialMap);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, deps);
 

aim/web/ui/src/modules/BaseExplorer/components/BoxFullViewPopover/BoxFullViewPopover.tsx

@@ -130,10 +130,7 @@ function BoxFullViewPopover({
             {item.run?.hash && (
               <div className='BoxFullViewPopover__container__detail-section'>
                 <ErrorBoundary>
-                  <AttachedTagsList
-                    runHash={item.run.hash}
-                    tags={item.run?.tags}
-                  />
+                  <AttachedTagsList runHash={item.run.hash} />
                 </ErrorBoundary>
               </div>
             )}

aim/web/ui/src/modules/BaseExplorer/components/BoxVirtualizer/BoxVirtualizer.tsx

@@ -86,7 +86,6 @@ function BoxVirtualizer(props: IBoxVirtualizerProps<AimFlatObjectBase<any>>) {
       item.style.top >= gridWindow.top - item.style.height &&
       item.style.top <= gridWindow.top + gridWindow.height,
   );
-
   const groupedByPosition = _.groupBy(filteredItems, (item) => {
     const rowId = item.groups?.rows ? item.groups.rows[0] : '';
     const columnId = item.groups?.columns ? item.groups.columns[0] : '';

aim/web/ui/src/modules/BaseExplorer/components/BoxWrapper/BoxWrapper.d.ts

@@ -9,4 +9,5 @@ export interface IBoxWrapperProps<T> extends IBaseComponentProps {
   groupId: string;
   depthSelector: (groupKey: string) => (state: any) => number;
   onDepthMapChange: (value: number, groupId: string) => void;
+  visualizationName: string;
 }

aim/web/ui/src/modules/BaseExplorer/components/BoxWrapper/BoxWrapper.scss

@@ -29,6 +29,7 @@
     background-color: white;
     width: calc(100% - 2px);
     height: 1.75rem;
+    margin-bottom: toRem(1px);
     & > .Slider {
       width: 100%;
       max-width: 46rem;

aim/web/ui/src/modules/BaseExplorer/components/BoxWrapper/BoxWrapper.tsx

@@ -18,28 +18,22 @@ import './BoxWrapper.scss';
 function BoxWrapper(props: IBoxWrapperProps<AimFlatObjectBase<any>>) {
   const {
     engine,
-    engine: {
-      useStore,
-      sequenceNameSelector,
-      boxConfig: { stateSelector: boxConfigStateSelector },
-      controls: {
-        captionProperties: { stateSelector: captionPropertiesStateSelector },
-      },
-    },
+    engine: { useStore },
     items,
     component: BoxContent,
     groupId,
     depthSelector,
     onDepthMapChange,
   } = props;
+  const vizEngine = engine.visualizations[props.visualizationName];
 
   const [fullView, setFullView] = React.useState<boolean>(false);
-  const sequenceName: SequenceTypesEnum = useStore(sequenceNameSelector);
-  const boxConfig = useStore(boxConfigStateSelector);
+  const sequenceName: SequenceTypesEnum = engine.pipeline.getSequenceName();
+  const boxConfig = useStore(vizEngine.box.stateSelector);
   const captionProperties: ICaptionProperties = useStore(
-    captionPropertiesStateSelector,
+    vizEngine.controls.captionProperties.stateSelector,
   );
-  const foundGroups = engine.useStore(engine.foundGroupsSelector);
+  const foundGroups = engine.useStore(engine.pipeline.foundGroupsSelector);
   const depth = engine.useStore(depthSelector(groupId));
   const captionBoxRef: React.RefObject<HTMLDivElement | null> =
     React.useRef<HTMLDivElement>(null);
@@ -111,6 +105,7 @@ function BoxWrapper(props: IBoxWrapperProps<AimFlatObjectBase<any>>) {
             data={currentItem}
             engine={engine}
             style={currentItem.style}
+            visualizationName={props.visualizationName}
           />
         )}
       </div>
@@ -124,6 +119,7 @@ function BoxWrapper(props: IBoxWrapperProps<AimFlatObjectBase<any>>) {
             captionBoxRef={captionBoxRef}
             engine={engine}
             item={currentItem}
+            visualizationName={props.visualizationName}
           />
         )}
       {fullView && (
@@ -135,7 +131,13 @@ function BoxWrapper(props: IBoxWrapperProps<AimFlatObjectBase<any>>) {
         >
           <div className='BoxWrapper__fullViewContent'>
             <div className='BoxWrapper__fullViewContent__box'>
-              {BoxContent && <BoxContent data={currentItem} engine={engine} />}
+              {BoxContent && (
+                <BoxContent
+                  data={currentItem}
+                  engine={engine}
+                  visualizationName={props.visualizationName}
+                />
+              )}
             </div>
           </div>
           {renderDepthSlider({

aim/web/ui/src/modules/BaseExplorer/components/CaptionBox/CaptionBox.d.ts

@@ -1,7 +1,8 @@
 import React from 'react';
 
-export interface ICaptionBoxProps {
-  engine: IBaseComponentProps['engine'];
+import { IBaseComponentProps } from 'modules/BaseExplorer/types';
+
+export interface ICaptionBoxProps extends IBaseComponentProps {
   captionBoxRef: React.RefObject<HTMLDivElement>;
   item: any;
 }

aim/web/ui/src/modules/BaseExplorer/components/CaptionBox/CaptionBox.tsx

@@ -18,14 +18,18 @@ import './CaptionBox.scss';
 function CaptionBox(props: ICaptionBoxProps) {
   const {
     captionBoxRef,
+    visualizationName,
     engine: {
       useStore,
-      additionalDataSelector,
-      controls: {
-        captionProperties: { stateSelector },
-      },
+      visualizations,
+      pipeline: { additionalDataSelector },
     },
   } = props;
+  const {
+    controls: {
+      captionProperties: { stateSelector },
+    },
+  } = visualizations[visualizationName];
 
   const captionProperties = useStore(stateSelector);
   const availableModifiers = useStore(additionalDataSelector);

aim/web/ui/src/modules/BaseExplorer/components/Controls/BoxProperties/BoxProperties.tsx

@@ -1,27 +1,21 @@
 import React from 'react';
 import classNames from 'classnames';
 
-import { IBaseComponentProps } from 'modules/BaseExplorer/types';
-
 import ControlPopover from 'components/ControlPopover/ControlPopover';
-import { Button, Icon, Text } from 'components/kit';
+import { Icon, Button, Text } from 'components/kit';
 
 import BoxPropertiesPopover from './Popover';
 
 import { IBoxPropertiesProps, IBoxConfigState } from '.';
 
 function BoxProperties(props: IBoxPropertiesProps) {
   const {
-    engine,
-    engine: {
-      useStore,
-      boxConfig: { stateSelector: boxSelector },
-      controls: {
-        boxProperties: { settings },
-      },
-    },
+    visualizationName,
+    engine: { visualizations, useStore },
   } = props;
-  const boxProperties: IBoxConfigState = useStore(boxSelector);
+  const vizEngine = visualizations[visualizationName];
+
+  const boxProperties: IBoxConfigState = useStore(vizEngine.box.stateSelector);
   return (
     <ControlPopover
       title='Configure box size'
@@ -51,10 +45,10 @@ function BoxProperties(props: IBoxPropertiesProps) {
       )}
       component={
         <BoxPropertiesPopover
-          update={engine.boxConfig.methods.update}
-          reset={engine.boxConfig.methods.reset}
+          update={vizEngine.box.methods.update}
+          reset={vizEngine.box.methods.reset}
           boxProperties={boxProperties}
-          settings={settings}
+          settings={vizEngine.controls.boxProperties.settings}
         />
       }
     />
@@ -63,4 +57,4 @@ function BoxProperties(props: IBoxPropertiesProps) {
 
 BoxProperties.displayName = 'BoxProperties';
 
-export default React.memo<IBaseComponentProps>(BoxProperties);
+export default React.memo<IBoxPropertiesProps>(BoxProperties);

aim/web/ui/src/modules/BaseExplorer/components/Controls/CaptionProperties/CaptionProperties.tsx

@@ -3,8 +3,8 @@ import classNames from 'classnames';
 
 import { IBaseComponentProps } from 'modules/BaseExplorer/types';
 
-import ControlPopover from 'components/ControlPopover/ControlPopover';
 import { Button, Icon, Text } from 'components/kit';
+import ControlPopover from 'components/ControlPopover/ControlPopover';
 import ErrorBoundary from 'components/ErrorBoundary/ErrorBoundary';
 
 import CaptionPropertiesPopover from './CaptionPropertiesPopover';
@@ -14,14 +14,15 @@ import { ICaptionProperties, ICaptionPropertiesProps } from './';
 function CaptionProperties(props: ICaptionPropertiesProps) {
   const {
     engine,
-    engine: {
-      useStore,
-      controls: {
-        captionProperties: { stateSelector },
-      },
-    },
+    visualizationName,
+    engine: { useStore, visualizations },
   } = props;
-  const captionProperties: ICaptionProperties = useStore(stateSelector);
+  const vizEngine = visualizations[visualizationName];
+
+  const captionProperties: ICaptionProperties = useStore(
+    vizEngine.controls.captionProperties.stateSelector,
+  );
+
   return (
     <ErrorBoundary>
       <ControlPopover
@@ -54,6 +55,7 @@ function CaptionProperties(props: ICaptionPropertiesProps) {
           <CaptionPropertiesPopover
             engine={engine}
             captionProperties={captionProperties}
+            visualizationName={props.visualizationName}
           />
         }
       />

aim/web/ui/src/modules/BaseExplorer/components/Controls/CaptionProperties/CaptionPropertiesPopover/CaptionPropertiesPopover.tsx

@@ -21,16 +21,16 @@ function CaptionPropertiesPopover(
 ): React.FunctionComponentElement<React.ReactNode> {
   const {
     captionProperties,
+    visualizationName,
     engine: {
       useStore,
-      additionalDataSelector,
-      controls: {
-        captionProperties: {
-          methods: { update: updateCaptionProperties },
-        },
-      },
+      pipeline: { additionalDataSelector },
+      visualizations,
     },
   } = props;
+  const updateCaptionProperties =
+    visualizations[visualizationName].controls.captionProperties.methods.update;
+
   const availableModifiers = useStore(additionalDataSelector);
   const [searchValue, setSearchValue] = React.useState<string>('');