Project: add svetle + some UI

package.json

@@ -24,13 +24,18 @@
   "dependencies": {
     "3d-force-graph": "^1.67.6",
     "lodash": "^4.17.20",
+    "pug": "^3.0.2",
     "three": "^0.123.0"
   },
   "devDependencies": {
     "@shopify/eslint-plugin": "^39.0.3",
     "@types/lodash": "^4.14.165",
     "@typescript-eslint/eslint-plugin": "^4.10.0",
     "@typescript-eslint/parser": "^4.10.0",
+    "@tsconfig/svelte": "^1.0.10",
+    "@types/node": "^14.11.1",
+    "svelte-check": "^1.0.46",
+    "svelte-preprocess": "^4.3.0",
     "clean-webpack-plugin": "^3.0.0",
     "css-loader": "^5.0.1",
     "eslint": "^7.15.0",
@@ -40,10 +45,14 @@
     "sass": "^1.30.0",
     "sass-loader": "^10.1.0",
     "style-loader": "^2.0.0",
+    "svelte": "^3.31.2",
+    "svelte-loader": "^3.0.0",
     "ts-loader": "^8.0.12",
+    "tslib": "^2.0.1",
     "typescript": "^4.1.3",
     "webpack": "^5.10.3",
     "webpack-cli": "^4.2.0",
-    "webpack-dev-server": "^3.11.0"
+    "webpack-dev-server": "^3.11.0",
+    "cross-env": "^7.0.3"
   }
 }

src/App.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import GraphRendering from "./GraphRendering"
+	import GraphControls from "./GraphControls"
+</script>
+
+<main>
+    <GraphRendering/>
+    <GraphControls/>
+</main>
+
+<style lang="sass">
+    main
+      position: relative
+</style>

src/GraphControls.svelte

@@ -0,0 +1,74 @@
+<script lang="ts">
+    import {ALL_RULES} from "./hypergraphs/rules";
+    import HyperGraphRule from "./hypergraphs/hyperGraphRule";
+    import {activeRule, ruleProgress} from "./stores";
+
+    let rules: Array<HyperGraphRule> = ALL_RULES;
+
+</script>
+
+<section class="controls">
+    <div class="controls-in">
+        {#each rules as rule}
+            <div class="controls-item" on:click={() => activeRule.set(rule)}>
+                <p>{rule.name}</p>
+                <div class="controls-item-time">
+                    {#if rule === $activeRule}
+                        <span style="width: {$ruleProgress}%"></span>
+                    {/if}
+                </div>
+            </div>
+        {/each}
+    </div>
+</section>
+
+<style lang="sass">
+    @import "styles/variables"
+
+    .controls
+        position: absolute
+        top: 0
+        left: 0
+        height: 100%
+        width: 100%
+        display: flex
+        justify-content: flex-end
+        align-items: center
+        pointer-events: none
+
+        &-in
+          max-width: 275px
+          width: 100%
+          margin-right: 60px
+          pointer-events: all
+
+        &-item
+          position: relative
+          width: 100%
+          color: $c-main
+          cursor: pointer
+
+          p
+            margin: 0
+            padding: 15px 0 5px
+            font-size: 18px
+            font-family: 'Avenir', serif
+
+          &-time
+            position: absolute
+            left: 0
+            bottom: 0
+            width: 100%
+            height: 2px
+            border-radius: 3px
+            border: 1px $c-main solid
+
+            span
+              display: block
+              width: 1px
+              height: 100%
+              background-color: $c-main
+
+
+</style>
+

src/GraphRendering.svelte

@@ -0,0 +1,88 @@
+<script lang="ts">
+    import ForceGraph3D, {ForceGraph3DInstance} from '3d-force-graph';
+	import "./styles/style.sass";
+	import HyperGraph from "./hypergraphs/hyperGraph";
+    import {MathUtils} from "three";
+    import generateUUID = MathUtils.generateUUID;
+    import HyperGraphRule from "./hypergraphs/hyperGraphRule";
+    import {activeRule, currentTick, ruleProgress} from "./stores";
+    import {onMount} from "svelte";
+
+    const EXPANDED_EDGES_SIGNATURE: string = 'expanded';
+    const EXPANDED_EDGES_COLOR: string = 'rbga(0,0,0,0)';
+
+    interface GraphData {
+        nodes: object[],
+        links: object[],
+    }
+
+    // * star expansion algorithm for converting hypergraphs to graphs
+    function convertToGraph(hyperGraph: HyperGraph): GraphData {
+        let result: GraphData  = {nodes: [], links: []};
+
+        for (let i of hyperGraph.nodes) {
+            result.nodes.push({id: i});
+        }
+
+        for (let edge of hyperGraph.edges){
+            if(edge.length >= 3) {
+                let newNodeId = generateUUID();
+                result.nodes.push({id: newNodeId, [EXPANDED_EDGES_SIGNATURE]: EXPANDED_EDGES_COLOR});
+
+                for(let i of edge) {
+                    result.links.push({source: i, target: newNodeId})
+                }
+            }
+
+            if(edge.length == 2) {
+                result.links.push({source: edge[0], target: edge[1]})
+            }
+
+            if(edge.length < 2) {
+                throw Error('Edge must have at least two nodes');
+            }
+        }
+
+        return result;
+    }
+
+    let interval;
+    function renderGraph(graph: ForceGraph3DInstance, rule: HyperGraphRule, speed: number) {
+        clearInterval(interval);
+        ruleProgress.set(0, {
+            duration: 0
+        });
+        currentTick.set(1);
+
+        let graphData = rule.optimalInitialPositions;
+        graph.graphData(convertToGraph(graphData));
+
+        interval = setInterval(() => {
+            if($currentTick >= rule.optimalTicksAmount) {
+                clearInterval(interval);
+            }
+
+            graphData = rule.apply(graphData);
+            graph.graphData(convertToGraph(graphData));
+            graph.zoomToFit(speed, 200);
+            ruleProgress.set((100 / rule.optimalTicksAmount) * $currentTick);
+            currentTick.update(n => n + 1);
+        }, speed);
+    }
+
+    onMount(async () => {
+        const element = document.getElementById('graph-rendering');
+        const graph = ForceGraph3D()
+        (element)
+            .linkOpacity(0.5)
+            .nodeColor(EXPANDED_EDGES_SIGNATURE);
+
+        activeRule.subscribe(activeRule => {
+            renderGraph(graph, activeRule, 750);
+        })
+    })
+</script>
+
+
+<section id="graph-rendering">
+</section>