Feat: create components from xml file (#42)

###
[AB#195307](https://dev.azure.com/EquinorASA/bb9bd8cb-74f7-4ffa-b0cb-60eff0a0be58/_workitems/edit/195307)
[Pull requests practices for the SSI
team](https://github.com/equinor/ssi-infrastructure/blob/main/docs/pr_practices.md)

## Aim of the PR
The team is to start using React in the frontend. This PR aims to set up
a React project and render the P&ID using the XML file instead of using
XSLT to generate an SVG.

## Implementation 
- A React project is set up using Vite. 
- TypeScript Interfaces are created to match the structure of the DEXPI
Proteus-XML files.
- React Components are created to render each element.
- Documentation is updated.

## Type of change
- [ ] Bug fix 
- [X] New feature 
- [ ] Breaking change 
- [X] This change requires a documentation update

## How Has This Been Tested?
Diagram rendering has been tested with the NOAKADEXPI file
DISC_EXAMPLE-02-02.xml.
Visual confirmation of placement and look of elements.

## Additional Changes
- Docker Compose is set up.
- Vanilla JavaScript frontend moved to www_old
- Boundary setting hotkey changed from ctrl to shift (mac issues)

---------

Co-authored-by: Dag Hovland <[email protected]>
Co-authored-by: Henriette Lien Rebnor <[email protected]>

.gitignore

@@ -3,6 +3,7 @@ pandid.xml
 pandid.trig
 rml/segments.trig
 client/.idea
+.idea
 .vs
 client/Boundaries/Dexpi2Svg/test.svg
 client/Boundaries/Dexpi2Svg/bin
@@ -22,3 +23,6 @@ __pycache__
 /.idea/
 /www/.idea
 /www/index.html
+/www/public/Origo
+/www_old/index.html
+/www/public/DISC_EXAMPLE-02-02.xml

docker/README.md

@@ -9,9 +9,26 @@
 
 ## Running
 
-* From the root folder in the project ([../](../)), run  
+* From the root folder in the project [../](../), run  
 ```
 docker-compose -f docker/docker-compose.yml up --build
 ```
 
-* Open [http://localhost:8080](http://localhost:8080)
+* Open [http://localhost:8080](http://localhost:8080)
+
+## Debugging
+
+* After running npm manually, it might be necessary to delete the local packages, by deleting the folder [../www/node_modules](../www/node_modules). (On linux and mac, run `rm -rf www/node_modules`)
+
+* To get shell access into one of the docker images, run `docker container ls` while they are runing, and then `docker exec -it <continaer-id> /bin/bash`
+
+* For container logs, run `docker container logs <contiainer-id>` (Get container id with `docker container ls` while container is running)
+
+## Running and building faster
+
+
+To start the containers faster when there are no changes to the docker setup, dont build:
+```
+docker-compose -f docker/docker-compose.yml up
+```
+

docker/docker-compose.yml

@@ -21,14 +21,26 @@ services:
       - type: bind
         source: ../
         target: /app/local/
-  web:
+  frontend:
+    image: node:23
+    working_dir: /app/local/www
+    environment:
+      - NODE_ENV=development
+    ports:
+      - 8081:8081
+    volumes:
+      - type: bind
+        source: ../
+        target: /app/local/
+    command: sh -c "npm install && npm run dev"
+  web_old:
     build: web
     tty: true
     ports:
       - 8080:80
     volumes:
       - type: bind
-        source: ../www
+        source: ../www_old
         target: /var/www/html/
     depends_on:
       rml-mapper:

docker/rml-mapper/demo.sh

@@ -2,6 +2,9 @@
 # This script is for use inside the docker container defined in the Dockerfile in this folder
 # See README.md for instructions
 
+# Copy xml for frontend
+cp /app/local/rml_mappings/pandid.xml /app/local/www/public/DISC_EXAMPLE-02-02.xml
+
 # Create rdf
 cd local/rml_mappings
 java -jar /app/rmlmapper.jar -m *map*ttl -s trig -o pandid.trig
@@ -10,12 +13,15 @@ cd /app/
 # Copy the lacking Origo symbol
 cp /app/local/xslt/PV001A_Origo.svg /app/NOAKADEXPI/Symbols/Origo
 
+# Copy all Origo symbols to www project
+cp -rf /app/NOAKADEXPI/Symbols/Origo /app/local/www/public/Origo
+
 # Create svg
 xsltproc --novalid -o /app/dexpi.svg /app/local/xslt/dexpisvg.xslt /app/local/rml_mappings/pandid.xml 
 
 ## Copy svg into html
-head -n 14 /app/local/www/dexpi.html > /app/local/www/index.html
-cat /app/dexpi.svg >> /app/local/www/index.html
-tail -n +14 /app/local/www/dexpi.html >> /app/local/www/index.html
+head -n 14 /app/local/www_old/dexpi.html > /app/local/www_old/index.html
+cat /app/dexpi.svg >> /app/local/www_old/index.html
+tail -n +14 /app/local/www_old/dexpi.html >> /app/local/www_old/index.html
 
 

www/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

www/README.md

@@ -1,27 +1,28 @@
 # Select boundary in browser
+
 1) Run the dexpi.rdfox script, the documentation for this script is found [here](../rdfox/README.md)
-2) Open the dexpi.html file in a browser
+2) Run the frontend as described in [RunGuide.md](./RunGuide.md)
 3) Select the boundary points and an internal component
-   - Ctrl+left click to select or deselect the internal component
-     1) If the node is not a member of the internal class:
-        - Add the node to the internal class to indicate that it is selected 
-        - Update rdfox with the following triple :nodeId a :insideBoundary .
-     2) If the node is a member of the internal class:
-        - Remove the node from the internal class to indicate that it is deselected 
-        - Update rdfox, delete the following triple :nodeId a :insideBoundary .
-     3) If the node is not a member of the internal class, but is a member of the boundary class:
-        - Add the node to the internal class, and remove it from the boundary class. 
-        - Update rdfox, insert the following triple :nodeId a :insideBoundary . 
-        - Update rdfox, delete the following triple :nodeId a :boundary .
-   - Left click to select or deselect boundary nodes
-     1) If the node is not a member of the boundary class:
-        - Add the node to the boundary class to indicate that it is selected 
-        - Update rdfox with the following triple :nodeId a :boundary .
-     2) If the node is a member of the boundary class:
-        - Remove the node from the boundary class to indicate that it is deselected 
-        - Update rdfox, delete the following triple :nodeId a :boundary .
-     3) If the node is not a member of the boundary class, but is a member of the internal class:
-        - Add the node to the boundary class, and remove it from the internal class. 
-        - Update rdfox, insert the following triple :nodeId a :boundary . 
-        - Update rdfox, delete the following triple :nodeId a :insideBoundary .
+    - shift+left click to select or deselect the internal component
+        1) If the node is not a member of the internal class:
+            - Add the node to the internal class to indicate that it is selected
+            - Update rdfox with the following triple :nodeId a :insideBoundary .
+        2) If the node is a member of the internal class:
+            - Remove the node from the internal class to indicate that it is deselected
+            - Update rdfox, delete the following triple :nodeId a :insideBoundary .
+        3) If the node is not a member of the internal class, but is a member of the boundary class:
+            - Add the node to the internal class, and remove it from the boundary class.
+            - Update rdfox, insert the following triple :nodeId a :insideBoundary .
+            - Update rdfox, delete the following triple :nodeId a :boundary .
+    - Left click to select or deselect boundary nodes
+        1) If the node is not a member of the boundary class:
+            - Add the node to the boundary class to indicate that it is selected
+            - Update rdfox with the following triple :nodeId a :boundary .
+        2) If the node is a member of the boundary class:
+            - Remove the node from the boundary class to indicate that it is deselected
+            - Update rdfox, delete the following triple :nodeId a :boundary .
+        3) If the node is not a member of the boundary class, but is a member of the internal class:
+            - Add the node to the boundary class, and remove it from the internal class.
+            - Update rdfox, insert the following triple :nodeId a :boundary .
+            - Update rdfox, delete the following triple :nodeId a :insideBoundary .
 4) Hit enter to query RDFox for the boundary - the output of the query can be found in the logs.

www/eslint.config.js

@@ -0,0 +1,28 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+
+export default tseslint.config(
+  { ignores: ['dist'] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  },
+)

www/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>P&ID</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="src/main.tsx"></script>
+  </body>
+</html>