Skip to content

Commit

Permalink
feat(demo): introduce a Home page for all demos (#60)
Browse files Browse the repository at this point in the history
It introduces the projects and list all available demos. For now, we
have a single demo but this prepares the others that are coming soon.
  • Loading branch information
tbouffard committed Aug 19, 2023
1 parent cdd25d3 commit b69d132
Show file tree
Hide file tree
Showing 11 changed files with 150 additions and 25 deletions.
4 changes: 2 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ Running the demo only:
- Build the lib: `npm run build -w packages/addons`
- Run the demo: `npm run dev -w packages/demo`. The demo is accessible at http://localhost:5173/

Develop in the lib and live update the demo
Develop the lib and live update the demo
- run `npm run dev`


Expand Down Expand Up @@ -95,7 +95,7 @@ Create a new GitHub release by following the [GitHub help](https://help.github.c

## ⚡ Powered by

<img src="docs/github-logo.svg" alt="GitHub logo" title="GitHub Pages" width="110"/>
<img src="packages/demo/public/assets/github-logo.svg" alt="GitHub logo" title="GitHub Pages" width="110"/>

**[GitHub Pages](https://pages.github.com/)** (<kbd>demo</kbd> live environment)

Expand Down
2 changes: 1 addition & 1 deletion packages/addons/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ Limitations

### `PathResolver`

Infer paths. Currently, only infer edges/flows given a list of flow node ids.
Infer BPMN path. Currently, only infer edges/flows given a list of flow node ids.

**WARNING**: this is front-end processing. It's more efficient for this type of processing to be carried out in the backend.
Use it to bypass the limitations of the tools and algorithms provided in the backend.
Expand Down
2 changes: 2 additions & 0 deletions packages/demo/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,3 +3,5 @@
The demo has been initialized using [bpmn-visualization-demo-template](https://github.com/process-analytics/bpmn-visualization-demo-template/).

See the main [README](../../README.md) for development setup.

The list of features demonstrated is available in [index.html](./index.html).
51 changes: 32 additions & 19 deletions packages/demo/index.html
Original file line number Diff line number Diff line change
@@ -1,24 +1,37 @@
<!DOCTYPE html>
<html lang="en">
<head>
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/logo.svg" />
<link rel="icon" type="image/svg+xml" href="/assets/logo.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>bpmn-visualization demo template</title>
<script type="module" src="src/index.ts"></script>
</head>
<body>
<header>
<img src="/logo.svg" id="logo" alt="The Process Analytics project logo" class="logo">
<h1>PathResolver demo</h1>
</header>
<section class="presentation">
<div class="description">Select or deselect BPMN flow nodes, then compute the missing flows in the path.</div>
<div class="controls">
<button id="btn-compute-path">Compute path</button>
<button id="bt-clear">Clear</button>
</div>
</section>
<div id="bpmn-container"></div>
</body>
<title>bv-experimental-add-ons</title>
<link rel="stylesheet" href="/src/index.css" type="text/css">
</head>
<body>
<header>
<img src="/assets/logo.svg" id="logo" alt="The Process Analytics project logo" class="logo">
<h1>bv-experimental-add-ons</h1>
</header>
<section class="presentation">
Welcome to <code>bv-experimental-add-ons</code>.
<p>
<code>bv-experimental-add-ons</code> provides new experimental features for <a href="https://github.com/process-analytics/bpmn-visualization-js" target="_blank">bpmn-visualization</a>.
<p>

<div>
<div class="source-code">
<span>Source code:</span>
<a href="https://github.com/process-analytics/bv-experimental-add-ons" target="_blank" class="gh-logo" title="Go to the bv-experimental-add-ons GitHub repository"><img src="/assets/github-logo.svg" id="gh-logo" alt="The GitHub logo"></a>
</div>
<code>bpmn-visualization</code> examples: <a href="https://cdn.statically.io/gh/process-analytics/bpmn-visualization-examples/master/examples/index.html" target="_blank"><i>⏩ live environment</i></a>
</div>

</section>
<section class="demos">
<h1>Available demos</h1>
<ul>
<li><a href="./pages/path-resolver.html">PathResolver</a>: Infer path after selecting some flow nodes.</li>
</ul>
</section>
</body>
</html>
24 changes: 24 additions & 0 deletions packages/demo/pages/path-resolver.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/assets/logo.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>bv-addons PathResolver demo</title>
<script type="module" src="/src/path-resolver.ts"></script>
</head>
<body>
<header>
<a href="../"><img src="/assets/logo.svg" id="logo" alt="The Process Analytics project logo" class="logo" title="Back to home"></a>
<h1>PathResolver demo</h1>
</header>
<section class="presentation">
<div class="description">Select or deselect BPMN flow nodes, then compute the missing flows in the path.</div>
<div class="controls">
<button id="btn-compute-path">Compute path</button>
<button id="bt-clear">Clear</button>
</div>
</section>
<div id="bpmn-container"></div>
</body>
</html>
File renamed without changes
File renamed without changes
48 changes: 48 additions & 0 deletions packages/demo/src/index.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
/*TODO duplicated with path-resolver.css*/
:root {
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
font-weight: 400;
line-height: 1.5;
}

body {
/*TODO duplicated with path-resolver.css*/
/*margin: 0;*/
min-width: 320px;
min-height: 100vh;
color: #2c3e50;
/*display: flex;*/
/*place-items: center;*/
/*flex-direction: column;*/
/* Specific */
margin-left: 2rem;
margin-top: .5rem;
}

/*TODO duplicated with path-resolver.css*/
header {
display: flex;
align-items: center;
/*justify-content: space-evenly;*/
}

/*TODO duplicated with path-resolver.css*/
.logo {
height: 3rem;
width: 3rem;
margin-right: .5rem;
}

.source-code {
display: flex;
align-items: center;
}

.gh-logo {
display: flex;
text-decoration: none;
margin-left: .5rem;
}
.gh-logo img {
width: 2rem;
}
File renamed without changes.
Original file line number Diff line number Diff line change
Expand Up @@ -14,15 +14,15 @@ See the License for the specific language governing permissions and
limitations under the License.
*/

import './style.css';
import './path-resolver.css';
import {BpmnElement, BpmnVisualization, FitType} from 'bpmn-visualization';
import {PathResolver, ShapeUtil} from "@process-analytics/bv-experimental-add-ons";
// This is simple example of the BPMN diagram, loaded as string. The '?.raw' extension support is provided by Vite.
// For other load methods, see https://github.com/process-analytics/bpmn-visualization-examples
// eslint-disable-next-line n/file-extension-in-import -- Vite syntax
import diagram from './diagram.bpmn?raw';

// Instantiate BpmnVisualization, pass the container HTMLElement - present in index.html
// Instantiate BpmnVisualization, pass the container HTMLElement - present in path-resolver.html
const bpmnVisualization = new BpmnVisualization({
container: 'bpmn-container',
});
Expand All @@ -40,7 +40,6 @@ const registerSelectedBpmnElement = (id: string): boolean => {
selectedBpmnElements.add(id);
return true;
}

const computedFlows: string[] = [];

function computePath() {
Expand Down
39 changes: 39 additions & 0 deletions packages/demo/vite.config.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
/*
Copyright 2023 Bonitasoft S.A.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/

import { resolve } from 'node:path';
import { defineConfig } from 'vite';

export default defineConfig(() => {
return {
build: {
rollupOptions: {
input: {
// TODO compute the list of HTML pages automatically
index: resolve(__dirname, 'index.html'),
'path-resolver': resolve(__dirname, 'pages/path-resolver.html'),
},
output: {
manualChunks: {
// put mxgraph code in a dedicated file.
mxgraph: ['mxgraph'],
},
},
},
chunkSizeWarningLimit: 838, // mxgraph
},
};
});

0 comments on commit b69d132

Please sign in to comment.