From 3470c62cce75edc3d64f1ccacf30ce57789674ba Mon Sep 17 00:00:00 2001
From: "Wei-Chun, Chang" <wcchang@infuseai.io>
Date: Thu, 14 Nov 2024 01:01:22 +0800
Subject: [PATCH 1/2] Add title and legend in inside chart

Signed-off-by: Wei-Chun, Chang <wcchang@infuseai.io>
---
 js/app/page.tsx                               |  4 +-
 js/src/components/charts/HistogramChart.tsx   | 40 +++++++++----------
 .../histogram/HistogramDiffResultView.tsx     | 20 +++-------
 3 files changed, 25 insertions(+), 39 deletions(-)

diff --git a/js/app/page.tsx b/js/app/page.tsx
index d82d9985..c1076aec 100644
--- a/js/app/page.tsx
+++ b/js/app/page.tsx
@@ -9,7 +9,6 @@ import {
   Box,
   Flex,
   Link,
-  Text,
   Spacer,
   Icon,
   LinkProps,
@@ -53,7 +52,6 @@ import { RunResultPane } from "@/components/run/RunResultPane";
 import { VscGitPullRequest } from "react-icons/vsc";
 import { RunList } from "@/components/run/RunList";
 
-
 function getCookie(key: string) {
   var b = document.cookie.match("(^|;)\\s*" + key + "\\s*=\\s*([^;]+)");
   return b ? b.pop() : "";
@@ -320,7 +318,7 @@ function Main() {
     >
       <Box style={{ contain: "size" }}>{_isHistoryOpen && <RunList />}</Box>
       <VSplit
-        sizes={_isRunResultOpen ? [60, 40] : [100, 0]}
+        sizes={_isRunResultOpen ? [50, 50] : [100, 0]}
         minSize={_isRunResultOpen ? 100 : 0}
         gutterSize={_isRunResultOpen ? 5 : 0}
         style={{
diff --git a/js/src/components/charts/HistogramChart.tsx b/js/src/components/charts/HistogramChart.tsx
index 218c2a49..31a91cd2 100644
--- a/js/src/components/charts/HistogramChart.tsx
+++ b/js/src/components/charts/HistogramChart.tsx
@@ -10,17 +10,17 @@ import {
   LinearScale,
   AnimationOptions,
   ScaleOptions,
+  Title,
+  Legend,
 } from "chart.js";
 import { Chart } from "react-chartjs-2";
 import {
   formatAsAbbreviatedNumber,
   formatIntervalMinMax,
 } from "@/utils/formatters";
-import { Flex, Spacer, Text } from "@chakra-ui/react";
 import {
   BASE_BAR_COLOR_WITH_ALPHA,
   CURRENT_BAR_COLOR_WITH_ALPHA,
-  SquareIcon,
 } from "./SquareIcon";
 
 export const INFO_VAL_COLOR = "#63B3ED";
@@ -37,6 +37,7 @@ export const VALUE_RANGE = "Value Range";
 
 type HistogramChartProps = {
   data: {
+    title: string;
     type: string;
     samples?: number;
     min?: string | number;
@@ -58,6 +59,8 @@ export function HistogramChart({
     TimeSeriesScale,
     LinearScale,
     CategoryScale,
+    Title,
+    Legend,
     Tooltip
   );
 
@@ -69,24 +72,12 @@ export function HistogramChart({
 
   //infer `any` to allow for union data configurations & options
   return (
-    <>
-      <Flex alignItems={"center"} direction={"row"}>
-        <Spacer />
-        <Text as="h3" size="sm" p="2" color="gray">
-          <SquareIcon color={BASE_BAR_COLOR_WITH_ALPHA} /> Base
-        </Text>
-        <Text as="h3" size="sm" p="2" color="gray">
-          <SquareIcon color={CURRENT_BAR_COLOR_WITH_ALPHA} /> Current
-        </Text>
-        <Spacer />
-      </Flex>
-      <Chart
-        type="bar"
-        options={chartOptions}
-        data={chartData as any}
-        plugins={[]}
-      />
-    </>
+    <Chart
+      type="bar"
+      options={chartOptions}
+      data={chartData as any}
+      plugins={[]}
+    />
   );
 }
 
@@ -150,13 +141,20 @@ export function getHistogramChartOptions(
   hideAxis = false,
   { ...configOverrides }: ChartOptions<"bar"> = {}
 ): ChartOptions<"bar"> {
-  const { datasets, type, samples = 0, binEdges } = data;
+  const { title, datasets, type, samples = 0, binEdges } = data;
   const [base, current] = datasets;
   const isDatetime = type === "datetime";
   return {
     responsive: true,
     maintainAspectRatio: false,
     plugins: {
+      title: {
+        display: true,
+        text: title,
+        font: {
+          size: 20,
+        },
+      },
       tooltip: {
         mode: "index",
         // position: 'nearest',
diff --git a/js/src/components/histogram/HistogramDiffResultView.tsx b/js/src/components/histogram/HistogramDiffResultView.tsx
index 0d67db5c..c22516ee 100644
--- a/js/src/components/histogram/HistogramDiffResultView.tsx
+++ b/js/src/components/histogram/HistogramDiffResultView.tsx
@@ -1,13 +1,6 @@
 import { HistogramDiffParams, HistogramDiffResult } from "@/lib/api/profile";
 import { RunResultViewProps } from "../run/types";
-import {
-  HStack,
-  Box,
-  Flex,
-  Spacer,
-  Heading,
-  forwardRef,
-} from "@chakra-ui/react";
+import { HStack, Box, Flex, Spacer, forwardRef } from "@chakra-ui/react";
 import { HistogramChart } from "../charts/HistogramChart";
 import { ScreenshotBox } from "../screenshot/ScreenshotBox";
 
@@ -30,17 +23,14 @@ function _HistogramDiffResultView(
   }
 
   return (
-    <Flex direction="column" height="500px">
+    <Flex direction="column" height="100%">
       <ScreenshotBox ref={ref} height="100%">
-        <Heading as="h1" size="md" paddingTop="4" textAlign="center">
-          Model {params.model}.{params.column_name}
-        </Heading>
         <HStack>
           <Spacer />
-          <Box w="80%" h="300px" m="4">
-            {/* <Heading as='h3' size="sm" m="2" color='gray'>Base</Heading> */}
+          <Box w="80%" h="35vh" m="4">
             <HistogramChart
               data={{
+                title: `Model ${params.model}.${params.column_name}`,
                 type: run.params?.column_type || "",
                 datasets: [current, base],
                 min: min,
@@ -57,4 +47,4 @@ function _HistogramDiffResultView(
   );
 }
 
-export const HistogramDiffResultView = forwardRef(_HistogramDiffResultView);
\ No newline at end of file
+export const HistogramDiffResultView = forwardRef(_HistogramDiffResultView);

From beb8aafcef5854cc013987a94e1a083cd5cff465 Mon Sep 17 00:00:00 2001
From: "Wei-Chun, Chang" <wcchang@infuseai.io>
Date: Thu, 14 Nov 2024 01:25:11 +0800
Subject: [PATCH 2/2] Align title color

Signed-off-by: Wei-Chun, Chang <wcchang@infuseai.io>
---
 .../components/top-k/TopKDiffResultView.tsx   | 19 +++++++++----------
 1 file changed, 9 insertions(+), 10 deletions(-)

diff --git a/js/src/components/top-k/TopKDiffResultView.tsx b/js/src/components/top-k/TopKDiffResultView.tsx
index 94963d9b..c505cc28 100644
--- a/js/src/components/top-k/TopKDiffResultView.tsx
+++ b/js/src/components/top-k/TopKDiffResultView.tsx
@@ -1,21 +1,14 @@
 import { TopKDiffParams, TopKDiffResult } from "@/lib/api/profile";
 import { RunResultViewProps } from "../run/types";
 import {
-  Box,
   Flex,
   HStack,
   Heading,
   Spacer,
-  Text,
-  VStack,
-  Divider,
   Link,
   forwardRef,
 } from "@chakra-ui/react";
-import {
-  TopKSummaryBarChart,
-  TopKSummaryList,
-} from "../charts/TopKSummaryList";
+import { TopKSummaryBarChart } from "../charts/TopKSummaryList";
 import { useState } from "react";
 import { ScreenshotBox } from "../screenshot/ScreenshotBox";
 
@@ -34,7 +27,13 @@ const _TopKDiffResultView = ({ run }: TopKDiffResultViewProp, ref: any) => {
   return (
     <Flex direction="column" height={"100%"}>
       <ScreenshotBox ref={ref} blockSize={"auto"}>
-        <Heading as="h1" size="md" paddingTop={4} textAlign="center">
+        <Heading
+          as="h1"
+          size="md"
+          paddingTop={4}
+          textAlign="center"
+          color="gray.600"
+        >
           Model {params.model}.{params.column_name}
         </Heading>
         <HStack>
@@ -62,4 +61,4 @@ const _TopKDiffResultView = ({ run }: TopKDiffResultViewProp, ref: any) => {
   );
 };
 
-export const TopKDiffResultView = forwardRef(_TopKDiffResultView);
\ No newline at end of file
+export const TopKDiffResultView = forwardRef(_TopKDiffResultView);