Student Project Progress (#4)

* first * added css style, dropdown menu implementation, just started * changed some styles for the dropdown menu * made a test dropdown that works, needs some fixes to be fully functional * added the changes to the main LCA class to see the how everything works * small font changes * cost driver information in scenario * test scenario file with cost drivers * cost drivers added to global config * add cost drivers in test scenario * renamed keys to produce correct xml * cost variant config * test scenario with cost variants * with cost variants * cost drivers and cost variants in sim config * cost drivers to activities * cost drivers in simconfig * cost drivers in simconfig * testing with cost variants * testing with cost variants * added an automatic way to add components in the drodown list * styling changes on color * added a button and started implementing 'save variant' functionality * fixed some styling issue * added the functionality to add UI components on save button, awaiting functionality of saving the variant itself * default impact method + api call * get product systems api call * get product systems via api * fetch product systems * redesign, ACD panel in model based under general parameters * redesign * fixing fortawesome dep * fix packages + error components * testing with logisticsScenario * testing data changed * quality fixes to the code * uncommented code for creating new save * extended tests in logistics * added the buttons that add/remove activities and remove saved variants aswell * re-writing connection form to chakra, adding validation and progress * merge conflict * updating model * data model update * getting and saving drivers model * layout + variants card * adding variant editor * lca configurartion * adding concrete drivers inside of abstract ones * abstract cost drivers * variant editor * removing duplicate abstract drivers * Splitting global and scenario configs * lca integration refactoring * editing cost variants * cost variant editor * variant editor * variant editor * mapping validation * saving and getting mapping to config * variant editor * model based display mappings * removing untis, usage of olca-ipc package * weighted and normalized costs * Update README.md * refactoring, moving logic to another file * restyling progress indicator * renaming LCA Configuration module * removing tasks from variants mapping * update variant editor * Bug fix * bug fix, null reference handle * undefined bug fix * undefined bug fix * changing navigation to react dom * refactor inputs * Fixing navigation in model based view * fixing button text overflow * Add/remove animations * animation bug fix * saving mapping for tasks and abstract drivers * button margin * minor * frequencies ui * exponental format for costs * reformatting data * scylla converter * simulation config * fixing simulation * Update README.md * Update README.md * Update README.md * Update README.md * Update README.md * Update README.md * Update README.md * minor * demo content * adding report reference * report * updating report * End task, terminology, fig. 1 * OpenLCA * Organisational * report: OpenLCA * report: technical approach * report: simubridge & organisational * report: SimuBridge * report: scylla * report: seq diagram + intro * report: update seq diagram * report: data flow * report: initial pdf * report / export pdf * report * report / testing * Update README.md * oLCA, separating UI from the Logic * report * decoupling + fixing mapping visability issue * Basic Spinner * report * Update README.md LCA components * Update README.md * Update CI.yml updating ci/cd Node 15.x->20.x + depricated actions * Update CI.yml / upgrading Cypress and Actions dependencies * cypress / navifation tests * report * cypress lca tests * report * cypress variants + modelbased tests * report * FINAL FINAL --------- Co-authored-by: RenisSh <shutina.renis62@gmail.com> Co-authored-by: zsudeyldrm <zsude.yildirim@tum.de> Co-authored-by: alexey192 <alexey192@gmail.com> Co-authored-by: zsudeyldrm <92756562+zsudeyldrm@users.noreply.github.com>
INSM-TUM · Jun 18, 2024 · aa73f3c · aa73f3c
1 parent 474f83e
commit aa73f3c
Show file tree

Hide file tree

Showing 46 changed files with 6,335 additions and 250 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/.github/workflows/CI.yml b/.github/workflows/CI.yml
@@ -11,23 +11,28 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [15.x]
+        node-version: [20.x]
 
     steps:
-      - uses: actions/checkout@v3
+      #- uses: actions/checkout@v3
+      - uses: actions/checkout@v4
 
       - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v3
+        # uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node-version }}           
           cache: 'npm'
 
-      - name: Checkout
-        uses: actions/checkout@v2
+      # - name: Checkout
+      #  uses: actions/checkout@v2
+
       - name: Node install
         run: npm install --legacy-peer-deps
+
       - name: Cypress run
-        uses: cypress-io/github-action@v5
+        # uses: cypress-io/github-action@v5
+        uses: cypress-io/github-action@v6
         with:
           working-directory: frontend
           install: false

diff --git a/.gitmodules b/.gitmodules
@@ -0,0 +1,3 @@
+[submodule "report/65c765300ee59e23d765e7d1"]
+	path = report/65c765300ee59e23d765e7d1
+	url = https://git@sharelatex.tum.de/git/65c765300ee59e23d765e7d1
diff --git a/README.md b/README.md
@@ -1,57 +1,70 @@
-# SimuBridge--Main <br><sub>![CI](https://github.com/INSM-TUM/SimuBridge--Main/actions/workflows/CI.yml/badge.svg)</sub>
+# SimuBridge-OLCA <br><sub>![CI](https://github.com/INSM-TUM/SimuBridge--Main/actions/workflows/CI.yml/badge.svg)</sub>
 
 ## :information_source: About
-This is the main application subrepository for the [SimuBridge](https://github.com/INSM-TUM/SimuBridge) project. It contains the source code for the web application that is the heartpice of the project. Please refer to the [root repository](https://github.com/INSM-TUM/SimuBridge) for overall project documentation.
-
-This readme focusses on the technical details of the application and presents instructions how to run the application in isolation.
-
-
-## :hammer_and_wrench: How to run it
-
-### As Part of Docker-Compose (recommended) 
-We recommend to start the SimuBridge application as part of the docker-compose of the [SimuBridge root project](https://github.com/INSM-TUM/SimuBridge). Please refer to the instructions there.
-
-This way, the process miner(s) and simulator(s) SimuBridge interacts with are also running.
-
-### Stand-alone
-SimuBridge can also run standalone. This can be useful for development purposes, or if no integration with process miners or simulators is wanted.
+This repository is a supplementary branch to the main [SimuBridge](https://github.com/INSM-TUM/SimuBridge) project. It contains the source code for the web application that is the heart piece of the project. Please refer to the [root repository](https://github.com/INSM-TUM/SimuBridge) for overall project documentation.
+
+This project focuses on **sustainability related information on SimuBridge**. The extensions made allows users to assign abstract environmental cost drivers to specific activities, and further refine these into concrete cost drivers for accurate impact assessment. The platform facilitates a deeper understanding of the environmental implications of different operational choices, providing valuable insights for sustainable decision-making.
+
+## 💻 LCA Components Structure
+The module is structured to segregate UI components from logic.
+
+Lca/  
+├── Components/  
+│   ├── BasicSpinner.jsx  
+│   ├── FormattedConcreteDriver.jsx  
+│   ├── LcaIntegration.jsx  
+│   ├── LcaVariantsConfiguration.jsx  
+│   ├── OlcaConnectionAlert.jsx  
+│   └── VariantEditor.jsx  
+└── Logic/  
+    ├── LcaDataManager.js  
+    ├── LcaIntegrationUtils.js  
+    └── OpenLcaConnector.js  
+
+### Components
+- `BasicSpinner.jsx`: Auxiliary React component for the loading spinner.
+- `FormattedConcreteDriver.jsx`: Component to display formatted data of concrete cost drivers.
+- `LcaIntegration.jsx`: Interface for configuring external LCA data integration.
+- `LcaVariantsConfiguration.jsx`: Manages the mapping of abstract and concrete cost drivers for variants.
+- `VariantEditor.jsx`: UI component for creating or editing variants.
+- `OlcaConnectionAlert.jsx`: Notifies about the OpenLCA connection status.
+
+### Logic
+- `LcaDataManager.js`: Manages app data storage.
+- `LcaIntegrationUtils.js`: Handles requests to external LCA systems.
+- `OpenLcaConnector.js`: Specialized connector for OpenLCA software integration.
+
+
+## 📦️ UI Pages
+The web application is split into multiple pages, each with dedicated purpose.
+Notably, the discovery and simulator views interact with the external process discovery and simulation tools, respectively.
 
-First, clone this repository with
-``` console
-git clone git@github.com:INSM-TUM/SimuBridge--Main.git
-```
+#### LCA Integration Panel
+Configure LCA with host and port for a flexible data fetching. For now, only availability is the normalization method of EF3.0 to calculate impacts.
 
-#### As Docker container
-To run SimuBridge as standalone docker container, first build the container by navigáting to the repository folder and running
-``` console
-docker build -t simulation-bridge:1.0.0 .
-```
-This builds the image which can then be instantiated using
-``` console
-docker run -it -p 3000:3000 simulation-bridge:1.0.0
-```
-SimuBridge is then available under `localhost:3000`
+#### Configure Cost Drivers nn Process Model 
+Assign abstract cost drivers to activities within your process model in model based parameters panel.
 
-#### Run from source (development purposes)
-To build SimBridge from source for development, first the dependency packages need to be installed. This needs node to be installed, and is done by navigating to the repository folder and running
-```console
-npm install --legacy-peer-deps
-```
-The application can then be started via
-```console
-npm run client
-```
+#### LCA Variants Panel
+Use this panel to map abstract cost drivers to concrete cost drivers from dropdown menus.
+Configure the frequency of cost variants to simulate the process instances and calculate the overall environmental impact.
 
+#### Simulation
+Get the output of the  Scylla simulator to view extended XML files.
 
+## Features
+#### Flexible Simulation
+Configure simulations with varying cost variants to explore different scenarios.
 
+#### Impact Visualization
+View and analyze the environmental impact of process instances through intuitive UI components.
 
-## 📦️ Components
-The web application is split into multiple pages, each with dedicated purpose.
-Notably, the discovery and simulator views interact with the external process discovery and simulation tools, respectively.
+## Results
+We built the application using the Javascript library React, using the Chakra-UI design framework to ensure a modern look.
+![Image](https://github.com/INSM-TUM-Teaching/SImuBridge-OLCA/assets/92756562/ea167f10-663d-4ea9-8df3-7ece260c61c7)
+![Image](https://github.com/INSM-TUM-Teaching/SImuBridge-OLCA/assets/92756562/c4c45554-4587-4fc5-8bcc-b1eb9a0ce834)
+![Image](https://github.com/INSM-TUM-Teaching/SImuBridge-OLCA/assets/92756562/8f63b277-1926-44e3-b5f0-0545cf485d22)
 
-![image](./.docs/tool_internals.png)
 
 
-We built the application using the Javascript library React, using the Chakra-UI design framework to ensure a modern look.
 
-The application stores some information in the session storage, namely which projet is currently edited. Most persistence, however, happens using the browser [IndexedDB API](https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API), to ensure also large data, such as event logs, can be handled.
diff --git a/dataModel/SimulationModelDescriptor.js b/dataModel/SimulationModelDescriptor.js
@@ -58,7 +58,9 @@ export const SimulationModelDescriptor = {
             "properties": [
                 { "name": "roles", "type": "Role", isMany : true },
                 { "name": "resources", "type": "Resource", isMany : true },
-                { "name": "timeTables", "type": "Timetable", isMany : true }
+                { "name": "timeTables", "type": "Timetable", isMany : true },
+                { "name": "costDrivers", "type": "AbstractCostDriver", isMany : true },
+                { "name": "environmentMappingConfig", "type": "EnvironmentMappingConfig" }
             ]
         },
 
@@ -77,7 +79,7 @@ export const SimulationModelDescriptor = {
             "properties": [
                 { "name": "id", "type": "String"},
                 { "name": "schedule", "type": "String", default : null }, //TODO could be done with isReference and type Timetable
-                { "name": "costHour", "type": "Real", default : null },
+                { "name": "costHour", "type": "Real", default : null }
             ]
         },
 
@@ -100,6 +102,70 @@ export const SimulationModelDescriptor = {
             ]
         },
 
+        {
+            "name" : "AbstractCostDriver",
+            "properties": [
+                { "name": "id", "type": "String"}, //TODO check if defaultTime unit is to be included
+                { "name": "name", "type": "String"},
+                { "name": "concreteCostDrivers", "type": "ConcreteCostDriver", isMany : true }, // TODO concreteCostDriver is missplelled in the xml files provided from team B.
+            ]
+        },
+
+        {
+            "name" : "ConcreteCostDriver",
+            "properties": [
+                { "name": "id", "type": "String"},
+                { "name": "name", "type": "String"},
+                { "name": "cost", "type": "Real"},
+            ]
+        },
+
+        {
+            "name" : "EnvironmentMappingConfig",
+            "properties": [
+                { "name": "variants", "type": "VariantExtended", isMany : true },
+            ]
+        },
+        {
+            "name" : "VariantExtended",
+            "properties": [
+                { "name": "id", "type": "String"},
+                { "name": "name", "type": "String"},
+                { "name": "frequency", "type": "Real"},
+                { "name": "mappings", "type": "DriversMapping", isMany : true }
+            ]
+        },
+        {
+            "name" : "DriversMapping",
+            "properties": [
+                { "name": "abstractDriver", "type": "String"},
+                { "name": "concreteDriver", "type": "String"},
+            ]
+        },
+
+        {
+            "name" : "CostVariantConfig",
+            "properties": [
+                { "name": "count", "type": "String"},
+                { "name": "variants", "type": "Variant", isMany : true }
+            ]
+        },
+        {
+            "name" : "Variant",
+            "properties": [
+                { "name": "id", "type": "String"},
+                { "name": "name", "type": "String"},
+                { "name": "frequency", "type": "String"},
+                { "name": "drivers", "type": "Driver", isMany : true }
+            ]
+        },
+        {
+            "name" : "Driver",
+            "properties": [
+                { "name": "id", "type": "String"},
+                { "name": "cost", "type": "String"},
+            ]
+        },
 
         {
             "name": "Model",
@@ -115,7 +181,8 @@ export const SimulationModelDescriptor = {
             "properties": [
                 { "name": "activities", "type": "Activity", "isMany": true },
                 { "name": "events", "type": "Event", "isMany": true },
-                { "name": "gateways", "type": "Gateway", "isMany": true }
+                { "name": "gateways", "type": "Gateway", "isMany": true },
+                { "name": "costVariantConfig", "type": "CostVariantConfig" }
             ]
         },
 
@@ -132,6 +199,7 @@ export const SimulationModelDescriptor = {
             "superClass": ["ModelElement"],
             "properties": [
                 { "name": "resources", "type": "String", "isMany": true },
+                { "name": "costDrivers", "type": "String", "isMany": true },
                 { "name": "cost", "type": "Real", "default": 0 },
                 { "name": "duration", "type": "TimeDistribution" }
             ]

diff --git a/demo/.DS_Store b/demo/.DS_Store
diff --git a/demo/demo_video.mov b/demo/demo_video.mov
diff --git a/demo/simulation_files/.DS_Store b/demo/simulation_files/.DS_Store
diff --git a/demo/simulation_files/tum_shop.bpmn b/demo/simulation_files/tum_shop.bpmn
@@ -0,0 +1,98 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<bpmn:definitions xmlns:bpmn="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" xmlns:di="http://www.omg.org/spec/DD/20100524/DI" xmlns:modeler="http://camunda.org/schema/modeler/1.0" id="Definitions_02pvvq8" targetNamespace="http://bpmn.io/schema/bpmn" exporter="Camunda Modeler" exporterVersion="5.10.0" modeler:executionPlatform="Camunda Cloud" modeler:executionPlatformVersion="8.2.0">
+  <bpmn:process id="Process_1qfsj4d" isExecutable="true">
+    <bpmn:startEvent id="StartEvent_1">
+      <bpmn:outgoing>Flow_18e5u87</bpmn:outgoing>
+    </bpmn:startEvent>
+    <bpmn:task id="Activity_12nhj09" name="Pack the parcel">
+      <bpmn:incoming>Flow_18e5u87</bpmn:incoming>
+      <bpmn:outgoing>Flow_0x4zrhb</bpmn:outgoing>
+    </bpmn:task>
+    <bpmn:task id="Activity_0zw7mmo" name="Ship the order to post office">
+      <bpmn:incoming>Flow_0x4zrhb</bpmn:incoming>
+      <bpmn:outgoing>Flow_152dui2</bpmn:outgoing>
+    </bpmn:task>
+    <bpmn:task id="Activity_0gdnps8" name="Deliver to the recipient">
+      <bpmn:incoming>Flow_1lgsuz0</bpmn:incoming>
+      <bpmn:outgoing>Flow_1atlp9w</bpmn:outgoing>
+    </bpmn:task>
+    <bpmn:sequenceFlow id="Flow_0x4zrhb" sourceRef="Activity_12nhj09" targetRef="Activity_0zw7mmo" />
+    <bpmn:sequenceFlow id="Flow_152dui2" sourceRef="Activity_0zw7mmo" targetRef="Gateway_18euw97" />
+    <bpmn:exclusiveGateway id="Gateway_0fvliet">
+      <bpmn:incoming>Flow_1atlp9w</bpmn:incoming>
+      <bpmn:incoming>Flow_01lk7fy</bpmn:incoming>
+      <bpmn:outgoing>Flow_1dcn9uq</bpmn:outgoing>
+    </bpmn:exclusiveGateway>
+    <bpmn:sequenceFlow id="Flow_1atlp9w" sourceRef="Activity_0gdnps8" targetRef="Gateway_0fvliet" />
+    <bpmn:exclusiveGateway id="Gateway_18euw97">
+      <bpmn:incoming>Flow_152dui2</bpmn:incoming>
+      <bpmn:outgoing>Flow_1lgsuz0</bpmn:outgoing>
+      <bpmn:outgoing>Flow_01lk7fy</bpmn:outgoing>
+    </bpmn:exclusiveGateway>
+    <bpmn:sequenceFlow id="Flow_1lgsuz0" sourceRef="Gateway_18euw97" targetRef="Activity_0gdnps8" />
+    <bpmn:sequenceFlow id="Flow_01lk7fy" sourceRef="Gateway_18euw97" targetRef="Gateway_0fvliet" />
+    <bpmn:endEvent id="Event_0ovbfxp">
+      <bpmn:incoming>Flow_1dcn9uq</bpmn:incoming>
+    </bpmn:endEvent>
+    <bpmn:sequenceFlow id="Flow_1dcn9uq" sourceRef="Gateway_0fvliet" targetRef="Event_0ovbfxp" />
+    <bpmn:sequenceFlow id="Flow_18e5u87" sourceRef="StartEvent_1" targetRef="Activity_12nhj09" />
+  </bpmn:process>
+  <bpmndi:BPMNDiagram id="BPMNDiagram_1">
+    <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1qfsj4d">
+      <bpmndi:BPMNShape id="_BPMNShape_StartEvent_2" bpmnElement="StartEvent_1">
+        <dc:Bounds x="179" y="159" width="36" height="36" />
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNShape id="Activity_12nhj09_di" bpmnElement="Activity_12nhj09">
+        <dc:Bounds x="300" y="137" width="100" height="80" />
+        <bpmndi:BPMNLabel />
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNShape id="Activity_0zw7mmo_di" bpmnElement="Activity_0zw7mmo">
+        <dc:Bounds x="480" y="137" width="100" height="80" />
+        <bpmndi:BPMNLabel />
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNShape id="Gateway_0fvliet_di" bpmnElement="Gateway_0fvliet" isMarkerVisible="true">
+        <dc:Bounds x="955" y="152" width="50" height="50" />
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNShape id="Activity_0gdnps8_di" bpmnElement="Activity_0gdnps8">
+        <dc:Bounds x="780" y="137" width="100" height="80" />
+        <bpmndi:BPMNLabel />
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNShape id="Gateway_18euw97_di" bpmnElement="Gateway_18euw97" isMarkerVisible="true">
+        <dc:Bounds x="675" y="152" width="50" height="50" />
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNShape id="Event_0ovbfxp_di" bpmnElement="Event_0ovbfxp">
+        <dc:Bounds x="1132" y="159" width="36" height="36" />
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNEdge id="Flow_0x4zrhb_di" bpmnElement="Flow_0x4zrhb">
+        <di:waypoint x="400" y="177" />
+        <di:waypoint x="480" y="177" />
+      </bpmndi:BPMNEdge>
+      <bpmndi:BPMNEdge id="Flow_152dui2_di" bpmnElement="Flow_152dui2">
+        <di:waypoint x="580" y="177" />
+        <di:waypoint x="675" y="177" />
+      </bpmndi:BPMNEdge>
+      <bpmndi:BPMNEdge id="Flow_1lgsuz0_di" bpmnElement="Flow_1lgsuz0">
+        <di:waypoint x="725" y="177" />
+        <di:waypoint x="780" y="177" />
+      </bpmndi:BPMNEdge>
+      <bpmndi:BPMNEdge id="Flow_1atlp9w_di" bpmnElement="Flow_1atlp9w">
+        <di:waypoint x="880" y="177" />
+        <di:waypoint x="955" y="177" />
+      </bpmndi:BPMNEdge>
+      <bpmndi:BPMNEdge id="Flow_01lk7fy_di" bpmnElement="Flow_01lk7fy">
+        <di:waypoint x="700" y="152" />
+        <di:waypoint x="700" y="70" />
+        <di:waypoint x="980" y="70" />
+        <di:waypoint x="980" y="152" />
+      </bpmndi:BPMNEdge>
+      <bpmndi:BPMNEdge id="Flow_1dcn9uq_di" bpmnElement="Flow_1dcn9uq">
+        <di:waypoint x="1005" y="177" />
+        <di:waypoint x="1132" y="177" />
+      </bpmndi:BPMNEdge>
+      <bpmndi:BPMNEdge id="Flow_18e5u87_di" bpmnElement="Flow_18e5u87">
+        <di:waypoint x="215" y="177" />
+        <di:waypoint x="300" y="177" />
+      </bpmndi:BPMNEdge>
+    </bpmndi:BPMNPlane>
+  </bpmndi:BPMNDiagram>
+</bpmn:definitions>