fix design audit

src/app/components/molli/cluster-scatterplot/cluster-scatterplot.component.html

@@ -2,14 +2,16 @@
   <div class="legend flex-none">
     <div class="flex title">
       <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg" (click)="toggleAllCluster()">
-        <path [attr.d]="selectedClusterPath[allClusterSelected].path" [attr.fill]="selectedClusterPath[allClusterSelected].fill"/>
+        <path *ngIf="allClusterSelected == 1" [attr.d]="selectedClusterPath[1].path" [attr.fill]="selectedClusterPath[1].fill"></path>
+        <path *ngIf="allClusterSelected != 1" [attr.d]="selectedClusterPath[0].path" [attr.fill]="selectedClusterPath[0].fill"></path>
       </svg>        
       View All
     </div>
     <div *ngFor="let cluster of clusters" class="field-checkbox flex align-content-center justify-content-between" (mouseenter)="highlightCluster(cluster)" (mouseleave)="unhighlight()">
       <div class="flex" (click)="toggleCluster(cluster)">
         <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <path [attr.d]="selectedClusterPath[cluster.isSelected].path" [attr.fill]="selectedClusterPath[cluster.isSelected].fill" [style]="{ 'opacity': allClusterSelected == 1 ? '0.2': 1 }"/>
+          <path *ngIf="allClusterSelected == 1" [attr.d]="selectedClusterPath[0].path" [attr.fill]="selectedClusterPath[0].fill"></path>
+          <path *ngIf="allClusterSelected != 1" [attr.d]="selectedClusterPath[cluster.isSelected].path" [attr.fill]="selectedClusterPath[cluster.isSelected].fill"></path>
         </svg>
         <p-avatar [class.faded]="isClusterFaded(cluster)" [style]="{ 'background-color': cluster.color }" shape="circle"></p-avatar>
         <div class="cluster_number">{{ cluster.index }}</div>
@@ -56,7 +58,7 @@
             </div>
           </div>
 
-          <app-molecule2d [svg]="point.svg" [height]="100" [width]="100"></app-molecule2d>
+          <app-molecule2d [svg]="point.svg" [width]="125" [height]="75"></app-molecule2d>
         </div>
       </div>
     </div>

src/app/components/molli/cluster-scatterplot/cluster-scatterplot.component.scss

@@ -86,7 +86,7 @@ svg {
 
 .filler {
   background-color: #f7f8f9;
-  height: 130px;
+  height: 120px;
 
   .focus_restricted {
     height: 20px;
@@ -102,19 +102,17 @@ svg {
 
   .focus_item {
     width: 408px;
-    height: 130px;
 
     background-color: #ffffff;
     border: 1px solid #dee2e6;
     border-radius: 6px;
 
     .focus_content {
-      padding: 6px 12px 0 12px;
+      padding: 12px;
     }
 
     .focus_point_container {
       width: 247px;
-      height: 79px;
     }
 
     .foucs_info_item {

src/app/components/molli/cluster-scatterplot/cluster-scatterplot.component.ts

@@ -30,16 +30,21 @@ export class ClusterScatterplotComponent implements OnChanges {
   mode: 'tsne'|'pca';
 
   highlightedClusterIndex: number|null = null;
+
   @Input()
   highlightedPointName: string|null = null;
   @Output()
   highlightedPointNameChange = new EventEmitter<string|null>();
 
+  // check if the point/examplar is restricted to select/unselect by additional filters
   @Input()
   checkRestrict: (name: string) => Boolean;
+
   @Input()
   handleScroll: (name: string, navigate?: boolean) => void;
 
+  lastClickedPointName: string|null = null;
+
   viewBox = {
     height: 400,
     width: 400
@@ -187,7 +192,7 @@ export class ClusterScatterplotComponent implements OnChanges {
   toggleAllCluster() {
     this.allClusterSelected = this.allClusterSelected == 1 ? 0 : 1;
     this.clusters.forEach(cluster => cluster.isSelected = this.allClusterSelected);
-    this.points.forEach(point =>  point.isSelected = !!this.allClusterSelected);
+    this.points.forEach(point => point.isSelected = !!this.allClusterSelected);
     this.onPointsChange();
   }
 
@@ -210,6 +215,17 @@ export class ClusterScatterplotComponent implements OnChanges {
     if (this.checkRestrict(point.name)) {
       return;
     }
+
+    // if it's the first time the point is clicked, just scoll to it
+    if (point.isSelected && this.lastClickedPointName != point.name) {
+      this.lastClickedPointName = point.name;
+      setTimeout(() => {
+        this.handleScroll(point.name, true);
+      });
+      return
+    }
+
+    // not the first time, toggle point
     point.isSelected = !point.isSelected;
     if (point.cluster.isSelected == 2) {
       const selectedPointsCntInCluster = this.getSelectedPointsCntInCluster(point.cluster);

src/app/components/molli/molecule2d/molecule2d.component.scss

@@ -1,6 +0,0 @@
-.svg_container {
-  ::ng-deep svg {
-    display: block;
-    margin: auto;
-  }
-}

src/app/components/molli/molecule2d/molecule2d.component.ts

@@ -23,15 +23,18 @@ export class Molecule2dComponent implements OnChanges {
 
   ngOnChanges(changes: SimpleChanges) {
     let workingSvg = this.svg;
-    if (this.height !== null) {
+    if (this.height != null) {
       // replacing just the first instance of height, and for now we assume all heights are originally 200px
       // TODO improve this logic
       workingSvg = workingSvg.replace('height="200px"', 'height="' + this.height + 'px"');
+      if (this.height < 200) {
+        workingSvg = workingSvg.replace('viewBox="0 0 100 100"', 'viewBox="0 25 100 50"')
+      }
     }
-    if (this.width !== null) {
+    if (this.width != null) {
       // replacing just the first instance of width, and for now we assume all widths are originally 200px
       // TODO improve this logic
-      workingSvg = workingSvg.replace('width="200px"', 'width="' + this.height + 'px"');
+      workingSvg = workingSvg.replace('width="200px"', 'width="' + this.width + 'px"');
     }
     this.scaledSvg = this.sanitizer.bypassSecurityTrustHtml(workingSvg);
   }

src/app/components/molli/results/results.component.html

@@ -56,16 +56,16 @@ <h3>Data clustering</h3>
                 <div class="molecules_panel">
                   <h3>Molecules</h3>
                   <p class="mt-3 mb-1">Cores:</p>
-                  <p-multiSelect [options]="allCores" [(ngModel)]="selectedCores" (onChange)="filterTable()"
+                  <p-multiSelect [options]="allCores" [(ngModel)]="selectedCores" (onChange)="filterTable(true)"
                                 defaultLabel="Select one or more cores" display="chip" />
                   <p class="mt-3 mb-1">Substituents:</p>
-                  <p-multiSelect [options]="allSubstituents" [(ngModel)]="selectedSubstituents" (onChange)="filterTable()"
+                  <p-multiSelect [options]="allSubstituents" [(ngModel)]="selectedSubstituents" (onChange)="filterTable(true)"
                                 defaultLabel="Select one or more substituents" display="chip" />
                 </div>
                 <div class="other_panel">
                   <h3>Other filters:</h3>
                   <div class="mt-3 mb-4 flex align-items-center">
-                    <p-checkbox value="true" [(ngModel)]="isShowSavedMoleculesOnly" inputId="showSavedMolecules" (onChange)="filterTable()" [binary]="true"/>
+                    <p-checkbox value="true" [(ngModel)]="isShowSavedMoleculesOnly" inputId="showSavedMolecules" (onChange)="filterTable(true)" [binary]="true"/>
                     <label for="showSavedMolecules" class="ml-2">Only show saved results</label>
                   </div>
                 </div>
@@ -76,7 +76,7 @@ <h3>Other filters:</h3>
               </p-overlayPanel>
               <button pButton icon="pi pi-filter" class="p-button-outlined" (click)="filterPanel.toggle($event)">
                 <span class="p-button-label ml-2">Filter</span>
-                <span class="filter-num ml-2">{{ filteredRows.length }}</span>
+                <span class="filter-num ml-2">{{ filterLenth }}</span>
               </button>
               <button pButton label="Re-set All" class="p-button-outlined" (click)="resetTable()"></button>
             </div>
@@ -131,7 +131,7 @@ <h3>Other filters:</h3>
                 <td>{{row.cluster}}</td>
                 <td>
                   {{row.name}}
-                  <div class="structure_2d"><app-molecule2d (click)="openStructureDialog(row)" [svg]="row.svg" [height]="100" [width]="100"></app-molecule2d></div>
+                  <div class="structure_2d"><app-molecule2d (click)="openStructureDialog(row)" [svg]="row.svg" [height]="100" [width]="160"></app-molecule2d></div>
                 </td>
                 <td>{{row.core}}</td>
                 <td><div *ngFor="let subst of row.substituents">{{subst.label}} ({{subst.count}})</div></td>

src/app/components/molli/results/results.component.scss

@@ -261,10 +261,11 @@ tr.highlighted {
 }
 
 td {
-  vertical-align: middle;
-  padding: 7px 16px !important;
+  vertical-align: top;
+  padding: 5px !important;
 
-  &.structure_2d {
+  .structure_2d {
+    margin-top: 6px;
     &:hover {
       cursor: pointer;
 

src/app/components/molli/results/results.component.ts

@@ -33,6 +33,8 @@ export class ResultsComponent {
 
   allRows: GeneratedStructureViewModel[] = [];
   filteredRows: GeneratedStructureViewModel[] = [];
+  // number showed on filter button
+  filterLenth: number = 0;
 
   clusteringMethodOptions = [
     { name: 't-SNE(Default)', key: 'tsne' },
@@ -229,15 +231,15 @@ export class ResultsComponent {
     this.selectedCores = [];
     this.selectedSubstituents = [];
     this.isShowSavedMoleculesOnly = false;
-    this.filterTable();
+    this.filterTable(true);
   }
 
   resetTable() {
     this.selectedCores = [];
     this.selectedSubstituents = [];
     this.isShowSavedMoleculesOnly = false;
     this.selectedPoints = this.allRows.map(row => row.name);
-    this.filterTable();
+    this.filterTable(true);
   }
 
   applyAdditionalFilters(row: GeneratedStructureViewModel) {
@@ -253,8 +255,23 @@ export class ResultsComponent {
     return coreLookup.has(row.core) && row.substituents.some(subst => substituentLookup.has(subst.label)) && saveMoleculesLookup(row);
   }
 
-  filterTable() {
-    this.filteredRows = this.allRows.filter(row => this.selectedPoints.includes(row.name) && this.applyAdditionalFilters(row));
+  filterTable(isApplyAdditionalFilters = false) {
+    let additionalFilterResultLen = 0;
+    this.filteredRows = this.allRows.filter(row => {
+      if (this.applyAdditionalFilters(row)) {
+        if (this.selectedCores.length || this.selectedSubstituents.length) {
+          additionalFilterResultLen++;
+        }
+        if (this.selectedPoints.includes(row.name)) {
+          return true;
+        }
+      }
+      return false;
+    })
+    this.filterLenth = Math.min(additionalFilterResultLen, this.filteredRows.length);
+    if (isApplyAdditionalFilters) {
+      this.table.first = 0;
+    }
   }
 
   isPointRestrictedByFilters(pointName: string) {