WIP Sophie Muller

projects/graph/src/App.js

@@ -3,8 +3,8 @@ import { Graph } from './graph';
 import './App.css';
 
 // !!! IMPLEMENT ME
-// const canvasWidth = 
-// const canvasHeight = 
+ const canvasWidth = 750;
+ const canvasHeight = 600;
 
 /**
  * GraphView
@@ -27,6 +27,14 @@ class GraphView extends Component {
   /**
    * Render the canvas
    */
+  getRandomColor() {
+    let color = '#';
+    let letters = 'ABCDEF0123456789';
+    for (let i = 0; i < 6; i++) {
+      color += letters[Math.floor(Math.random() * 16)];
+    }
+    return color;
+  }
   updateCanvas() {
     let canvas = this.refs.canvas;
     let ctx = canvas.getContext('2d');
@@ -35,13 +43,47 @@ class GraphView extends Component {
     ctx.fillStyle = 'white';
     ctx.fillRect(0, 0, canvasWidth, canvasHeight);
 
+    const connectedGroups = this.props.graph.getConnectedComponents();
+
     // !!! IMPLEMENT ME
     // compute connected components
     // draw edges
     // draw verts
     // draw vert values (labels)
+    this.props.graph.dump();
+    connectedGroups.forEach(group => {
+      const groupColor = this.getRandomColor();
+      group.forEach(vert => {
+        vert.edges.forEach(edge => {
+          ctx.beginPath();
+          ctx.moveTo(vert.pos.x, vert.pos.y);
+          ctx.lineTo(edge.destination.pos.x, edge.destination.pos.y)
+          ctx.strokeStyle = groupColor;
+          ctx.stroke();
+        })
+      })
+
+      group.forEach(vert => {
+        ctx.beginPath();
+        ctx.arc(vert.pos.x, vert.pos.y, 10, 0, 2 * Math.PI);
+        ctx.fillStyle = groupColor;
+        ctx.fill();
+        ctx.strokeStyle = 'black';
+        ctx.stroke();
+
+        ctx.fillStyle = 'black';
+        ctx.font = '10px Arial';
+        ctx.textAlign = 'center';
+        ctx.textBaseline = 'middle';
+        ctx.fillText(vert.value, vert.pos.x, vert.pos.y);
+      });
+
+    });
+
+
   }
 
+
   /**
    * Render
    */
@@ -64,6 +106,9 @@ class App extends Component {
 
     // !!! IMPLEMENT ME
     // use the graph randomize() method
+    this.state.graph.randomize(4, 5, 150);
+    this.state.graph.getConnectedComponents();
+
   }
 
   render() {

projects/graph/src/graph.js

@@ -3,13 +3,25 @@
  */
 export class Edge {
   // !!! IMPLEMENT ME
+
+  constructor(destination, weight = 1) {
+    this.destination = destination;
+    this.weight = weight;
+    // console.log('used the edge ctor');
+  }
 }
 
 /**
  * Vertex
  */
 export class Vertex {
   // !!! IMPLEMENT ME
+  constructor(value = 'v0', pos = { x: 0, y: 0 }) {
+    this.edges = [];
+    this.value = value;
+    this.pos = pos;
+    // console.log('used the vertex ctor');
+  }
 }
 
 /**
@@ -18,6 +30,8 @@ export class Vertex {
 export class Graph {
   constructor() {
     this.vertexes = [];
+    this.queue = [];
+    this.currentFoundArr = [];
   }
 
   /**
@@ -111,12 +125,38 @@ export class Graph {
    */
   bfs(start) {
     // !!! IMPLEMENT ME
+
+    const connectedQueue = [start];
+    const connectedVerts = [];
+
+    while (connectedQueue.length > 0) {
+      const currentVert = connectedQueue.shift();
+      if (currentVert.found) continue;
+      else {
+        currentVert.found = true;
+        connectedVerts.push(currentVert);
+        currentVert.edges.forEach(edge => {
+          if (!edge.destination.found) {
+            connectedQueue.push(edge.destination);
+          }
+        })
+      }
+    }
+    return connectedVerts;
   }
 
   /**
    * Get the connected components
    */
   getConnectedComponents() {
     // !!! IMPLEMENT ME
+    const ccList = [];
+
+    for (let vertex of this.vertexes) {
+      if (vertex.found === false) {
+        ccList.push(this.dfs(vertex));
+      }
+    }
+    return ccList;
   }
 }