[fix] Fix showing incorrect empty-illustration message in Audios expl…

…orer (#2395) * [fix] Fix the issue with rendering incorrect empty-illustration content in Audios explorer
aimhubio · Dec 1, 2022 · 022b766 · 022b766
1 parent e01030b
commit 022b766
Show file tree

Hide file tree

Showing 25 changed files with 443 additions and 73 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,7 @@
 ## 3.15.1
 
 - Fix issue with index container lock for older repos (mihran113)
+- Fix issue with rendering incorrect empty-illustration content in Audios explorer (KaroMourad)
 
 ## 3.15.0 Nov 26, 2022
 

diff --git a/aim/web/ui/src/components/Illustration/Illustration.d.ts b/aim/web/ui/src/components/Illustration/Illustration.d.ts
@@ -0,0 +1,14 @@
+import * as React from 'react';
+
+import { PipelineStatusEnum } from 'modules/core/engine/types';
+
+export interface IIllustrationProps {
+  content?: string | React.ReactNode;
+  image?: React.FunctionComponentElement<React.ReactNode> | HTMLImageElement;
+  type?: IllustrationType;
+  className?: string;
+  size?: 'small' | 'medium' | 'large' | 'xLarge';
+  showImage?: boolean;
+}
+
+export type IllustrationType = string | PipelineStatusEnum;
diff --git a/aim/web/ui/src/components/Illustration/Illustration.scss b/aim/web/ui/src/components/Illustration/Illustration.scss
@@ -0,0 +1,86 @@
+@use '../../styles/abstracts/index' as *;
+
+.Illustration {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  flex-direction: column;
+  &__hidden {
+    display: none;
+  }
+  &__container {
+    height: fit-content;
+    overflow: hidden;
+    padding-bottom: 6 * $space-unit;
+    &__content {
+      text-align: center;
+      .qlAnchor {
+        color: $primary-color;
+        text-decoration: none;
+        margin: 0 $space-xxxs;
+        &:hover {
+          text-decoration: underline;
+        }
+      }
+    }
+    &__img {
+      & > img {
+        margin: 0 auto;
+        display: block;
+      }
+    }
+
+    &__small {
+      &__content {
+        font-weight: $font-500;
+        font-size: $text-md;
+      }
+      &__img {
+        padding: $space-xs;
+        & > img {
+          width: 3rem;
+        }
+      }
+    }
+    &__medium {
+      &__content {
+        font-weight: $font-500;
+        font-size: $text-md;
+      }
+      &__img {
+        padding: $space-sm;
+        & > img {
+          width: 7.5rem;
+        }
+      }
+    }
+    &__large {
+      &__content {
+        font-weight: $font-500;
+        font-size: $text-lg;
+      }
+      &__img {
+        padding: $space-sm;
+        & > img {
+          width: 14.5rem;
+        }
+      }
+    }
+    &__xLarge {
+      &__content {
+        font-weight: $font-500;
+        font-size: $text-xl;
+        margin-bottom: $space-unit;
+      }
+      &__img {
+        padding: $space-unit;
+        & > img {
+          width: 19.5rem;
+        }
+      }
+    }
+  }
+}
diff --git a/aim/web/ui/src/components/Illustration/Illustration.tsx b/aim/web/ui/src/components/Illustration/Illustration.tsx
@@ -0,0 +1,58 @@
+import React from 'react';
+import classNames from 'classnames';
+
+import { Text } from 'components/kit';
+
+import {
+  IIllustrationProps,
+  ILLUSTRATION_TYPES,
+  ILLUSTRATION_LIST,
+  getDefaultIllustrationContent,
+} from '.';
+
+import './Illustration.scss';
+
+function Illustration({
+  type = ILLUSTRATION_TYPES.Never_Executed,
+  content = getDefaultIllustrationContent(type),
+  image,
+  className = '',
+  size = 'xLarge',
+  showImage = true,
+}: IIllustrationProps): React.FunctionComponentElement<React.ReactNode> {
+  const [imgLoaded, setImgLoaded] = React.useState(false);
+
+  return (
+    <div
+      className={classNames('Illustration', {
+        Illustrations__hidden: showImage && !imgLoaded,
+        [className]: !!className,
+      })}
+    >
+      <div className='Illustration__container'>
+        {showImage ? (
+          <div
+            className={`Illustration__container__img Illustration__container__${size}__img `}
+          >
+            {image || (
+              <img
+                onLoad={() => setImgLoaded(true)}
+                src={ILLUSTRATION_LIST[type]}
+                alt='Illustration'
+              />
+            )}
+          </div>
+        ) : null}
+
+        <Text
+          component='p'
+          className={`Illustration__container__content Illustration__container__${size}__content`}
+        >
+          {content}
+        </Text>
+      </div>
+    </div>
+  );
+}
+
+export default React.memo(Illustration);
diff --git a/aim/web/ui/src/components/Illustration/config.tsx b/aim/web/ui/src/components/Illustration/config.tsx
@@ -0,0 +1,65 @@
+import * as React from 'react';
+
+import { PipelineStatusEnum } from 'modules/core/engine/types';
+
+import emptyBookmarks from 'assets/illustrations/emptyBookmarks.svg';
+import emptySearch from 'assets/illustrations/emptySearch.svg';
+import exploreData from 'assets/illustrations/exploreData.svg';
+import wrongSearch from 'assets/illustrations/wrongSearch.svg';
+
+import { DOCUMENTATIONS } from 'config/references';
+
+import { IllustrationType } from '.';
+
+const ILLUSTRATION_TYPES: Record<string, IllustrationType> = {
+  Never_Executed: PipelineStatusEnum.Never_Executed,
+  Insufficient_Resources: PipelineStatusEnum.Insufficient_Resources,
+  Empty: PipelineStatusEnum.Empty,
+  Failed: PipelineStatusEnum.Failed,
+  Empty_Bookmarks: 'emptyBookmarks',
+};
+
+const ILLUSTRATION_LIST: Record<IllustrationType, string> = {
+  [ILLUSTRATION_TYPES.Never_Executed]: exploreData,
+  [ILLUSTRATION_TYPES.Insufficient_Resources]: exploreData,
+  [ILLUSTRATION_TYPES.Empty]: emptySearch,
+  [ILLUSTRATION_TYPES.Failed]: wrongSearch,
+  [ILLUSTRATION_TYPES.Empty_Bookmarks]: emptyBookmarks,
+};
+
+function getDefaultIllustrationContent(
+  type: IllustrationType = ILLUSTRATION_TYPES.Never_Executed,
+): 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 data";
+  const Empty = 'No Results';
+  const Empty_Bookmarks = "You don't have any saved bookmark";
+
+  const CONTENT = {
+    [ILLUSTRATION_TYPES.Never_Executed]: Never_Executed,
+    [ILLUSTRATION_TYPES.Failed]: Failed,
+    [ILLUSTRATION_TYPES.Insufficient_Resources]: Insufficient_Resources,
+    [ILLUSTRATION_TYPES.Empty]: Empty,
+    [ILLUSTRATION_TYPES.Empty_Bookmarks]: Empty_Bookmarks,
+  };
+  return CONTENT[type] || null;
+}
+
+export { ILLUSTRATION_TYPES, ILLUSTRATION_LIST, getDefaultIllustrationContent };
diff --git a/aim/web/ui/src/components/Illustration/index.ts b/aim/web/ui/src/components/Illustration/index.ts
@@ -0,0 +1,6 @@
+import Illustration from './Illustration';
+
+export * from './Illustration.d';
+export * from './config';
+
+export default Illustration;
diff --git a/aim/web/ui/src/components/IllustrationBlock/IllustrationBlock.scss b/aim/web/ui/src/components/IllustrationBlock/IllustrationBlock.scss
@@ -43,7 +43,7 @@
       font-size: $text-md;
     }
     &__img {
-      padding: toRem(10px);
+      padding: $space-xs;
       img {
         width: toRem(50px);
         height: toRem(57px);
@@ -62,7 +62,7 @@
       font-size: $text-md;
     }
     &__img {
-      padding: toRem(10px);
+      padding: $space-sm;
       img {
         width: toRem(120px);
         margin: 0 auto;
@@ -80,7 +80,7 @@
       font-size: $text-lg;
     }
     &__img {
-      padding: toRem(10px);
+      padding: $space-sm;
       img {
         width: 14.5rem;
         margin: 0 auto;
@@ -94,7 +94,7 @@
       margin-bottom: 1rem;
     }
     &__img {
-      padding: 1rem;
+      padding: $space-unit;
       img {
         width: 19.5rem;
         margin: 0 auto;

diff --git a/aim/web/ui/src/config/illustrationConfig/illustrationConfig.tsx b/aim/web/ui/src/config/illustrationConfig/illustrationConfig.tsx
@@ -23,7 +23,7 @@ const Illustrations_List: { [key: string]: string } = {
   [IllustrationsEnum.WrongSearch]: wrongSearch,
   [IllustrationsEnum.EmptyData]: exploreData,
   // for base explorer statuses
-  [PipelineStatusEnum.NeverExecuted]: exploreData,
+  [PipelineStatusEnum.Never_Executed]: exploreData,
   [PipelineStatusEnum.Insufficient_Resources]: exploreData,
   [PipelineStatusEnum.Empty]: emptySearch,
   [PipelineStatusEnum.Failed]: wrongSearch,
@@ -129,15 +129,15 @@ const Illustration_Title_Config: { [key: string]: object | any } = {
     ),
   },
   figures: {
-    [PipelineStatusEnum.NeverExecuted]: (
+    [PipelineStatusEnum.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.FIGURES.SEARCH}
+          href={DOCUMENTATIONS.EXPLORERS.SEARCH}
           target='_blank'
           rel='noreferrer'
         >

diff --git a/aim/web/ui/src/config/references/index.ts b/aim/web/ui/src/config/references/index.ts
@@ -7,6 +7,8 @@ const DOCUMENTATIONS = {
   SUPPORTED_TYPES:
     'https://aimstack.readthedocs.io/en/latest/quick_start/supported_types.html',
   EXPLORERS: {
+    SEARCH: 'https://aimstack.readthedocs.io/en/latest/ui/pages/explorers.html',
+
     PARAMS: {
       MAIN: 'https://aimstack.readthedocs.io/en/latest/ui/pages/explorers.html#params-explorer',
       SEARCH:
@@ -32,12 +34,6 @@ const DOCUMENTATIONS = {
       SEARCH:
         'https://aimstack.readthedocs.io/en/latest/ui/pages/run_management.html#search-runs',
     },
-    //@TODO set right docs link after adding Figures docs to the docs
-    FIGURES: {
-      MAIN: 'https://aimstack.readthedocs.io/en/latest/ui/pages/explorers.html',
-      SEARCH:
-        'https://aimstack.readthedocs.io/en/latest/ui/pages/explorers.html',
-    },
   },
   INTEGRATIONS: {
     PYTORCH_LIGHTNING:

diff --git a/aim/web/ui/src/modules/BaseExplorer/components/Explorer/Explorer.tsx b/aim/web/ui/src/modules/BaseExplorer/components/Explorer/Explorer.tsx
@@ -30,6 +30,7 @@ function Explorer({ configuration, engineInstance }: ExplorerProps) {
       {/* @ts-ignore*/}
       <configuration.components.queryForm engine={engineInstance} />
       <Visualizations
+        getStaticContent={configuration.getStaticContent}
         visualizers={configuration.visualizations}
         engine={engineInstance}
         components={{

diff --git a/aim/web/ui/src/modules/BaseExplorer/components/ExplorerBar/ExplorerBar.tsx b/aim/web/ui/src/modules/BaseExplorer/components/ExplorerBar/ExplorerBar.tsx
@@ -17,7 +17,7 @@ function ExplorerBar(props: IExplorerBarProps) {
   const disableResetControls = React.useMemo(
     () =>
       [
-        PipelineStatusEnum.NeverExecuted,
+        PipelineStatusEnum.Never_Executed,
         PipelineStatusEnum.Empty,
         PipelineStatusEnum.Insufficient_Resources,
         PipelineStatusEnum.Executing,