[Feature] Timeseries Pathway view (#319)

**Warning depends on Timeseries feature to be merged** Implements a way to display OECD 301F data on the pathway view. This is mostly a PoC and needs to be improved once the pathway rendering is updated. ![image.png](/attachments/053965d7-78f7-487a-b5d0-898612708fa3) Co-authored-by: jebus <lorsbach@envipath.com> Co-authored-by: Tim Lorsbach <tim@lorsba.ch> Reviewed-on: enviPath/enviPy#319 Co-authored-by: Tobias O <tobias.olenyi@envipath.com> Co-committed-by: Tobias O <tobias.olenyi@envipath.com>
2026-02-04 05:19:25 +13:00
parent dc18b73e08
commit 5da8dbc191
5 changed files with 170 additions and 30 deletions
--- a/epdb/models.py
+++ b/epdb/models.py
@ -2189,6 +2189,7 @@ class Node(EnviPathModel, AliasMixin, ScenarioMixin):
                "uncovered_functional_groups": False,
            },
            "is_engineered_intermediate": self.kv.get("is_engineered_intermediate", False),
+            "timeseries": self.get_timeseries_data(),
        }

    @staticmethod
@ -2226,6 +2227,13 @@ class Node(EnviPathModel, AliasMixin, ScenarioMixin):
    def as_svg(self):
        return IndigoUtils.mol_to_svg(self.default_node_label.smiles)

+    def get_timeseries_data(self):
+        for scenario in self.scenarios.all():
+            for ai in scenario.get_additional_information():
+                if ai.__class__.__name__ == "OECD301FTimeSeries":
+                    return ai.model_dump(mode="json")
+        return None
+
    def get_app_domain_assessment_data(self):
        data = self.kv.get("app_domain_assessment", None)

--- a/pyproject.toml
+++ b/pyproject.toml
@ -36,7 +36,7 @@ dependencies = [
 [tool.uv.sources]
 enviformer = { git = "ssh://git@git.envipath.com/enviPath/enviformer.git", rev = "v0.1.4" }
 envipy-plugins = { git = "ssh://git@git.envipath.com/enviPath/enviPy-plugins.git", rev = "v0.1.0" }
-envipy-additional-information = { git = "ssh://git@git.envipath.com/enviPath/enviPy-additional-information.git", rev = "v0.2.0" }
+envipy-additional-information = { git = "ssh://git@git.envipath.com/enviPath/enviPy-additional-information.git", rev = "v0.4.0" }
 envipy-ambit = { git = "ssh://git@git.envipath.com/enviPath/enviPy-ambit.git" }

 [project.optional-dependencies]
--- a/static/js/pw.js
+++ b/static/js/pw.js
@ -361,6 +361,83 @@ function draw(pathway, elem) {

    function node_popup(n) {
        popupContent = "";
+
+        if (timeseriesViewEnabled && n.timeseries && n.timeseries.measurements) {
+            for (var s of n.scenarios) {
+                popupContent += "<a href='" + s.url + "'>" + s.name + "</a><br>";
+            }
+
+            popupContent += '<div style="width:100%;height:120px"><canvas id="ts-popover-canvas"></canvas></div>';
+            const tsMeasurements = n.timeseries.measurements;
+            setTimeout(() => {
+                const canvas = document.getElementById('ts-popover-canvas');
+                if (canvas && window.Chart) {
+                    const valid = tsMeasurements
+                        .filter(m => m.timestamp != null && m.value != null)
+                        .map(m => ({ ...m, timestamp: typeof m.timestamp === 'number' ? m.timestamp : new Date(m.timestamp).getTime() }))
+                        .sort((a, b) => a.timestamp - b.timestamp);
+
+                    const datasets = [];
+
+                    // Error band (lower + upper with fill between)
+                    const withErrors = valid.filter(m => m.error != null && m.error > 0);
+                    if (withErrors.length > 0) {
+                        datasets.push({
+                            data: withErrors.map(m => ({ x: m.timestamp, y: m.value - m.error })),
+                            borderColor: 'rgba(59,130,246,0.3)',
+                            backgroundColor: 'rgba(59,130,246,0.15)',
+                            pointRadius: 0,
+                            fill: false,
+                            tension: 0.1,
+                        });
+                        datasets.push({
+                            data: withErrors.map(m => ({ x: m.timestamp, y: m.value + m.error })),
+                            borderColor: 'rgba(59,130,246,0.3)',
+                            backgroundColor: 'rgba(59,130,246,0.15)',
+                            pointRadius: 0,
+                            fill: '-1',
+                            tension: 0.1,
+                        });
+                    }
+
+                    // Main value line
+                    datasets.push({
+                        data: valid.map(m => ({ x: m.timestamp, y: m.value })),
+                        borderColor: 'rgb(59,130,246)',
+                        pointRadius: 0,
+                        tension: 0.1,
+                        fill: false,
+                    });
+
+                    new Chart(canvas.getContext('2d'), {
+                        type: 'line',
+                        data: { datasets },
+                        options: {
+                            responsive: true,
+                            maintainAspectRatio: false,
+                            plugins: {
+                                legend: { display: false },
+                                tooltip: { enabled: false },
+                            },
+                            scales: {
+                                x: {
+                                    type: 'linear',
+                                    ticks: { font: { size: 10 } },
+                                    title: { display: false },
+                                },
+                                y: {
+                                    ticks: { font: { size: 10 } },
+                                    title: { display: false },
+                                },
+                            },
+                        },
+                    });
+                }
+            }, 0);
+
+            return popupContent;
+        }
+
        if (n.stereo_removed) {
            popupContent += "<span class='alert alert-warning alert-soft'>Removed stereochemistry for prediction</span>";
        }
--- a/templates/objects/pathway.html
+++ b/templates/objects/pathway.html
@ -61,6 +61,11 @@
      stroke-opacity: 0.6;
    }

+    .has_timeseries {
+      stroke: #3b82f6;
+      stroke-width: 3px;
+    }
+
    .highlighted {
      stroke: red;
      stroke-width: 3px;
@ -134,30 +139,30 @@
                  {% include "actions/objects/pathway.html" %}
                </ul>
              </div>
-              {% if pathway.setting.model.app_domain %}
-                <div class="dropdown">
-                  <div tabindex="0" role="button" class="btn btn-ghost btn-sm">
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      width="16"
-                      height="16"
-                      viewBox="0 0 24 24"
-                      fill="none"
-                      stroke="currentColor"
-                      stroke-width="2"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      class="lucide lucide-eye"
-                    >
-                      <path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z" />
-                      <circle cx="12" cy="12" r="3" />
-                    </svg>
-                    View
-                  </div>
-                  <ul
-                    tabindex="0"
-                    class="dropdown-content menu bg-base-100 rounded-box z-50 w-52 p-2"
+              <div class="dropdown">
+                <div tabindex="0" role="button" class="btn btn-ghost btn-sm">
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="16"
+                    height="16"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    class="lucide lucide-eye"
                  >
+                    <path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z" />
+                    <circle cx="12" cy="12" r="3" />
+                  </svg>
+                  View
+                </div>
+                <ul
+                  tabindex="0"
+                  class="dropdown-content menu bg-base-100 rounded-box z-50 w-52 p-2"
+                >
+                  {% if pathway.setting.model.app_domain %}
                    <li>
                      <a id="app-domain-toggle-button" class="cursor-pointer">
                        <svg
@ -181,9 +186,28 @@
                        App Domain View
                      </a>
                    </li>
-                  </ul>
-                </div>
-              {% endif %}
+                  {% endif %}
+                  <li>
+                    <a id="timeseries-toggle-button" class="cursor-pointer">
+                      <svg
+                        id="timeseries-icon"
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="16"
+                        height="16"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="2"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                      >
+                        <polyline points="22 12 18 12 15 21 9 3 6 12 2 12" />
+                      </svg>
+                      OECD 301F View
+                    </a>
+                  </li>
+                </ul>
+              </div>
            </div>
            <div class="flex-none gap-2">
              <button
@ -415,6 +439,8 @@
  <script>
    // Global switch for app domain view
    var appDomainViewEnabled = false;
+    // Global switch for timeseries view
+    var timeseriesViewEnabled = false;

    function goFullscreen(id) {
      var element = document.getElementById(id);
@ -508,6 +534,35 @@
        });
      }

+      // Timeseries toggle
+      const timeseriesBtn = document.getElementById("timeseries-toggle-button");
+      if (timeseriesBtn) {
+        timeseriesBtn.addEventListener("click", function () {
+          timeseriesViewEnabled = !timeseriesViewEnabled;
+          const icon = document.getElementById("timeseries-icon");
+
+          if (timeseriesViewEnabled) {
+            icon.innerHTML =
+              '<polyline points="22 12 18 12 15 21 9 3 6 12 2 12" style="stroke:#3b82f6"/>';
+
+            nodes.forEach((x) => {
+              if (x.timeseries) {
+                d3.select(x.el)
+                  .select("circle")
+                  .classed("has_timeseries", true);
+              }
+            });
+          } else {
+            icon.innerHTML =
+              '<polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/>';
+
+            nodes.forEach((x) => {
+              d3.select(x.el).select("circle").classed("has_timeseries", false);
+            });
+          }
+        });
+      }
+
      // Show actions button if there are actions
      const actionsButton = document.getElementById("actionsButton");
      const actionsList = actionsButton?.querySelector("ul");
--- a/uv.lock
+++ b/uv.lock
@ -712,7 +712,7 @@ requires-dist = [
    { name = "django-polymorphic", specifier = ">=4.1.0" },
    { name = "django-stubs", marker = "extra == 'dev'", specifier = ">=5.2.4" },
    { name = "enviformer", git = "ssh://git@git.envipath.com/enviPath/enviformer.git?rev=v0.1.4" },
-    { name = "envipy-additional-information", git = "ssh://git@git.envipath.com/enviPath/enviPy-additional-information.git?rev=v0.2.0" },
+    { name = "envipy-additional-information", git = "ssh://git@git.envipath.com/enviPath/enviPy-additional-information.git?rev=v0.4.0" },
    { name = "envipy-ambit", git = "ssh://git@git.envipath.com/enviPath/enviPy-ambit.git" },
    { name = "envipy-plugins", git = "ssh://git@git.envipath.com/enviPath/enviPy-plugins.git?rev=v0.1.0" },
    { name = "epam-indigo", specifier = ">=1.30.1" },
@ -741,8 +741,8 @@ provides-extras = ["ms-login", "dev"]

 [[package]]
 name = "envipy-additional-information"
-version = "0.2.0"
-source = { git = "ssh://git@git.envipath.com/enviPath/enviPy-additional-information.git?rev=v0.2.0#02e3ae64b2ff42a5d2b723a76727c8f6755c9a90" }
+version = "0.4.0"
+source = { git = "ssh://git@git.envipath.com/enviPath/enviPy-additional-information.git?rev=v0.4.0#c4ff23980bbd378a6d6b5bef778aa893310608e3" }
 dependencies = [
    { name = "pydantic" },
 ]