Merge pull request #5 from Distributed-Noracle/develop

Develop

Author: Peter de Lange

package-lock.json

@@ -8,6 +8,10 @@
     font-weight: bold;
 }
 
+.bw {
+    background-color: white;
+}
+
 .memberList {
     padding-top: 15px;
     right: 10px;

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

@@ -3,24 +3,24 @@
   <mat-accordion displayMode="flat" multi="true">
     <mat-expansion-panel expanded="true">
       <mat-expansion-panel-header expandedHeight="30px" collapsedHeight="30px">
-        Participants
+        <span class="bw">Participants</span>
       </mat-expansion-panel-header>
       <ul>
-        <li *ngFor="let m of spaceMembers">{{m}}</li>
+        <li *ngFor="let m of spaceMembers"><span class="bw">{{m}}</span></li>
       </ul>
     </mat-expansion-panel>
 
     <mat-expansion-panel>
       <mat-expansion-panel-header expandedHeight="30px" collapsedHeight="30px">
-        Help
+        <span class="bw">Help</span>
       </mat-expansion-panel-header>
       <ul>
-        <li><md-icon style="font-weight: bold">chat_bubble_outline</md-icon> selected / <md-icon>chat_bubble_outline</md-icon> deselected</li>
-        <li><md-icon style="color: green">chat_bubble_outline</md-icon> rated positively / <md-icon style="color: rgb(255, 0, 0)">chat_bubble_outline</md-icon> rated negatively</li>
-        <li><span style="font-weight: bold">>>></span> follow-up question</li>
-        <li><span style="font-weight: bold">――</span> related question</li>
-        <li>―――――――――――――――――――――</li>
-        <li>More questions? <a href="mailto:noracle@dbis.rwth-aachen.de">noracle@dbis.rwth-aachen.de</a></li>
+        <li><span class="bw"><md-icon style="font-weight: bold">chat_bubble_outline</md-icon> selected / <md-icon>chat_bubble_outline</md-icon> deselected</span></li>
+        <li><span class="bw"><md-icon style="color: green">chat_bubble_outline</md-icon> rated positively / <md-icon style="color: rgb(255, 0, 0)">chat_bubble_outline</md-icon> rated negatively</span></li>
+        <li><span class="bw"><span style="font-weight: bold">>>></span> follow-up question</span></li>
+        <li><span class="bw"><span style="font-weight: bold">――</span> related question</span></li>
+        <li><span class="bw">―――――――――――――――――――――</span></li>
+        <li><span class="bw">More questions? <a href="mailto:noracle@dbis.rwth-aachen.de">noracle@dbis.rwth-aachen.de</a></span></li>
       </ul>
     </mat-expansion-panel>    
   </mat-accordion>       

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

@@ -31,7 +31,7 @@ export class GraphViewPageComponent implements OnInit, OnDestroy {
     this.height = (window.innerHeight
       - this.graphContainer.nativeElement.getBoundingClientRect().top
       - this.below.nativeElement.getBoundingClientRect().height) * 0.9;
-    this.width = window.innerWidth * 0.9;
+    this.width = window.innerWidth * 0.95;
   }
 
   constructor(elementRef: ElementRef, private activatedRoute: ActivatedRoute,
@@ -98,8 +98,8 @@ export class GraphViewPageComponent implements OnInit, OnDestroy {
         return 'Add Question';
       case 'AddRelation':
         return 'Add Relation';
-      case 'EditAndAssess':
-        return 'Edit/Assess';
+      case 'Inspect':
+        return 'Vote/Edit';
     }
   }
 }

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

@@ -14,7 +14,9 @@ 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 {VoteDialogComponent} from './vote-dialog/vote-dialog.component';
+import {InspectDialogComponent} from './inspect-dialog/inspect-dialog.component';
+import {VoteDonutComponent, ItemDirective} from './vote-donut/vote-donut.component';
+import {InspectEdgeDialogComponent} from './inspect-edge-dialog/inspect-edge-dialog.component';
 
 @NgModule({
   imports: [
@@ -34,8 +36,11 @@ import {VoteDialogComponent} from './vote-dialog/vote-dialog.component';
   ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   declarations: [GraphViewComponent, GraphViewPageComponent, RelationPickerDialogComponent,
-    CreateQuestionDialogComponent, VoteDialogComponent],
-  bootstrap: [RelationPickerDialogComponent, CreateQuestionDialogComponent, VoteDialogComponent],
+    CreateQuestionDialogComponent, InspectDialogComponent, VoteDonutComponent,
+    ItemDirective,
+    InspectEdgeDialogComponent],
+  bootstrap: [RelationPickerDialogComponent, CreateQuestionDialogComponent,
+    InspectDialogComponent, VoteDonutComponent, InspectEdgeDialogComponent],
   exports: [GraphViewPageComponent],
   providers: [D3Service, GraphViewService]
 })

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

@@ -2,6 +2,7 @@ import {SimulationLinkDatum} from 'd3-force';
 import {GraphNode} from './graph-node';
 import {Relation} from '../../../shared/rest-data-model/relation';
 import {DrawUtil} from '../utils/draw-util';
+import { RelationType } from './relation-type.enum';
 
 export class Edge implements SimulationLinkDatum<GraphNode> {
 
@@ -24,7 +25,7 @@ export class Edge implements SimulationLinkDatum<GraphNode> {
   }
 
   draw(context: CanvasRenderingContext2D) {
-    if (this.relation.directed) {
+    if (this.relation.name === 'FollowUp') {
       this.drawDirected(context);
     } else {
       this.drawUndirected(context);

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

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

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

@@ -11,6 +11,7 @@ export class GraphNode implements SimulationNodeDatum {
   private bubbleScaleFactor = 1.25;
   public radius;
   public relationVotes: Map<string, RelationVote[]> = new Map<string, RelationVote[]>();
+  public relations: Relation[];
 
   /**
    * Node’s current x-position
@@ -24,8 +25,9 @@ export class GraphNode implements SimulationNodeDatum {
 
   constructor(context: CanvasRenderingContext2D, public id: string,
     public question: Question, public questionAuthor: string, public questionVotes: QuestionVote[],
-    public relations: Relation[], public relationAuthors: string[], relationVotes: RelationVote[][],
+    relations: Relation[], public relationAuthors: string[], relationVotes: RelationVote[][],
     public isSelected = false, public isSeed = false) {
+    this.relations = relations.slice(0);
     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] : []);
@@ -147,7 +149,7 @@ export class GraphNode implements SimulationNodeDatum {
       return false;
     }
     this.question = n.question;
-    this.relations = n.relations;
+    this.relations = n.relations.splice(0);
     this.lines = n.lines;
     this.radius = n.radius;
     this.textSize = n.textSize;
@@ -162,18 +164,17 @@ export class GraphNode implements SimulationNodeDatum {
       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) &&
+      JSON.stringify(this.relations) === JSON.stringify(n.relations) &&
       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.questionVotes.map((v, i) => v.value === n.questionVotes[i].value).reduce((p, c) => p && c, true) &&
       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)
+        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/graph-node.ts

@@ -1,5 +1,6 @@
 import {GraphNode} from './graph-node';
 import {Edge} from './edge';
+import { Relation } from '../../../shared/rest-data-model/relation';
 /**
  * Created by bgoeschlberger on 28.09.2017.
  */
@@ -39,7 +40,12 @@ export class Network {
       hasChanged = true;
     }
     nodeToAdd.relations.forEach((r, i) => {
-      if (this.edges.findIndex((e) => e.id === r.relationId) === -1) {
+      const index = this.edges.findIndex((e) => e.id === r.relationId);
+      const needsUpdate = index !== -1 && (!this.edges[index].relation.equals || !this.edges[index].relation.equals(r));
+      if (needsUpdate) {
+        this.edges.splice(index, 1);
+      }
+      if (index === -1 || needsUpdate) {
         // 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);

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

@@ -15,6 +15,7 @@ import {AddRelationBehavior} from './interaction-behaviors/add-relation-behavior
 import {Subscription} from 'rxjs/Subscription';
 import {MdDialog} from '@angular/material';
 import {AgentService} from '../../shared/agent/agent.service';
+import {QuestionVoteService} from '../../shared/question-vote/question-vote.service';
 import {EdgeInteractionBehavior} from './interaction-behaviors/edge-interaction-behavior';
 import {EditRelationBehavior} from './interaction-behaviors/edit-relation-behavior';
 import {UpdateData} from './graph-data-model/update-data';
@@ -46,7 +47,8 @@ export class GraphViewComponent implements OnInit, OnChanges, OnDestroy {
 
 
   constructor(private graphViewService: GraphViewService, private agentService: AgentService,
-              private d3Service: D3Service, private dialog: MdDialog) {
+              private questionVoteService: QuestionVoteService, private d3Service: D3Service, 
+              private dialog: MdDialog) {
     this.d3 = d3Service.getD3();
     this.transform = this.d3.zoomIdentity;
   }
@@ -82,8 +84,6 @@ export class GraphViewComponent implements OnInit, OnChanges, OnDestroy {
       this.network.getNodes().forEach((node) => {
         node.isSelected = (this.selectedQuestions.indexOf(node.id) !== -1);
       });
-      // this.d3Sim.force('center', this.d3.forceCenter(this.width / 2, this.height / 2));
-      // this.d3Sim.alpha(1).restart();
       this.updateInteractionMode();
     }
   }
@@ -129,21 +129,24 @@ export class GraphViewComponent implements OnInit, OnChanges, OnDestroy {
       // no change
       return;
     }
+
     if (this.interactionMode === GraphInteractionMode.SelectAndNavigate) {
       // TODO: review: a new behavior every time? maybe use services?
       this.setSelectionBehaviors(new ChangeNodeSelectionBehavior(this.network, this.graphViewService), null);
     } else if (this.interactionMode === GraphInteractionMode.AddQuestion) {
       this.setSelectionBehaviors(new AddChildNodeBehavior(this.graphViewService, this.dialog), null);
     } else if (this.interactionMode === GraphInteractionMode.AddRelation) {
       this.setSelectionBehaviors(new AddRelationBehavior(this.graphViewService, this.dialog), null);
-    } else if (this.interactionMode === GraphInteractionMode.EditAndAssess) {
+    } else if (this.interactionMode === GraphInteractionMode.Inspect) {
       this.setSelectionBehaviors(
         new EditQuestionBehavior(this.graphViewService, this.agentService, this.dialog),
         new EditRelationBehavior(this.graphViewService, this.agentService, this.dialog)
       );
     } else {
       this.setDragAndZoomBehavior();
     }
+
+    this.activatedInteractionMode = this.interactionMode;
   }
 
   private setDragAndZoomBehavior() {