fix log scaled y axis in charts

Author: DaltheCow

package-lock.json

@@ -1,3 +1,3 @@
-ASSET_PREFIX=https://neuralmagic.github.io/ui/dev
+ASSET_PREFIX=https://neuralmagic.github.io/guidellm/ui/dev
 BASE_PATH=/ui/dev
 NEXT_PUBLIC_USE_MOCK_API=true

src/ui/.env.development

@@ -1,3 +1,4 @@
 ASSET_PREFIX=http://localhost:3000
 BASE_PATH=http://localhost:3000
 NEXT_PUBLIC_USE_MOCK_API=true
+USE_MOCK_DATA=false

src/ui/.env.example

@@ -1,4 +1,4 @@
-ASSET_PREFIX=http://localhost:3000
-BASE_PATH=http://localhost:3000
+ASSET_PREFIX=http://localhost:3001
+BASE_PATH=http://localhost:3001
 NEXT_PUBLIC_USE_MOCK_API=true
-USE_MOCK_DATA=true
+USE_MOCK_DATA=false

src/ui/.env.local

@@ -1,3 +1,3 @@
-ASSET_PREFIX=https://neuralmagic.github.io/ui/latest
+ASSET_PREFIX=https://neuralmagic.github.io/guidellm/ui/latest
 BASE_PATH=/ui/latest
 NEXT_PUBLIC_USE_MOCK_API=true

src/ui/.env.production

@@ -1,3 +1,3 @@
-ASSET_PREFIX=https://neuralmagic.github.io/ui/release/latest
+ASSET_PREFIX=https://neuralmagic.github.io/guidellm/ui/release/latest
 BASE_PATH=/ui/release/latest
 NEXT_PUBLIC_USE_MOCK_API=true

src/ui/.env.staging

@@ -7,7 +7,7 @@ import { DashedLineProps, ScaleType } from './DashedLine.interfaces';
 import { spacedLogValues } from './helpers';
 
 export const getMinTick = (data: readonly Serie[]) => {
-  return Math.max(
+  return Math.min(
     ...data.map((lineData) =>
       Math.min(...lineData.data.map((point) => point.y as number))
     )
@@ -80,11 +80,16 @@ export const Component = ({
   let extraLeftAxisOptions = {};
   let extraYScaleOptions = {};
   if (yScaleType === ScaleType.log) {
-    const ticks = spacedLogValues(getMinTick(data), getMaxTick(data), 6);
+    const ticks = spacedLogValues(
+      Math.floor(getMinTick(data)),
+      Math.ceil(getMaxTick(data)),
+      6
+    );
     extraLeftAxisOptions = {
       tickValues: ticks,
     };
     extraYScaleOptions = {
+      min: ticks[0],
       max: ticks[ticks.length - 1],
     };
   }

src/ui/lib/components/Charts/DashedLine/DashedLine.component.tsx

@@ -13,6 +13,21 @@ const allowedMultipliers = [
   1, 1.2, 1.4, 1.5, 1.6, 1.8, 2, 2.5, 3, 3.5, 4, 5, 6, 7, 7.5, 8, 9, 10,
 ];
 
+export function roundDownNice(x: number) {
+  if (x <= 0) {
+    return x;
+  }
+  const exponent = Math.floor(Math.log10(x));
+  const base = Math.pow(10, exponent);
+  const fraction = x / base;
+  for (const m of allowedMultipliers.slice().reverse()) {
+    if (m <= fraction) {
+      return Math.floor(m * base);
+    }
+  }
+  return Math.floor(10 * base);
+}
+
 export function roundUpNice(x: number) {
   if (x <= 0) {
     return x;
@@ -22,10 +37,10 @@ export function roundUpNice(x: number) {
   const fraction = x / base;
   for (const m of allowedMultipliers) {
     if (m >= fraction) {
-      return Math.round(m * base);
+      return Math.ceil(m * base);
     }
   }
-  return Math.round(10 * base);
+  return Math.ceil(10 * base);
 }
 
 export function roundNearestNice(x: number) {
@@ -51,11 +66,14 @@ export function spacedLogValues(min: number, max: number, steps: number) {
   if (steps < 2) {
     return [];
   }
+  if (steps > max - min) {
+    steps = max - min + 1;
+  }
 
   if (min === 0) {
     const nonzeroCount = steps - 1;
-    const exponent = Math.floor(Math.log10(max)) - (nonzeroCount - 1);
-    const lowerNonZero = roundNearestNice(Math.pow(10, exponent));
+    const exponent = Math.log10(max) / (nonzeroCount - 1);
+    const lowerNonZero = roundDownNice(Math.pow(10, exponent));
     const upperTick = roundUpNice(max);
     const r = Math.pow(upperTick / lowerNonZero, 1 / (nonzeroCount - 1));
     const ticks = [0];
@@ -65,7 +83,7 @@ export function spacedLogValues(min: number, max: number, steps: number) {
     }
     return ticks;
   } else {
-    const lowerTick = roundUpNice(min);
+    const lowerTick = roundNearestNice(min);
     const upperTick = roundUpNice(max);
     const r = Math.pow(upperTick / lowerTick, 1 / (steps - 1));
     const ticks = [];

src/ui/lib/components/Charts/DashedLine/helpers.ts

@@ -59,8 +59,8 @@ export const Component: FC<MetricLineProps> = ({
       xScale={{ type: 'linear', min: minX }}
       yScale={{
         type: yScaleType,
-        min: 'auto',
-        max: 'auto',
+        min: minY,
+        max: maxY,
         ...extraYScaleOptions,
       }}
       axisBottom={null}

src/ui/lib/components/Charts/MetricLine/MetricLine.component.tsx

@@ -32,11 +32,11 @@ const Component = () => {
             variant="metric2"
             withTooltip
           />
-          <SpecBadge
+          {/*<SpecBadge
             label="Model size"
             value={data?.model?.size ? `${modelSize?.size} ${modelSize?.units}` : '0B'}
             variant="body1"
-          />
+          />*/}
         </HeaderCell>
         {/*<HeaderCell item xs={2} withDivider>*/}
         {/*  <SpecBadge*/}
@@ -62,10 +62,10 @@ const Component = () => {
         {/*    key="Version"*/}
         {/*  />*/}
         {/*</HeaderCell>*/}
-        <HeaderCell item xs={2} withDivider>
+        {/*<HeaderCell item xs={2} withDivider>
           <SpecBadge label="Task" value={data?.task || 'n/a'} variant="metric2" />
-        </HeaderCell>
-        <HeaderCell item xs={3} withDivider>
+        </HeaderCell>*/}
+        {/*<HeaderCell item xs={3} withDivider>
           <SpecBadge
             label="Dataset"
             value={data?.dataset?.name || 'n/a'}
@@ -78,7 +78,7 @@ const Component = () => {
               </Link>
             }
           />
-        </HeaderCell>
+        </HeaderCell>*/}
         <HeaderCell item xs={2} sx={{ paddingRight: 0 }}>
           <SpecBadge
             label="Time Stamp"