commit #49 - styling improvements, wordcloud improvements

ompp-web/src/app/LecturerComponents/LecturerAnalysisView/lecturer-analysis-view.component.css

+
+#wordcloud-title {
+  margin-top: 1%;
+  margin-left: 2%;
+}

ompp-web/src/app/LecturerComponents/LecturerAnalysisView/lecturer-analysis-view.component.html

 <app-lecturer-navbar></app-lecturer-navbar>
 <div class="row">
-  <div>
-    <!-- Info bar with colour key and return to paper view button-->
-  </div>
-  <div class="col-lg">
-    <app-sentiment-cloud></app-sentiment-cloud>
+  <div id="wordcloud-title" class="col-lg">
+    <h4>Sentiment Cloud</h4>
+    <div class="row">
+      <app-sentiment-cloud></app-sentiment-cloud>
+    </div>
   </div>
 </div>

ompp-web/src/app/WordcloudComponents/SentimentCloud/sentiment-cloud.component.html

-<div>
-  <!--SELECT TO SWITCH BETWEEN QUESTIONS AND ALL TEXT-->
-  <div>
-    <div>
-      <label for="question-select"></label>
-      <select id="question-select">
-        <option></option>
+<div class="row">
+  <div class="col">
+    <div *ngIf="loading">
+      <p>Loading...</p>
+    </div>
+    <div *ngIf="!loading && wordcloudData">
+      <label for="question-select">Select a set of words to view: </label>
+      <select id="question-select" [(ngModel)]="currentQuestion" (change)="setCloud()">
+        <option [ngValue]="undefined">All Questions</option>
+        <option *ngFor="let questionDao of questions; let i = index" [attr.data-index]="i" [ngValue]="questionDao">Question {{i+1}}</option>
       </select>
     </div>
-  </div>
-  <div *ngIf="!loading && wordcloudData">
-    <angular-tag-cloud
-      [data]="wordcloudData"
-      [width]="options.width"
-      [height]="options.height"
-      [overflow]="options.overflow">
-    </angular-tag-cloud>
+    <div *ngIf="!loading && wordcloudData">
+      <angular-tag-cloud
+        [data]="wordcloudData"
+        [width]="options.width"
+        [height]="options.height"
+        [overflow]="options.overflow">
+      </angular-tag-cloud>
+    </div>
   </div>
 </div>

ompp-web/src/app/WordcloudComponents/SentimentCloud/sentiment-cloud.component.ts

@@ -4,6 +4,7 @@ import {LecturerInfoService} from 'src/app/services/lecturer-info.service';
 import {LecturerDataService} from 'src/app/services/lecturer-data.service';
 import {WordDetailsDao} from 'src/app/dao/word-details.dao';
 import {QuestionDao} from 'src/app/dao/question.dao';
+import {Observable} from 'rxjs';
 
 @Component({
   selector:  'app-sentiment-cloud',
@@ -12,13 +13,13 @@ import {QuestionDao} from 'src/app/dao/question.dao';
 })
 export class SentimentCloudComponent implements OnInit, OnDestroy {
 
-  private loading: boolean;
   private maxOccurrences: number;
   private wordClouds: any[][];
+  public loading: boolean;
   public options: CloudOptions;
   public questions: QuestionDao[];
   public wordcloudData: CloudData[];
-
+  public currentQuestion: QuestionDao;
 
   constructor(private lecturerInfoService: LecturerInfoService,
               private lecturerDataService: LecturerDataService) {
@@ -36,13 +37,15 @@ export class SentimentCloudComponent implements OnInit, OnDestroy {
       overflow: false,
     };
     this.lecturerInfoService.getPaperQuestions(this.lecturerDataService.currentPaper.paperId)
-      .subscribe((data: QuestionDao[]) => this.questions = data);
+      .subscribe((data: QuestionDao[]) => {
+        this.questions = data;
+        this.currentQuestion = this.questions[0];
+      });
     this.lecturerInfoService.getSentimentCloud(this.lecturerDataService.currentPaper.paperId)
       .subscribe((data: WordDetailsDao[]) => {
         if (data) {
           if (data.length > 0) {
-            // this.sortData(data);
-            // this.wordcloudData = this.createCloud(this.wordClouds[0]);
+            this.sortData(data);
             this.wordcloudData = this.createCloud(data);
           } else {
             this.wordcloudData = [];
@@ -61,20 +64,25 @@ export class SentimentCloudComponent implements OnInit, OnDestroy {
     });
   }
 
-  private createCloud(data: WordDetailsDao[]): any {
+  private createCloud(data: WordDetailsDao[]): CloudData[] {
     const words: any = [];
     data.forEach(word => {
-      if (word.numberOfOccurrences > this.maxOccurrences) {
-        this.maxOccurrences = word.numberOfOccurrences;
-      }
-    });
-    this.maxOccurrences = this.maxOccurrences / this.questions.length;
-    data.forEach(word => {
-        words.push({text: word.word, weight: this.getWeight(word.numberOfOccurrences), color: this.getColour(word.polarity) });
+        words.push({text: word.word, weight: word.numberOfOccurrences, color: this.getColour(word.polarity) });
     });
     return words;
   }
 
+  private getAllData() {
+    const data = [];
+    this.wordClouds.forEach(list => {
+      list.forEach(elem => {
+        data.push(elem);
+      });
+    });
+
+    return data;
+  }
+
   private getColour(polarity: number): String {
     switch (polarity) {
       case 0: return '#FF0000';
@@ -86,32 +94,17 @@ export class SentimentCloudComponent implements OnInit, OnDestroy {
     }
   }
 
-  private getWeight(occurrences: number): number {
-    if (occurrences <= this.maxOccurrences / 10) {
-      return 2;
-    }
-
-    if (occurrences >= this.maxOccurrences / 10 && occurrences <= this.maxOccurrences / 5) {
-      return 4;
-    }
-
-    if (occurrences >= this.maxOccurrences / 5 && occurrences <= this.maxOccurrences / 4) {
-      return 5;
-    }
-
-    if (occurrences >= this.maxOccurrences / 4 && occurrences <= this.maxOccurrences / 2) {
-      return 7;
-    }
-
-    if (occurrences >= this.maxOccurrences / 2) {
-      return 9;
-    }
-
-    if (occurrences === this.maxOccurrences) {
-      return 10;
+  public setCloud() {
+    this.wordcloudData = [];
+    if (this.currentQuestion === undefined) {
+      this.wordcloudData = this.createCloud(this.getAllData());
+    } else {
+      this.wordClouds.forEach(list => {
+        if (list[0].questionId === parseInt(this.currentQuestion.questionId.toString(), 10)) {
+          this.wordcloudData = this.createCloud(list);
+        }
+      });
     }
-
-    return 1;
   }
 
 }