⛵ Auto deploy website to gh-pages

.github/workflows/website.yml

@@ -0,0 +1,35 @@
+name: 🕸️ Website deploy
+on:
+  push:
+    branches:
+      - main
+      - dev
+  pull_request:
+    branches:
+      - main
+      - dev
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - name: 📰 Checkout
+        uses: actions/checkout@v3
+
+      - name: ☊ Setup node
+        uses: actions/setup-node@v3
+        with:
+          node-version: '18'
+
+      - name: 🧶 Install dependencies with yarn
+        run: yarn install
+        working-directory: web
+
+      - name: 🏗️ Build files
+        run: yarn parcel build --public-url /moe src/index.html
+        working-directory: web
+
+      - name: ⛵ Deploy
+        uses: peaceiris/actions-gh-pages@v3
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: web/dist

web/src/Graph.js

@@ -22,6 +22,8 @@ import { testPosition, orderRadially, node, edge, graph } from './Collections'
 
 export var cy, eh, elements
 
+let cyGraph
+let isReadyToAddNodes = false
 let sortAlgos = [
   'grid',
   'circle',
@@ -71,8 +73,56 @@ export function Graph() {
           })
       )
       orderRadially()
+
+      //TODO: temp solution for now to get the graph from the url
+      isReadyToAddNodes = true
+      urlToGraph(window.location.href).then(urlGraph => {
+        cyGraph = urlGraph
+        m.redraw(true)
+      })
     },
     view: vnode => {
+      // Check if cy is ready and if the graph is populated
+      if (isReadyToAddNodes && cyGraph) {
+        cy.elements().remove()
+        // loop through nodes and edges and add them to cy using cy.add
+        for (let nodeId in cyGraph.nodes) {
+          let node = cyGraph.nodes[nodeId]
+          cy.add({
+            data: {
+              id: node.id,
+              name: node.label.toString(),
+              x: window.innerWidth / 2,
+              y: window.innerHeight / 2,
+            },
+          })
+        }
+        console.log('cy number of nodes: ' + cy.nodes().length)
+        for (let edgeId in cyGraph.edges) {
+          let edge = cyGraph.edges[edgeId]
+          cy.add({
+            data: {
+              id: id(),
+              source: edge.source,
+              target: edge.target,
+            },
+          })
+        }
+        console.log('cy number of edges: ' + cy.edges().length)
+        // apply the grid layout
+        cy.layout({
+          name: 'dagre',
+          padding: 5,
+          animate: true,
+          nodeDimensionsIncludeLabels: true,
+        }).run()
+        isReadyToAddNodes = false
+      } else {
+        // Check which object is not ready
+        if (!cy) console.log('cy not defined yet')
+        if (!cyGraph) console.log('cyGraph not populated yet')
+      }
+
       return m('.graph', {})
     },
   }
@@ -121,3 +171,37 @@ export function GraphSelector() {
     },
   }
 }
+
+async function urlToGraph(url) {
+  console.log('Start urlToGraph:')
+
+  // Get graph from codecarto
+  let urlAddress = url
+  urlAddress = urlAddress.replace('http://localhost:5000/#!/graph?url=', '')
+  console.log(urlAddress)
+  const codecartoAPI = `http://localhost:2000/polygraph/url_to_json?file_url=${urlAddress}`
+  console.log(codecartoAPI)
+
+  // Call codecarto API
+  let CCgraph
+  const response = await fetch(codecartoAPI)
+  console.log(response)
+
+  // Check if response is ok
+  if (response.ok) {
+    const responseData = await response.json()
+    console.log(responseData)
+    if (responseData.status == 200) {
+      CCgraph = responseData.results
+    } else {
+      console.log('Error with response data')
+    }
+  } else {
+    console.log('Error with response')
+  }
+
+  // Return graph
+  console.log(CCgraph)
+  console.log('End urlToGraph:')
+  return CCgraph
+}