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,145 @@
+import {GridFilterModel, GridSortModel} from '@mui/x-data-grid-pro';
+import React, {useEffect, useMemo, useRef, useState} from 'react';
+
+import {
+  IconChevronDown,
+  IconChevronNext,
+  IconLightbulbInfo,
+} from '../../../../../Icon';
+import {Tailwind} from '../../../../../Tailwind';
+import {WFHighLevelCallFilter} from './callsTableFilter';
+import {useCallsForQueryCharts} from './callsTableQuery';
+import {
+  ErrorPlotlyChart,
+  LatencyPlotlyChart,
+  RequestsPlotlyChart,
+} from './Charts';
+import {Box} from '@mui/material';
+import {fancyPageSidebarWidth} from '../../../../../../common/css/globals_deprecated.styles';
+
+type CallsChartsProps = {
+  entity: string;
+  project: string;
+  filterModelProp: GridFilterModel;
+  filter: WFHighLevelCallFilter;
+};
+
+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 calls = useCallsForQueryCharts(
+    entity,
+    project,
+    filter,
+    filterModelProp,
+    0,
+    1000,
+    columns,
+    columnSet,
+    sortCalls
+  );
+  const [isInsightsOpen, setIsInsightsOpen] = useState(false);
+
+  const toggleInsights = () => {
+    setIsInsightsOpen(!isInsightsOpen);
+  };
+
+  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 chartWrapper = 'flex-1 rounded-lg border border-moon-250 bg-white p-10';
+
+  const charts = (
+    <div className="m-10 flex flex-row gap-10">
+      <div className={chartWrapper}>
+        <LatencyPlotlyChart chartData={chartData.latency} height={300} />
+      </div>
+      <div className={chartWrapper}>
+        <ErrorPlotlyChart chartData={chartData.errors} height={300} />
+      </div>
+      <div className={chartWrapper}>
+        <RequestsPlotlyChart chartData={chartData.requests} height={300} />
+      </div>
+    </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="m-10">
+          <div className="w-full rounded-lg border border-moon-250 bg-moon-50 p-10">
+            <div
+              className="flex cursor-pointer items-center gap-2"
+              onClick={toggleInsights}>
+              {isInsightsOpen ? <IconChevronDown /> : <IconChevronNext />}
+              <IconLightbulbInfo
+                width={18}
+                height={18}
+                className="text-teal-500"
+              />
+              <div className="font-source-sans-pro mt-[1px] text-[18px] font-semibold text-moon-500">
+                Insights
+              </div>
+            </div>
+            {isInsightsOpen && charts}
+          </div>
+        </div>
+      </div>
+    </Tailwind>
+  );
+};

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

@@ -69,6 +69,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,
@@ -849,6 +850,12 @@ export const CallsTable: FC<{
           )}
         </TailwindContents>
       }>
+      <CallsCharts
+        entity={entity}
+        project={project}
+        filter={filter}
+        filterModelProp={filterModelResolved}
+      />
       <StyledDataGrid
         // Start Column Menu
         // ColumnMenu is needed to support pinning and column visibility