sample pages improvement (close #757, #758) (#829)

* chore: set server address

* chore: add bce-python-sdk to requirements

* fix: limit max length of runs in chart tooltip table

* feat: add keyboard shortcuts in sample page

* feat: add image preview in image sample page

frontend/packages/core/public/icons/chevron-up.svg

+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512">
+    <path d="M256 179.2l-219.429 230.4-36.572-38.4 256-268.8 256 268.8-36.572 38.4z"></path>
+</svg>

frontend/packages/core/public/icons/close.svg

-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
-    <path d="M32 0.99l-1-0.99-15 15.010-15.010-15.010-0.99 0.99 15.010 15.010-15.010 15 0.99 1 15.010-15 15 15 1-1-15-15 15-15.010z"></path>
+<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <path d="m17.8336309 5.10570888 1.0606602 1.06066018-5.8345822 5.83333984 5.8345822 5.833922-1.0606602 1.0606602-5.833922-5.8345822-5.83333984 5.8345822-1.06066018-1.0606602 5.83300002-5.833922-5.83300002-5.83333984 1.06066018-1.06066018 5.83333984 5.83300002z" fill-rule="nonzero" />
 </svg>

frontend/packages/core/public/icons/minus-circle.svg

+<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
+    <path d="m12 1.5c5.7989899 0 10.5 4.70101013 10.5 10.5 0 5.7989899-4.7010101 10.5-10.5 10.5-5.79898987 0-10.5-4.7010101-10.5-10.5 0-5.79898987 4.70101013-10.5 10.5-10.5zm0 1.5c-4.97056275 0-9 4.02943725-9 9 0 4.9705627 4.02943725 9 9 9 4.9705627 0 9-4.0294373 9-9 0-4.97056275-4.0294373-9-9-9zm4.5 8.375v1.5h-9v-1.5z" fill-rule="nonzero" />
+</svg>

frontend/packages/core/public/icons/plus-circle.svg

+<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
+    <path d="m12 1.5c5.7989899 0 10.5 4.70101013 10.5 10.5 0 5.7989899-4.7010101 10.5-10.5 10.5-5.79898987 0-10.5-4.7010101-10.5-10.5 0-5.79898987 4.70101013-10.5 10.5-10.5zm0 1.5c-4.97056275 0-9 4.02943725-9 9 0 4.9705627 4.02943725 9 9 9 4.9705627 0 9-4.0294373 9-9 0-4.97056275-4.0294373-9-9-9zm.75 4.5v3.875h3.75v1.5h-3.751l.001 3.625h-1.5l-.001-3.625h-3.749v-1.5h3.75v-3.875z" fill-rule="nonzero" />
+</svg>

frontend/packages/core/public/icons/restore-circle.svg

+<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
+    <path d="m12 1.5c5.7989899 0 10.5 4.70101013 10.5 10.5 0 5.7989899-4.7010101 10.5-10.5 10.5-5.79898987 0-10.5-4.7010101-10.5-10.5 0-5.79898987 4.70101013-10.5 10.5-10.5zm0 1.5c-4.97056275 0-9 4.02943725-9 9 0 4.9705627 4.02943725 9 9 9 4.9705627 0 9-4.0294373 9-9 0-4.97056275-4.0294373-9-9-9zm-3 4.875v8.25h-1.5v-8.25zm7.5 0v8.25h-1.5v-8.25zm-4.5 5.25c.517767 0 .9375.419733.9375.9375s-.419733.9375-.9375.9375-.9375-.419733-.9375-.9375.419733-.9375.9375-.9375zm0-4.125c.517767 0 .9375.41973305.9375.9375 0 .517767-.419733.9375-.9375.9375s-.9375-.419733-.9375-.9375c0-.51776695.419733-.9375.9375-.9375z" fill-rule="nonzero" />
+</svg>

frontend/packages/core/public/locales/en/sample.json

@@ -9,5 +9,6 @@
     "sample-rate": "Sample Rate",
     "show-actual-size": "Show Actual Image Size",
     "step": "Step",
+    "step-tip": "You can change step by pressing up & donw on your keyboard",
     "text": "text"
 }

frontend/packages/core/public/locales/zh/sample.json

@@ -9,5 +9,6 @@
     "sample-rate": "采样率",
     "show-actual-size": "按真实大小展示",
     "step": "Step",
+    "step-tip": "您还可以通过键盘 ↑ ↓ 键，快速调节step哦~",
     "text": "文本"
 }

frontend/packages/core/src/App.tsx

 import React, {FunctionComponent, Suspense, useCallback, useEffect, useMemo, useState} from 'react';
 import {Redirect, Route, BrowserRouter as Router, Switch, useLocation} from 'react-router-dom';
 import {THEME, matchMedia} from '~/utils/theme';
-import {headerHeight, position, size} from '~/utils/style';
+import {headerHeight, position, size, zIndexes} from '~/utils/style';
 
 import BodyLoading from '~/components/BodyLoading';
 import ErrorBoundary from '~/components/ErrorBoundary';
@@ -27,7 +27,7 @@ const Main = styled.main`
 `;
 
 const Header = styled.header`
-    z-index: 10000;
+    z-index: ${zIndexes.header};
 
     ${size(headerHeight, '100%')}
     ${position('fixed', 0, 0, null, 0)}

frontend/packages/core/src/components/Audio.tsx

-import React, {useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState} from 'react';
+import React, {FunctionComponent, useCallback, useEffect, useMemo, useRef, useState} from 'react';
 import {WithStyled, primaryColor, rem, size, transitionProps} from '~/utils/style';
 
 import {AudioPlayer} from '~/utils/audio';
@@ -9,12 +9,9 @@ import RangeSlider from '~/components/RangeSlider';
 import Slider from 'react-rangeslider';
 import SyncLoader from 'react-spinners/SyncLoader';
 import Tippy from '@tippyjs/react';
-import {fetcher} from '~/utils/fetch';
 import mime from 'mime-types';
 import moment from 'moment';
-import {saveAs} from 'file-saver';
 import styled from 'styled-components';
-import useRequest from '~/hooks/useRequest';
 import {useTranslation} from 'react-i18next';
 
 const Container = styled.div`
@@ -130,35 +127,26 @@ function formatDuration(seconds: number) {
     );
 }
 
-export type AudioRef = {
-    save(filename: string): void;
-};
-
 export type AudioProps = {
     audioContext?: AudioContext;
-    src?: string;
-    cache?: number;
+    data?: BlobResponse;
+    loading?: boolean;
+    error?: Error;
     onLoading?: () => unknown;
     onLoad?: (audio: {sampleRate: number; duration: number}) => unknown;
 };
 
-const Audio = React.forwardRef<AudioRef, AudioProps & WithStyled>(
-    ({audioContext, src, cache, onLoading, onLoad, className}, ref) => {
+const Audio: FunctionComponent<AudioProps & WithStyled> = ({
+    audioContext,
+    data,
+    loading,
+    error,
+    onLoading,
+    onLoad,
+    className
+}) => {
     const {t} = useTranslation('common');
 
-        const {data, error, loading} = useRequest<BlobResponse>(src ?? null, fetcher, {
-            dedupingInterval: cache ?? 2000
-        });
-
-        useImperativeHandle(ref, () => ({
-            save: (filename: string) => {
-                if (data) {
-                    const ext = data.type ? mime.extension(data.type) : null;
-                    saveAs(data.data, filename.replace(/[/\\?%*:|"<>]/g, '_') + (ext ? `.${ext}` : ''));
-                }
-            }
-        }));
-
     const timer = useRef<number | null>(null);
     const player = useRef<AudioPlayer | null>(null);
     const [sliderValue, setSliderValue] = useState(0);
@@ -325,7 +313,6 @@ const Audio = React.forwardRef<AudioRef, AudioProps & WithStyled>(
             </Tippy>
         </Container>
     );
-    }
-);
+};
 
 export default Audio;

frontend/packages/core/src/components/GraphPage/ModelPropertiesDialog.tsx

 import React, {FunctionComponent} from 'react';
-import {em, size, transitionProps} from '~/utils/style';
+import {em, size, transitionProps, zIndexes} from '~/utils/style';
 
 import Icon from '~/components/Icon';
 import Properties from '~/components/GraphPage/Properties';
@@ -15,7 +15,7 @@ const Dialog = styled.div`
     height: 100vh;
     overscroll-behavior: none;
     background-color: var(--mask-color);
-    z-index: 999;
+    z-index: ${zIndexes.dialog};
     ${transitionProps('background-color')}
 
     > .modal {
@@ -42,8 +42,8 @@ const Dialog = styled.div`
 
             > .modal-close {
                 flex: none;
-                ${size(em(14, 18), em(14, 18))}
-                font-size: ${em(14, 18)};
+                ${size(em(20, 18), em(20, 18))}
+                font-size: ${em(20, 18)};
                 text-align: center;
                 cursor: pointer;
             }

frontend/packages/core/src/components/Image.tsx

-import React, {useImperativeHandle, useLayoutEffect, useState} from 'react';
+import React, {FunctionComponent, useLayoutEffect, useState} from 'react';
 import {WithStyled, primaryColor} from '~/utils/style';
 
 import type {BlobResponse} from '~/utils/fetch';
 import GridLoader from 'react-spinners/GridLoader';
-import {fetcher} from '~/utils/fetch';
-import mime from 'mime-types';
-import {saveAs} from 'file-saver';
-import useRequest from '~/hooks/useRequest';
 import {useTranslation} from 'react-i18next';
 
-export type ImageRef = {
-    save(filename: string): void;
-};
-
 type ImageProps = {
-    src?: string;
-    cache?: number;
+    data?: BlobResponse;
+    loading?: boolean;
+    error?: Error;
+    onClick?: () => unknown;
 };
 
-const Image = React.forwardRef<ImageRef, ImageProps & WithStyled>(({src, cache, className}, ref) => {
+const Image: FunctionComponent<ImageProps & WithStyled> = ({data, loading, error, onClick, className}) => {
     const {t} = useTranslation('common');
 
     const [url, setUrl] = useState('');
-    const {data, error, loading} = useRequest<BlobResponse>(src ?? null, fetcher, {
-        dedupingInterval: cache ?? 2000
-    });
-
-    useImperativeHandle(ref, () => ({
-        save: (filename: string) => {
-            if (data) {
-                const ext = data.type ? mime.extension(data.type) : null;
-                saveAs(data.data, filename.replace(/[/\\?%*:|"<>]/g, '_') + (ext ? `.${ext}` : ''));
-            }
-        }
-    }));
 
     // use useLayoutEffect hook to prevent image render after url revoked
     useLayoutEffect(() => {
@@ -55,7 +37,7 @@ const Image = React.forwardRef<ImageRef, ImageProps & WithStyled>(({src, cache,
         return <div>{t('common:error')}</div>;
     }
 
-    return <img className={className} src={url} />;
-});
+    return <img className={className} src={url} onClick={onClick} />;
+};
 
 export default Image;

frontend/packages/core/src/components/SamplePage/AudioChart.tsx

-import Audio, {AudioProps, AudioRef} from '~/components/Audio';
+import Audio, {AudioProps} from '~/components/Audio';
 import React, {FunctionComponent, useCallback, useState} from 'react';
-import SampleChart, {SampleChartBaseProps} from '~/components/SamplePage/SampleChart';
+import SampleChart, {SampleChartBaseProps, SampleEntityProps} from '~/components/SamplePage/SampleChart';
 
 import {format} from 'd3-format';
 import styled from 'styled-components';
@@ -32,15 +32,8 @@ const AudioChart: FunctionComponent<AudioChartProps> = ({audioContext, ...props}
     );
 
     const content = useCallback(
-        (ref: React.RefObject<AudioRef>, src: string) => (
-            <StyledAudio
-                audioContext={audioContext}
-                src={src}
-                cache={cache}
-                onLoading={onLoading}
-                onLoad={onLoad}
-                ref={ref}
-            />
+        (props: SampleEntityProps) => (
+            <StyledAudio audioContext={audioContext} {...props} onLoading={onLoading} onLoad={onLoad} />
         ),
         [onLoading, onLoad, audioContext]
     );

frontend/packages/core/src/components/SamplePage/ImageChart.tsx

-import Image, {ImageRef} from '~/components/Image';
 import React, {FunctionComponent, useCallback} from 'react';
-import SampleChart, {SampleChartBaseProps} from '~/components/SamplePage/SampleChart';
+import SampleChart, {
+    SampleChartBaseProps,
+    SampleEntityProps,
+    SamplePreviewerProps
+} from '~/components/SamplePage/SampleChart';
 import {size, transitionProps} from '~/utils/style';
 
+import Image from '~/components/Image';
+import ImagePreviewer from '~/components/SamplePage/ImagePreviewer';
 import styled from 'styled-components';
 
 const StyledImage = styled(Image)<{brightness?: number; contrast?: number; fit?: boolean}>`
@@ -23,12 +28,13 @@ type ImageChartProps = {
 
 const ImageChart: FunctionComponent<ImageChartProps> = ({brightness, contrast, fit, ...props}) => {
     const content = useCallback(
-        (ref: React.RefObject<ImageRef>, src: string) => (
-            <StyledImage src={src} cache={cache} ref={ref} brightness={brightness} contrast={contrast} fit={fit} />
-        ),
+        (props: SampleEntityProps) => <StyledImage {...props} brightness={brightness} contrast={contrast} fit={fit} />,
         [brightness, contrast, fit]
     );
-    return <SampleChart type="image" cache={cache} content={content} {...props} />;
+
+    const previewer = useCallback((props: SamplePreviewerProps) => <ImagePreviewer {...props} />, []);
+
+    return <SampleChart type="image" cache={cache} content={content} previewer={previewer} {...props} />;
 };
 
 export default ImageChart;

frontend/packages/core/src/components/SamplePage/ImagePreviewer.tsx

+import React, {FunctionComponent, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState} from 'react';
+import {em, headerHeight, primaryColor, rem, zIndexes} from '~/utils/style';
+
+import GridLoader from 'react-spinners/GridLoader';
+import Icon from '~/components/Icon';
+import RangeSlider from '~/components/RangeSlider';
+import type {SamplePreviewerProps} from '~/components/SamplePage/SampleChart';
+import styled from 'styled-components';
+import {useTranslation} from 'react-i18next';
+
+const Wrapper = styled.div`
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: ${zIndexes.dialog};
+    height: 100vh;
+    width: 100vw;
+    background-color: var(--sample-preview-mask-color);
+`;
+
+const Header = styled.div`
+    position: relative;
+    height: ${headerHeight};
+    width: 100%;
+    background-color: var(--model-header-background-color);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .step-slider {
+        display: flex;
+        align-items: center;
+        flex-grow: 1;
+        margin: 0 ${rem(20)};
+
+        .slider {
+            width: 31.7213115%;
+            margin: 0 ${rem(12)};
+        }
+
+        .step-buttons {
+            margin-left: ${em(10)};
+            display: flex;
+            flex-direction: column;
+            font-size: ${em(10)};
+
+            > a {
+                display: inline-blcok;
+                line-height: 1;
+                height: ${em(14)};
+
+                &:hover {
+                    color: var(--text-lighter-color);
+                }
+
+                > i {
+                    display: inline-block;
+                    height: 100%;
+
+                    > svg {
+                        vertical-align: top;
+                    }
+                }
+            }
+        }
+    }
+
+    .buttons {
+        display: flex;
+        align-items: center;
+        font-size: ${rem(24)};
+
+        > * {
+            margin-right: ${rem(30)};
+        }
+
+        > a {
+            height: ${rem(24)};
+            overflow: hidden;
+        }
+
+        > span {
+            width: 1px;
+            height: ${rem(30)};
+            background-color: var(--border-color);
+        }
+    }
+`;
+
+const Container = styled.div<{grabbing?: boolean}>`
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: absolute;
+    height: calc(100% - ${headerHeight});
+    width: 100%;
+    top: ${headerHeight};
+    left: 0;
+    overflow: hidden;
+
+    > img {
+        cursor: ${props => (props.grabbing ? 'grabbing' : 'grab')};
+    }
+`;
+
+const MAX_IMAGE_SCALE = 3;
+const MIN_IMAGE_SCALE = 0.1;
+
+type ImagePreviewerProps = SamplePreviewerProps;
+
+const ImagePreviewer: FunctionComponent<ImagePreviewerProps> = ({
+    data,
+    loading,
+    error,
+    steps,
+    step: propStep,
+    onClose,
+    onChange,
+    onChangeComplete
+}) => {
+    const {t} = useTranslation('sample');
+
+    const [step, setStep] = useState(propStep ?? 0);
+    useEffect(() => setStep(propStep ?? 0), [propStep]);
+
+    const changeStep = useCallback(
+        (num: number) => {
+            setStep(num);
+            onChange?.(num);
+        },
+        [onChange]
+    );
+
+    const prevStep = useCallback(() => {
+        if (step > 0) {
+            changeStep(step - 1);
+        }
+    }, [step, changeStep]);
+
+    const nextStep = useCallback(() => {
+        if (step < steps.length - 1) {
+            changeStep(step + 1);
+        }
+    }, [step, steps, changeStep]);
+
+    const [url, setUrl] = useState('');
+
+    // use useLayoutEffect hook to prevent image render after url revoked
+    useLayoutEffect(() => {
+        if (data) {
+            let objectUrl: string | null = null;
+            objectUrl = URL.createObjectURL(data.data);
+            setUrl(objectUrl);
+            return () => {
+                objectUrl && URL.revokeObjectURL(objectUrl);
+            };
+        }
+    }, [data]);
+
+    const container = useRef<HTMLDivElement>(null);
+    const image = useRef<HTMLImageElement>(null);
+    const [width, setWidth] = useState(0);
+    const [height, setHeight] = useState(0);
+    useEffect(() => {
+        if (url) {
+            const img = new Image();
+            img.src = url;
+            img.onload = () => {
+                const rect = container.current?.getBoundingClientRect();
+                if (rect) {
+                    const r = rect.width / rect.height;
+                    const ir = img.naturalWidth / img.naturalHeight;
+                    if (r >= ir && img.naturalHeight > rect.height * 0.9) {
+                        setHeight(rect.height * 0.9);
+                        setWidth(ir * rect.height * 0.9);
+                    } else if (ir >= r && img.naturalWidth > rect.width * 0.9) {
+                        setWidth(rect.width * 0.9);
+                        setHeight(ir * rect.width * 0.9);
+                    } else {
+                        setWidth(img.naturalWidth);
+                        setHeight(img.naturalHeight);
+                    }
+                }
+            };
+        }
+        return () => {
+            setWidth(0);
+            setHeight(0);
+        };
+    }, [url]);
+
+    const [scale, setScale] = useState(1);
+    const scaleImage = useCallback(
+        (step: number) =>
+            setScale(s => {
+                if (s + step > MAX_IMAGE_SCALE) {
+                    return MAX_IMAGE_SCALE;
+                }
+                if (s + step < MIN_IMAGE_SCALE) {
+                    return MIN_IMAGE_SCALE;
+                }
+                return s + step;
+            }),
+        []
+    );
+    useEffect(() => {
+        const img = container.current;
+        const wheel = (e: WheelEvent) => {
+            e.preventDefault();
+            setScale(s => {
+                const t = s - e.deltaY * 0.007;
+                if (t > MAX_IMAGE_SCALE) {
+                    return MAX_IMAGE_SCALE;
+                }
+                if (t < MIN_IMAGE_SCALE) {
+                    return MIN_IMAGE_SCALE;
+                }
+                return t;
+            });
+        };
+        img?.addEventListener('wheel', wheel);
+        return () => {
+            img?.removeEventListener('wheel', wheel);
+        };
+    }, []);
+
+    const [grabbing, setGrabbing] = useState(false);
+    const [x, setX] = useState(0);
+    const [y, setY] = useState(0);
+    useEffect(() => {
+        const img = image.current;
+        let trigger = false;
+        let ox = 0;
+        let oy = 0;
+        const mousedown = (e: MouseEvent) => {
+            e.preventDefault();
+            setGrabbing(true);
+            trigger = true;
+            ox = e.clientX;
+            oy = e.clientY;
+        };
+        const mousemove = (e: MouseEvent) => {
+            e.preventDefault();
+            if (trigger) {
+                setX(sx => {
+                    return sx + (e.clientX - ox);
+                });
+                setY(sy => {
+                    return sy + (e.clientY - oy);
+                });
+                ox = e.clientX;
+                oy = e.clientY;
+            }
+        };
+        const mouseup = () => {
+            setGrabbing(false);
+            trigger = false;
+        };
+        img?.addEventListener('mousedown', mousedown);
+        img?.addEventListener('mousemove', mousemove);
+        img?.addEventListener('mouseup', mouseup);
+        img?.addEventListener('mouseout', mouseup);
+        return () => {
+            img?.removeEventListener('mousedown', mousedown);
+            img?.removeEventListener('mousemove', mousemove);
+            img?.removeEventListener('mouseup', mouseup);
+            img?.removeEventListener('mouseout', mouseup);
+        };
+    }, [url]);
+
+    const reset = useCallback(() => {
+        setScale(1);
+        setX(0);
+        setY(0);
+    }, []);
+
+    useEffect(() => reset, [url, reset]);
+
+    const content = useMemo(() => {
+        if (loading) {
+            return <GridLoader color={primaryColor} size="10px" />;
+        }
+        if (error) {
+            return <div>{t('common:error')}</div>;
+        }
+        return (
+            <img
+                src={url}
+                ref={image}
+                onClick={e => e.stopPropagation()}
+                style={{
+                    width,
+                    height,
+                    transform: `translate(${x}px, ${y}px) scale(${scale})`
+                }}
+            />
+        );
+    }, [url, loading, error, width, height, x, y, scale, t]);
+
+    return (
+        <Wrapper>
+            <Header>
+                <div className="step-slider">
+                    <span>{t('sample:step')}</span>
+                    <RangeSlider
+                        className="slider"
+                        min={0}
+                        max={steps.length ? steps.length - 1 : 0}
+                        step={1}
+                        value={step}
+                        onChange={changeStep}
+                        onChangeComplete={onChangeComplete}
+                    />
+                    <span>{steps[step]}</span>
+                    <div className="step-buttons">
+                        <a href="javascript:void(0)" onClick={prevStep}>
+                            <Icon type="chevron-up" />
+                        </a>
+                        <a href="javascript:void(0)" onClick={nextStep}>
+                            <Icon type="chevron-down" />
+                        </a>
+                    </div>
+                </div>
+                <div className="buttons">
+                    <a href="javascript:void(0)" onClick={() => scaleImage(0.1)}>
+                        <Icon type="plus-circle" />
+                    </a>
+                    <a href="javascript:void(0)" onClick={() => scaleImage(-0.1)}>
+                        <Icon type="minus-circle" />
+                    </a>
+                    <a href="javascript:void(0)" onClick={reset}>
+                        <Icon type="restore-circle" />
+                    </a>
+                    <span></span>
+                    <a href="javascript:void(0)" onClick={onClose}>
+                        <Icon type="close" />
+                    </a>
+                </div>
+            </Header>
+            <Container ref={container} onClick={onClose} grabbing={grabbing}>
+                {content}
+            </Container>
+        </Wrapper>
+    );
+};
+
+export default ImagePreviewer;

frontend/packages/core/src/components/SamplePage/SampleChart.tsx

 import React, {FunctionComponent, useCallback, useEffect, useMemo, useRef, useState} from 'react';
 import {ellipsis, em, primaryColor, rem, size, transitionProps} from '~/utils/style';
 
+import type {BlobResponse} from '~/utils/fetch';
 import ChartToolbox from '~/components/ChartToolbox';
 import GridLoader from 'react-spinners/GridLoader';
 import type {Run} from '~/types';
 import StepSlider from '~/components/SamplePage/StepSlider';
+import {fetcher} from '~/utils/fetch';
 import {formatTime} from '~/utils';
 import isEmpty from 'lodash/isEmpty';
+import mime from 'mime-types';
 import queryString from 'query-string';
+import {saveAs} from 'file-saver';
 import styled from 'styled-components';
+import useRequest from '~/hooks/useRequest';
 import {useRunningRequest} from '~/hooks/useRequest';
 import {useTranslation} from 'react-i18next';
 
@@ -64,7 +69,7 @@ const Title = styled.div<{color: string}>`
     }
 `;
 
-const Container = styled.div<{brightness?: number; contrast?: number; fit?: boolean}>`
+const Container = styled.div<{preview?: boolean}>`
     flex-grow: 1;
     flex-shrink: 1;
     margin: ${em(20)} 0;
@@ -72,6 +77,7 @@ const Container = styled.div<{brightness?: number; contrast?: number; fit?: bool
     justify-content: center;
     align-items: center;
     overflow: hidden;
+    cursor: ${props => (props.preview ? 'zoom-in' : 'default')};
 `;
 
 const Footer = styled.div`
@@ -103,25 +109,44 @@ export type SampleChartBaseProps = {
     running?: boolean;
 };
 
-type SampleChartRef = {
-    save: (filename: string) => void;
+export type SampleEntityProps = {
+    data?: BlobResponse;
+    loading?: boolean;
+    error?: Error;
+};
+
+export type SamplePreviewerProps = SampleEntityProps & {
+    steps: number[];
+    step?: number;
+    onClose?: () => unknown;
+    onChange?: (value: number) => unknown;
+    onChangeComplete?: () => unknown;
 };
 
 type SampleChartProps = {
     type: 'image' | 'audio';
     cache: number;
+    step?: number;
     footer?: JSX.Element;
-    content: (ref: React.RefObject<SampleChartRef>, src: string) => JSX.Element;
+    content: (props: SampleEntityProps) => React.ReactNode;
+    previewer?: (props: SamplePreviewerProps) => React.ReactNode;
 } & SampleChartBaseProps;
 
 const getUrl = (type: string, index: number, run: string, tag: string, wallTime: number): string =>
     `/${type}/${type}?${queryString.stringify({index, ts: wallTime, run, tag})}`;
 
-const SampleChart: FunctionComponent<SampleChartProps> = ({run, tag, running, type, cache, footer, content}) => {
+const SampleChart: FunctionComponent<SampleChartProps> = ({
+    run,
+    tag,
+    running,
+    type,
+    cache,
+    footer,
+    content,
+    previewer
+}) => {
     const {t, i18n} = useTranslation(['sample', 'common']);
 
-    const sampleRef = useRef<SampleChartRef>(null);
-
     const {data, error, loading} = useRunningRequest<SampleData[]>(
         `/${type}/list?${queryString.stringify({run: run.label, tag})}`,
         !!running
@@ -129,12 +154,32 @@ const SampleChart: FunctionComponent<SampleChartProps> = ({run, tag, running, ty
 
     const steps = useMemo(() => data?.map(item => item.step) ?? [], [data]);
 
+    const [preview, setPreview] = useState(false);
     const [step, setStep] = useState(0);
     const [src, setSrc] = useState<string>();
 
     const cached = useRef<Record<number, {src: string; timer: number}>>({});
     const timer = useRef<number | null>(null);
 
+    const wrapperRef = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+        const handler = (event: KeyboardEvent) => {
+            const hoveredNodes = document.querySelectorAll(':hover');
+            if (preview || Array.from(hoveredNodes).some(node => node.isSameNode(wrapperRef.current))) {
+                if (event.key === 'ArrowLeft' || event.key === 'ArrowUp') {
+                    setStep(s => (s > 0 ? s - 1 : s));
+                    event.preventDefault();
+                } else if (event.key === 'ArrowRight' || event.key === 'ArrowDown') {
+                    setStep(s => (s < steps.length - 1 ? s + 1 : s));
+                    event.preventDefault();
+                }
+            }
+        };
+        document.addEventListener('keydown', handler);
+        return () => document.removeEventListener('keydown', handler);
+    }, [steps, preview]);
+
     // clear cache if tag or run changed
     useEffect(() => {
         Object.values(cached.current).forEach(({timer}) => clearTimeout(timer));
@@ -158,10 +203,6 @@ const SampleChart: FunctionComponent<SampleChartProps> = ({run, tag, running, ty
         timer.current = null;
     }, [type, step, run.label, tag, wallTime, data, cache]);
 
-    const download = useCallback(() => {
-        sampleRef.current?.save(`${run.label}-${tag}-${steps[step]}-${wallTime.toString().replace(/\./, '_')}`);
-    }, [run.label, tag, steps, step, wallTime]);
-
     useEffect(() => {
         if (cached.current[step]) {
             // cached, return immediately
@@ -200,6 +241,33 @@ const SampleChart: FunctionComponent<SampleChartProps> = ({run, tag, running, ty
         }
     }, []);
 
+    const {data: entityData, error: entityError, loading: entityLoading} = useRequest<BlobResponse>(
+        src ?? null,
+        fetcher,
+        {
+            dedupingInterval: 5 * 60 * 1000
+        }
+    );
+
+    const download = useCallback(() => {
+        if (entityData) {
+            const ext = entityData.type ? mime.extension(entityData.type) : null;
+            saveAs(
+                entityData.data,
+                `${run.label}-${tag}-${steps[step]}-${wallTime.toString().replace(/\./, '_')}`.replace(
+                    /[/\\?%*:|"<>]/g,
+                    '_'
+                ) + (ext ? `.${ext}` : '')
+            );
+        }
+    }, [entityData, run.label, tag, steps, step, wallTime]);
+
+    const entityProps = useMemo(() => {
+        if (src) {
+            return {data: entityData, error: entityError, loading: entityLoading};
+        }
+    }, [src, entityData, entityError, entityLoading]);
+
     const Content = useMemo(() => {
         // show loading when deferring
         if (loading || !cached.current[step] || !viewed) {
@@ -211,14 +279,35 @@ const SampleChart: FunctionComponent<SampleChartProps> = ({run, tag, running, ty
         if (isEmpty(data)) {
             return <span>{t('common:empty')}</span>;
         }
-        if (src) {
-            return content(sampleRef, src);
+        if (entityProps) {
+            return content(entityProps);
         }
         return null;
-    }, [viewed, loading, error, data, step, src, t, content]);
+    }, [viewed, loading, error, data, step, entityProps, t, content]);
+
+    const Previewer = useMemo(() => {
+        if (!previewer) {
+            return null;
+        }
+        if (!preview) {
+            return null;
+        }
+        if (!entityProps) {
+            return null;
+        }
+        return previewer({
+            ...entityProps,
+            loading: !cached.current[step] || entityProps.loading,
+            steps,
+            step,
+            onClose: () => setPreview(false),
+            onChange: setStep,
+            onChangeComplete: cacheSrc
+        });
+    }, [previewer, entityProps, preview, steps, step, cacheSrc]);
 
     return (
-        <Wrapper>
+        <Wrapper ref={wrapperRef}>
             <Title color={run.colors[0]}>
                 <h4>{tag}</h4>
                 <span>{run.label}</span>
@@ -226,7 +315,10 @@ const SampleChart: FunctionComponent<SampleChartProps> = ({run, tag, running, ty
             <StepSlider value={step} steps={steps} onChange={setStep} onChangeComplete={cacheSrc}>
                 {formatTime(wallTime, i18n.language)}
             </StepSlider>
-            <Container ref={container}>{Content}</Container>
+            <Container ref={container} preview={!!previewer && !!src} onClick={() => setPreview(true)}>
+                {Content}
+            </Container>
+            {Previewer}
             <Footer>
                 <ChartToolbox
                     items={[

frontend/packages/core/src/components/SamplePage/StepSlider.tsx

 import React, {FunctionComponent, useCallback, useEffect, useState} from 'react';
 import {em, transitionProps} from '~/utils/style';
 
+import Icon from '~/components/Icon';
 import RangeSlider from '~/components/RangeSlider';
+import Tippy from '@tippyjs/react';
 import styled from 'styled-components';
 import {useTranslation} from 'react-i18next';
 
 const Label = styled.div`
     display: flex;
     justify-content: space-between;
+    align-items: center;
     color: var(--text-light-color);
     font-size: ${em(12)};
     margin-bottom: ${em(5)};
@@ -16,6 +19,37 @@ const Label = styled.div`
     > :not(:first-child) {
         flex-grow: 0;
     }
+
+    .step-indicator {
+        display: flex;
+        align-items: center;
+
+        .step-buttons {
+            margin-left: ${em(10)};
+            display: flex;
+            flex-direction: column;
+            font-size: ${em(10)};
+
+            > a {
+                display: inline-blcok;
+                line-height: 1;
+                height: ${em(14)};
+
+                &:hover {
+                    color: var(--text-lighter-color);
+                }
+
+                > i {
+                    display: inline-block;
+                    height: 100%;
+
+                    > svg {
+                        vertical-align: top;
+                    }
+                }
+            }
+        }
+    }
 `;
 
 const FullWidthRangeSlider = styled(RangeSlider)`
@@ -43,10 +77,34 @@ const StepSlider: FunctionComponent<StepSliderProps> = ({onChange, onChangeCompl
         [onChange]
     );
 
+    const prevStep = useCallback(() => {
+        if (value > 0) {
+            changeStep(value - 1);
+        }
+    }, [value, changeStep]);
+
+    const nextStep = useCallback(() => {
+        if (value < steps.length - 1) {
+            changeStep(value + 1);
+        }
+    }, [value, steps, changeStep]);
+
     return (
         <>
             <Label>
-                <span>{`${t('sample:step')}: ${steps[step] ?? '...'}`}</span>
+                <div className="step-indicator">
+                    <div>{`${t('sample:step')}: ${steps[step] ?? '...'}`}</div>
+                    <Tippy placement="right" theme="tooltip" content={t('sample:step-tip')}>
+                        <div className="step-buttons">
+                            <a href="javascript:void(0)" onClick={prevStep}>
+                                <Icon type="chevron-up" />
+                            </a>
+                            <a href="javascript:void(0)" onClick={nextStep}>
+                                <Icon type="chevron-down" />
+                            </a>
+                        </div>
+                    </Tippy>
+                </div>
                 {children && <span>{children}</span>}
             </Label>
             <FullWidthRangeSlider

frontend/packages/core/src/components/Select.tsx

@@ -9,7 +9,8 @@ import {
     math,
     sameBorder,
     size,
-    transitionProps
+    transitionProps,
+    zIndexes
 } from '~/utils/style';
 
 import Checkbox from '~/components/Checkbox';
@@ -77,7 +78,7 @@ const List = styled.div<{opened?: boolean; empty?: boolean}>`
     border-top-color: var(--border-color);
     ${borderRadiusShortHand('bottom', borderRadius)}
     display: ${props => (props.opened ? 'block' : 'none')};
-    z-index: 9999;
+    z-index: ${zIndexes.component};
     line-height: 1;
     background-color: inherit;
     box-shadow: 0 5px 6px 0 rgba(0, 0, 0, 0.05);

frontend/packages/core/src/utils/style.ts

@@ -32,6 +32,15 @@ export const asideWidth = rem(260);
 export const borderRadius = '4px';
 export const progressSpinnerSize = '20px';
 
+export const zIndexes = {
+    progress: 99999,
+    toast: 90000,
+    tooltip: 80000,
+    component: 30000,
+    dialog: 20000,
+    header: 10000
+};
+
 // shims
 // TODO: remove and use colors in theme instead
 export const primaryColor = colors.primary.default;
@@ -143,7 +152,7 @@ export const GlobalStyle = createGlobalStyle`
 
     #nprogress .bar {
         background-color: var(--progress-bar-color);
-        z-index: 99999;
+        z-index: ${zIndexes.progress};
         ${position('fixed', 0, null, null, 0)}
         ${size('2px', '100%')}
         ${transitionProps('background-color')}
@@ -161,7 +170,7 @@ export const GlobalStyle = createGlobalStyle`
 
     #nprogress .spinner {
         display: block;
-        z-index: 99999;
+        z-index: ${zIndexes.progress};
         ${position('fixed', progressSpinnerSize, progressSpinnerSize, null, null)}
     }
 
@@ -190,7 +199,7 @@ export const GlobalStyle = createGlobalStyle`
     }
 
     .Toastify__toast-container {
-        z-index: 10001;
+        z-index: ${zIndexes.toast};
 
         .Toastify__toast {
             border-radius: ${borderRadius};
@@ -207,7 +216,7 @@ export const GlobalStyle = createGlobalStyle`
     }
 
     [data-tippy-root] .tippy-box {
-        z-index: 10002;
+        z-index: ${zIndexes.tooltip};
         color: var(--text-color);
         background-color: var(--background-color);
         box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);

frontend/packages/core/src/utils/theme.ts

@@ -62,6 +62,8 @@ export const themes = {
         progressBarColor: '#fff',
         maskColor: 'rgba(255, 255, 255, 0.8)',
 
+        samplePreviewMaskColor: 'rgba(0, 0, 0, 0.5)',
+
         graphUploaderBackgroundColor: '#f9f9f9',
         graphUploaderActiveBackgroundColor: '#f2f6ff',
         graphCopyrightColor: '#ddd',
@@ -102,6 +104,8 @@ export const themes = {
         progressBarColor: '#fff',
         maskColor: 'rgba(0, 0, 0, 0.8)',
 
+        samplePreviewMaskColor: 'rgba(0, 0, 0, 0.8)',
+
         graphUploaderBackgroundColor: '#262629',
         graphUploaderActiveBackgroundColor: '#303033',
         graphCopyrightColor: '#565657',