feat: switch to uplot for prom charts (#371)

* feat: switch to uplot for prom charts

* clippy clappy

* review

Author: ellie

bun.lock

@@ -1,5 +1,13 @@
 // This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
-import type { PrometheusSeries } from "./PrometheusSeries";
 import type { PrometheusTimeRange } from "./PrometheusTimeRange";
 
-export type PrometheusQueryResult = { series: Array<PrometheusSeries>, queryExecuted: string, timeRange: PrometheusTimeRange, };
+export type PrometheusQueryResult = { 
+/**
+ * Columnar data for uPlot: [timestamps, series1_values, series2_values, ...]
+ * Timestamps are in seconds (Unix epoch)
+ */
+data: Array<Array<number>>, 
+/**
+ * Series names in order (index i corresponds to data[i+1])
+ */
+seriesNames: Array<string>, queryExecuted: string, timeRange: PrometheusTimeRange, };

crates/atuin-desktop-runtime/bindings/PrometheusQueryResult.ts

@@ -17,22 +17,15 @@ pub type PrometheusConnection = (Client, String, PrometheusTimeRange);
 #[serde(rename_all = "camelCase")]
 #[ts(export)]
 pub struct PrometheusQueryResult {
-    series: Vec<PrometheusSeries>,
+    /// Columnar data for uPlot: [timestamps, series1_values, series2_values, ...]
+    /// Timestamps are in seconds (Unix epoch)
+    data: Vec<Vec<f64>>,
+    /// Series names in order (index i corresponds to data[i+1])
+    series_names: Vec<String>,
     query_executed: String,
     time_range: PrometheusTimeRange,
 }
 
-#[derive(Debug, Clone, Serialize, TS)]
-#[serde(rename_all = "camelCase")]
-#[ts(export)]
-pub struct PrometheusSeries {
-    #[serde(rename = "type")]
-    series_type: String,
-    show_symbol: bool,
-    name: String,
-    data: Vec<(f64, f64)>,
-}
-
 #[derive(Debug, Clone, Serialize, TS)]
 #[serde(rename_all = "camelCase")]
 #[ts(export)]
@@ -57,7 +50,7 @@ pub struct PrometheusBlockOutput {
 impl PrometheusBlockOutput {
     /// Create a new PrometheusBlockOutput from query results
     pub fn new(results: Vec<PrometheusQueryResult>) -> Self {
-        let total_series = results.iter().map(|r| r.series.len()).sum();
+        let total_series = results.iter().map(|r| r.series_names.len()).sum();
         Self {
             results,
             total_series,
@@ -82,9 +75,12 @@ impl BlockExecutionOutput for PrometheusBlockOutput {
             "result_count" => Some(minijinja::Value::from(self.results.len())),
 
             // Convenience accessors for first result
-            "series" => self
+            "series_names" => self
+                .first_result()
+                .map(|r| minijinja::Value::from_serialize(&r.series_names)),
+            "data" => self
                 .first_result()
-                .map(|r| minijinja::Value::from_serialize(&r.series)),
+                .map(|r| minijinja::Value::from_serialize(&r.data)),
             "query_executed" => self
                 .first_result()
                 .map(|r| minijinja::Value::from(r.query_executed.clone())),
@@ -102,7 +98,8 @@ impl BlockExecutionOutput for PrometheusBlockOutput {
             "first",
             "total_series",
             "result_count",
-            "series",
+            "series_names",
+            "data",
             "query_executed",
             "time_range",
         ])
@@ -418,14 +415,17 @@ impl QueryBlockBehavior for Prometheus {
             PrometheusBlockError::QueryError("Missing result field in data".to_string())
         })?;
 
-        let mut series = Vec::new();
+        let mut series_names: Vec<String> = Vec::new();
+        let mut all_values: Vec<Vec<f64>> = Vec::new();
+        let mut timestamps: Vec<f64> = Vec::new();
 
         if let Some(result_array) = result.as_array() {
             for series_data in result_array {
                 if let (Some(metric), Some(values)) = (
                     series_data.get("metric"),
                     series_data.get("values").and_then(|v| v.as_array()),
                 ) {
+                    // Build series name from metric labels
                     let series_name = if let Some(metric_obj) = metric.as_object() {
                         if metric_obj.is_empty() {
                             query.to_string()
@@ -440,32 +440,42 @@ impl QueryBlockBehavior for Prometheus {
                         query.to_string()
                     };
 
-                    let mut data_points = Vec::new();
+                    // Extract timestamps (only from first series - all share same timestamps)
+                    // and values for this series
+                    let mut series_values: Vec<f64> = Vec::new();
                     for value_pair in values {
                         if let Some(pair) = value_pair.as_array() {
                             if pair.len() == 2 {
-                                let timestamp = pair[0].as_f64().unwrap_or(0.0) * 1000.0;
+                                // Timestamps in seconds (uPlot native format)
+                                let ts = pair[0].as_f64().unwrap_or(0.0);
                                 let value = pair[1]
                                     .as_str()
                                     .and_then(|s| s.parse::<f64>().ok())
                                     .unwrap_or(0.0);
-                                data_points.push((timestamp, value));
+
+                                // Only collect timestamps from first series
+                                if series_names.is_empty() {
+                                    timestamps.push(ts);
+                                }
+                                series_values.push(value);
                             }
                         }
                     }
 
-                    series.push(PrometheusSeries {
-                        series_type: "line".to_string(),
-                        show_symbol: false,
-                        name: series_name,
-                        data: data_points,
-                    });
+                    series_names.push(series_name);
+                    all_values.push(series_values);
                 }
             }
         }
 
+        // Build columnar data: [timestamps, series1_values, series2_values, ...]
+        let mut data: Vec<Vec<f64>> = Vec::with_capacity(1 + all_values.len());
+        data.push(timestamps);
+        data.extend(all_values);
+
         let result = PrometheusQueryResult {
-            series,
+            data,
+            series_names,
             query_executed: query.to_string(),
             time_range: time_range.clone(),
         };

crates/atuin-desktop-runtime/src/blocks/prometheus.rs

@@ -47,7 +47,6 @@
     "@iconify/icons-lucide": "^1.2.135",
     "@iconify/icons-solar": "^1.2.3",
     "@internationalized/date": "^3.7.0",
-    "@kbox-labs/react-echarts": "^1.4.2",
     "@prometheus-io/codemirror-promql": "^0.53.3",
     "@radix-ui/react-dialog": "^1.1.6",
     "@radix-ui/react-dropdown-menu": "^2.1.6",
@@ -100,7 +99,6 @@
     "cmdk": "^1.0.4",
     "codemirror-lang-hcl": "0.0.0-beta.2",
     "date-fns": "^3.6.0",
-    "echarts": "^5.6.0",
     "emittery": "^1.1.0",
     "flexsearch": "^0.7.43",
     "framer-motion": "^11.18.2",
@@ -141,6 +139,8 @@
     "tailwindcss-animate": "^1.0.7",
     "ts-tiny-activerecord": "git+https://github.com/atuinsh/ts-tiny-activerecord#v0.0.6",
     "undent": "^1.0.0",
+    "uplot": "^1.6.32",
+    "uplot-react": "^1.2.4",
     "use-resize-observer": "^9.1.0",
     "usehooks-ts": "^3.1.1",
     "uuidv7": "^1.0.2",

package.json

@@ -105,8 +105,8 @@ const Prometheus = ({
 }: PromProps) => {
   let editor = useBlockNoteEditor();
   const [value, setValue] = useState<string>(prometheus.query);
-  const [data, setData] = useState<any[]>([]);
-  const [config, _setConfig] = useState<{}>({});
+  const [data, setData] = useState<Array<Array<number>>>([]);
+  const [seriesNames, setSeriesNames] = useState<string[]>([]);
   const [timeFrame, setTimeFrame] = useState<TimeFrame>(
     timeOptions.find((t) => t.short === prometheus.period) || timeOptions[3],
   );
@@ -121,7 +121,8 @@ const Prometheus = ({
     if (output.object) {
       // Backend returns PrometheusQueryResult in the object field
       const result = output.object as PrometheusQueryResult;
-      setData(result.series as any[]);
+      setData(result.data);
+      setSeriesNames(result.seriesNames);
     }
   });
 
@@ -375,9 +376,11 @@ const Prometheus = ({
         ) : execution.isError ? (
           <ErrorCard error={execution.error} />
         ) : isRunning && data.length === 0 ? (
-          <Spinner />
+          <div className="flex items-center justify-center h-full w-full">
+            <Spinner />
+          </div>
         ) : (
-          <PromLineChart data={data} config={config} />
+          <PromLineChart data={data} seriesNames={seriesNames} />
         )}
       </div>
     </Block>