jebus/enviPy-bayer
1
0
Fork 0
forked from enviPath/enviPy
Code Issues Pull Requests Actions Releases Activity

[Feature] Timeseries Pathway view (#319)

Browse Source 
**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>
This commit is contained in:
Tobias O
2026-02-04 05:19:25 +13:00
committed by jebus
parent dc18b73e08
commit 5da8dbc191
5 changed files with 170 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

107
templates/objects/pathway.html
View File

@ -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");