fix(diagnostics): Updated client timing chart to no longer be sqrt Y …

…scaling (#247) It was a bit odd to have frame timing be non-linear!
Mojang · Oct 25, 2024 · 2b1b24f · 2b1b24f
1 parent d860411
commit 2b1b24f
Show file tree

Hide file tree

Showing 6 changed files with 37 additions and 14 deletions.
diff --git a/webview-ui/src/diagnostics_panel/App.tsx b/webview-ui/src/diagnostics_panel/App.tsx
@@ -4,7 +4,7 @@ import { VSCodePanelTab, VSCodePanelView, VSCodePanels } from '@vscode/webview-u
 import './App.css';
 import { StatGroupSelectionBox } from './controls/StatGroupSelectionBox';
 import { useCallback, useEffect, useState } from 'react';
-import { StatisticType, YAxisType, createStatResolver } from './StatisticResolver';
+import { StatisticType, YAxisStyle, YAxisType, createStatResolver } from './StatisticResolver';
 import MinecraftStatisticLineChart from './controls/MinecraftStatisticLineChart';
 import MinecraftStatisticStackedLineChart from './controls/MinecraftStatisticStackedLineChart';
 import MinecraftStatisticStackedBarChart from './controls/MinecraftStatisticStackedBarChart';
@@ -79,10 +79,7 @@ function App() {
 
     return (
         <main>
-            <VSCodePanels 
-                activeid={currentTab}
-                onChange={event => handlePanelChange(event as VSCodePanelsChangeEvent)}
-            >
+            <VSCodePanels activeid={currentTab} onChange={event => handlePanelChange(event as VSCodePanelsChangeEvent)}>
                 <VSCodePanelTab id="tab-1">World</VSCodePanelTab>
                 <VSCodePanelTab id="tab-2">Memory</VSCodePanelTab>
                 <VSCodePanelTab id="tab-3">Server Timing</VSCodePanelTab>

diff --git a/webview-ui/src/diagnostics_panel/StatisticResolver.tsx b/webview-ui/src/diagnostics_panel/StatisticResolver.tsx
@@ -8,6 +8,18 @@ export enum YAxisType {
     Centered = 'Centered',
 }
 
+// Style of the Y axis
+// See D3 Scales 'ScaleType' type for more values
+export enum YAxisStyle {
+    Linear = 'linear',
+    SquareRoot = 'sqrt',
+    Pow = 'pow',
+    Logarithmic = 'log',
+    SymLog = 'symlog',
+    Time = 'time',
+    UTC = 'utc',
+}
+
 export type TrackedStat = {
     value: number;
     time: number;

diff --git a/webview-ui/src/diagnostics_panel/controls/LineChart/LineChart.tsx b/webview-ui/src/diagnostics_panel/controls/LineChart/LineChart.tsx
@@ -2,7 +2,7 @@
 
 import { useEffect, useState, useRef } from 'react';
 import * as d3 from 'd3';
-import { StatisticOptions, TrackedStat, YAxisType, createStatResolver } from '../../StatisticResolver';
+import { StatisticOptions, TrackedStat, YAxisStyle, YAxisType, createStatResolver } from '../../StatisticResolver';
 import { createYAxisDomainResolver } from './LineChartYAxisResolvers';
 import * as Plot from '@observablehq/plot';
 import { StatisticProvider, StatisticUpdatedMessage } from '../../StatisticProvider';
@@ -14,12 +14,20 @@ type LineChartProps = {
     xLabel: string;
     statisticOptions: StatisticOptions;
     statisticDataProvider: StatisticProvider;
+    yAxisStyle?: YAxisStyle;
 };
 
 type PlotResult = ((SVGSVGElement | HTMLElement) & Plot.Plot) | undefined;
 
 //chart component
-export function LineChart({ title, yLabel, xLabel, statisticOptions, statisticDataProvider }: LineChartProps) {
+export function LineChart({
+    title,
+    yLabel,
+    xLabel,
+    statisticOptions,
+    statisticDataProvider,
+    yAxisStyle,
+}: LineChartProps) {
     // state
     const [data, setData] = useState<TrackedStat[]>([]);
 
@@ -83,7 +91,7 @@ export function LineChart({ title, yLabel, xLabel, statisticOptions, statisticDa
                 },
                 y: {
                     grid: true,
-                    type: 'linear',
+                    type: yAxisStyle,
                     domain: yDomain,
                     label: yLabel,
                 },

diff --git a/webview-ui/src/diagnostics_panel/controls/MinecraftStatisticLineChart.tsx b/webview-ui/src/diagnostics_panel/controls/MinecraftStatisticLineChart.tsx
@@ -1,8 +1,7 @@
-
 // Copyright (C) Microsoft Corporation.  All rights reserved.
 
 import { useCallback, useState } from 'react';
-import { StatisticOptions, YAxisType } from '../StatisticResolver';
+import { StatisticOptions, YAxisStyle as AxisStyle, YAxisType } from '../StatisticResolver';
 import LineChartYAxisSelectionBox from './LineChart/LineChartYAxisSelectionBox';
 import { LineChart } from './LineChart/LineChart';
 import { StatisticProvider } from '../StatisticProvider';
@@ -13,13 +12,15 @@ type MinecraftStatisticLineChartProps = {
     xLabel?: string;
     statisticOptions: StatisticOptions;
     statisticDataProvider: StatisticProvider;
+    yAxisStyle?: AxisStyle;
 };
 
 export default function MinecraftStatisticLineChart({
     title,
     statisticOptions,
     yLabel,
     xLabel = 'Time',
+    yAxisStyle,
     statisticDataProvider,
 }: MinecraftStatisticLineChartProps) {
     const [_statisticOptions, _setStatisticOptions] = useState<StatisticOptions>(statisticOptions);
@@ -38,6 +39,7 @@ export default function MinecraftStatisticLineChart({
                 xLabel={xLabel}
                 statisticOptions={_statisticOptions}
                 statisticDataProvider={statisticDataProvider}
+                yAxisStyle={yAxisStyle}
             />
             <br />
             <LineChartYAxisSelectionBox onChange={yAxisResolverChanged} defaultValue={statisticOptions.yAxisType} />

diff --git a/webview-ui/src/diagnostics_panel/controls/MinecraftStatisticStackedBarChart.tsx b/webview-ui/src/diagnostics_panel/controls/MinecraftStatisticStackedBarChart.tsx
@@ -3,14 +3,15 @@
 import { useEffect, useRef, useState } from 'react';
 import * as Plot from '@observablehq/plot';
 import { ascending } from 'd3-array';
-import { StatisticOptions, StatisticResolver, TrackedStat } from '../StatisticResolver';
+import { StatisticOptions, StatisticResolver, TrackedStat, YAxisStyle } from '../StatisticResolver';
 import { StatisticProvider, StatisticUpdatedMessage } from '../StatisticProvider';
 import { removeAllStyleElements } from '../../util/CSPUtilities';
 
 type MinecraftStatisticStackedBarChartProps = {
     title: string;
     yLabel: string;
     xLabel?: string;
+    yAxisStyle?: YAxisStyle;
     statisticDataProvider: StatisticProvider;
     statisticResolver: StatisticResolver;
 };
@@ -19,6 +20,7 @@ export default function MinecraftStatisticStackedBarChart({
     title,
     yLabel,
     xLabel = 'Time',
+    yAxisStyle,
     statisticDataProvider,
     statisticResolver,
 }: MinecraftStatisticStackedBarChartProps) {
@@ -72,7 +74,7 @@ export default function MinecraftStatisticStackedBarChart({
                 },
                 ticks: 10,
             },
-            y: { grid: true, label: yLabel },
+            y: { grid: true, label: yLabel, type: yAxisStyle },
             marks: [
                 Plot.barY(chartData, {
                     x: 'time',

diff --git a/webview-ui/src/diagnostics_panel/controls/MinecraftStatisticStackedLineChart.tsx b/webview-ui/src/diagnostics_panel/controls/MinecraftStatisticStackedLineChart.tsx
@@ -3,7 +3,7 @@
 import { useEffect, useRef, useState } from 'react';
 import * as Plot from '@observablehq/plot';
 import { StatisticProvider, StatisticUpdatedMessage } from '../StatisticProvider';
-import { StatisticResolver, TrackedStat } from '../StatisticResolver';
+import { StatisticResolver, TrackedStat, YAxisStyle } from '../StatisticResolver';
 import { removeAllStyleElements } from '../../util/CSPUtilities';
 
 type MinecraftStatisticStackedLineChartProps = {
@@ -16,6 +16,7 @@ type MinecraftStatisticStackedLineChartProps = {
     targetValue?: number; // Target value for a line on the Y axis
     statisticDataProvider: StatisticProvider;
     statisticResolver: StatisticResolver;
+    yAxisStyle?: YAxisStyle;
 };
 
 export default function MinecraftStatisticStackedLineChart({
@@ -26,6 +27,7 @@ export default function MinecraftStatisticStackedLineChart({
     statisticDataProvider,
     statisticResolver,
     catageoryLabels,
+    yAxisStyle,
 }: MinecraftStatisticStackedLineChartProps) {
     // states
     const [data, setData] = useState<TrackedStat[]>([]);
@@ -96,7 +98,7 @@ export default function MinecraftStatisticStackedLineChart({
                     return Math.floor(tickDifference / 20) + 's';
                 },
             },
-            y: { grid: true, label: yLabel, type: 'sqrt' },
+            y: { grid: true, label: yLabel, type: yAxisStyle },
             marks: [
                 Plot.areaY(data, {
                     x: 'time',