Cleans Code and changes some structure. (refs #1)

src/app/app.component.ts

@@ -58,7 +58,5 @@ export class AppComponent {
       this.colorGenerator.generateStyleRules();
       this.isNotGenerated = false;
     }
-
-    console.log(this.dataStorage.currentStyles);
   }
 }

src/app/shared/color-generator.service.ts

@@ -29,7 +29,7 @@ export class ColorGeneratorService {
     });
 
     // Store the rules we created globally
-    this.dataStorage.currentStyles = this.currentRules;
+    this.dataStorage.changeCurrentRules(this.currentRules);
   }
 
   /**
@@ -52,10 +52,7 @@ export class ColorGeneratorService {
   private addRule(selector: string, rule: string) {
     const storeRule = this.styleSheet.insertRule(selector + '{' + rule + '}',
       this.currentRules.size);
-    this.currentRules.set(selector, {
-        'posStylesheet': storeRule,
-        'color': rule
-    });
+    this.currentRules.set(selector, rule);
   }
 
   /**

src/app/shared/data-storage.service.ts

@@ -12,12 +12,15 @@ export class DataStorageService {
     link: 'www.example.com'
   };
 
+  private defaultColor = new Map([['key1', 'value1'], ['key2', 'value2']]);
+
   // Global variable that is used to see if we are in comparsion mode or not
   private _isComparsion: boolean;
   // The search terms of both
   private _searchTermsInput: Array<String>;
   // The set colors and position of rule in stylesheet
-  private _currentRules: Map<String, Object>;
+  private _currentRules = new BehaviorSubject<Map<string, string>>(this.defaultColor);
+  public readonly currentRules = this._currentRules.asObservable();
 
   // One input field -- #data1
   private dataStore = new BehaviorSubject<Aurum>(this.defaultData);
@@ -55,6 +58,10 @@ export class DataStorageService {
     this._searchTermsInput = message.searchTerms;
   }
 
+  changeCurrentRules(rules: Map<string, string>) {
+    this._currentRules.next(rules);
+  }
+
   /**
  * Getter method for the check if we are in comparsion mode or not.
  */
@@ -75,18 +82,4 @@ export class DataStorageService {
   get searchTermsInput(): Array<String> {
     return this._searchTermsInput;
   }
-
-  /**
-   * Getter method for retrieving the current set style rules
-   */
-  get currentStyles(): Map<String, Object> {
-    return this._currentRules;
-  }
-
-  /**
-   * Setter method for the current style rules
-   */
-  set currentStyles(currStyles: Map<String, Object>) {
-    this._currentRules = currStyles;
-  }
 }

src/app/subsites/viz/viz.component.html

@@ -2,7 +2,6 @@
   <div class="row">
     <div class="col-md-12 filterSection">
       <p>Filter:</p>
-      <app-tagfilter></app-tagfilter>
     </div>
   </div>
 

src/app/subsites/viz/viz.component.ts

@@ -49,7 +49,6 @@ export class VizComponent implements OnInit {
       'background: #222; color: aquamarine;');
 
       this.storedData = data;
-
       this.renderText(this.storedData);
     });
 
@@ -96,11 +95,12 @@ export class VizComponent implements OnInit {
       - this.wrapper.getLineHeight() * 0.4;
     const possLinesToShow = Math.floor(detailHeight / this.wrapper.getLineHeight());
     this.linesToShow = Math.min(possLinesToShow, this.yExtent[1] - this.yExtent[0]);
-    console.log('extent: ' + detailHeight + ' / ' + this.wrapper.getLineHeight() + ' = ' + this.linesToShow);
+    // console.log('extent: ' + detailHeight + ' / ' + this.wrapper.getLineHeight() + ' = ' + this.linesToShow);
   }
 
   private renderDetail() {
-    console.log('FROM component | Inside renderDetail() function', this.detailStart, this.linesToShow);
+    console.log('%c FROM component | Inside renderDetail() function', 'background: #222; color: orange;');
+    console.log('Detail Start: ', this.detailStart, ' and Lines to Show: ', this.linesToShow);
 
     const stringToPrint = this.textModel
       .filter((d) => this.detailStart <= d.yPos && d.yPos <= (this.detailStart + this.linesToShow - 1))
@@ -110,7 +110,7 @@ export class VizComponent implements OnInit {
   }
 
   private renderOverview(textModel: Array<LineModel>) {
-    console.log('FROM component | Inside renderOverview() function');
+    console.log('%c FROM component | Inside renderOverview() function' , 'background: #222; color: orange;');
 
     // make sure we start clean
     this.dataOverview.nativeElement.innerHTML = '';
@@ -129,7 +129,7 @@ export class VizComponent implements OnInit {
     const x = d3.scaleLinear()
       .rangeRound([0, width])
       .domain([minLineStart, maxLineEnd]);
-     console.log('xdom', minLineStart, maxLineEnd, width);
+    //  console.log('xdom', minLineStart, maxLineEnd, width);
 
 
     const y = d3.scaleLinear()
@@ -186,7 +186,7 @@ export class VizComponent implements OnInit {
 
           const d0 = d3.event.selection.map(y.invert);
           const d1 = d0.map(Math.round);
-          console.log('brushed lines ' + d1);
+          // console.log('brushed lines ' + d1);
 
           // correct extent and at edges
           if (d1[1] > this.yExtent[1]) {

src/app/util/line-wrapper.ts

@@ -93,7 +93,7 @@ export class LineWrapper {
                 $div.html('M<br>M');
                 const twoline = ($div.node() as HTMLElement).getBoundingClientRect().height || 0;
                 line_height[font][size] = twoline - oneline;
-                console.log('h ' + twoline + ' ' + oneline);
+                // console.log('h ' + twoline + ' ' + oneline);
             });
         });
         $div.remove();