feat: Display better x-axis ticks on charts with time axis [WEB-849] (#…

…6051) * remove xTickValues from props now that it can be calculated internally
determined-ai · Feb 23, 2023 · 0186e09 · 0186e09
1 parent 5cf0ee6
commit 0186e09
Show file tree

Hide file tree

Showing 6 changed files with 31 additions and 17 deletions.
diff --git a/webui/react/src/components/kit/LineChart.tsx b/webui/react/src/components/kit/LineChart.tsx
@@ -12,6 +12,7 @@ import { tooltipsPlugin } from 'components/UPlot/UPlotChart/tooltipsPlugin2';
 import useResize from 'hooks/useResize';
 import { glasbeyColor } from 'shared/utils/color';
 import { MetricType, Scale } from 'types';
+import { getTimeTickValues } from 'utils/chart';
 
 import css from './LineChart.module.scss';
 
@@ -60,7 +61,6 @@ interface Props {
   title?: string;
   xAxis?: XAxisDomain;
   xLabel?: string;
-  xTickValues?: uPlot.Axis.Values;
   yLabel?: string;
   yTickValues?: uPlot.Axis.Values;
 }
@@ -78,7 +78,6 @@ export const LineChart: React.FC<Props> = ({
   xAxis = XAxisDomain.Batches,
   xLabel,
   yLabel,
-  xTickValues,
   yTickValues,
 }: Props) => {
   const hasPopulatedSeries: boolean = useMemo(
@@ -124,6 +123,17 @@ export const LineChart: React.FC<Props> = ({
     return [xValues, ...yValuesArray];
   }, [series, xAxis]);
 
+  const xTickValues: uPlot.Axis.Values | undefined = useMemo(
+    () =>
+      xAxis === XAxisDomain.Time &&
+      chartData.length > 0 &&
+      chartData[0].length > 0 &&
+      chartData[0][chartData[0].length - 1] - chartData[0][0] < 43200 // 12 hours
+        ? getTimeTickValues
+        : undefined,
+    [chartData, xAxis],
+  );
+
   const chartOptions: Options = useMemo(() => {
     const plugins: Plugin[] = propPlugins ?? [
       tooltipsPlugin({
@@ -258,9 +268,14 @@ export interface GroupProps {
  * `data` comes from the itemData prop that is passed to FixedSizeGrid.
  */
 const VirtualChartRenderer: React.FC<
-  GridChildComponentProps<{ chartsProps: ChartsProps; columnCount: number }>
+  GridChildComponentProps<{
+    chartsProps: ChartsProps;
+    columnCount: number;
+    scale: Scale;
+    xAxis: XAxisDomain;
+  }>
 > = ({ columnIndex, rowIndex, style, data }) => {
-  const { chartsProps, columnCount } = data;
+  const { chartsProps, columnCount, scale, xAxis } = data;
 
   const cellIndex = rowIndex * columnCount + columnIndex;
 
@@ -270,7 +285,7 @@ const VirtualChartRenderer: React.FC<
   return (
     <div className={css.chartgridCell} key={`${rowIndex}, ${columnIndex}`} style={style}>
       <div className={css.chartgridCellCard}>
-        <LineChart {...chartProps} scale={Scale.Linear} xAxis={XAxisDomain.Batches} />
+        <LineChart {...chartProps} scale={scale} xAxis={xAxis} />
       </div>
     </div>
   );
@@ -310,7 +325,7 @@ export const ChartGrid: React.FC<GroupProps> = React.memo(
             columnCount={columnCount}
             columnWidth={Math.floor(width / columnCount)}
             height={Math.min(height - 40, (chartsProps.length > columnCount ? 2.1 : 1.05) * 480)}
-            itemData={{ chartsProps, columnCount }}
+            itemData={{ chartsProps, columnCount, scale, xAxis }}
             rowCount={Math.ceil(chartsProps.length / columnCount)}
             rowHeight={480}
             width={width}>

diff --git a/webui/react/src/pages/TrialDetails/Profiles/Charts/SystemMetricChart.tsx b/webui/react/src/pages/TrialDetails/Profiles/Charts/SystemMetricChart.tsx
@@ -10,7 +10,7 @@ import { ChartProps } from '../types';
 import { MetricType } from '../types';
 import { useFetchProfilerMetrics } from '../useFetchProfilerMetrics';
 import { useFetchProfilerSeries } from '../useFetchProfilerSeries';
-import { getScientificNotationTickValues, getTimeTickValues, getUnitForMetricName } from '../utils';
+import { getScientificNotationTickValues, getUnitForMetricName } from '../utils';
 
 import SystemMetricFilter from './SystemMetricChartFilters';
 
@@ -93,7 +93,6 @@ const SystemMetricChart: React.FC<ChartProps> = ({ trial }) => {
         series={systemMetrics.data}
         xAxis={XAxisDomain.Time}
         xLabel="Time"
-        xTickValues={getTimeTickValues}
         yLabel={yLabel}
         yTickValues={getScientificNotationTickValues}
       />

diff --git a/webui/react/src/pages/TrialDetails/Profiles/Charts/ThroughputMetricChart.tsx b/webui/react/src/pages/TrialDetails/Profiles/Charts/ThroughputMetricChart.tsx
@@ -7,7 +7,7 @@ import Section from 'components/Section';
 import { ChartProps } from '../types';
 import { MetricType } from '../types';
 import { useFetchProfilerMetrics } from '../useFetchProfilerMetrics';
-import { getScientificNotationTickValues, getTimeTickValues, getUnitForMetricName } from '../utils';
+import { getScientificNotationTickValues, getUnitForMetricName } from '../utils';
 
 const ThroughputMetricChart: React.FC<ChartProps> = ({ trial }) => {
   const throughputMetrics = useFetchProfilerMetrics(
@@ -27,7 +27,6 @@ const ThroughputMetricChart: React.FC<ChartProps> = ({ trial }) => {
         series={throughputMetrics.data}
         xAxis={XAxisDomain.Time}
         xLabel="Time"
-        xTickValues={getTimeTickValues}
         yLabel={yLabel}
         yTickValues={getScientificNotationTickValues}
       />

diff --git a/webui/react/src/pages/TrialDetails/Profiles/Charts/TimingMetricChart.tsx b/webui/react/src/pages/TrialDetails/Profiles/Charts/TimingMetricChart.tsx
@@ -7,7 +7,7 @@ import Section from 'components/Section';
 import { ChartProps } from '../types';
 import { MetricType } from '../types';
 import { useFetchProfilerMetrics } from '../useFetchProfilerMetrics';
-import { getScientificNotationTickValues, getTimeTickValues, getUnitForMetricName } from '../utils';
+import { getScientificNotationTickValues, getUnitForMetricName } from '../utils';
 
 export const TimingMetricChart: React.FC<ChartProps> = ({ trial }) => {
   const timingMetrics = useFetchProfilerMetrics(trial.id, trial.state, MetricType.Timing);
@@ -20,7 +20,6 @@ export const TimingMetricChart: React.FC<ChartProps> = ({ trial }) => {
         series={timingMetrics.data}
         xAxis={XAxisDomain.Time}
         xLabel="Time"
-        xTickValues={getTimeTickValues}
         yLabel={yLabel}
         yTickValues={getScientificNotationTickValues}
       />

diff --git a/webui/react/src/pages/TrialDetails/Profiles/utils.ts b/webui/react/src/pages/TrialDetails/Profiles/utils.ts
@@ -1,4 +1,3 @@
-import dayjs from 'dayjs';
 import uPlot from 'uplot';
 
 // key should be lowercase to match the metric name
@@ -21,10 +20,6 @@ export const getUnitForMetricName = (metricName: string): string => {
     : metricName;
 };
 
-export const getTimeTickValues: uPlot.Axis['values'] = (_self, rawValue) => {
-  return rawValue.map((val) => dayjs.unix(val).format('hh:mm:ss.SSS').slice(0, -2));
-};
-
 export const getScientificNotationTickValues: uPlot.Axis['values'] = (_self, rawValue) => {
   return rawValue.map((val) => {
     if (val === 0) return val;

diff --git a/webui/react/src/utils/chart.ts b/webui/react/src/utils/chart.ts
@@ -1,3 +1,6 @@
+import dayjs from 'dayjs';
+import uPlot from 'uplot';
+
 import { Theme } from 'shared/themes';
 import { Primitive, Range } from 'shared/types';
 import { ColorScale } from 'shared/utils/color';
@@ -75,3 +78,7 @@ export const normalizeRange = (values: number[], range: Range<number>): number[]
 export function distance(x0: number, y0: number, x1: number, y1: number): number {
   return Math.sqrt((x1 - x0) ** 2 + (y1 - y0) ** 2);
 }
+
+export const getTimeTickValues: uPlot.Axis.Values = (_self, rawValue) => {
+  return rawValue.map((val) => dayjs.unix(val).format('hh:mm:ss.SSS').slice(0, -2));
+};