Add control output for dashboard chart display

VERSION.txt

+14.0.2 Propagate insufficient data info for dashboard processing
 14.0.1 Update API routes
 14.0.0 Initial clustering library version
 

projects/kypo-trainings-clustering-viz-lib/src/lib/visualization/components/visualizations/line-chart/line-chart.component.html

@@ -3,7 +3,7 @@
     *ngIf="includeInButtonToggle"
     (click)="toggleChartVisibility()"> {{buttonKeyword}} helper elbow function </button>
 
-    <div [attr.style]="'display: ' + (showChart ? 'block' : 'none')">
+    <div [attr.style]="'display: ' + (showChart ? 'inline-block' : 'none')">
     <div  id="chartDiv"></div>
     <div id="helpDiv">
         <b>How to use this chart?</b>

projects/kypo-trainings-clustering-viz-lib/src/lib/visualization/components/visualizations/line-chart/line-chart.component.ts

@@ -62,9 +62,7 @@ export class LineChartComponent implements OnChanges, OnInit {
 
   checkData() {
     const isAllNothing = this.visualizationData.every((value) => value === 0 || Number.isNaN(value) || value === null);
-    if (isAllNothing) {
-      this.insufficientData.emit(true);
-    }
+    this.insufficientData.emit(isAllNothing);
     return !isAllNothing;
   }
 

projects/kypo-trainings-clustering-viz-lib/src/lib/visualization/components/visualizations/scatter-plot/scatter-plot.component.ts

@@ -221,7 +221,10 @@ export class ScatterPlotComponent implements OnChanges, OnInit {
       .data(this.data)
       .enter()
       .append('circle')
-      .attr('cx', (d: any) => this.x(this.visualizationDataService.getX(d, this.selectedFeature)) + this.margin)
+      .attr('cx', (d: any) => {
+        const x = this.x(this.visualizationDataService.getX(d, this.selectedFeature));
+        return Number.isNaN(x) ? this.margin : x + this.margin;
+      })
       .attr('cy', (d: any) => this.y(this.visualizationDataService.getY(d, this.selectedFeature)))
       .attr('r', 7)
       .style('opacity', 0.5)

projects/kypo-trainings-clustering-viz-lib/src/lib/visualization/components/visualizations/visualizations.component.html

@@ -5,7 +5,7 @@
 			[elbowNumClusters]="elbowNumClusters"
 			[includeInButtonToggle]="true"
 			(viewOpen)="toggleView($event)"
-			(insufficientData)="checkData($event)"
+			(insufficientData)="insufficientData($event)"
 	></kypo-viz-clustering-line-chart>
 
 	<kypo-viz-clustering-scatter-plot

projects/kypo-trainings-clustering-viz-lib/src/lib/visualization/components/visualizations/visualizations.component.ts

@@ -22,6 +22,7 @@ export class VisualizationsComponent implements OnInit, OnChanges {
   @Output() viewOpen: EventEmitter<boolean> = new EventEmitter();
   @Output() chartIsHidden: EventEmitter<any> = new EventEmitter();
 
+  hideLineData = [];
   elbowNumClusters = 15; // this ensures we don't load different data after every line chart change (15 clusters should be just enough)
 
   lineData$: Observable<VisualizationData>;
@@ -78,9 +79,11 @@ export class VisualizationsComponent implements OnInit, OnChanges {
     }
   }
 
-  checkData(hideChart: boolean) {
+  insufficientData(badData: boolean) {
     // if we don't have enough data for sse, we should hide the remaining related
     // charts as well, since they will also lack data for visualization
-    this.chartIsHidden.emit({ hide: hideChart, features: this.selectedFeature });
+    this.hideLineData = this.hideLineData.filter((value) => value.feature !== this.selectedFeature);
+    this.hideLineData.push({ hide: badData, feature: this.selectedFeature });
+    this.chartIsHidden.emit(this.hideLineData);
   }
 }