diff --git a/CHANGELOG.md b/CHANGELOG.md index 57d46e4e5a..5bbd7f6586 100644 --- 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 new file mode 100644 index 0000000000..b5e516554e --- /dev/null +++ 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 | 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 new file mode 100644 index 0000000000..82a9f56f81 --- /dev/null +++ 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 new file mode 100644 index 0000000000..31394e55ed --- /dev/null +++ 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 { + const [imgLoaded, setImgLoaded] = React.useState(false); + + return ( +
+
+ {showImage ? ( +
+ {image || ( + setImgLoaded(true)} + src={ILLUSTRATION_LIST[type]} + alt='Illustration' + /> + )} +
+ ) : null} + + + {content} + +
+
+ ); +} + +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 new file mode 100644 index 0000000000..8976641661 --- /dev/null +++ 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 = { + Never_Executed: PipelineStatusEnum.Never_Executed, + Insufficient_Resources: PipelineStatusEnum.Insufficient_Resources, + Empty: PipelineStatusEnum.Empty, + Failed: PipelineStatusEnum.Failed, + Empty_Bookmarks: 'emptyBookmarks', +}; + +const ILLUSTRATION_LIST: Record = { + [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. +
+ Look up + + search docs + + 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 new file mode 100644 index 0000000000..5ce4f37c0e --- /dev/null +++ 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 index bfabf42603..c51c982ed6 100644 --- 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 index 0aa5918a7e..8669ddd0b8 100644 --- 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,7 +129,7 @@ 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. @@ -137,7 +137,7 @@ const Illustration_Title_Config: { [key: string]: object | any } = { Look up diff --git a/aim/web/ui/src/config/references/index.ts b/aim/web/ui/src/config/references/index.ts index d79e24dee6..6272a77e41 100644 --- 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 index e82d7eb3fc..f489640a24 100644 --- 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*/} [ - PipelineStatusEnum.NeverExecuted, + PipelineStatusEnum.Never_Executed, PipelineStatusEnum.Empty, PipelineStatusEnum.Insufficient_Resources, PipelineStatusEnum.Executing, diff --git a/aim/web/ui/src/modules/BaseExplorer/components/Visualizations/Visualizations.tsx b/aim/web/ui/src/modules/BaseExplorer/components/Visualizations/Visualizations.tsx index 1fa861a086..ec90a7c08e 100644 --- a/aim/web/ui/src/modules/BaseExplorer/components/Visualizations/Visualizations.tsx +++ b/aim/web/ui/src/modules/BaseExplorer/components/Visualizations/Visualizations.tsx @@ -5,8 +5,6 @@ import { PipelineStatusEnum } from 'modules/core/engine/types'; import { IVisualizationsProps } from 'modules/BaseExplorer/types'; import VisualizerPanel from 'modules/BaseExplorer/components/VisualizerPanel'; -import IllustrationBlock from 'components/IllustrationBlock/IllustrationBlock'; - import ProgressBar from '../ProgressBar'; import './Visualizations.scss'; @@ -17,57 +15,50 @@ function Visualizations(props: IVisualizationsProps) { engine: { pipeline, useStore }, components, visualizers, + getStaticContent, } = props; - const status = useStore(pipeline.statusSelector); - - const Visualizations = React.useMemo(() => { - return Object.keys(visualizers).map((name: string, index: number) => { - const visualizer = visualizers[name]; - const Viz = visualizer.component as FunctionComponent; - - return ( - ( - - )} - /> - ); - }); - }, [components, engine, visualizers]); + const status: PipelineStatusEnum = useStore(pipeline.statusSelector); - const renderIllustration = React.useMemo( + const Visualizations: React.ReactNode = React.useMemo( () => - [ - PipelineStatusEnum.NeverExecuted, - PipelineStatusEnum.Empty, - PipelineStatusEnum.Insufficient_Resources, - PipelineStatusEnum.Failed, - ].indexOf(status) !== -1, - [status], + Object.keys(visualizers).map((name: string, index: number) => { + const visualizer = visualizers[name]; + const Viz = visualizer.component as FunctionComponent; + + return ( + ( + + )} + /> + ); + }), + [components, engine, visualizers], ); + const Content = React.useMemo(() => { + if (typeof getStaticContent === 'function') { + return getStaticContent(status) || Visualizations; + } + return Visualizations; + }, [status, Visualizations, getStaticContent]); + return (
- {renderIllustration ? ( - - ) : ( - Visualizations - )} + {Content}
); } diff --git a/aim/web/ui/src/modules/BaseExplorer/components/VisualizerPanel/VisualizerPanel.d.ts b/aim/web/ui/src/modules/BaseExplorer/components/VisualizerPanel/VisualizerPanel.d.ts index bffbfd7500..93c3f83580 100644 --- a/aim/web/ui/src/modules/BaseExplorer/components/VisualizerPanel/VisualizerPanel.d.ts +++ b/aim/web/ui/src/modules/BaseExplorer/components/VisualizerPanel/VisualizerPanel.d.ts @@ -5,6 +5,6 @@ import { IControlsProps, IGroupingProps } from '../../types'; export interface IVisualizerPanelProps { engine: any; grouping: React.FunctionComponent | null; - controls: React.FunctionComponent; + controls?: React.FunctionComponent; visualizationName: string; } diff --git a/aim/web/ui/src/modules/BaseExplorer/components/VisualizerPanel/VisualizerPanel.tsx b/aim/web/ui/src/modules/BaseExplorer/components/VisualizerPanel/VisualizerPanel.tsx index 1a835e4345..a3f0b3447a 100644 --- a/aim/web/ui/src/modules/BaseExplorer/components/VisualizerPanel/VisualizerPanel.tsx +++ b/aim/web/ui/src/modules/BaseExplorer/components/VisualizerPanel/VisualizerPanel.tsx @@ -9,7 +9,9 @@ function VisualizerPanel(props: IVisualizerPanelProps) { return (
{Grouping && } - + {Controls && ( + + )}
); } diff --git a/aim/web/ui/src/modules/BaseExplorer/getDefaultHydration.tsx b/aim/web/ui/src/modules/BaseExplorer/getDefaultHydration.tsx index a145268212..31e51514ec 100644 --- a/aim/web/ui/src/modules/BaseExplorer/getDefaultHydration.tsx +++ b/aim/web/ui/src/modules/BaseExplorer/getDefaultHydration.tsx @@ -14,6 +14,7 @@ import { AdvancedQueryForm } from './components/QueryForm'; import Controls from './components/Controls'; import Grouping, { GroupingItem } from './components/Grouping'; import { IBaseComponentProps } from './types'; +import getBaseExplorerStaticContent from './utils/getBaseExplorerStaticContent'; const controls: ControlsConfigs = { boxProperties: { @@ -141,6 +142,7 @@ export const defaultHydration = { initialState: {}, }, }, + getStaticContent: getBaseExplorerStaticContent, }; /** diff --git a/aim/web/ui/src/modules/BaseExplorer/index.tsx b/aim/web/ui/src/modules/BaseExplorer/index.tsx index c6115ce515..36d1b6b9ca 100644 --- a/aim/web/ui/src/modules/BaseExplorer/index.tsx +++ b/aim/web/ui/src/modules/BaseExplorer/index.tsx @@ -73,6 +73,8 @@ function createExplorer( ...(configuration.states || {}), }, enablePipelineCache: configuration.enablePipelineCache || true, + getStaticContent: + configuration.getStaticContent || defaultHydration.getStaticContent, }; const basePath = diff --git a/aim/web/ui/src/modules/BaseExplorer/types.ts b/aim/web/ui/src/modules/BaseExplorer/types.ts index b40cf2d749..306c94dd64 100644 --- a/aim/web/ui/src/modules/BaseExplorer/types.ts +++ b/aim/web/ui/src/modules/BaseExplorer/types.ts @@ -4,13 +4,13 @@ import { GroupType } from 'modules/core/pipeline'; import { GroupingConfigs } from 'modules/core/engine/explorer/groupings'; import { ControlsConfigs } from 'modules/core/engine/visualizations/controls'; import { CustomStates } from 'modules/core/utils/store'; +import { VisualizationsConfig } from 'modules/core/engine/visualizations'; +import { EngineNew } from 'modules/core/engine/explorer-engine'; +import { PipelineStatusEnum } from 'modules/core/engine/types'; import { AimObjectDepths, SequenceTypesEnum } from 'types/core/enums'; import { AimFlatObjectBase } from 'types/core/AimObjects'; -import { VisualizationsConfig } from '../core/engine/visualizations'; -import { EngineNew } from '../core/engine/explorer-engine'; - export interface IEngineStates { [key: string]: { initialState: Record; @@ -75,6 +75,10 @@ export interface IControlsProps extends IBaseComponentProps { export interface IVisualizationsProps extends IBaseComponentProps { components: IUIComponents; visualizers: VisualizationsConfig; + getStaticContent?: ( + type: StaticContentType, + defaultContent?: React.ReactNode, + ) => React.ReactNode; } export interface IVisualizationProps extends IBaseComponentProps { @@ -148,7 +152,11 @@ export declare interface ExplorerEngineConfiguration { visualizations: ExplorerVisualizationsConfiguration; /** - * Custom States + * Explorer level additional custom states + * @optional + * This property is useful to create custom states for the explorer, and it will be accessible directly from engine + * The usage of the state defined on state slice documentation + * @default value is {} */ states?: CustomStates; } @@ -209,13 +217,10 @@ export declare interface ExplorerConfiguration components?: ExplorerUIComponents; /** - * Explorer level additional custom states - * @optional - * This property is useful to create custom states for the explorer, and it will be accessible directly from engine - * The usage of the state defined on state slice documentation - * @default value is {} + * Explorer level static content + * @param type */ - readonly states?: CustomStates; + getStaticContent?: (type: string) => React.ReactNode; } export declare interface ExplorerProps< @@ -235,3 +240,5 @@ export declare interface ExplorerProps< */ children?: React.ReactChildren; } + +export type StaticContentType = string | PipelineStatusEnum; diff --git a/aim/web/ui/src/modules/BaseExplorer/utils/getBaseExplorerStaticContent.tsx b/aim/web/ui/src/modules/BaseExplorer/utils/getBaseExplorerStaticContent.tsx new file mode 100644 index 0000000000..84728b263a --- /dev/null +++ b/aim/web/ui/src/modules/BaseExplorer/utils/getBaseExplorerStaticContent.tsx @@ -0,0 +1,28 @@ +import * as React from 'react'; + +import Illustration, { ILLUSTRATION_TYPES } from 'components/Illustration'; + +import { StaticContentType } from '../types'; + +export const STATIC_CONTENT_TYPES: Record = { + ...ILLUSTRATION_TYPES, + /** add additional static content types here **/ +}; + +function getBaseExplorerStaticContent( + type: StaticContentType, + content?: React.ReactNode, +): React.ReactNode { + switch (type) { + case STATIC_CONTENT_TYPES.Never_Executed: + case STATIC_CONTENT_TYPES.Empty: + case STATIC_CONTENT_TYPES.Insufficient_Resources: + case STATIC_CONTENT_TYPES.Failed: + case STATIC_CONTENT_TYPES.Empty_Bookmarks: + return ; + default: + return null; + } +} + +export default getBaseExplorerStaticContent; diff --git a/aim/web/ui/src/modules/core/engine/pipeline/state.ts b/aim/web/ui/src/modules/core/engine/pipeline/state.ts index a95b86c2af..6605fc99e9 100644 --- a/aim/web/ui/src/modules/core/engine/pipeline/state.ts +++ b/aim/web/ui/src/modules/core/engine/pipeline/state.ts @@ -90,7 +90,7 @@ const initialProgressState: ProgressState = { function getInitialState(): IPipelineState { const initialState: IPipelineState = { - status: PipelineStatusEnum.NeverExecuted, + status: PipelineStatusEnum.Never_Executed, currentPhase: PipelinePhasesEnum.Waiting, progress: initialProgressState, additionalData: { @@ -111,7 +111,7 @@ function getInitialState(): IPipelineState { function createState( store: StoreApi>, initialState: IPipelineState = { - status: PipelineStatusEnum.NeverExecuted, + status: PipelineStatusEnum.Never_Executed, currentPhase: PipelinePhasesEnum.Waiting, progress: initialProgressState, additionalData: { diff --git a/aim/web/ui/src/modules/core/engine/types.ts b/aim/web/ui/src/modules/core/engine/types.ts index aa6ec0480b..9ce21b9aa7 100644 --- a/aim/web/ui/src/modules/core/engine/types.ts +++ b/aim/web/ui/src/modules/core/engine/types.ts @@ -82,7 +82,7 @@ export enum PipelineStatusEnum { /* * Never queried */ - NeverExecuted = 'Never Executed', + Never_Executed = 'Never Executed', /* * Executing */ diff --git a/aim/web/ui/src/pages/AudiosExplorer/config.ts b/aim/web/ui/src/pages/AudiosExplorer/config.ts index 676e8b5a57..353b766d82 100644 --- a/aim/web/ui/src/pages/AudiosExplorer/config.ts +++ b/aim/web/ui/src/pages/AudiosExplorer/config.ts @@ -3,6 +3,8 @@ import { getDefaultHydration } from 'modules/BaseExplorer'; import { GroupType, Order } from 'modules/core/pipeline'; import { defaultHydration } from 'modules/BaseExplorer/getDefaultHydration'; +import getAudiosExplorerStaticContent from './getStaticContent'; + export const getAudiosDefaultConfig = (): typeof defaultHydration => { const defaultConfig = getDefaultHydration(); @@ -39,5 +41,6 @@ export const getAudiosDefaultConfig = (): typeof defaultHydration => { gap: 0, }, }, + getStaticContent: getAudiosExplorerStaticContent, }; }; diff --git a/aim/web/ui/src/pages/AudiosExplorer/getStaticContent.tsx b/aim/web/ui/src/pages/AudiosExplorer/getStaticContent.tsx new file mode 100644 index 0000000000..4c6f02dddf --- /dev/null +++ b/aim/web/ui/src/pages/AudiosExplorer/getStaticContent.tsx @@ -0,0 +1,52 @@ +import * as React from 'react'; + +import getBaseExplorerStaticContent, { + STATIC_CONTENT_TYPES, +} from 'modules/BaseExplorer/utils/getBaseExplorerStaticContent'; +import { StaticContentType } from 'modules/BaseExplorer/types'; + +import { DOCUMENTATIONS } from 'config/references'; + +function getAudiosExplorerStaticContent( + type: StaticContentType, +): React.ReactNode { + const illustrationContent = getAudiosExplorerIllustrationContent(type); + return getBaseExplorerStaticContent(type, illustrationContent); +} + +function getAudiosExplorerIllustrationContent( + 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. +
+ Look up + + search docs + + to learn more. + + ); + const Failed = 'Incorrect Query'; + const Insufficient_Resources = "You don't have any tracked audios"; + 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 getAudiosExplorerStaticContent; diff --git a/aim/web/ui/src/pages/AudiosExplorer/index.tsx b/aim/web/ui/src/pages/AudiosExplorer/index.tsx index 4fdc360db6..91305d106b 100644 --- a/aim/web/ui/src/pages/AudiosExplorer/index.tsx +++ b/aim/web/ui/src/pages/AudiosExplorer/index.tsx @@ -28,6 +28,7 @@ const AudiosExplorer = renderer( }, }, }, + getStaticContent: defaultConfig.getStaticContent, }, __DEV__, ); diff --git a/aim/web/ui/src/pages/FiguresExplorer/getStaticContent.tsx b/aim/web/ui/src/pages/FiguresExplorer/getStaticContent.tsx new file mode 100644 index 0000000000..880b9468a4 --- /dev/null +++ b/aim/web/ui/src/pages/FiguresExplorer/getStaticContent.tsx @@ -0,0 +1,52 @@ +import * as React from 'react'; + +import getBaseExplorerStaticContent, { + STATIC_CONTENT_TYPES, +} from 'modules/BaseExplorer/utils/getBaseExplorerStaticContent'; +import { StaticContentType } from 'modules/BaseExplorer/types'; + +import { DOCUMENTATIONS } from 'config/references'; + +function getFiguresExplorerStaticContent( + type: StaticContentType, +): React.ReactNode { + const illustrationContent = getFiguresExplorerIllustrationContent(type); + return getBaseExplorerStaticContent(type, illustrationContent); +} + +function getFiguresExplorerIllustrationContent( + 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. +
+ Look up + + search docs + + to learn more. + + ); + const Failed = 'Incorrect Query'; + const Insufficient_Resources = "You don't have any tracked figures"; + 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 getFiguresExplorerStaticContent; diff --git a/aim/web/ui/src/pages/FiguresExplorer/index.tsx b/aim/web/ui/src/pages/FiguresExplorer/index.tsx index b71712207b..dfce56ac5c 100644 --- a/aim/web/ui/src/pages/FiguresExplorer/index.tsx +++ b/aim/web/ui/src/pages/FiguresExplorer/index.tsx @@ -5,6 +5,8 @@ import Figures from 'modules/BaseExplorer/components/Figures/Figures'; import { AimObjectDepths, SequenceTypesEnum } from 'types/core/enums'; +import getFiguresExplorerStaticContent from './getStaticContent'; + const defaultConfig = getDefaultHydration(); const FiguresExplorer = renderer( @@ -28,6 +30,7 @@ const FiguresExplorer = renderer( }, }, }, + getStaticContent: getFiguresExplorerStaticContent, }, __DEV__, );