修复直方图offset模式下不展示问题 (#1165)

xiaoyixin-cmd · rainyfly · web-flow · commit bce54249aaca · 2022-12-06T11:18:26.000+08:00
* type

* 🐞 fix: 修复profiler trace页面

Co-authored-by: chenjian &lt;chenjian26@baidu.com&gt;
diff --git a/frontend/packages/core/snowpack.config.js b/frontend/packages/core/snowpack.config.js
@@ -37,7 +37,7 @@ function isWorkspace() {
 const iconsPath = path.dirname(resolve.sync(cwd, '@visualdl/icons'));
 const netronPath = path.dirname(resolve.sync(cwd, '@visualdl/netron'));
 const netronPath2 = path.dirname(resolve.sync(cwd, '@visualdl/netron2'));
-
+const TracePath = path.dirname(resolve.sync(cwd, './public/static'));
 const wasmPath = path.dirname(resolve.sync(cwd, '@visualdl/wasm'));
 const dest = path.resolve(cwd, './dist/__snowpack__/link/packages');
 
@@ -102,6 +102,10 @@ export default {
                         source: [path.join(netronPath2, '**/*')],
                         destination: path.join(dest, 'netron2/dist')
                     },
+                    {
+                        source: [path.join(TracePath, '**/*')],
+                        destination: path.join(dest, 'trace/dist')
+                    },
                     {
                         source: [path.join(wasmPath, '*.{js,wasm}')],
                         destination: path.join(dest, 'wasm/dist')
diff --git a/frontend/packages/core/src/components/StackChart.tsx b/frontend/packages/core/src/components/StackChart.tsx
@@ -18,16 +18,7 @@
 
 import * as chart from '~/utils/chart';
 
-import type {
-    EChartsOption,
-    ECharts,
-    CustomSeriesOption,
-    CustomSeriesRenderItem,
-    AxisPointerComponentOption,
-    TooltipComponentOption,
-    GridComponentOption,
-    Color as ZRColor
-} from 'echarts';
+import type {EChartsOption as EChartOption, ECharts} from 'echarts';
 import React, {useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState} from 'react';
 import {WithStyled, primaryColor, transitionProps} from '~/utils/style';
 import useECharts, {Options, Wrapper, useChartTheme} from '~/hooks/useECharts';
@@ -36,7 +27,6 @@ import GridLoader from 'react-spinners/GridLoader';
 import defaultsDeep from 'lodash/defaultsDeep';
 import styled from 'styled-components';
 import useThrottleFn from '~/hooks/useThrottleFn';
-import type {LinesSeriesOption} from 'echarts/charts';
 
 const Tooltip = styled.div`
     position: absolute;
@@ -48,14 +38,23 @@ const Tooltip = styled.div`
     display: none;
     ${transitionProps(['color', 'background-color'])}
 `;
-
-type RenderItem = CustomSeriesRenderItem;
+// type RenderItem = EChartOption.SeriesCustom.RenderItem;
+type RenderItem = any;
 type GetValue = (i: number) => number;
 type GetCoord = (p: [number, number]) => [number, number];
 
 export type StackChartProps = {
-    options?: EChartsOption;
+    options?: EChartOption;
     title?: string;
+    // data?: Partial<Omit<NonNullable<EChartOption<EChartOption.SeriesCustom>['series']>[number], 'data'>> & {
+    //     minZ: number;
+    //     maxZ: number;
+    //     minX: number;
+    //     maxX: number;
+    //     minY: number;
+    //     maxY: number;
+    //     data: number[][];
+    // };
     data?: any;
     loading?: boolean;
     zoom?: boolean;
@@ -116,11 +115,11 @@ const StackChart = React.forwardRef<StackChartRef, StackChartProps & WithStyled>
             [getPoint, rawData]
         );
 
-        const renderItem = useCallback(
-            (params, api) => {
+        const renderItem = useCallback<RenderItem>(
+            (params: any, api: any) => {
                 const points = makePolyPoints(params.dataIndex as number, api.value as GetValue, api.coord as GetCoord);
                 return {
-                    type: 'path',
+                    type: 'polygon',
                     silent: true,
                     z: api.value?.(1),
                     shape: {
@@ -147,9 +146,8 @@ const StackChart = React.forwardRef<StackChartRef, StackChartProps & WithStyled>
         useEffect(() => {
             dotsRef.current = dots;
         }, [dots]);
-
-        const AxisPointer = options?.axisPointer as AxisPointerComponentOption;
-        const pointerLabelFormatter = AxisPointer.label?.formatter;
+        const axisPointer: any = options?.axisPointer;
+        const pointerLabelFormatter = axisPointer?.label?.formatter;
 
         // formatter change will cause echarts rerender axis pointer label
         // so we need to use 2 refs instead of dots and highlight to get rid of dependencies of these two variables
@@ -161,15 +159,14 @@ const StackChart = React.forwardRef<StackChartRef, StackChartProps & WithStyled>
                 if ('string' === typeof pointerLabelFormatter) {
                     return pointerLabelFormatter;
                 }
-                // return pointerLabelFormatter(params, dotsRef.current[highLightRef.current]);
-                return pointerLabelFormatter(params);
+                return pointerLabelFormatter(params, dotsRef.current[highLightRef.current]);
             },
             [pointerLabelFormatter]
         );
 
         const theme = useChartTheme();
 
-        const chartOptions = useMemo<EChartsOption>(() => {
+        const chartOptions: any = useMemo<EChartOption>(() => {
             // eslint-disable-next-line @typescript-eslint/no-unused-vars
             const {color, colorAlt, toolbox, series, ...defaults} = chart;
 
@@ -240,8 +237,7 @@ const StackChart = React.forwardRef<StackChartRef, StackChartProps & WithStyled>
         const mouseout = useCallback(() => {
             setHighlight(null);
             setDots([]);
-            const formatters = chartOptions.tooltip as TooltipComponentOption;
-            if (formatters.formatter) {
+            if (chartOptions.tooltip?.formatter) {
                 setTooltip('');
                 if (tooltipRef.current) {
                     tooltipRef.current.style.display = 'none';
@@ -257,13 +253,13 @@ const StackChart = React.forwardRef<StackChartRef, StackChartProps & WithStyled>
                     }
 
                     const {offsetX, offsetY} = e;
-                    if (offsetY < negativeY + ((chartOptions['grid'] as GridComponentOption)?.top as number) ?? 0) {
+                    if (offsetY < negativeY + (chartOptions?.grid?.top as number) ?? 0) {
                         mouseout();
                         return;
                     }
-                    const [x, y] = echarts.convertFromPixel('grid', [offsetX, offsetY]) as [number, number];
-                    const seriesData = echart?.getOption().series as LinesSeriesOption;
-                    const data = (seriesData.data as number[][]) ?? [];
+                    const [x, y] = echarts.convertFromPixel('grid' as any, [offsetX, offsetY]) as [number, number];
+                    const seriesData: any = echarts.getOption().series;
+                    const data = (seriesData[0].data as number[][]) ?? [];
 
                     // find right on top step
                     const steps = data.map(row => row[1]).sort((a, b) => a - b);
@@ -300,11 +296,10 @@ const StackChart = React.forwardRef<StackChartRef, StackChartProps & WithStyled>
                     }
 
                     // set tooltip
-                    const formatters = chartOptions.tooltip as TooltipComponentOption;
-                    if (formatters.formatter) {
+                    if (chartOptions.tooltip?.formatter) {
                         setTooltip(
                             // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                            highlight == null ? '' : (formatters.formatter as any)?.(dots[highlight])
+                            highlight == null ? '' : (chartOptions.tooltip?.formatter as any)?.(dots[highlight])
                         );
                         if (tooltipRef.current) {
                             if (step == null) {
@@ -384,9 +379,9 @@ const StackChart = React.forwardRef<StackChartRef, StackChartProps & WithStyled>
                             }
                         });
                     } else {
-                        const seriesData = echart.getOption().series as LinesSeriesOption;
-                        const data = (seriesData.data as number[][]) ?? [];
-                        const getCoord: GetCoord = pt => echart.convertToPixel('grid', pt) as [number, number];
+                        const seriesData: any = echart.getOption().series;
+                        const data = (seriesData[0]?.data as number[][]) ?? [];
+                        const getCoord: GetCoord = pt => echart.convertToPixel('grid' as any, pt) as [number, number];
                         const getValue: GetValue = i => data[highlight][i];
                         echart.setOption({
                             graphic: {
@@ -430,7 +425,7 @@ const StackChart = React.forwardRef<StackChartRef, StackChartProps & WithStyled>
                             }
                         });
                     } else {
-                        const getCoord: GetCoord = pt => echart.convertToPixel('grid', pt) as [number, number];
+                        const getCoord: GetCoord = pt => echart.convertToPixel('grid' as any, pt) as [number, number];
                         echart.setOption({
                             graphic: {
                                 elements: dots.map((dot, i) => {
@@ -449,7 +444,7 @@ const StackChart = React.forwardRef<StackChartRef, StackChartProps & WithStyled>
                                         },
                                         style: {
                                             fill: '#fff',
-                                            stroke: (chartOptions.color as ZRColor[])?.[0],
+                                            stroke: chartOptions.color?.[0],
                                             lineWidth: 2
                                         }
                                     };
diff --git a/frontend/packages/mock/data/app/component_tabs.js b/frontend/packages/mock/data/app/component_tabs.js
@@ -17,7 +17,7 @@
 export default [
     'scalar',
     'image',
-    // 'text',
+    'text',
     'embeddings',
     'audio',
     'histogram',
@@ -30,4 +30,4 @@ export default [
     'x2paddle',
     'fastdeploy_server'
 ];
-// export default ['dynamic_graph'];
+// export default ['histogram'];
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
