Dtype plot behaviour

assets/js/app.js

@@ -43,6 +43,7 @@ Hooks.EChartsChart = {
     this._arrayLen = null; // non-null for heatmap plots; drives yAxis.max updates
     this._visualMapMin = null; // running min/max for heatmap color scale
     this._visualMapMax = null;
+    this._xAxisCount = 1; // >1 for multi-grid charts (struct subplots)
 
     this._flushInterval = setInterval(() => this._flushBuffer(), 1000);
 
@@ -56,6 +57,7 @@ Hooks.EChartsChart = {
       this._seriesData = {};
       this._visualMapMin = null;
       this._visualMapMax = null;
+      this._xAxisCount = Array.isArray(echartsOption.xAxis) ? echartsOption.xAxis.length : 1;
       (echartsOption.series || []).forEach((s, i) => {
         this._seriesData[i] = s.data || [];
       });
@@ -68,7 +70,13 @@ Hooks.EChartsChart = {
         }
         if (this._visualMapMin !== null) {
           const vMax = this._visualMapMax === this._visualMapMin ? this._visualMapMax + 1 : this._visualMapMax;
-          echartsOption.visualMap = { ...echartsOption.visualMap, min: this._visualMapMin, max: vMax };
+          if (Array.isArray(echartsOption.visualMap)) {
+            echartsOption.visualMap = echartsOption.visualMap.map((vm, i) =>
+              i === 0 ? { ...vm, min: this._visualMapMin, max: vMax } : vm
+            );
+          } else {
+            echartsOption.visualMap = { ...echartsOption.visualMap, min: this._visualMapMin, max: vMax };
+          }
         }
       }
 
@@ -84,6 +92,13 @@ Hooks.EChartsChart = {
       this._chart && this._chart.setOption(echartsOption, { notMerge: true });
     });
 
+    this.handleEvent(`prepend-chart-data-${this.el.id}`, ({ seriesUpdates }) => {
+      (seriesUpdates || []).forEach(({ seriesIndex, data }) => {
+        if (!this._seriesData[seriesIndex]) this._seriesData[seriesIndex] = [];
+        this._seriesData[seriesIndex] = [...data, ...this._seriesData[seriesIndex]];
+      });
+    });
+
     this.handleEvent(`extend-chart-${this.el.id}`, ({ seriesUpdates, arrayLen }) => {
       (seriesUpdates || []).forEach(({ seriesIndex, data }) => {
         if (!this._seriesData[seriesIndex]) this._seriesData[seriesIndex] = [];
@@ -173,6 +188,7 @@ Hooks.EChartsChart = {
         "btn btn-xs " +
         (index === this._activeButton ? "btn-primary" : "btn-neutral");
       el.addEventListener("click", () => {
+        const prevBtn = this._activeButton != null ? this._rangeButtons[this._activeButton] : null;
         this._activeButton = index;
         buttonsEl
           .querySelectorAll("button")
@@ -186,12 +202,32 @@ Hooks.EChartsChart = {
           );
 
         const now = Date.now();
-        const { xMin, xMax } = this._computeRange(btn, now);
-        if (xMin !== null) {
-          this._chart.setOption({ xAxis: { min: xMin, max: xMax } });
+        const { xMin: newXMin, xMax: newXMax } = this._computeRange(btn, now);
+        const prevXMin = prevBtn ? this._computeRange(prevBtn, now).xMin : null;
+
+        // Expanding = window is getting larger (xMin moves earlier, or going to "all")
+        const isExpanding = prevXMin !== null && (newXMin === null || newXMin < prevXMin);
+
+        if (isExpanding) {
+          const earliestTs = this._seriesData[0]?.[0]?.[0] ?? null;
+          if (earliestTs !== null && (newXMin === null || newXMin < earliestTs)) {
+            this.pushEventTo(this.el, "fetch-chart-range", { from: newXMin, to: earliestTs });
+          }
+        } else if (!isExpanding && newXMin !== null) {
+          // Shrinking: eagerly drop points that scrolled out
+          Object.keys(this._seriesData).forEach((idx) => {
+            const d = this._seriesData[idx];
+            if (d.length > 0 && d[0][0] < newXMin) {
+              const cutoff = d.findIndex(p => p[0] >= newXMin);
+              this._seriesData[idx] = cutoff === -1 ? [] : d.slice(cutoff);
+            }
+          });
+        }
+
+        if (newXMin !== null) {
+          this._chart.setOption({ xAxis: this._xAxisPatch({ min: newXMin, max: newXMax }) });
         } else {
-          // "all" — remove explicit range constraints
-          this._chart.setOption({ xAxis: { min: null, max: null } });
+          this._chart.setOption({ xAxis: this._xAxisPatch({ min: null, max: null }) });
         }
       });
       buttonsEl.appendChild(el);
@@ -205,6 +241,11 @@ Hooks.EChartsChart = {
     return { xMin: now - windowMs, xMax: now };
   },
 
+  _xAxisPatch(update) {
+    if (this._xAxisCount <= 1) return update;
+    return Array.from({ length: this._xAxisCount }, () => update);
+  },
+
   _flushBuffer() {
     if (!this._chart || !this._rangeButtons) return;
 
@@ -216,12 +257,29 @@ Hooks.EChartsChart = {
     const now = Date.now();
 
 
-    Object.keys(this._seriesData).forEach((idx) => {
-      const d = this._seriesData[idx];
-      if (d.length > maxPoints) {
-        this._seriesData[idx] = d.slice(d.length - maxPoints);
+    if (this._activeButton != null) {
+      const btn = this._rangeButtons[this._activeButton];
+      const { xMin } = this._computeRange(btn, now);
+      if (xMin !== null) {
+        Object.keys(this._seriesData).forEach((idx) => {
+          const d = this._seriesData[idx];
+          if (d.length > 0 && d[0][0] < xMin) {
+            const cutoff = d.findIndex(p => p[0] >= xMin);
+            this._seriesData[idx] = cutoff === -1 ? [] : d.slice(cutoff);
+          }
+        });
+      } else {
+        Object.keys(this._seriesData).forEach((idx) => {
+          const d = this._seriesData[idx];
+          if (d.length > maxPoints) this._seriesData[idx] = d.slice(d.length - maxPoints);
+        });
       }
-    });
+    } else {
+      Object.keys(this._seriesData).forEach((idx) => {
+        const d = this._seriesData[idx];
+        if (d.length > maxPoints) this._seriesData[idx] = d.slice(d.length - maxPoints);
+      });
+    }
 
     const updatedSeries = Object.keys(this._seriesData).map((idx) => ({
       data: this._seriesData[idx],
@@ -233,7 +291,7 @@ Hooks.EChartsChart = {
     if (this._rangeButtons && this._activeButton != null) {
       const btn = this._rangeButtons[this._activeButton];
       const { xMin, xMax } = this._computeRange(btn, now);
-      if (xMin !== null) patch.xAxis = { min: xMin, max: xMax };
+      if (xMin !== null) patch.xAxis = this._xAxisPatch({ min: xMin, max: xMax });
     }
 
     if (this._arrayLen != null) {

benchmark.exs

@@ -1,28 +1,21 @@
 alias SecantService.PlotDB
-alias SecantService.Sec_Nodes
-alias Ecto.UUID
+alias SecantService.SecNodes.SecNode
+require Ash.Query
 
-abstract_modules =
-  Sec_Nodes.get_sec_node_by_uuid(UUID.dump!("aa134b51-c8ae-4b5a-93d0-49e4356d4d7c"))
-  |> Map.get(:modules)
+sec_node =
+  SecNode
+  |> Ash.Query.filter(uuid == ^"01c166b8-33bf-4ef6-9ff7-81faa6836354")
+  |> Ash.read_first!()
 
-gas_dosing_modules =
-  Sec_Nodes.get_sec_node_by_uuid(UUID.dump!("62245730-72b4-4fd5-8929-8a8c69e3f48e"))
-  |> Map.get(:modules)
-
-gas_op_mode = Enum.find(abstract_modules, fn m -> m.name == "gas_operation_mode" end)
-mfc_group1 = Enum.find(abstract_modules, fn m -> m.name == "MFC_group_1" end)
-mfc1 = Enum.find(gas_dosing_modules, fn m -> m.name == "massflow_contr1" end)
+mass_spec = Enum.find(sec_node.modules, fn m -> m.name == "mass_spec" end)
 
 Benchee.run(%{
-  "gas_op_mode" => fn -> PlotDB.drivable_plot(gas_op_mode) end,
-  "mfc_group1" => fn -> PlotDB.drivable_plot(mfc_group1) end,
-  "mfc1" => fn -> PlotDB.drivable_plot(mfc1) end
+  "mass_spec" => fn -> PlotDB.module_plot(mass_spec) end
 })
 
 :eprof.start_profiling([self()])
 
-PlotDB.drivable_plot(gas_op_mode)
+PlotDB.module_plot(mass_spec)
 
 :eprof.stop_profiling()
 :eprof.analyze()

lib/secant_service/plot_db.ex

@@ -1,6 +1,11 @@
 defmodule SecantService.PlotDB do
   alias SecantService.Util
   alias SecantService.PlotDB.Builders
+  alias SecantService.PlotDB.DTypePlot
+  alias SecantService.PlotDB.DTypes.ArrayHeatmap
+  alias SecantService.PlotDB.DTypes.Enum, as: EnumDType
+  alias SecantService.PlotDB.DTypes.Scalar
+  alias SecantService.PlotDB.DTypes.Struct, as: StructDType
 
   alias SecantService.SecNodes.ParameterValue
   alias SecantService.SecNodes.Parameter
@@ -96,8 +101,8 @@ defmodule SecantService.PlotDB do
             not_plottable()
           else
             option =
-              Builders.heatmap_option(
-                [Builders.heatmap_series(ts, val)],
+              ArrayHeatmap.heatmap_option(
+                [ArrayHeatmap.heatmap_series(ts, val)],
                 array_len,
                 unit,
                 mode
@@ -113,13 +118,24 @@ defmodule SecantService.PlotDB do
 
         "enum" ->
           members = parameter.datainfo["members"]
-          series = [Builders.enum_series("value", ts, val, members)]
-          option = Builders.enum_timeseries_option(series, members, "value", mode)
+          series = [EnumDType.enum_series("value", ts, val, members)]
+          option = EnumDType.enum_timeseries_option(series, members, "value", mode)
           %{plottable: true, plot_available: length(val) > 1, option: option}
 
+        "struct" ->
+          option = StructDType.build_struct_option("value", ts, val, parameter.datainfo, mode)
+          dtype_mod = DTypePlot.for_datainfo(parameter.datainfo)
+
+          %{
+            plottable: true,
+            plot_available: length(val) > 1,
+            option: option,
+            _param_dtype_modules: %{"value" => dtype_mod}
+          }
+
         _ ->
-          series = [Builders.scalar_line_series("value", ts, val)]
-          option = Builders.timeseries_option(series, unit, mode)
+          series = [Scalar.scalar_line_series("value", ts, val)]
+          option = Scalar.timeseries_option(series, unit, mode)
           %{plottable: true, plot_available: length(val) > 1, option: option}
       end
     else
@@ -154,6 +170,9 @@ defmodule SecantService.PlotDB do
           {:error, _} -> true
         end
 
+      %{"type" => "struct"} = datainfo ->
+        StructDType.supported_type?(datainfo)
+
       _ ->
         false
     end
@@ -172,21 +191,35 @@ defmodule SecantService.PlotDB do
   # Live update formatting
   # ---------------------------------------------------------------------------
 
+  # Module plots (from PlotSpec implementations) carry _plot_spec_module for clean dispatch.
+  def get_trace_updates_batch(%{_plot_spec_module: mod} = plot_map, datapoints, parameter) do
+    mod.trace_updates(plot_map, datapoints, parameter)
+  end
+
+  # Parameter plots and any legacy plot_maps fall back to the original inline dispatch.
   def get_trace_updates_batch(%{plot_type: :array_heatmap} = _plot_map, datapoints, _parameter) do
     data =
       Enum.flat_map(datapoints, fn {arr, ts} ->
         arr |> Enum.with_index() |> Enum.map(fn {v, i} -> [ts, i, v] end)
       end)
 
-    array_len =
-      case List.first(datapoints) do
-        {arr, _ts} -> length(arr)
-        _ -> 0
-      end
+    array_len = ArrayHeatmap.array_len_from_datapoints(datapoints)
 
     %{seriesUpdates: [%{seriesIndex: 0, data: data}], arrayLen: array_len}
   end
 
+  def get_trace_updates_batch(%{_param_dtype_modules: mods, option: opt} = _plot_map, datapoints, parameter) do
+    dtype_mod = Map.get(mods, parameter)
+    series_upds = dtype_mod.series_updates(opt, datapoints, parameter)
+    result = %{seriesUpdates: series_upds}
+
+    if dtype_mod == ArrayHeatmap do
+      Map.put(result, :arrayLen, ArrayHeatmap.array_len_from_datapoints(datapoints))
+    else
+      result
+    end
+  end
+
   def get_trace_updates_batch(plot_map, datapoints, parameter) do
     series_index =
       Enum.find_index(plot_map.option.series, fn s -> s.name == parameter end) || 0
@@ -199,13 +232,16 @@ defmodule SecantService.PlotDB do
           Enum.zip(timestamps, values) |> Enum.map(&Tuple.to_list/1)
 
         int_to_info ->
-          y_val = case Map.get(plot_map.option, :_enumSeriesY) do
-            nil -> 0
-            series_y -> Map.get(series_y, parameter, 0)
-          end
+          y_val =
+            case Map.get(plot_map.option, :_enumSeriesY) do
+              nil -> 0
+              series_y -> Map.get(series_y, parameter, 0)
+            end
 
           Enum.zip_with(timestamps, values, fn ts, v ->
-            %{name: name, color: color} = Map.get(int_to_info, to_string(v), %{name: to_string(v), color: "#888888"})
+            %{name: name, color: color} =
+              Map.get(int_to_info, to_string(v), %{name: to_string(v), color: "#888888"})
+
             %{value: [ts, y_val], name: "#{name} (#{v})", itemStyle: %{color: color}}
           end)
       end

lib/secant_service/plot_db/acquisition.ex

@@ -6,4 +6,7 @@ defmodule SecantService.PlotDB.Acquisition do
 
   @impl true
   defdelegate param_names(), to: SecantService.PlotDB.Readable
+
+  @impl true
+  defdelegate trace_updates(plot_map, datapoints, param_name), to: SecantService.PlotDB.Readable
 end