Merge pull request #3 from Distributed-Noracle/develop

Develop

Author: pedela

.angular-cli.json

@@ -28,7 +28,7 @@
       "environments": {
         "dev": "environments/environment.ts",
         "prod": "environments/environment.prod.ts",
-        "las2peer": "environments/environments.las2peer.ts"
+        "las2peer": "environments/environment.las2peer.ts"
       }
     }
   ],

package.json

@@ -12,28 +12,28 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^4.4.3",
-    "@angular/cdk": "^2.0.0-beta.11",
-    "@angular/common": "^4.4.2",
-    "@angular/compiler": "^4.4.2",
-    "@angular/core": "^4.4.2",
-    "@angular/flex-layout": "^2.0.0-beta.9",
-    "@angular/forms": "^4.4.2",
-    "@angular/http": "^4.4.2",
-    "@angular/material": "^2.0.0-beta.11",
-    "@angular/platform-browser": "^4.4.2",
-    "@angular/platform-browser-dynamic": "^4.4.2",
-    "@angular/router": "^4.4.2",
-    "@codebakery/origami": "^1.3.2",
-    "angular-auth-oidc-client": "^1.3.12",
-    "core-js": "^2.4.1",
-    "d3-ng2-service": "^1.16.1",
-    "rxjs": "^5.1.0",
-    "zone.js": "^0.8.4"
+    "@angular/animations": "4.4.3",
+    "@angular/cdk": "2.0.0-beta.11",
+    "@angular/common": "4.4.3",
+    "@angular/compiler": "4.4.3",
+    "@angular/core": "4.4.3",
+    "@angular/flex-layout": "2.0.0-beta.9",
+    "@angular/forms": "4.4.3",
+    "@angular/http": "4.4.3",
+    "@angular/material": "2.0.0-beta.11",
+    "@angular/platform-browser": "4.4.3",
+    "@angular/platform-browser-dynamic": "4.4.3",
+    "@angular/router": "4.4.3",
+    "@codebakery/origami": "1.3.2",
+    "angular-auth-oidc-client": "1.3.12",
+    "core-js": "2.4.1",
+    "d3-ng2-service": "1.16.1",
+    "rxjs": "5.1.0",
+    "zone.js": "0.8.4"
   },
   "devDependencies": {
     "@angular/cli": "^1.4.2",
-    "@angular/compiler-cli": "^4.4.2",
+    "@angular/compiler-cli": "^4.4.3",
     "@types/jasmine": "2.5.38",
     "@types/node": "~6.0.60",
     "codelyzer": "~2.0.0",

src/app/graph-view/graph-view-page/graph-view-page.component.html

@@ -12,7 +12,7 @@
 <div #below>
   <md-radio-group *ngIf="!subscriptionInProgress"
     fxLayout="row" fxLayoutGap="20px" [(ngModel)]="interactionMode">
-    <md-radio-button *ngFor="let m of getInteractionModes()" [value]="m">
+    <md-radio-button color="primary" *ngFor="let m of getInteractionModes()" [value]="m">
       {{getInteractionModeLabel(m)}}
     </md-radio-button>
   </md-radio-group>

src/app/graph-view/graph-view-page/graph-view-page.component.ts

@@ -16,7 +16,7 @@ export class GraphViewPageComponent implements OnInit, OnDestroy {
   private below;
   private elementRef: ElementRef;
 
-  private subscriptionInProgress = false;
+  public subscriptionInProgress = false;
   private interactionMode = GraphInteractionMode.SelectAndNavigate;
   private height = 600;
   private width = 800;

src/app/graph-view/graph-view.module.ts

@@ -12,7 +12,8 @@ import {GraphViewService} from './graph-view/graph-view.service';
 import {FlexLayoutModule} from '@angular/flex-layout';
 import {SharedModule} from '../shared/shared.module';
 import {RelationPickerDialogComponent} from './relation-picker-dialog/relation-picker-dialog.component';
-import { CreateQuestionDialogComponent } from './create-question-dialog/create-question-dialog.component';
+import {CreateQuestionDialogComponent} from './create-question-dialog/create-question-dialog.component';
+import {VoteDialogComponent} from './vote-dialog/vote-dialog.component';
 
 @NgModule({
   imports: [
@@ -29,8 +30,9 @@ import { CreateQuestionDialogComponent } from './create-question-dialog/create-q
     SharedModule
   ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
-  declarations: [GraphViewComponent, GraphViewPageComponent, RelationPickerDialogComponent, CreateQuestionDialogComponent],
-  bootstrap: [RelationPickerDialogComponent, CreateQuestionDialogComponent],
+  declarations: [GraphViewComponent, GraphViewPageComponent, RelationPickerDialogComponent,
+    CreateQuestionDialogComponent, VoteDialogComponent],
+  bootstrap: [RelationPickerDialogComponent, CreateQuestionDialogComponent, VoteDialogComponent],
   exports: [GraphViewPageComponent],
   providers: [D3Service, GraphViewService]
 })

src/app/graph-view/graph-view/graph-data-model/edge.ts

@@ -1,26 +1,38 @@
 import {SimulationLinkDatum} from 'd3-force';
 import {GraphNode} from './graph-node';
 import {Relation} from '../../../shared/rest-data-model/relation';
+import {DrawUtil} from '../utils/draw-util';
 
 export class Edge implements SimulationLinkDatum<GraphNode> {
 
   public isSelected = false;
 
   constructor(public id: string,
               public source: string | number | GraphNode,
-              public target: string | number | GraphNode, public relation: Relation) {
+              public target: string | number | GraphNode,
+              public relation: Relation,
+              public relationAuthor: string) {
   }
 
   getDistance() {
     return (this.source as GraphNode).radius + (this.target as GraphNode).radius + 10;
   }
 
+  getRelationVotes() {
+    return (this.source as GraphNode).relationVotes.get(this.id);
+  }
+
   draw(context: CanvasRenderingContext2D) {
     if (this.relation.directed) {
       this.drawDirected(context);
     } else {
       this.drawUndirected(context);
     }
+    context.beginPath();
+    const dx = (this.target as GraphNode).x - (this.source as GraphNode).x;
+    const dy = (this.target as GraphNode).y - (this.source as GraphNode).y;
+    context.fillText(this.relationAuthor, (this.source as GraphNode).x + dx / 2, (this.source as GraphNode).y + dy / 2);
+    context.stroke();
   }
 
   drawDirected(context: CanvasRenderingContext2D) {
@@ -40,7 +52,9 @@ export class Edge implements SimulationLinkDatum<GraphNode> {
       context.lineTo(x - dx0 * arrowSize + dy0 * arrowSize, y - dy0 * arrowSize - dx0 * arrowSize);
     }
     context.lineWidth = this.isSelected ? 3 : 1;
-    context.strokeStyle = '#000';
+    const relationVotes = this.getRelationVotes();
+    context.strokeStyle = DrawUtil.getColorCodeForValueInScale(relationVotes.map(v => v.value).reduce((p, c) => p + c, 0),
+      -relationVotes.length, relationVotes.length);
     context.stroke();
   }
 
@@ -49,7 +63,9 @@ export class Edge implements SimulationLinkDatum<GraphNode> {
     context.moveTo((this.source as GraphNode).x, (this.source as GraphNode).y);
     context.lineTo((this.target as GraphNode).x, (this.target as GraphNode).y);
     context.lineWidth = this.isSelected ? 3 : 1;
-    context.strokeStyle = '#000';
+    const relationVotes = this.getRelationVotes();
+    context.strokeStyle = DrawUtil.getColorCodeForValueInScale(relationVotes.map(v => v.value).reduce((p, c) => p + c, 0),
+      -relationVotes.length, relationVotes.length);
     context.stroke();
   }
 }

src/app/graph-view/graph-view/graph-data-model/graph-interaction-mode.enum.ts

@@ -3,5 +3,5 @@ export enum GraphInteractionMode {
   DragAndZoom,
   AddQuestion,
   AddRelation,
-  Edit
+  EditAndAssess
 }

src/app/graph-view/graph-view/graph-data-model/graph-node.ts

@@ -1,12 +1,16 @@
 import {SimulationNodeDatum} from 'd3-force';
 import {Relation} from '../../../shared/rest-data-model/relation';
 import {Question} from '../../../shared/rest-data-model/question';
+import {QuestionVote} from '../../../shared/rest-data-model/question-vote';
+import {RelationVote} from '../../../shared/rest-data-model/relation-vote';
+import {DrawUtil} from '../utils/draw-util';
 
 export class GraphNode implements SimulationNodeDatum {
   private lines: string[];
   private textSize = 10;
   private bubbleScaleFactor = 1.25;
   public radius;
+  public relationVotes: Map<string, RelationVote[]> = new Map<string, RelationVote[]>();
 
   /**
    * Node’s current x-position
@@ -18,9 +22,14 @@ export class GraphNode implements SimulationNodeDatum {
   y?: number;
 
 
-  constructor(context: CanvasRenderingContext2D, public id: string, public question: Question,
-              public relations: Relation[], public isSelected = false) {
+  constructor(context: CanvasRenderingContext2D, public id: string,
+              public question: Question, public questionAuthor: string, public questionVotes: QuestionVote[],
+              public relations: Relation[], public relationAuthors: string[], relationVotes: RelationVote[][],
+              public isSelected = false) {
     this.lines = this.wrapText((s) => context.measureText(s).width);
+    for (let i = 0; i < relations.length; i++) {
+      this.relationVotes.set(relations[i].relationId, relationVotes[i] !== undefined ? relationVotes[i] : []);
+    }
   }
 
   public setLabel(label: string, context: CanvasRenderingContext2D) {
@@ -36,7 +45,8 @@ export class GraphNode implements SimulationNodeDatum {
     context.arc(this.x, this.y, this.radius / this.bubbleScaleFactor, 0, alpha);
     context.lineTo(this.x + Math.cos(alpha + beta / 2) * this.radius, this.y + Math.sin(alpha + beta / 2) * this.radius);
     context.arc(this.x, this.y, this.radius / this.bubbleScaleFactor, alpha + beta, 2 * Math.PI);
-    context.strokeStyle = '#000';
+    context.strokeStyle = DrawUtil.getColorCodeForValueInScale(this.questionVotes.map(v => v.value).reduce((p, c) => p + c, 0),
+      -this.questionVotes.length, this.questionVotes.length);
     context.lineWidth = this.isSelected ? 3 : 1;
     context.stroke();
     context.fillStyle = '#fff';
@@ -60,7 +70,7 @@ export class GraphNode implements SimulationNodeDatum {
   wrapText(measure: (string) => number) {
     const textHeight = this.getTextHeigth();
     const totalWidth = measure(this.question.text);
-    const words = this.question.text.split(/\s+/);
+    const words = [this.questionAuthor + ':'].concat(this.question.text.split(/\s+/));
     const longestWordLength =
       Math.ceil(measure(words.reduce((prev, cur, i) => measure(prev) > measure(cur) ? prev : cur)));
     const blankWidth = measure(' ');
@@ -102,12 +112,37 @@ export class GraphNode implements SimulationNodeDatum {
     }
   }
 
-  update(n: GraphNode) {
+  update(n: GraphNode): boolean {
+    if (this.isEqual(n)) {
+      return false;
+    }
     this.question = n.question;
+    this.relations = n.relations;
     this.lines = n.lines;
     this.radius = n.radius;
     this.textSize = n.textSize;
     this.bubbleScaleFactor = n.bubbleScaleFactor;
-    this.relations = n.relations;
+    this.questionVotes = n.questionVotes;
+    this.relationVotes = n.relationVotes;
+    return true;
+  }
+
+  private isEqual(n: GraphNode): boolean {
+    return this.question.questionId === n.question.questionId &&
+      this.question.timestampLastModified === n.question.timestampLastModified &&
+      this.relations.length === n.relations.length &&
+      this.relations.map(r => n.relations
+        .findIndex(r2 => r2.relationId === r.relationId && r2.timestampLastModified === r.timestampLastModified) !== -1)
+        .reduce((prev, cur) => prev && cur, true) &&
+      this.lines.map((l, i) => l === n.lines[i]).reduce((prev, cur) => prev && cur, true) &&
+      this.radius === n.radius &&
+      this.textSize === n.textSize &&
+      this.bubbleScaleFactor === n.bubbleScaleFactor &&
+      this.questionVotes.length === n.questionVotes.length &&
+      this.relations.map(r =>
+        this.relationVotes.get(r.relationId).length === n.relationVotes.get(r.relationId).length &&
+        this.relationVotes.get(r.relationId).map((v, i) => v.value === n.relationVotes.get(r.relationId)[i].value &&
+        v.voterAgentId === n.relationVotes.get(r.relationId)[i].voterAgentId).reduce((p, c) => p && c, true)
+      ).reduce((p, c) => p && c, true);
   }
 }

src/app/graph-view/graph-view/graph-data-model/network.ts

@@ -1,6 +1,5 @@
 import {GraphNode} from './graph-node';
 import {Edge} from './edge';
-import {Relation} from '../../../shared/rest-data-model/relation';
 /**
  * Created by bgoeschlberger on 28.09.2017.
  */
@@ -30,23 +29,23 @@ export class Network {
 
   public addOrUpdateNode(nodeToAdd: GraphNode): boolean {
     const nodeIndex = this.nodes.findIndex((n) => n.id === nodeToAdd.id);
-    let isAdd = true;
+    let hasChanged = false;
     if (nodeIndex !== -1) {
       const nodeToUpdate = this.nodes[nodeIndex];
-      nodeToUpdate.update(nodeToAdd);
+      hasChanged = nodeToUpdate.update(nodeToAdd);
       nodeToAdd = nodeToUpdate;
-      isAdd = false;
     } else {
       this.nodes.push(nodeToAdd);
+      hasChanged = true;
     }
-    nodeToAdd.relations.forEach((r) => {
+    nodeToAdd.relations.forEach((r, i) => {
       if (this.edges.findIndex((e) => e.id === r.relationId) === -1) {
         // edge not yet in network
         const node1 = this.nodes.find((n) => r.firstQuestionId === n.id);
         const node2 = this.nodes.find((n) => n.id === r.secondQuestionId);
         if (node1 !== undefined && node2 !== undefined) {
           // both nodes are in the network
-          this.edges.push(new Edge(r.relationId, node1, node2, r));
+          this.edges.push(new Edge(r.relationId, node1, node2, r, nodeToAdd.relationAuthors[i]));
           // update nodes if necessary
           if (node1.relations.findIndex((n) => n.relationId === r.relationId) === -1) {
             node1.relations.push(r);
@@ -57,14 +56,7 @@ export class Network {
         }
       }
     });
-    return isAdd;
-  }
-
-  public addRelationToNode(relation: Relation, node: GraphNode) {
-    if (relation.firstQuestionId === node.id || relation.secondQuestionId === node.id) {
-      node.relations.push(relation);
-      this.updateEdgesForNode(node);
-    }
+    return hasChanged;
   }
 
   public removeNode(node: GraphNode) {
@@ -90,7 +82,7 @@ export class Network {
   }
 
   private updateEdgesForNode(node: GraphNode) {
-    node.relations.forEach(relation => {
+    node.relations.forEach((relation, i) => {
       if (this.edges.findIndex(edge => edge.id === relation.relationId) === -1) {
         const outbound = relation.firstQuestionId === node.id;
         const otherNodeId = (outbound ? relation.secondQuestionId : relation.firstQuestionId);
@@ -100,7 +92,7 @@ export class Network {
             otherNode.relations.push(relation);
           }
           this.edges.push(new Edge(relation.relationId,
-            outbound ? node : otherNode, outbound ? otherNode : node, relation));
+            outbound ? node : otherNode, outbound ? otherNode : node, relation, node.relationAuthors[i]));
         }
       }
     });

src/app/graph-view/graph-view/graph-data-model/relation-type.enum.ts

@@ -1,6 +1,6 @@
 export enum RelationType {
   FollowUp,
-  Similarity
+  Link
 }
 
 

src/app/graph-view/graph-view/graph-data-model/update-data.ts

@@ -0,0 +1,19 @@
+import {RelationVote} from '../../../shared/rest-data-model/relation-vote';
+import {QuestionVote} from '../../../shared/rest-data-model/question-vote';
+import {Question} from '../../../shared/rest-data-model/question';
+import {Relation} from '../../../shared/rest-data-model/relation';
+
+/**
+ * Class to inform UI about data changes
+ * it contains data for one node and it's edges
+ * NOTE: relations, relationAuthors and relationVotes have to be in the same order!
+ * (i.e. relation[i], relationAuthors[i] and relationVotes[i] belong together!
+ */
+export class UpdateData {
+  question: Question;
+  questionAuthor: string;
+  questionVotes: QuestionVote[];
+  relations: Relation[];
+  relationAuthors: string[];
+  relationVotes: RelationVote[][];
+}