refactor(demo): fetch the BPMN diagrams

[tbouffard]

Previously, the diagram was stored in JavaScript chunks.
This increased the size of the chunks and did not reflect what an application generally does: it does not store diagrams, they are retrieved from services or APIs.
Fetching the diagram reduces the size of the JavaScript chunks and makes the demo closer to a real application.

Notes

Closes #72

Tasks

Beta Give feedback

1. Diagram: find information about the provenance of this diagram. It is the same as in the bonita-day-2023 demo (https://github.com/process-analytics/bonita-day-demo-2023/blob/main/src/diagrams/EC-purchase-orders-collapsed.bpmn). The process is a modeling of https://icpmconference.org/2019/icpm-2019/contests-challenges/bpi-challenge-2019/
2. try to use import using a vite url when fetching the diagram, see https://vitejs.dev/guide/assets#importing-asset-as-url
3. try to use import.meta.url when fetching the diagram, see https://vitejs.dev/guide/assets#new-url-url-import-meta-url: not needed, using the URL in import works

[github-actions]

🎊 PR Preview 618d8c1 has been successfully built and deployed to https://process-analytics-bv-experimental-add-ons-demo-pr-287.surge.sh

🕐 Build time: 0.011s

_{🤖 By surge-preview}

[tbouffard]

Produced Chunks

main

dist/pages/overlays.html                   1.46 kB │ gzip: 0.62 kB
dist/pages/path-resolver.html              1.51 kB │ gzip: 0.66 kB
dist/pages/plugins-by-name.html            1.64 kB │ gzip: 0.69 kB
dist/index.html                            1.90 kB │ gzip: 0.83 kB
dist/assets/index-CceZZ_di.css             0.28 kB │ gzip: 0.21 kB
dist/assets/zoom-component-CkXT8Sb8.css    0.93 kB │ gzip: 0.39 kB
dist/assets/overlays-CAncAuwP.css          1.18 kB │ gzip: 0.58 kB
dist/assets/bpmn-elements-EUig1k5G.js      0.93 kB │ gzip: 0.49 kB
dist/assets/plugins-by-name-Br2bUxuG.js    1.64 kB │ gzip: 0.82 kB
dist/assets/overlays-4ouCdMrd.js           1.82 kB │ gzip: 0.77 kB
dist/assets/path-resolver-_-5vpUfU.js      1.96 kB │ gzip: 0.87 kB
dist/assets/zoom-component-BKWEeOfi.js     2.05 kB │ gzip: 0.89 kB
dist/assets/diagram-Fq347Kh9.js          147.11 kB │ gzip: 38.07 kB 
dist/assets/mxgraph-DLXKxQT6.js          837.36 kB │ gzip: 188.71 kB

first implementation (duplicate diagram fetch in all demo entry points)

dist/pages/overlays.html                   1.46 kB │ gzip:   0.62 kB
dist/pages/path-resolver.html              1.52 kB │ gzip:   0.67 kB
dist/pages/plugins-by-name.html            1.65 kB │ gzip:   0.69 kB
dist/index.html                            1.90 kB │ gzip:   0.83 kB
dist/assets/index-CceZZ_di.css             0.28 kB │ gzip:   0.21 kB
dist/assets/zoom-component-CkXT8Sb8.css    0.93 kB │ gzip:   0.39 kB
dist/assets/overlays-CAgzppIG.css          1.16 kB │ gzip:   0.57 kB
dist/assets/bpmn-elements-CXeGZNFg.js      0.91 kB │ gzip:   0.49 kB
dist/assets/plugins-by-name-D6jzfHiG.js    1.66 kB │ gzip:   0.83 kB
dist/assets/overlays-bhU2ZXrk.js           1.88 kB │ gzip:   0.80 kB
dist/assets/zoom-component-C3BR7Pnp.js     1.88 kB │ gzip:   0.78 kB
dist/assets/path-resolver-DL0LYGTF.js      1.99 kB │ gzip:   0.88 kB
dist/assets/plugins-support-BAOwGmw6.js  132.32 kB │ gzip:  35.71 kB
dist/assets/mxgraph-BIDOqb5W.js          837.19 kB │ gzip: 188.70 kB

34b0b99 after introducing the fetchDiagram function

dist/pages/overlays.html                   1.46 kB │ gzip:   0.62 kB
dist/pages/path-resolver.html              1.51 kB │ gzip:   0.66 kB
dist/pages/plugins-by-name.html            1.64 kB │ gzip:   0.69 kB
dist/index.html                            1.90 kB │ gzip:   0.83 kB
dist/assets/index-CceZZ_di.css             0.28 kB │ gzip:   0.21 kB
dist/assets/zoom-component-CkXT8Sb8.css    0.93 kB │ gzip:   0.39 kB
dist/assets/overlays-CAgzppIG.css          1.16 kB │ gzip:   0.57 kB
dist/assets/bpmn-elements-IhSsAQYd.js      0.90 kB │ gzip:   0.49 kB
dist/assets/plugins-by-name-DMSb-1I6.js    1.62 kB │ gzip:   0.81 kB
dist/assets/overlays-BcPzdzAo.js           1.84 kB │ gzip:   0.78 kB
dist/assets/zoom-component-CLCxYDxS.js     1.87 kB │ gzip:   0.77 kB
dist/assets/path-resolver-CCof-T0d.js      1.95 kB │ gzip:   0.86 kB
dist/assets/diagrams-BLV6aRRk.js         132.43 kB │ gzip:  35.77 kB
dist/assets/mxgraph-BIDOqb5W.js          837.19 kB │ gzip: 188.70 kB

ef7f787 final commit, after using the "import URL" support provided by vite (https://vitejs.dev/guide/assets#importing-asset-as-url)

dist/pages/overlays.html                                 1.46 kB │ gzip:   0.62 kB
dist/pages/path-resolver.html                            1.50 kB │ gzip:   0.66 kB
dist/pages/plugins-by-name.html                          1.64 kB │ gzip:   0.69 kB
dist/index.html                                          1.90 kB │ gzip:   0.83 kB
dist/assets/EC-purchase-orders-collapsed-CqhR9i-M.xml   14.53 kB │ gzip:   2.33 kB
dist/assets/index-D6XUam5J.css                           0.41 kB │ gzip:   0.25 kB
dist/assets/zoom-component-CkXT8Sb8.css                  0.93 kB │ gzip:   0.39 kB
dist/assets/overlays-CAgzppIG.css                        1.16 kB │ gzip:   0.57 kB
dist/assets/plugins-by-name-CTz9EDnE.js                  1.01 kB │ gzip:   0.61 kB
dist/assets/style-DWpUStZ-.js                            1.80 kB │ gzip:   0.65 kB
dist/assets/overlays-CIARiPBH.js                         1.84 kB │ gzip:   0.78 kB
dist/assets/zoom-component-BuGXA7d2.js                   1.87 kB │ gzip:   0.78 kB
dist/assets/path-resolver-CB_hjd-s.js                    1.95 kB │ gzip:   0.86 kB
dist/assets/diagrams-DEbLyIOz.js                       132.47 kB │ gzip:  35.81 kB
dist/assets/mxgraph-BIDOqb5W.js                        837.19 kB │ gzip: 188.70 kB

[sonarcloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarCloud

[tbouffard]

✔️ Tested locally with the development server
✔️ Tested with the surge preview environment