graph added, partial f

amirhakim · Oct 11, 2020 · 3fec452 · 3fec452
1 parent 91d80d0
commit 3fec452
Show file tree

Hide file tree

Showing 7 changed files with 99 additions and 34 deletions.
diff --git a/README.md b/README.md
@@ -2,16 +2,17 @@
 
 ## Amir's Notes
 
-1. side bar where you have 2 choices : add , view :
-    1. use routing to switch between these 
-    1. Add: the form to add a new person to the network, the friends field may have auto-complete/suggestion
-    1. View: search box for a person with auto-complete/suggestion, and graph once one is selected
-1. alternative view: complete view of all the friends in the network
-    1. we need to add details visualization to the nodes
-1. as it is designed now, having feature modules is not useful
-    1. we could argue that we can separate the parts where we do editing on the "person" and "friends" from the View parts, or at least the graph should be in it's own moduel. We would need to sync ngrx between both modules
+    1. side bar where you have 2 choices : add , view :
+        1. use routing to switch between these 
+        1. Add: the form to add a new person to the network, the friends field may have auto-complete/suggestion
+        1. View: search box for a person with auto-complete/suggestion, and graph once one is selected
+    1. alternative view: complete view of all the friends in the network
+        1. we need to add details visualization to the nodes
+    1. as it is designed now, having feature modules is not useful
+        1. we could argue that we can separate the parts where we do editing on the "person" and "friends" from the View parts, or at least the graph should be in it's own moduel. We would need to sync ngrx between both modules
 
 ## TODO
-1. naming the person a friend, then naming the connections/friends of the person as friends is very confusing
-1. fix deprecated packages and fix breaking changes
-1. ng build --prod and fix errors
+    1. naming the person a friend, then naming the connections/friends of the person as friends is very confusing
+    1. fix deprecated packages and fix breaking changes
+    1. ng build --prod and fix errors
+    1. setMinuSet() should be implemented in the Array.prototype
diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
@@ -2,15 +2,15 @@ import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 import { FriendAddComponent } from './friend/friend-add/friend-add.component';
 import { FriendViewComponent } from './friend/friend-view/friend-view.component';
-import { GraphComponent } from './friend/graph/graph.component';
+import { GraphBoxComponent } from './friend/graph-box/graph-box.component';
 
 
 const routes: Routes = [
   { path: '', redirectTo: 'home', pathMatch: 'full' },
   { path: 'home', component: FriendViewComponent },
   { path: 'list', component: FriendViewComponent },
   { path: 'add', component: FriendAddComponent },
-  { path: 'graph', component: GraphComponent}
+  { path: 'graph', component: GraphBoxComponent}
 ];
 
 @NgModule({

diff --git a/src/app/friend/graph-box/graph-box.component.html b/src/app/friend/graph-box/graph-box.component.html
@@ -1 +1,13 @@
-<p>graph-box works!</p>
+<app-graph
+  [nodes]="(friends$ | async)"
+  [edges]="(contacts$ | async)"
+></app-graph>
+
+<!-- <div>
+    nodes:
+    {{stringify(friends$ | async)}}
+  </div>
+  <div>
+    edges:
+    {{stringify(contacts$ | async)}}
+  </div> -->
diff --git a/src/app/friend/graph-box/graph-box.component.ts b/src/app/friend/graph-box/graph-box.component.ts
@@ -1,4 +1,13 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges, ViewChild } from '@angular/core';
+import * as d3 from 'd3';
+import { Contact } from 'src/app/models/contact/contact.model';
+import { Friend } from 'src/app/models/friend/friend.model';
+import { selectFriend, selectContacts } from '../store/selector/friend.selectors';
+import { FriendState } from '../store/reducer/friend.reducer';
+import {select, Store} from '@ngrx/store';
+import { Observable, combineLatest } from 'rxjs';
+import { mergeMap } from 'rxjs/operators';
+
 
 @Component({
   selector: 'app-graph-box',
@@ -7,9 +16,18 @@ import { Component, OnInit } from '@angular/core';
 })
 export class GraphBoxComponent implements OnInit {
 
-  constructor() { }
+  friends$: Observable<Friend[]>;
+  contacts$: Observable<Contact[]>;
+
+  constructor(
+    private store: Store<FriendState>
+  ) {
+    this.friends$ = this.store.pipe(select(selectFriend));
+    this.contacts$ = this.store.pipe(select(selectContacts));
+  }
 
   ngOnInit(): void {
   }
+  stringify = JSON.stringify
 
 }
diff --git a/src/app/friend/graph/graph.component.html b/src/app/friend/graph/graph.component.html
@@ -1,4 +1,5 @@
-<svg #graphContainer>
+<div>
+  <svg #graphContainer>
     <line
       *ngFor="let edge of graph.edges"
       [attr.x1]="edge[0].x"
@@ -22,6 +23,17 @@
     </text>
 
   </svg>
-<div>
-  {{stringify(friends$ | async)}}
-</div>
+  <div>
+    nodes:
+    {{stringify(graph.nodes)}}
+  </div>
+  <div>
+    edges:
+    {{stringify(graph.edges)}}
+  </div>
+
+  <div>
+    selected:
+    {{stringify(graph.selectedNodes)}}
+  </div>
+</div>
diff --git a/src/app/friend/graph/graph.component.scss b/src/app/friend/graph/graph.component.scss
@@ -0,0 +1,19 @@
+svg {
+    width: 400px;
+    height: 400px;
+    border: 1px solid green;
+
+    line {
+      stroke-width: 2;
+      stroke: lightgray;
+    }
+
+    circle {
+      fill: #88f;
+
+      &.selected {
+        fill: #f88;
+      }
+    }
+  }
+
diff --git a/src/app/friend/graph/graph.component.ts b/src/app/friend/graph/graph.component.ts
@@ -5,7 +5,8 @@ import { Friend } from 'src/app/models/friend/friend.model';
 import { selectFriend, selectContacts } from '../store/selector/friend.selectors';
 import { FriendState } from '../store/reducer/friend.reducer';
 import {select, Store} from '@ngrx/store';
-import { Observable } from 'rxjs';
+import { Observable, combineLatest } from 'rxjs';
+import { mergeMap } from 'rxjs/operators';
 
 
 
@@ -18,35 +19,35 @@ export class GraphComponent implements OnChanges, OnInit {
 
   // event for toggling a selection of a node
   @Output() select: EventEmitter<string> = new EventEmitter<string>();
-  @Input() friends: Friend[] = [];
-  @Input() selectedFriends: Friend[] = [];
-  @Input() contacts: Contact[] = [];
+  @Input() nodes: Friend[] = [];
+  @Input() selectedNodes: Friend[] = [];
+  @Input() edges: Contact[] = [];
   @ViewChild('graphContainer') graphContainer;
 
-  friends$: Observable<Friend[]>;
-  contacts$: Observable<Contact[]>;
 
   constructor(
-    private store: Store<FriendState>
   ) {
-    this.friends$ = this.store.pipe(select(selectFriend));
-    this.contacts$ = this.store.pipe(select(selectContacts));
    }
 
   private simulation = d3.forceSimulation();
 
   ngOnInit(): void {
+
   }
 
   ngOnChanges(changes: SimpleChanges): void {
+
+    // run this only when nodes changed
+    if (!changes.nodes) return;
+
     const nodes = this.simulation.nodes();
 
-    const nodesToAdd = setMinusSet(this.friends, nodes).map(node => ({ ...node }));
-    const nodesToRemove = setMinusSet(nodes, this.friends);
+    const nodesToAdd = setMinusSet(this.nodes, nodes).map(node => ({ ...node }));
+    const nodesToRemove = [setMinusSet(nodes, this.nodes)];
 
     const updatedNodes = setMinusSet(nodes, nodesToRemove).concat(nodesToAdd);
 
-    const edges = this.contacts.map(edge => ({ source: updatedNodes[edge.fromId], target: updatedNodes[edge.toId] }))
+    const edges = this.edges.map(edge => ({ source: edge.fromId, target: edge.toId }))
 
     this.simulation.nodes(updatedNodes)
       .force('charge', d3.forceManyBody())
@@ -58,14 +59,16 @@ export class GraphComponent implements OnChanges, OnInit {
 
   get graph() {
     const nodes = this.simulation.nodes();
-    const selectedNodes = nodes.filter(node => this.selectedFriends.map(selectedNode => selectedNode.id).includes(node['id']))
+    const selectedNodes = [];
+
+    const edges = this.edges.map(edge => ([edge.fromId, edge.toId]))
 
-    const edges = this.contacts.map(edge => ([nodes[edge.fromId], nodes[edge.toId]]))
     return { nodes, edges, selectedNodes }
   }
   stringify = JSON.stringify
 }
 
+// todo
 function setMinusSet(a: any[], b: any[]): any[] {
   return a.filter(ael => !b.map(bel => bel.id).includes(ael.id))
 }