[feat] Add Images Explorer (#2947)

src/aimcore/web/ui/src/components/FigureBox/FigureBox.tsx

@@ -70,7 +70,7 @@ function FigureBox(props: FigureBoxProps) {
             onUpdate={onAutoSize}
           />
         ) : (
-          <Spinner size={24} />
+          <Spinner size={24} thickness={2} />
         )}
       </div>
     </ErrorBoundary>

src/aimcore/web/ui/src/components/ImageBox/ImageBox.tsx

@@ -1,9 +1,8 @@
 import React from 'react';
 import { useImageBlobURI } from 'hooks';
 
-import { Skeleton } from '@material-ui/lab';
-
 import ErrorBoundary from 'components/ErrorBoundary';
+import { Spinner } from 'components/kit';
 
 import { ImageBoxProps } from './';
 
@@ -20,9 +19,7 @@ function ImageBox(props: ImageBoxProps) {
             alt={caption}
           />
         ) : (
-          <div style={{ height: '100%' }}>
-            <Skeleton variant='rect' height='100%' />
-          </div>
+          <Spinner size={24} thickness={2} />
         )}
       </div>
     </ErrorBoundary>

src/aimcore/web/ui/src/modules/BaseExplorer/components/Image/Image.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+
+import ErrorBoundary from 'components/ErrorBoundary';
+import ImageBox from 'components/ImageBox';
+
+import { IBoxContentProps } from 'modules/BaseExplorer/types';
+
+function Image(props: IBoxContentProps) {
+  return (
+    <ErrorBoundary>
+      <ImageBox
+        engine={{ blobURI: props.engine.blobURI }}
+        format={props.data.data.format}
+        caption={props.data.data.caption}
+        name={props.data.sequence.name}
+        context={props.data.sequence.context}
+        step={props.data.record.step}
+        index={props.data.record.index}
+        blobData={props.data.data.blobs.data}
+        isFullView={props.isFullView}
+      />
+    </ErrorBoundary>
+  );
+}
+
+export default React.memo(Image);

src/aimcore/web/ui/src/modules/BaseExplorer/components/Image/index.ts

@@ -0,0 +1,2 @@
+import Image from './Image';
+export default Image;

src/aimcore/web/ui/src/pages/Board/components/AudiosList.tsx

@@ -12,12 +12,6 @@ function AudiosList(props: any) {
     ...audio.record,
   }));
 
-  const boxStyle = {
-    margin: '5px',
-    height: 50,
-    width: 'calc(100% - 10px)',
-    flex: 1,
-  };
   const boxKey = (item: any) =>
     `${item?.container?.hash}_${item.name}_${JSON.stringify(item.context)}_${
       item.step
@@ -27,7 +21,6 @@ function AudiosList(props: any) {
       {data.map((item: any) => (
         <AudioBox
           key={boxKey(item)}
-          style={boxStyle}
           blobData={item.blobs.data}
           format={item.format}
           caption={item.caption}

src/aimcore/web/ui/src/pages/Board/components/FiguresList.tsx

@@ -12,14 +12,6 @@ function FiguresList(props: any) {
     ...figure.record,
   }));
 
-  const boxStyle = {
-    width: '100%',
-    height: '100%',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    margin: 5,
-  };
   const boxKey = (item: any) =>
     `${item?.container?.hash}_${item.name}_${JSON.stringify(item.context)}_${
       item.step
@@ -29,7 +21,6 @@ function FiguresList(props: any) {
       {data.map((item: any) => (
         <FigureBox
           key={boxKey(item)}
-          style={boxStyle}
           blobData={item.blobs.data}
           format={item.format}
           name={item.name}

src/aimcore/web/ui/src/pages/Board/components/ImagesList.tsx

@@ -12,11 +12,6 @@ function ImagesList(props: any) {
     ...image.record,
   }));
 
-  const boxStyle = {
-    margin: '5px',
-    height: 'calc(100% - 10px)',
-    flex: 1,
-  };
   const boxKey = (item: any) =>
     `${item?.container?.hash}_${item.name}_${JSON.stringify(item.context)}_${
       item.step
@@ -26,7 +21,6 @@ function ImagesList(props: any) {
       {data.map((item: any) => (
         <ImageBox
           key={boxKey(item)}
-          style={boxStyle}
           blobData={item.blobs.data}
           format={item.format}
           caption={item.caption}

src/aimcore/web/ui/src/pages/Dashboard/components/ProjectStatistics/ProjectStatisticsStore.ts

@@ -12,7 +12,7 @@ function projectStatisticsEngine() {
       const data = await getProjectsInfo({
         sequence: [
           SequenceType.Metric,
-          // SequenceType.Image,
+          SequenceType.Image,
           SequenceType.Figure,
           SequenceType.Text,
           SequenceType.Audio,

src/aimcore/web/ui/src/pages/Dashboard/components/ProjectStatistics/useProjectStatistics.tsx

@@ -36,13 +36,13 @@ const statisticsInitialMap: Record<string, IProjectStatistic> = {
     iconBgColor: '#18AB6D',
     navLink: routes.FIGURES_EXPLORER.path,
   },
-  // [SequenceType.Image]: {
-  //   label: 'Images',
-  //   icon: 'images',
-  //   count: 0,
-  //   iconBgColor: '#F17922',
-  //   navLink: routes.IMAGES_EXPLORER.path,
-  // },
+  [SequenceType.Image]: {
+    label: 'Images',
+    icon: 'images',
+    count: 0,
+    iconBgColor: '#F17922',
+    navLink: routes.IMAGES_EXPLORER.path,
+  },
   [SequenceType.Audio]: {
     label: 'Audios',
     icon: 'audios',

src/aimcore/web/ui/src/pages/Explorers/ImagesExplorer/config.ts

@@ -0,0 +1,52 @@
+import produce from 'immer';
+
+import { getDefaultHydration } from 'modules/BaseExplorer';
+import { GroupType, Order } from 'modules/core/pipeline';
+import { defaultHydration } from 'modules/BaseExplorer/getDefaultHydration';
+import { CaptionProperties } from 'modules/BaseExplorer/components/Controls';
+
+import { GetSequenceName, SequenceType } from 'types/core/enums';
+
+import getImagesExplorerStaticContent from './getStaticContent';
+
+export const getImagesDefaultConfig = (): typeof defaultHydration => {
+  const defaultConfig = getDefaultHydration();
+  const sequenceName = GetSequenceName(SequenceType.Image);
+
+  const groupings = produce(defaultConfig.groupings, (draft: any) => {
+    draft[GroupType.COLUMN].defaultApplications.orders = [Order.ASC, Order.ASC];
+    draft[GroupType.COLUMN].defaultApplications.fields = [
+      'run.hash',
+      `${sequenceName}.name`,
+    ];
+    draft[GroupType.ROW].defaultApplications.orders = [Order.DESC];
+    draft[GroupType.ROW].defaultApplications.fields = ['record.step'];
+
+    draft[GroupType.GRID].defaultApplications.orders = [Order.ASC];
+    draft[GroupType.GRID].defaultApplications.fields = [`${sequenceName}.name`];
+  });
+
+  const controls = produce(defaultConfig.controls, (draft: any) => {
+    draft.captionProperties = {
+      component: CaptionProperties,
+      state: {
+        initialState: {
+          displayBoxCaption: true,
+          selectedFields: [
+            'run.name',
+            `${sequenceName}.name`,
+            `${sequenceName}.context`,
+          ],
+        },
+        persist: 'url',
+      },
+    };
+  });
+
+  return {
+    ...defaultConfig,
+    groupings,
+    controls,
+    getStaticContent: getImagesExplorerStaticContent,
+  };
+};

src/aimcore/web/ui/src/pages/Explorers/ImagesExplorer/getStaticContent.tsx

@@ -0,0 +1,52 @@
+import * as React from 'react';
+
+import { DOCUMENTATIONS } from 'config/references';
+
+import getBaseExplorerStaticContent, {
+  STATIC_CONTENT_TYPES,
+} from 'modules/BaseExplorer/utils/getBaseExplorerStaticContent';
+import { StaticContentType } from 'modules/BaseExplorer/types';
+
+function getImagesExplorerStaticContent(
+  type: StaticContentType,
+): React.ReactNode {
+  const illustrationContent = getImagesExplorerIllustrationContent(type);
+  return getBaseExplorerStaticContent(type, illustrationContent);
+}
+
+function getImagesExplorerIllustrationContent(
+  type: StaticContentType,
+): React.ReactNode {
+  const Never_Executed = (
+    <>
+      It’s super easy to search Aim experiments. Just start typing your query in
+      the search bar above.
+      <br />
+      Look up
+      <a
+        className='qlAnchor'
+        href={DOCUMENTATIONS.EXPLORERS.SEARCH}
+        target='_blank'
+        rel='noreferrer'
+      >
+        search docs
+      </a>
+      to learn more.
+    </>
+  );
+  const Failed = 'Incorrect Query';
+  const Insufficient_Resources = "You don't have any tracked images";
+  const Empty = 'No Results';
+  const Empty_Bookmarks = "You don't have any saved bookmark";
+
+  const CONTENT = {
+    [STATIC_CONTENT_TYPES.Never_Executed]: Never_Executed,
+    [STATIC_CONTENT_TYPES.Failed]: Failed,
+    [STATIC_CONTENT_TYPES.Insufficient_Resources]: Insufficient_Resources,
+    [STATIC_CONTENT_TYPES.Empty]: Empty,
+    [STATIC_CONTENT_TYPES.Empty_Bookmarks]: Empty_Bookmarks,
+  };
+  return CONTENT[type] || null;
+}
+
+export default getImagesExplorerStaticContent;

src/aimcore/web/ui/src/pages/Explorers/ImagesExplorer/index.tsx

@@ -0,0 +1,33 @@
+import { isDEVModeOn } from 'config/config';
+
+import renderer from 'modules/BaseExplorer';
+import Image from 'modules/BaseExplorer/components/Image';
+
+import { SequenceType } from 'types/core/enums';
+
+import { getImagesDefaultConfig } from './config';
+
+const defaultConfig = getImagesDefaultConfig();
+
+export const imagesExplorerConfig = {
+  name: 'Images Explorer',
+  sequenceType: SequenceType.Image,
+  basePath: 'images',
+  persist: true,
+  groupings: defaultConfig.groupings,
+  visualizations: {
+    vis1: {
+      component: defaultConfig.Visualizer,
+      controls: defaultConfig.controls,
+      box: {
+        ...defaultConfig.box,
+        component: Image,
+      },
+    },
+  },
+  getStaticContent: defaultConfig.getStaticContent,
+};
+
+const ImagesExplorer = renderer(imagesExplorerConfig, isDEVModeOn);
+
+export default ImagesExplorer;