Merge pull request #5 from Distributed-Noracle/develop

Develop

Author: pedela

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:[email protected]">[email protected]</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:[email protected]">[email protected]</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() {

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

@@ -205,17 +205,22 @@ export class GraphViewService {
 
   private fetchAll(spaceId: string) {
     // load all questions and all relations of the space
-    const questionsAndRelationsPromise = Promise.all([this.questionService.getQuestionsOfSpace(spaceId).then((res) => {
-      this.questions = res;
-      const seedIndex = this.observedQuestionIds.indexOf('seed');
-      if (seedIndex !== -1 && this.questions.length > 0) {
-        this.observedQuestionIds.splice(seedIndex, 1);
-        this.observedQuestionIds.push(this.questions[0].questionId);
-      }
-      return this.questions;
-    }),
-      this.relationService.getRelationsOfSpace(spaceId).then((res) =>
-        this.relations = res)]);
+    const questionsAndRelationsPromise = Promise.all([
+      this.questionService.getQuestionsOfSpace(spaceId).then((res) => {
+        this.questions = res;
+        this.questions.forEach(q => this.questionVotes.set(q.questionId, q.votes));
+        const seedIndex = this.observedQuestionIds.indexOf('seed');
+        if (seedIndex !== -1 && this.questions.length > 0) {
+          this.observedQuestionIds.splice(seedIndex, 1);
+          this.observedQuestionIds.push(this.questions[0].questionId);
+        }
+        return this.questions;
+      }),
+      this.relationService.getRelationsOfSpace(spaceId).then((res) => {
+        this.relations = res;
+        this.relations.forEach(r => this.relationVotes.set(r.relationId, r.votes));
+      })
+    ]);
 
     // when all questions and relations are loaded
     questionsAndRelationsPromise.then(() => {
@@ -244,17 +249,13 @@ export class GraphViewService {
 
   private loadRelationRelatedData(spaceId: string, r: Relation): Promise<any> {
     return Promise.all([
-      this.relationVoteService.getRelationVotes(spaceId, r.relationId)
-        .then((rv) => this.relationVotes.set(r.relationId, rv)),
       this.agentService.getAgentName(r.authorId)
         .then(ra => this.relationAuthors.set(r.relationId, ra))
     ]);
   }
 
   private loadQuestionRelatedData(spaceId: string, q: Question): Promise<any> {
     return Promise.all([
-      this.questionVoteService.getQuestionVotes(spaceId, q.questionId)
-        .then((qv) => this.questionVotes.set(q.questionId, qv)),
       this.agentService.getAgentName(q.authorId)
         .then(qa => this.questionAuthors.set(q.questionId, qa))
     ]);

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

@@ -2,9 +2,11 @@ import {NodeInteractionBehavior} from './node-interaction-behavior';
 import {GraphNode} from '../graph-data-model/graph-node';
 import {GraphViewService} from '../graph-view.service';
 import {MdDialog} from '@angular/material';
-import {CreateQuestionDialogComponent} from '../../create-question-dialog/create-question-dialog.component';
+import {InspectDialogComponent} from '../../inspect-dialog/inspect-dialog.component';
 import {AgentService} from '../../../shared/agent/agent.service';
-import {VoteDialogComponent} from '../../vote-dialog/vote-dialog.component';
+import {QuestionVoteService} from '../../../shared/question-vote/question-vote.service'
+import {timestamp} from 'rxjs/operator/timestamp';
+import {VoteUtil} from '../utils/vote-util';
 
 export class EditQuestionBehavior extends NodeInteractionBehavior {
 
@@ -13,41 +15,33 @@ export class EditQuestionBehavior extends NodeInteractionBehavior {
     super();
   }
 
-  interactWith(node: GraphNode): Promise<any> {
-    return this.agentService.getAgent().then((agent) => {
-      if (agent.agentid === node.question.authorId) {
-        const dialogRef = this.dialog.open(CreateQuestionDialogComponent, {
-          width: '250px',
-          data: {
-            title: 'Edit Question',
-            message: 'Edit question text and click Ok to save',
-            text: node.question.text
-          }
-        });
-        return dialogRef.afterClosed().toPromise().then(result => {
-          if (result !== undefined) {
-            return this.graphViewService.updateQuestion(node.id, result);
-          }
-        });
-      } else {
-        const myVote = node.questionVotes.find(vote => agent.agentid === vote.voterAgentId);
-        const dialogRef = this.dialog.open(VoteDialogComponent, {
-          width: '80%',
-          data: {
-            title: 'Assess Question',
-            message: 'What is your opinion regarding this question:\n' + node.question.text,
-            upvoteText: 'I like that question. It is particularly helpful for me.',
-            neutralText: 'I am undecided whether this question is helpful for me.',
-            downvoteText: 'This question did not help me.',
-            vote: myVote !== undefined ? myVote.value : 0
-          }
-        });
-        return dialogRef.afterClosed().toPromise().then(result => {
-          if (result !== undefined) {
-            this.graphViewService.updateQuestionVote(node.id, agent.agentid, result);
-          }
-        });
+  async interactWith(node: GraphNode): Promise<any> {
+    const agent = await this.agentService.getAgent();
+    const authorName = await this.agentService.getAgentName(node.question.authorId);
+    const questionVotes = node.questionVotes;
+    const votes = VoteUtil.countVotes(questionVotes);
+
+    const isAuthor = agent.agentid === node.question.authorId;
+    const myVote = questionVotes.find(vote => agent.agentid === vote.voterAgentId);
+
+    const data = {
+      isAuthor: isAuthor,
+      text: node.question.text,
+      authorName: authorName,
+      lastModified: new Date(node.question.timestampLastModified).toLocaleString(),
+      inputHeading: `${authorName} (${node.question.timestampLastModified})`,
+      votes: votes,
+      vote: myVote ? myVote.value : undefined
+    };
+
+    const dialogRef = this.dialog.open(InspectDialogComponent, {data: data});
+    const result = await dialogRef.afterClosed().toPromise();
+    if (result !== undefined) {
+      if (isAuthor) {
+        await this.graphViewService.updateQuestion(node.id, data.text);
+      } else if (data.vote !== undefined) {
+        await this.graphViewService.updateQuestionVote(node.id, agent.agentid, data.vote);
       }
-    });
+    }
   }
 }