Skip to content

Commit

Permalink
Merge branch 'develop' of https://github.com/PaddlePaddle/VisualDL in…
Browse files Browse the repository at this point in the history 
…to support_multiple_vdl_process_when_using_gunicorn_for_x2paddle
  • Loading branch information
@rainyfly
rainyfly committed Jan 9, 2023
2 parents 41761f8 + 9a16e46 commit 45a439a
Show file tree
Hide file tree
Showing 10 changed files with 457 additions and 428 deletions.
2 changes: 1 addition & 1 deletion .github/workflows/build.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ jobs:
strategy:
matrix:
os: [ubuntu-latest, macos-latest]
python-version: ['3.5']
python-version: ['3.7']
node-version: ['14']
steps:
- name: Checkout
Expand Down
6 changes: 5 additions & 1 deletion frontend/packages/core/snowpack.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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');

Expand Down Expand Up @@ -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')
Expand Down
69 changes: 32 additions & 37 deletions frontend/packages/core/src/components/StackChart.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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;
Expand All @@ -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;
Expand Down Expand Up @@ -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: {
Expand All @@ -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
Expand All @@ -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;

Expand Down Expand Up @@ -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';
Expand All @@ -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);
Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -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: {
Expand Down Expand Up @@ -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) => {
Expand All @@ -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
}
};
Expand Down
4 changes: 2 additions & 2 deletions frontend/packages/mock/data/app/component_tabs.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
export default [
'scalar',
'image',
// 'text',
'text',
'embeddings',
'audio',
'histogram',
Expand All @@ -30,4 +30,4 @@ export default [
'x2paddle',
'fastdeploy_server'
];
// export default ['dynamic_graph'];
// export default ['histogram'];
Loading

0 comments on commit 45a439a

Please sign in to comment.