From b4971a3e5cb15564296fb59f6c9bfe74ad18f458 Mon Sep 17 00:00:00 2001
From: elijahbenizzy <elijah_ben_izzy@alumni.brown.edu>
Date: Tue, 27 Aug 2024 15:06:37 -0700
Subject: [PATCH 1/2] Updates all GenAI insights to filter to those created by
 automatic LLM instrumentation

---
 .../components/routes/app/InsightsView.tsx    | 28 +++++++++++++------
 1 file changed, 20 insertions(+), 8 deletions(-)

diff --git a/telemetry/ui/src/components/routes/app/InsightsView.tsx b/telemetry/ui/src/components/routes/app/InsightsView.tsx
index 3319035e..30e0b627 100644
--- a/telemetry/ui/src/components/routes/app/InsightsView.tsx
+++ b/telemetry/ui/src/components/routes/app/InsightsView.tsx
@@ -54,20 +54,24 @@ const REGISTERED_INSIGHTS: Insight[] = [
   {
     category: 'llm',
     hasInsight: (allAttributes) => {
-      return allAttributes.some((attribute) => attribute.key.endsWith('prompt_tokens'));
+      return allAttributes.some(
+        (attribute) => attribute.key.endsWith('prompt_tokens') && attribute.key.startsWith('gen_ai')
+      );
     },
     insightName: 'Total Prompt Tokens',
     RenderInsightValue: (props) => {
       let totalPromptTokens = 0;
       props.attributes.forEach((attribute) => {
-        if (attribute.key.endsWith('prompt_tokens')) {
+        if (attribute.key.endsWith('prompt_tokens') && attribute.key.startsWith('gen_ai')) {
           totalPromptTokens += attribute.value as number;
         }
       });
       return <p>{totalPromptTokens}</p>;
     },
     captureIndividualValues: (allAttributes) => {
-      return allAttributes.filter((attribute) => attribute.key.endsWith('prompt_tokens'));
+      return allAttributes.filter(
+        (attribute) => attribute.key.endsWith('prompt_tokens') && attribute.key.startsWith('gen_ai')
+      );
     },
     RenderIndividualValue: (props: { attribute: AttributeModel }) => {
       return <p>{props.attribute.value?.toString()}</p>;
@@ -76,7 +80,10 @@ const REGISTERED_INSIGHTS: Insight[] = [
   {
     category: 'llm',
     hasInsight: (allAttributes) => {
-      return allAttributes.some((attribute) => attribute.key.endsWith('completion_tokens'));
+      return allAttributes.some(
+        (attribute) =>
+          attribute.key.endsWith('completion_tokens') && attribute.key.startsWith('gen_ai')
+      );
     },
     insightName: 'Total Completion Tokens',
     RenderInsightValue: (props) => {
@@ -89,7 +96,10 @@ const REGISTERED_INSIGHTS: Insight[] = [
       return <p>{totalCompletionTokens}</p>;
     },
     captureIndividualValues: (allAttributes) => {
-      return allAttributes.filter((attribute) => attribute.key.endsWith('completion_tokens'));
+      return allAttributes.filter(
+        (attribute) =>
+          attribute.key.endsWith('completion_tokens') && attribute.key.startsWith('gen_ai')
+      );
     },
     RenderIndividualValue: (props: { attribute: AttributeModel }) => {
       return <p>{props.attribute.value?.toString()}</p>;
@@ -98,13 +108,15 @@ const REGISTERED_INSIGHTS: Insight[] = [
   {
     category: 'llm',
     hasInsight: (allAttributes) => {
-      return allAttributes.some((attribute) => attribute.key.endsWith('prompt_tokens'));
+      return allAttributes.some(
+        (attribute) => attribute.key.endsWith('prompt_tokens') && attribute.key.startsWith('gen_ai')
+      );
     },
     insightName: 'Total LLM Calls',
     RenderInsightValue: (props) => {
       let totalLLMCalls = 0;
       props.attributes.forEach((attribute) => {
-        if (attribute.key.endsWith('prompt_tokens')) {
+        if (attribute.key.endsWith('prompt_tokens') && attribute.key.startsWith('gen_ai')) {
           totalLLMCalls += 1;
         }
       });
@@ -113,7 +125,7 @@ const REGISTERED_INSIGHTS: Insight[] = [
     captureIndividualValues: (allAttributes) => {
       const spanIDToLLMCalls = new Map<string, number>();
       allAttributes.forEach((attribute) => {
-        if (attribute.key.endsWith('prompt_tokens')) {
+        if (attribute.key.endsWith('prompt_tokens') && attribute.key.startsWith('gen_ai')) {
           spanIDToLLMCalls.set(
             attribute.span_id || '',
             (spanIDToLLMCalls.get(attribute.span_id || '') || 0) + 1

From a9b898a7152a2adafb497ff0f5ea0ac501547ff9 Mon Sep 17 00:00:00 2001
From: elijahbenizzy <elijah_ben_izzy@alumni.brown.edu>
Date: Tue, 27 Aug 2024 15:50:49 -0700
Subject: [PATCH 2/2] Clarifies logging instructions for insights tab

---
 .../components/routes/app/InsightsView.tsx    | 25 ++++++++++---------
 .../components/routes/app/ReproduceView.tsx   |  2 +-
 2 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/telemetry/ui/src/components/routes/app/InsightsView.tsx b/telemetry/ui/src/components/routes/app/InsightsView.tsx
index 30e0b627..e69e023c 100644
--- a/telemetry/ui/src/components/routes/app/InsightsView.tsx
+++ b/telemetry/ui/src/components/routes/app/InsightsView.tsx
@@ -252,12 +252,11 @@ const InsightSubTable = (props: {
 
 export const InsightsView = (props: { steps: Step[] }) => {
   const allAttributes: AttributeModel[] = props.steps.flatMap((step) => step.attributes);
-  let noInsights = true;
 
   const allSpans = props.steps.flatMap((step) => step.spans);
 
   const out = (
-    <div className="pt-0">
+    <div className="pt-0 flex flex-col">
       <Table dense={1}>
         <TableHead>
           <TableRow className="hover:bg-gray-100">
@@ -271,7 +270,6 @@ export const InsightsView = (props: { steps: Step[] }) => {
         <TableBody>
           {REGISTERED_INSIGHTS.map((insight) => {
             if (insight.hasInsight(allAttributes)) {
-              noInsights = false;
               return (
                 <InsightSubTable
                   key={insight.insightName}
@@ -285,14 +283,17 @@ export const InsightsView = (props: { steps: Step[] }) => {
           })}
         </TableBody>
       </Table>
-    </div>
-  );
-  if (noInsights) {
-    return (
       <div>
-        <h2 className="text-gray-500 max-w-xl">
-          Use this tab to view summaries of your application -- E.G. LLM call data. To instrument,
-          and start collecting, see{' '}
+        <h2 className="text-gray-500 pl-2 pt-4">
+          Use this tab to view summaries of your application. This automatically picks up on a
+          variety of attributes, including those populated by{' '}
+          <a
+            className="text-dwlightblue"
+            href={'https://www.traceloop.com/docs/openllmetry/tracing/without-sdk'}
+          >
+            opentelemetry instrumentation.
+          </a>{' '}
+          -- E.G. LLM call data. To instrument, and start collecting, see{' '}
           <a
             className="text-dwlightblue"
             href={'https://burr.dagworks.io/concepts/additional-visibility/#quickstart'}
@@ -301,7 +302,7 @@ export const InsightsView = (props: { steps: Step[] }) => {
           </a>
         </h2>
       </div>
-    );
-  }
+    </div>
+  );
   return out;
 };
diff --git a/telemetry/ui/src/components/routes/app/ReproduceView.tsx b/telemetry/ui/src/components/routes/app/ReproduceView.tsx
index b5e76deb..0ea6bd26 100644
--- a/telemetry/ui/src/components/routes/app/ReproduceView.tsx
+++ b/telemetry/ui/src/components/routes/app/ReproduceView.tsx
@@ -48,7 +48,7 @@ export const ReproduceView = (props: {
           onClose={() => setIsFlashVisible(false)}
         />
       )}
-      <div className="flex flex-row justify-between">
+      <div className="flex flex-row justify-between text-gray-700">
         <p>
           To generate a test case for this step, run the following command.
           <a