Diagnostics chart cleanup (#1045)

* Remove the Y axis label since it's prepresented in the tick labels

* Remove the interpretation section (it's for the LLM) and use its styling for a toggleable analysis section instead

src/ui/shared/diagnostics/resource.tsx

@@ -1,5 +1,6 @@
 import type { Resource } from "@app/aptible-ai";
 import type React from "react";
+import { useState } from "react";
 import {
   IconBox,
   IconCloud,
@@ -30,6 +31,43 @@ const ResourceIcon = ({ type }: { type: Resource["type"] }) => {
   }
 };
 
+const AnalysisSection = ({ analysis }: { analysis: string }) => {
+  const [showAnalysis, setShowAnalysis] = useState(false);
+  const toggleAnalysis = () => setShowAnalysis((show) => !show);
+  const getAnalysisText = (analysis: string) => {
+    if (!showAnalysis) return `${analysis.slice(0, 75).trim()} [...]`;
+    return analysis;
+  };
+  const analysisText = getAnalysisText(analysis);
+
+  if (!analysis) return null;
+
+  return (
+    <div
+      className="mt-4 bg-orange-100 p-3 rounded-md cursor-pointer"
+      onClick={toggleAnalysis}
+      onKeyDown={(e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          toggleAnalysis();
+        }
+      }}
+      role="button"
+      tabIndex={0}
+    >
+      <div className="flex items-start gap-2">
+        <IconInfo className="w-4 h-4 mt-1 text-yellow-600 flex-shrink-0" />
+        <div>
+          <p className="text-gray-600">
+            <strong className="mr-1">Analysis:</strong>
+            {analysisText}
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
 export const DiagnosticsResource = ({
   resourceId,
   resource,
@@ -88,20 +126,7 @@ export const DiagnosticsResource = ({
                   <h4 className="font-medium text-gray-900 p-3 rounded-t-lg border-b">
                     {plot.title}
                   </h4>
-                  <div className="p-6">
-                    {plot.interpretation && (
-                      <div className="mt-4 bg-orange-100 p-3 rounded-md">
-                        <div className="flex items-start gap-2">
-                          <IconInfo className="w-4 h-4 mt-1 text-yellow-600 flex-shrink-0" />
-                          <div>
-                            <p className="text-gray-600">
-                              <strong className="mr-1">Interpretation:</strong>
-                              {plot.interpretation}
-                            </p>
-                          </div>
-                        </div>
-                      </div>
-                    )}
+                  <div className="pb-6 px-6">
                     <div className="mt-2 min-h-[200px]">
                       <DiagnosticsLineChart
                         showLegend={true}
@@ -118,20 +143,13 @@ export const DiagnosticsResource = ({
                           })),
                         }}
                         xAxisUnit="minute"
-                        yAxisLabel={plot.title}
+                        yAxisLabel={undefined}
                         yAxisUnit={plot.unit}
                         annotations={plot.annotations}
                         synchronizedHoverContext={synchronizedHoverContext}
                       />
                     </div>
-                    {plot.analysis && (
-                      <div className="mt-4">
-                        <p className="mt-1 text-gray-500 text-xs">
-                          <strong>Analysis: </strong>
-                          {plot.analysis}
-                        </p>
-                      </div>
-                    )}
+                    <AnalysisSection analysis={plot.analysis} />
                   </div>
                 </div>
               ))}