feat(weave): adding charts to the traces page

weave-js/package.json

@@ -161,6 +161,7 @@
     "@types/color": "^3.0.0",
     "@types/cytoscape": "^3.2.0",
     "@types/cytoscape-dagre": "^2.2.2",
+    "@types/d3-array": "^3.2.1",
     "@types/diff": "^5.0.3",
     "@types/downloadjs": "^1.4.2",
     "@types/is-buffer": "^2.0.0",

weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CallsPage/CallsCharts.tsx

@@ -0,0 +1,190 @@
+import {GridFilterModel, GridSortModel} from '@mui/x-data-grid-pro';
+import React, {useMemo} from 'react';
+
+import {MOON_400} from '../../../../../../common/css/color.styles';
+import {IconInfo} from '../../../../../Icon';
+import {WaveLoader} from '../../../../../Loaders/WaveLoader';
+import {Tailwind} from '../../../../../Tailwind';
+import {WFHighLevelCallFilter} from './callsTableFilter';
+import {useCallsForQuery} from './callsTableQuery';
+import {
+  ErrorPlotlyChart,
+  LatencyPlotlyChart,
+  RequestsPlotlyChart,
+} from './Charts';
+
+type CallsChartsProps = {
+  entity: string;
+  project: string;
+  filterModelProp: GridFilterModel;
+  filter: WFHighLevelCallFilter;
+};
+
+const Chart = ({
+  isLoading,
+  chartData,
+  title,
+}: {
+  isLoading: boolean;
+  chartData: any;
+  title: string;
+}) => {
+  const CHART_CONTAINER_STYLES =
+    'flex-1 rounded-lg border border-moon-250 bg-white p-10';
+  const CHART_TITLE_STYLES = 'ml-12 mt-8 text-base font-semibold text-moon-750';
+  const CHART_HEIGHT = 250;
+  const LOADING_CONTAINER_STYLES = `flex h-[${CHART_HEIGHT}px] items-center justify-center`;
+
+  let chart = null;
+  if (isLoading) {
+    chart = (
+      <div className={LOADING_CONTAINER_STYLES}>
+        <WaveLoader size="small" />
+      </div>
+    );
+  } else if (chartData.length > 0) {
+    switch (title) {
+      case 'Latency':
+        chart = (
+          <LatencyPlotlyChart chartData={chartData} height={CHART_HEIGHT} />
+        );
+        break;
+      case 'Errors':
+        chart = (
+          <ErrorPlotlyChart chartData={chartData} height={CHART_HEIGHT} />
+        );
+        break;
+      case 'Requests':
+        chart = (
+          <RequestsPlotlyChart chartData={chartData} height={CHART_HEIGHT} />
+        );
+        break;
+    }
+  } else {
+    chart = (
+      <div className={LOADING_CONTAINER_STYLES}>
+        <div className="flex flex-col items-center justify-center">
+          <IconInfo color={MOON_400} />
+          <div className="text-moon-500">
+            No data available for the selected time frame
+          </div>
+        </div>
+      </div>
+    );
+  }
+  return (
+    <div className={CHART_CONTAINER_STYLES}>
+      <div className={CHART_TITLE_STYLES}>{title}</div>
+      {chart}
+    </div>
+  );
+};
+
+export const CallsCharts = ({
+  entity,
+  project,
+  filter,
+  filterModelProp,
+}: CallsChartsProps) => {
+  const columns = useMemo(
+    () => ['started_at', 'ended_at', 'exception', 'id'],
+    []
+  );
+  const columnSet = useMemo(() => new Set(columns), [columns]);
+  const sortCalls: GridSortModel = useMemo(
+    () => [{field: 'started_at', sort: 'desc'}],
+    []
+  );
+  const page = useMemo(
+    () => ({
+      pageSize: 1000,
+      page: 0,
+    }),
+    []
+  );
+
+  const calls = useCallsForQuery(
+    entity,
+    project,
+    filter,
+    filterModelProp,
+    page,
+    sortCalls,
+    columnSet,
+    columns
+  );
+
+  const chartData = useMemo(() => {
+    if (calls.loading || !calls.result || calls.result.length === 0) {
+      return {latency: [], errors: [], requests: []};
+    }
+
+    const data: {
+      latency: Array<{started_at: string; latency: number}>;
+      errors: Array<{started_at: string; isError: boolean}>;
+      requests: Array<{started_at: string}>;
+    } = {
+      latency: [],
+      errors: [],
+      requests: [],
+    };
+
+    calls.result.forEach(call => {
+      const started_at = call.traceCall?.started_at;
+      if (!started_at) {
+        return;
+      }
+      const ended_at = call.traceCall?.ended_at;
+
+      const isError =
+        call.traceCall?.exception !== null &&
+        call.traceCall?.exception !== undefined &&
+        call.traceCall?.exception !== '';
+
+      data.requests.push({started_at});
+
+      if (isError) {
+        data.errors.push({started_at, isError});
+      } else {
+        data.errors.push({started_at, isError: false});
+      }
+
+      if (ended_at !== undefined) {
+        const startTime = new Date(started_at).getTime();
+        const endTime = new Date(ended_at).getTime();
+        const latency = endTime - startTime;
+        data.latency.push({started_at, latency});
+      }
+    });
+    return data;
+  }, [calls.result, calls.loading]);
+
+  const charts = (
+    <div className="m-10 flex flex-row gap-10">
+      <Chart
+        isLoading={calls.loading}
+        chartData={chartData.latency}
+        title="Latency"
+      />
+      <Chart
+        isLoading={calls.loading}
+        chartData={chartData.errors}
+        title="Errors"
+      />
+      <Chart
+        isLoading={calls.loading}
+        chartData={chartData.requests}
+        title="Requests"
+      />
+    </div>
+  );
+
+  return (
+    <Tailwind>
+      {/* setting the width to the width of the screen minus the sidebar width because of overflow: 'hidden' properties in SimplePageLayout causing issues */}
+      <div className="md:w-[calc(100vw-56px)]">
+        <div className="mb-20 mt-10">{charts}</div>
+      </div>
+    </Tailwind>
+  );
+};

weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CallsPage/CallsTable.tsx

@@ -26,6 +26,7 @@ import {
   useGridApiRef,
 } from '@mui/x-data-grid-pro';
 import {MOON_200, TEAL_300} from '@wandb/weave/common/css/color.styles';
+import {Switch} from '@wandb/weave/components';
 import {Checkbox} from '@wandb/weave/components/Checkbox/Checkbox';
 import {Icon} from '@wandb/weave/components/Icon';
 import React, {
@@ -69,6 +70,7 @@ import {traceCallToUICallSchema} from '../wfReactInterface/tsDataModelHooks';
 import {EXPANDED_REF_REF_KEY} from '../wfReactInterface/tsDataModelHooksCallRefExpansion';
 import {objectVersionNiceString} from '../wfReactInterface/utilities';
 import {CallSchema} from '../wfReactInterface/wfDataModelHooksInterface';
+import {CallsCharts} from './CallsCharts';
 import {CallsCustomColumnMenu} from './CallsCustomColumnMenu';
 import {
   BulkDeleteButton,
@@ -168,6 +170,7 @@ export const CallsTable: FC<{
   allowedColumnPatterns,
 }) => {
   const {loading: loadingUserInfo, userInfo} = useViewerInfo();
+  const [isMetricsChecked, setMetricsChecked] = useState(false);
 
   const isReadonly =
     loadingUserInfo || !userInfo?.username || !userInfo?.teams.includes(entity);
@@ -245,8 +248,8 @@ export const CallsTable: FC<{
     project,
     effectiveFilter,
     filterModelResolved,
-    sortModelResolved,
     paginationModelResolved,
+    sortModelResolved,
     expandedRefCols
   );
 
@@ -742,6 +745,15 @@ export const CallsTable: FC<{
               clearSelectedCalls={clearSelectedCalls}
             />
           )}
+          <div className="flex items-center gap-6">
+            <Switch.Root
+              size="small"
+              checked={isMetricsChecked}
+              onCheckedChange={setMetricsChecked}>
+              <Switch.Thumb size="small" checked={isMetricsChecked} />
+            </Switch.Root>
+            Metrics
+          </div>
           {selectedInputObjectVersion && (
             <Chip
               label={`Input: ${objectVersionNiceString(
@@ -849,6 +861,14 @@ export const CallsTable: FC<{
           )}
         </TailwindContents>
       }>
+      {isMetricsChecked && (
+        <CallsCharts
+          entity={entity}
+          project={project}
+          filter={filter}
+          filterModelProp={filterModelResolved}
+        />
+      )}
       <StyledDataGrid
         // Start Column Menu
         // ColumnMenu is needed to support pinning and column visibility