fix: Fix and refactor Timeline component in trame

geos-trame/pyproject.toml

@@ -8,7 +8,8 @@ version = "1.0.0"
 description = "Geos Simulation Modeler"
 authors = [{name = "GEOS Contributors" }]
 maintainers = [{name = "Alexandre Benedicto", email = "alexandre.benedicto@external.totalenergies.com" },
-               {name = "Paloma Martinez", email = "paloma.martinez@external.totalenergies.com" }]
+               {name = "Paloma Martinez", email = "paloma.martinez@external.totalenergies.com" }
+               {name = "Jacques Franc", email= "jacques.franc@external.totalenergies.com" }]
 license = {text = "Apache-2.0"}
 classifiers = [
     "Development Status :: 4 - Beta",
@@ -40,7 +41,6 @@ dependencies = [
     "matplotlib==3.9.4",
     "trame-matplotlib==2.0.3",
     "trame-components==2.4.2",
-    "trame-gantt==0.1.5",
     "mpld3<0.5.11",
     "xsdata==24.5",
     "xsdata-pydantic[lxml]==24.5",

geos-trame/src/geos/trame/app/deck/tree.py

@@ -4,6 +4,7 @@
 import os
 from collections import defaultdict
 from typing import Any
+from datetime import timedelta, datetime
 
 import dpath
 import funcy
@@ -19,7 +20,7 @@
 from geos.trame.app.utils.file_utils import normalize_path, format_xml
 from geos.trame.schema_generated.schema_mod import Problem, Included, File, Functions
 
-
+date_fmt = "%Y-%m-%d"
 class DeckTree( object ):
     """A tree that represents a deck file along with all the available blocks and parameters."""
 
@@ -33,6 +34,7 @@ def __init__( self, sm_id: str | None = None, **kwargs: Any ) -> None:
         self.root = None
         self.input_has_errors = False
         self._sm_id = sm_id
+        self.world_origin_time = datetime(1924,3,28).strftime(date_fmt)# Total start date !!
 
     def set_input_file( self, input_filename: str ) -> None:
         """Set a new input file.
@@ -130,11 +132,17 @@ def timeline( self ) -> list[ dict ] | None:
         timeline = []
         # list root events
         global_id = 0
-        for e in self.input_file.problem.events[ 0 ].periodic_event:
+        solver_events = filter(lambda ev : 'Solver' in ev.target, self.input_file.problem.events[0].periodic_event)
+        solver_events = self.input_file.problem.events[0].periodic_event
+        for e in solver_events:
+
             item: dict[ str, str | int ] = {
                 "id": global_id,
-                "summary": e.name,
-                "start_date": e.begin_time,
+                "name": e.name,
+                "start": (datetime.strptime(self.world_origin_time,date_fmt) + timedelta(seconds=float(e.begin_time))).strftime(date_fmt), #,
+                "end": (datetime.strptime(self.world_origin_time,date_fmt) + timedelta(seconds=float(e.end_time))).strftime(date_fmt),
+                "duration" : str( timedelta(seconds=float(e.end_time) - float(e.begin_time)).days ),
+                "category" : e.target.split('/')[-1],
             }
             timeline.append( item )
             global_id = global_id + 1

geos-trame/src/geos/trame/app/gantt_chart/__init__.py

@@ -0,0 +1,7 @@
+from trame_client.utils.version import get_version
+
+__version__ = get_version("gantt-chart")
+
+__all__ = [
+    "__version__",
+]

geos-trame/src/geos/trame/app/gantt_chart/module/__init__.py

@@ -0,0 +1,25 @@
+from pathlib import Path
+
+# Compute local path to serve
+serve_path = str( Path( __file__ ).with_name( "serve" ).resolve() )
+
+# Serve directory for JS/CSS files
+serve = { "__gantt_chart": serve_path }
+
+# List of JS files to load (usually from the serve path above)
+scripts = [ "__gantt_chart/gantt-chart.umd.js"]
+
+# List of CSS files to load (usually from the serve path above)
+# styles = ["__geos_trame/style.css"]
+
+# List of Vue plugins to install/load
+vue_use = [ "GanttLib" ]
+
+# Uncomment to add entries to the shared state
+# state = {}
+
+
+# Optional if you want to execute custom initialization at module load
+def setup( app, **kwargs ):  # noqa
+    """Method called at initialization with possibly some custom keyword arguments."""
+    pass

geos-trame/src/geos/trame/app/gantt_chart/widgets/gantt_chart.py

@@ -0,0 +1,34 @@
+"""Module compatible with vue3"""
+from trame_client.widgets.core import AbstractElement
+from .. import module
+
+__all__ = [
+    "Gantt",
+]
+
+
+class HtmlElement(AbstractElement):
+    def __init__(self, _elem_name, children=None, **kwargs):
+        super().__init__(_elem_name, children, **kwargs)
+        if self.server:
+            self.server.enable_module(module)   
+
+class Gantt(HtmlElement):
+    """
+    Gantt Editor component
+
+    Properties:
+
+    """
+
+    def __init__(self, **kwargs):
+        super().__init__(
+            "GanttChart",
+            **kwargs,
+        )
+        self._attr_names += [
+            "tasks",
+        ]
+        self._event_names += [
+            "taskUpdated"
+        ]

geos-trame/src/geos/trame/app/main.py

@@ -7,6 +7,9 @@
 from trame.app import get_server  # type: ignore
 from trame_server import Server
 
+import sys
+sys.path.insert(0,"/data/pau901/SIM_CS/users/jfranc/geosPythonPackages/geos-trame/src")
+
 from geos.trame.app.core import GeosTrame
 
 
@@ -15,6 +18,7 @@ def main( server: Server = None, **kwargs: Any ) -> None:
     # Get or create server
     if server is None:
         server = get_server()
+    server.clear_state_client_cache()
 
     if isinstance( server, str ):
         server = get_server( server )

geos-trame/src/geos/trame/app/ui/timeline.py

@@ -2,13 +2,22 @@
 # SPDX-FileCopyrightText: Copyright 2023-2024 TotalEnergies.
 # SPDX-FileContributor: Lionel Untereiner
 from typing import Any
+from datetime import datetime, timedelta
+from pandas import Timestamp
+import pytz
+import logging
 
-from trame.widgets import gantt
+# from trame.widgets import gantt
+from geos.trame.app.gantt_chart.widgets.gantt_chart import Gantt
 from trame.widgets import vuetify3 as vuetify
 from trame_simput import get_simput_manager
 
 from geos.trame.app.deck.tree import DeckTree
 
+date_fmt = "%Y-%m-%d"
+logger = logging.getLogger("timeline")
+logger.setLevel(logging.ERROR)         
+
 
 class TimelineEditor( vuetify.VCard ):
 
@@ -18,73 +27,44 @@ def __init__( self, source: DeckTree, **kwargs: Any ) -> None:
 
         self.tree = source
         self.simput_manager = get_simput_manager( id=self.state.sm_id )
-
-        items = self.tree.timeline()
-
-        fields = [ {
-            "summary": {
-                "label": "Summary",
-                "component": "gantt-text",
-                "width": 300,
-                "placeholder": "Add a new task...",
-            },
-            "start_date": {
-                "label": "Start",
-                "component": "gantt-date",
-                "width": 75,
-                "placeholder": "Start",
-                "sort": "date",
-            },
-            "end_date": {
-                "label": "End",
-                "component": "gantt-date",
-                "width": 75,
-                "placeholder": "End",
-                "sort": "date",
-            },
-            "duration": {
-                "label": "Days",
-                "component": "gantt-number",
-                "width": 50,
-                "placeholder": "0",
-            },
-        } ]
+        self.state.sdate = None #Timestamp(self.tree.world_origin_time)
+        self.state.change("sdate")(self._updated_sdate)
+        self.state.tasks = self.tree.timeline()
 
         with self:
-            vuetify.VCardTitle( "Events View" )
-            vuetify.VDateInput(
-                label="Select starting simulation date",
-                prepend_icon="",
-                prepend_inner_icon="$calendar",
-                placeholder="09/18/2024",
-            )
-            vuetify.VDivider()
-            with (
-                    vuetify.VContainer( "Events timeline" ),
-                    vuetify.VTimeline(
-                        direction="horizontal",
-                        truncate_line="both",
-                        align="center",
-                        side="end",
-                    ),
-                    vuetify.VTimelineItem( v_for=( f"item in {items}", ), key="i", value="item", size="small" ),
-            ):
-                vuetify.VAlert( "{{ item.summary }}" )
-                vuetify.Template( "{{ item.start_date }}", raw_attrs=[ "v-slot:opposite" ] )
-
             with vuetify.VContainer( "Events chart" ):
-                gantt.Gantt(
-                    canEdit=True,
-                    dateLimit=30,
-                    startDate="2024-11-01 00:00",
-                    endDate="2024-12-01 00:00",
-                    # title='Gantt-pre-test',
-                    fields=fields,
-                    update=( self.update_from_js, "items" ),
-                    items=( "items", items ),
-                    classes="fill_height",
+                vuetify.VDateInput(
+                    label="Select starting simulation date",
+                    prepend_icon="",
+                    prepend_inner_icon="$calendar",
+                    # placeholder="09/18/2024",
+                    v_model=("sdate",),
                 )
+                vuetify.VDivider()
+                Gantt(
+                        tasks=("tasks",),
+                        taskUpdated=(self._updated_tasks,"$event"),
+                        classes="fill_height",
+                        )
+            with vuetify.VContainer("Debug"):
+               vuetify.VAlert("{{tasks}}", vmodel=("tasks",))
+
+    def _updated_tasks(self, *tasks: Any, **_: Any) -> None:
+        if tasks is None:
+            print('None values')
+        logger.info(f"new tasks {tasks}")
+        self.state.tasks = tasks
+
+    def _updated_sdate(self, sdate: str, **_: Any) -> None:
+        #sdate seems to be a panda Timestamp
+        if sdate is None:
+            return
 
-    def update_from_js( self, *items: tuple ) -> None:
-        """Update method called from javascript."""
-        self.state.items = list( items )
+        logger.info(f"new origin of time {sdate.to_datetime()}")
+        # return
+        former_origin_time: str = min(self.state.tasks, key=lambda d: datetime.strptime(d.get("start"),date_fmt)).get("start")
+        time_delta : timedelta =  sdate.to_datetime() - pytz.utc.localize(datetime.strptime(former_origin_time,date_fmt)) 
+        self.state.tasks = list(map(lambda d: {**d, "start":(datetime.strptime(d["start"],date_fmt) + time_delta ).strftime(date_fmt), 
+                                               "end" : (datetime.strptime(d["end"],date_fmt) + time_delta ).strftime(date_fmt) }, 
+                                               self.state.tasks))
+        return

geos-trame/src/geos/trame/module/__init__.py

@@ -7,7 +7,7 @@
 serve = { "__geos_trame": serve_path }
 
 # List of JS files to load (usually from the serve path above)
-scripts = [ "__geos_trame/geos_trame.umd.js" ]
+scripts = [ "__geos_trame/geos_trame.umd.js"]
 
 # List of CSS files to load (usually from the serve path above)
 # styles = ["__geos_trame/style.css"]

geos-trame/tests/data/geosDeck/geosDeck.xml

@@ -149,6 +149,7 @@
 
         <PeriodicEvent
             name="statistics"
+            endTime="0"
             timeFrequency="31536000"
             target="/Tasks/compflowStatistics"/>
 

geos-trame/vue-components/package.json

@@ -17,10 +17,9 @@
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore --ignore-pattern public",
     "semantic-release": "semantic-release"
   },
-  "dependencies": {
-  },
-  "peerDependencies": {
-    "vue": "^2.7.0 || >=3.0.0"
+  "dependencies":{
+    "vue":"^3.4.27",
+    "d3":"^7.9.0"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.1.4",
@@ -29,8 +28,8 @@
     "eslint-plugin-vue": "^9.3.0",
     "prettier": "^2.7.1",
     "semantic-release": "19.0.2",
-    "vite": "^4.1.0",
-    "vue": "^3.0.0"
+    "vite": "^5.2.12",
+    "vue": "^3.4.27"
   },
   "files": [
     "dist/*",