Merge pull request #867 from europeana/feat/MET-6236-Refactor-Problem…

…-Pattern-Scrolling MET-6236 Refactor Problem Pattern Scrolling
europeana · Nov 14, 2024 · 1eb6ab0 · 1eb6ab0
2 parents d6eba86 + 6df92e4
commit 1eb6ab0
Show file tree

Hide file tree

Showing 14 changed files with 149 additions and 311 deletions.
diff --git a/projects/sandbox/cypress/e2e/debias.cy.ts b/projects/sandbox/cypress/e2e/debias.cy.ts
@@ -1,9 +1,11 @@
 context('Sandbox', () => {
   describe('Debias', () => {
     const force = { force: true };
+    const selCsvDownload = '.csv-download';
     const selDebiasLink = 'li .debias-link';
     const txtNoDetections = 'No Biases Found';
     const pollInterval = 2000;
+    const urlEmptyReport = '/dataset/28';
 
     it('should toggle the info', () => {
       cy.visit('/dataset/3');
@@ -37,7 +39,7 @@ context('Sandbox', () => {
     });
 
     it('should show an empty report', () => {
-      cy.visit('/dataset/28');
+      cy.visit(urlEmptyReport);
       cy.wait(pollInterval);
       cy.get(selDebiasLink)
         .last()
@@ -63,9 +65,17 @@ context('Sandbox', () => {
       cy.get(selDebiasLink)
         .first()
         .click(force);
-      cy.get('.csv-download')
+      cy.get(selCsvDownload)
         .filter(':visible')
         .should('exist');
     });
+
+    it('should not show the download link when there is no data', () => {
+      cy.visit(urlEmptyReport);
+      cy.get(selDebiasLink)
+        .first()
+        .click(force);
+      cy.get(selCsvDownload).should('not.exist');
+    });
   });
 });
diff --git a/projects/sandbox/src/app/debias/debias.component.html b/projects/sandbox/src/app/debias/debias.component.html
@@ -18,7 +18,7 @@
     <a class="open-info" (click)="toggleDebiasInfo($event)" title="Debias Tool Information"></a>
 
     <a
-      *ngIf="debiasReport.state === DebiasState.COMPLETED"
+      *ngIf="debiasReport.state === DebiasState.COMPLETED && debiasReport.detections.length"
       #downloadAnchor
       class="csv-download"
       (click)="csvDownload()"
@@ -71,7 +71,7 @@
       (keydown.enter)="closeDebiasInfo($event)"
     ></div>
 
-    <sb-skip-arrows #skipArrows>
+    <sb-skip-arrows>
       <div
         class="debias-detection-grid"
         *ngFor="let detection of debiasReport.detections"

diff --git a/projects/sandbox/src/app/debias/debias.component.scss b/projects/sandbox/src/app/debias/debias.component.scss
@@ -1,3 +1,4 @@
+@import 'shared-styles/assets/sass/pandora/settings/metis-variables-modal';
 @import 'shared-styles/assets/sass/scss/generic/variables-bp';
 @import 'shared-styles/assets/sass/scss/generic/variables-colours';
 @import 'shared-styles/assets/sass/scss/iconography/svg-icons-metis';
@@ -7,7 +8,7 @@ $transition-time-open: 0.3s;
 
 .debias {
   color: $gray-light;
-
+  height: calc($modal-content-max-height - 2em);
   margin: -1rem -1rem -1rem -1rem;
   position: relative;
 
@@ -38,12 +39,12 @@ $transition-time-open: 0.3s;
 }
 
 .no-bias-found {
-  width: 30rem;
-  margin-top: 50%;
-  transform: translateY(-50%);
   display: block;
+  position: absolute;
   text-align: center;
-  position: relative;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 100%;
 }
 
 .debias-detection-grid {
@@ -76,7 +77,7 @@ $transition-time-open: 0.3s;
 
   .title {
     color: $eu-grey-dark;
-    padding: 0.25em 0.25em 0.25em 1em;
+    padding: 0.25em 0.25em 0.25em 1.125em;
   }
 }
 
@@ -97,7 +98,7 @@ $transition-time-open: 0.3s;
   background: #fff;
   float: left;
   height: 1em;
-  left: -0.6725em;
+  left: -0.5em;
   line-height: 0.825em;
   margin-bottom: -1em;
   position: sticky;
@@ -139,7 +140,7 @@ $transition-time-open: 0.3s;
   height: 100%;
   margin-bottom: -1em;
   margin-right: -100%;
-  max-height: 60vh;
+  max-height: $modal-content-max-height;
   overflow-x: hidden;
   overflow-y: auto;
   padding: 1em 1.5em;

diff --git a/projects/sandbox/src/app/problem-viewer/problem-viewer.component.html b/projects/sandbox/src/app/problem-viewer/problem-viewer.component.html
@@ -7,24 +7,6 @@ <h1>Problem Patterns</h1>
     </div>
   </ng-template>
 
-  <!-- skip arrows -->
-  <ng-template #tmpSkipArrows>
-    <span *ngIf="problemCount > 1 && (canScrollUp() || canScrollDown())" class="skip-arrows">
-      <a
-        class="skip-arrow up"
-        title="Go to previous"
-        [ngClass]="{ enabled: canScrollUp() }"
-        (click)="skipToProblem(viewerVisibleIndex - 1)"
-      ></a>
-      <a
-        class="skip-arrow"
-        title="Go to next"
-        [ngClass]="{ enabled: canScrollDown() }"
-        (click)="skipToProblem(viewerVisibleIndex + 1)"
-      ></a>
-    </span>
-  </ng-template>
-
   <!-- Modal -->
   <ng-template #tmpModal let-modalInstanceId="modalInstanceId">
     <lib-modal
@@ -265,61 +247,58 @@ <h1>Problem Patterns</h1>
     #tmpProblemPattern
     let-problemPattern="problemPattern"
     let-datasetId="datasetId"
-    let-index="index"
     let-totalProblems="totalProblems"
   >
-    <div class="problem-pattern" #problemType>
-      <span class="problem-header">
-        <a
-          (click)="showDescriptionModal(problemPattern.problemPatternDescription.problemPatternId)"
-          title="show problem detail"
+    <span class="problem-header">
+      <a
+        (click)="showDescriptionModal(problemPattern.problemPatternDescription.problemPatternId)"
+        title="show problem detail"
+      >
+        <span
+          class="warning-icon"
+          [ngClass]="getWarningClassMap(problemPattern.problemPatternDescription)"
+          ><span class="bold semi-colon">{{
+            problemPattern.problemPatternDescription.problemPatternId
+          }}</span></span
         >
-          <span
-            class="warning-icon"
-            [ngClass]="getWarningClassMap(problemPattern.problemPatternDescription)"
-            ><span class="bold semi-colon">{{
-              problemPattern.problemPatternDescription.problemPatternId
-            }}</span></span
-          >
-          <span class="bold italic">
-            {{ problemPattern.problemPatternDescription.problemPatternTitle }}
-          </span>
-        </a>
-      </span>
+        <span class="bold italic">
+          {{ problemPattern.problemPatternDescription.problemPatternTitle }}
+        </span>
+      </a>
+    </span>
 
-      <span
-        class="title-record-occurences semi-colon"
-        *ngIf="!problemPatternsRecord"
-        [ngPlural]="problemPattern.recordOccurrences"
-        >Occurs in <strong>{{ problemPattern.recordOccurrences }}</strong>
-        <ng-template ngPluralCase="=1"> record</ng-template>
-        <ng-template ngPluralCase="other"> records</ng-template>
+    <span
+      class="title-record-occurences semi-colon"
+      *ngIf="!problemPatternsRecord"
+      [ngPlural]="problemPattern.recordOccurrences"
+      >Occurs in <strong>{{ problemPattern.recordOccurrences }}</strong>
+      <ng-template ngPluralCase="=1"> record</ng-template>
+      <ng-template ngPluralCase="other"> records</ng-template>
 
-        <!-- different title count -->
-        <ng-container
-          *ngIf="problemPattern.problemPatternDescription.problemPatternId === ProblemPatternId.P1"
-        >
-          <ng-container *ngIf="problemPattern.recordAnalysisList.length > 1">
-            with
-            <strong>{{ problemPattern.recordAnalysisList.length }}</strong>
-            different titles
-          </ng-container>
+      <!-- different title count -->
+      <ng-container
+        *ngIf="problemPattern.problemPatternDescription.problemPatternId === ProblemPatternId.P1"
+      >
+        <ng-container *ngIf="problemPattern.recordAnalysisList.length > 1">
+          with
+          <strong>{{ problemPattern.recordAnalysisList.length }}</strong>
+          different titles
         </ng-container>
-      </span>
-      <ng-container *ngIf="!problemPattern.closed">
-        <ng-content
-          *ngTemplateOutlet="
-            tmpRecordAnalysisList;
-            context: {
-              analyses: problemPattern.recordAnalysisList,
-              problemTitle: problemPattern.problemPatternDescription.problemPatternTitle,
-              datasetId: datasetId,
-              ppId: problemPattern.problemPatternDescription.problemPatternId
-            }
-          "
-        ></ng-content>
       </ng-container>
-    </div>
+    </span>
+    <ng-container *ngIf="!problemPattern.closed">
+      <ng-content
+        *ngTemplateOutlet="
+          tmpRecordAnalysisList;
+          context: {
+            analyses: problemPattern.recordAnalysisList,
+            problemTitle: problemPattern.problemPatternDescription.problemPatternTitle,
+            datasetId: datasetId,
+            ppId: problemPattern.problemPatternDescription.problemPatternId
+          }
+        "
+      ></ng-content>
+    </ng-container>
   </ng-template>
 
   <!-- END TEMPLATES -->
@@ -340,7 +319,7 @@ <h2 *ngIf="recordId" class="top-title">
         <span>{{ decode(recordId) }}</span>
       </h2>
 
-      <h3 class="problem-viewer record">
+      <h3 class="problem-viewer">
         <span class="tick">No Problem Patterns Found for Record</span>
       </h3>
     </ng-template>
@@ -365,9 +344,10 @@ <h2 class="top-title record-title">
     </ul>
 
     <div *ngIf="problemPatternsRecord.problemPatternList.length > 0" class="problem-viewer record">
-      <ng-content *ngTemplateOutlet="tmpSkipArrows"></ng-content>
-      <ng-container>
-        <ng-container
+      <sb-skip-arrows>
+        <div
+          class="problem-pattern"
+          #elementList
           *ngFor="let problemPattern of problemPatternsRecord.problemPatternList; let i = index"
         >
           <ng-content
@@ -376,14 +356,15 @@ <h2 class="top-title record-title">
               context: {
                 problemPattern: problemPattern,
                 datasetId: '',
-                index: i,
                 totalProblems: problemPatternsRecord.problemPatternList.length
               }
             "
           ></ng-content>
-        </ng-container>
-      </ng-container>
+        </div>
+      </sb-skip-arrows>
     </div>
+
+    <!-- END VIEWER RECORD -->
   </div>
 
   <!-- DATASET -->
@@ -408,30 +389,31 @@ <h2 class="top-title record-title">
       <ng-content *ngTemplateOutlet="pdfHeader"></ng-content>
     </ng-container>
 
-    <ng-template #problemViewer>
-      <div class="problem-viewer" (scroll)="onScroll($event)">
-        <ng-content *ngTemplateOutlet="tmpSkipArrows"></ng-content>
-        <ng-container>
-          <ng-container *ngFor="let problemPattern of ppd.problemPatternList; let i = index">
-            <ng-content
-              *ngTemplateOutlet="
-                tmpProblemPattern;
-                context: {
-                  problemPattern: problemPattern,
-                  datasetId: ppd.datasetId,
-                  index: i,
-                  totalProblems: ppd.problemPatternList.length
-                }
-              "
-            ></ng-content>
-          </ng-container>
-        </ng-container>
-      </div>
-    </ng-template>
-
-    <h3 class="problem-viewer" *ngIf="ppd.problemPatternList.length === 0; else problemViewer">
+    @if(ppd.problemPatternList.length === 0){
+    <h3 class="problem-viewer">
       <span class="bold tick">No Problem Patterns Found for Dataset</span>
     </h3>
+
+    } @else {
+    <div class="problem-viewer">
+      <sb-skip-arrows>
+        @for (problemPattern of ppd.problemPatternList; track problemPattern) {
+        <div #elementList class="problem-pattern">
+          <ng-content
+            *ngTemplateOutlet="
+              tmpProblemPattern;
+              context: {
+                problemPattern: problemPattern,
+                datasetId: ppd.datasetId,
+                totalProblems: ppd.problemPatternList.length
+              }
+            "
+          ></ng-content>
+        </div>
+        }
+      </sb-skip-arrows>
+    </div>
+    }
   </div>
 
   <!-- DOWNLOAD LINKS VIEW -->

diff --git a/projects/sandbox/src/app/problem-viewer/problem-viewer.component.scss b/projects/sandbox/src/app/problem-viewer/problem-viewer.component.scss
@@ -160,20 +160,14 @@ q {
 
 .problem-pattern {
   margin-bottom: 1em;
+  padding: $problem-viewer-padding;
 }
 
 .problem-viewer {
   background: $white;
   margin-bottom: 1em;
-  max-height: 28em;
   min-height: 8em;
-  overflow-y: auto;
-  overflow-x: hidden;
-  padding: $problem-viewer-padding;
   position: relative;
-  &.record {
-    margin-bottom: 1em;
-  }
 }
 
 .title {