diff --git a/.github/workflows/website.yml b/.github/workflows/website.yml new file mode 100644 index 0000000..6408ccd --- /dev/null +++ b/.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 diff --git a/web/src/Graph.js b/web/src/Graph.js index 25750c6..093a502 100644 --- a/web/src/Graph.js +++ b/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 +}