RUI updates for HRA v2.2 (8th Release)

.vscode/settings.json

@@ -15,21 +15,7 @@
     "body-ui",
     "eui",
     "node-dist-vis",
-    "lib:common"
-  ],
-  "workbench.colorCustomizations": {
-    "activityBar.activeBackground": "#FF0043",
-    "activityBar.background": "#FF0043",
-    "activityBar.foreground": "#e7e7e7",
-    "activityBar.inactiveForeground": "#e7e7e799",
-    "activityBarBadge.background": "#0c5411",
-    "activityBarBadge.foreground": "#e7e7e7",
-    "sash.hoverBorder": "#FF0043",
-    "statusBar.background": "#B20A2F",
-    "statusBar.foreground": "#e7e7e7",
-    "statusBarItem.hoverBackground": "#FF0043",
-    "statusBarItem.remoteBackground": "#B20A2F",
-    "statusBarItem.remoteForeground": "#e7e7e7"
-  },
-  "peacock.remoteColor": "#B20A2F"
+    "lib:common",
+    "ccf-rui"
+  ]
 }

README.md

@@ -67,7 +67,7 @@ For detailed information, please refer to the documentation for each app.
 - [CCF Body UI Web Component](./apps/ccf-body-ui-wc/README.md) - A web component used in Exploration User Interface.
 - [Exploration User Interface](./apps/ccf-eui/README.md) - An interactive tool for exploring and validating spatially registered tissue blocks and cell-type populations.
 - [CCF Organ Info](./apps/ccf-organ-info/README.md) - User Interface for Organ Information.
-- [Registration User Interfce](./apps/ccf-rui/README.md) - An interactive tool for registering tissue blocks spatially and annotating them semantically using ASCT+B Table terms.
+- [Registration User Interface](./apps/ccf-rui/README.md) - An interactive tool for registering tissue blocks spatially and annotating them semantically using ASCT+B Table terms.
 - [Cell Distance Explorer](./apps/cde-ui/README.md) - Compute, visualize, and explore distance distributions between different cells, cell types, anatomical structures, and more.
 - [Cell Distance Explorer Visualization Web Component](./apps/cde-visualization-wc/README.md) - A web component used in Cell Distance Explorer.
 - [HRA Dashboards](./apps/dashboard-ui/README.md) - Explore usage statistics of atlas data and code.

apps/ccf-eui/src/app/app.component.ts

@@ -196,6 +196,7 @@ export class AppComponent implements OnInit {
           snackBar.dismiss();
         },
       },
+      panelClass: 'usage-snackbar',
       duration: this.consentService.consent === 'not-set' ? Infinity : 3000,
     });
 

apps/ccf-eui/src/styles.scss

@@ -186,3 +186,29 @@ button {
   border-style: solid;
   border-radius: 0.25rem;
 }
+
+.usage-snackbar {
+  // Use this when design system is implemented
+  // --mdc-snackbar-container-color: var(--sys-surface-dim);
+  // --mdc-snackbar-supporting-text-color: var(--sys-secondary);
+
+  color: rgba(255, 255, 255, 0.7);
+  background: #323232;
+  box-shadow:
+    0px 3px 5px -1px rgba(0, 0, 0, 0.2),
+    0px 6px 10px 0px rgba(0, 0, 0, 0.14),
+    0px 1px 18px 0px rgba(0, 0, 0, 0.12);
+  z-index: 9999;
+
+  p {
+    margin: 24px;
+  }
+
+  button {
+    margin: 1rem;
+    min-width: 6rem;
+    background-color: #007cbe;
+    display: flex;
+    justify-content: center;
+  }
+}

apps/ccf-eui/src/themes/common/_theming.scss

@@ -10,8 +10,6 @@
 @use '../../app/shared/components/spatial-search-ui/spatial-search-ui.component.theme' as spatialSearchUi;
 @use '../../app/shared/components/tissue-block-list/tissue-block-list.component.theme' as tissueBlockList;
 @use '../../app/shared/components/term-occurence-list/term-occurrence.component.theme.scss' as termOccurrenceList;
-@use '../../../../../libs/ccf-shared/src/lib//components/spatial-search-keyboard-ui/spatial-search-keyboard-ui.component.theme'
-  as spatialSearchKeyboardUi;
 @use '../../app/shared/components/spinner-overlay/spinner-overlay.theme' as spinner;
 @use '../../app/shared/components/thumbnail-carousel/thumbnail-carousel.theme' as thumbnailCarousel;
 @use '../../app/modules/ontology-exploration/ontology-exploration.theme' as ontologyExploration;
@@ -50,7 +48,6 @@
   @include spatialSearchUi.theme($theme);
   @include tissueBlockList.theme($theme);
   @include termOccurrenceList.theme($theme);
-  @include spatialSearchKeyboardUi.theme($theme);
   @include spinner.theme($theme);
   @include thumbnailCarousel.theme($theme);
   @include filters.theme($theme);

apps/ccf-rui/project.json

@@ -15,22 +15,37 @@
   },
   "targets": {
     "build": {
-      "executor": "@angular-devkit/build-angular:browser",
+      "executor": "@nx/angular:application",
+      "outputs": ["{options.outputPath.base}"],
       "options": {
-        "outputPath": "dist/apps/ccf-rui",
+        "outputPath": {
+          "base": "dist/apps/ccf-rui",
+          "browser": "."
+        },
         "index": "apps/ccf-rui/src/index.html",
-        "main": "apps/ccf-rui/src/main.ts",
-        "polyfills": "apps/ccf-rui/src/polyfills.ts",
+        "browser": "apps/ccf-rui/src/main.ts",
+        "polyfills": ["zone.js"],
         "tsConfig": "apps/ccf-rui/tsconfig.app.json",
-        "assets": ["apps/ccf-rui/src/favicon.png", "apps/ccf-rui/src/assets"],
+        "assets": [
+          "apps/ccf-rui/src/favicon.png",
+          "apps/ccf-rui/src/assets",
+          {
+            "input": "libs/design-system/assets",
+            "glob": "**/*",
+            "output": "./assets"
+          }
+        ],
         "styles": ["apps/ccf-rui/src/styles.scss"],
+        "stylePreprocessorOptions": {
+          "includePaths": ["node_modules/", "libs/design-system/styles"]
+        },
         "scripts": [],
-        "vendorChunk": true,
-        "extractLicenses": false,
-        "buildOptimizer": false,
-        "sourceMap": true,
-        "optimization": false,
-        "namedChunks": true
+        "define": {
+          "define": "undefined"
+        },
+        "outputHashing": "none",
+        "allowedCommonJsDependencies": ["*"],
+        "plugins": ["tools/esbuild-plugins/disable-code-splitting.mjs"]
       },
       "configurations": {
         "production": {
@@ -41,13 +56,6 @@
               "with": "apps/ccf-rui/src/environments/environment.prod.ts"
             }
           ],
-          "optimization": true,
-          "outputHashing": "none",
-          "sourceMap": false,
-          "namedChunks": false,
-          "extractLicenses": true,
-          "vendorChunk": false,
-          "buildOptimizer": true,
           "budgets": [
             {
               "type": "initial",
@@ -61,59 +69,43 @@
             }
           ]
         },
+        "development": {
+          "baseHref": "/",
+          "optimization": false,
+          "extractLicenses": false,
+          "sourceMap": true,
+          "namedChunks": true
+        },
         "staging": {
           "baseHref": "/ui--staging/ccf-rui/",
           "fileReplacements": [
             {
               "replace": "apps/ccf-rui/src/environments/environment.ts",
               "with": "apps/ccf-rui/src/environments/environment.staging.ts"
             }
-          ],
-          "optimization": true,
-          "outputHashing": "none",
-          "sourceMap": false,
-          "namedChunks": false,
-          "extractLicenses": true,
-          "vendorChunk": false,
-          "buildOptimizer": true,
-          "budgets": [
-            {
-              "type": "initial",
-              "maximumWarning": "2mb",
-              "maximumError": "5mb"
-            },
-            {
-              "type": "anyComponentStyle",
-              "maximumWarning": "6kb",
-              "maximumError": "10kb"
-            }
           ]
         },
         "preview": {
           "baseHref": "/apps/ccf-rui/",
-          "buildOptimizer": false,
           "optimization": false,
-          "vendorChunk": true,
           "extractLicenses": false,
           "sourceMap": true,
           "namedChunks": true
         }
       },
-      "defaultConfiguration": ""
+      "defaultConfiguration": "production"
     },
     "serve": {
-      "executor": "@angular-devkit/build-angular:dev-server",
-      "options": {
-        "browserTarget": "ccf-rui:build"
-      },
+      "executor": "@nx/angular:dev-server",
       "configurations": {
         "production": {
-          "browserTarget": "ccf-rui:build:production"
+          "buildTarget": "ccf-rui:build:production"
         },
-        "staging": {
-          "browserTarget": "ccf-rui:build:staging"
+        "development": {
+          "buildTarget": "ccf-rui:build:development"
         }
-      }
+      },
+      "defaultConfiguration": "development"
     },
     "extract-i18n": {
       "executor": "@angular-devkit/build-angular:extract-i18n",
@@ -137,6 +129,9 @@
           "apps/ccf-rui/src/app/**/*.module.ts"
         ],
         "styles": ["apps/ccf-rui/src/styles.scss"],
+        "stylePreprocessorOptions": {
+          "includePaths": ["libs/design-system/styles"]
+        },
         "scripts": []
       }
     },
@@ -147,7 +142,7 @@
       }
     },
     "build-webcomponent": {
-      "command": "node tools/scripts/build-webcomponent.mjs ccf-rui"
+      "command": "node tools/scripts/bundle-scripts.mjs dist/apps/ccf-rui/"
     },
     "compodoc": {
       "executor": "@twittwer/compodoc:compodoc",

apps/ccf-rui/src/app/app.component.html

@@ -1,24 +1,53 @@
-<ccf-registration-modal></ccf-registration-modal>
-<ccf-header
-  [class.header-hidden]="(header$ | async) === false"
-  [logoTooltip]="(logoTooltip$ | async) ?? ''"
-  [homeUrl]="(homeUrl$ | async) ?? ''"
-></ccf-header>
-
-<ccf-drawer-container>
-  <ccf-drawer opened>
-    <ccf-left-sidebar [modalClosed]="registrationStarted"> </ccf-left-sidebar>
-    <ccf-drawer-toggle-button></ccf-drawer-toggle-button>
-  </ccf-drawer>
-  <ccf-drawer position="end" opened>
-    <ccf-right-sidebar
-      [modalClosed]="registrationStarted"
-      (registrationExpanded)="registrationToggle($event)"
-    ></ccf-right-sidebar>
-    <ccf-drawer-toggle-button></ccf-drawer-toggle-button>
-  </ccf-drawer>
-
-  <ccf-drawer-content>
-    <ccf-content class="stage-content" [disablePositionChange]="disablePositionChange"></ccf-content>
-  </ccf-drawer-content>
-</ccf-drawer-container>
+<hra-nav-header-buttons
+  app="rui"
+  appLink="https://apps.humanatlas.io/rui/"
+  appTitle="Registration User Interface"
+  [brandmark]="true"
+></hra-nav-header-buttons>
+<ccf-left-sidebar [modalClosed]="registrationStarted"> </ccf-left-sidebar>
+<hra-expansion-panel [title]="'Registration'" disabled class="registration">
+  <hra-expansion-panel-actions>
+    <button mat-icon-button [matMenuTriggerFor]="menu" hraIconButtonSize="large" aria-label="Icon to open nested menu">
+      <mat-icon>more_vert</mat-icon>
+    </button>
+    <mat-menu #menu="matMenu">
+      <button mat-menu-item matRipple matRippleColor="#201E3D14" (click)="resetStage()">Reset all</button>
+      <mat-divider class="menu-divider"></mat-divider>
+      <button mat-menu-item matRipple matRippleColor="#201E3D14" (click)="resetCamera()">Reset camera view</button>
+      <button mat-menu-item matRipple matRippleColor="#201E3D14" (click)="resetBlock()">Reset tissue block</button>
+      <mat-divider class="menu-divider"></mat-divider>
+      <button mat-menu-item matRipple matRippleColor="#201E3D14" (click)="resetMetadata()">
+        Reset registration metadata
+      </button>
+    </mat-menu>
+  </hra-expansion-panel-actions>
+  <hra-expansion-panel-header-content>
+    <mat-button-toggle-group
+      name="sideSelect"
+      aria-label="Side Select"
+      hideSingleSelectionIndicator
+      hraButtonToggleSize="medium"
+      (change)="updateSide($event.value)"
+    >
+      <mat-button-toggle value="left">Left</mat-button-toggle>
+      <mat-button-toggle value="right">Right</mat-button-toggle>
+      <mat-button-toggle value="anterior" checked>Anterior</mat-button-toggle>
+      <mat-button-toggle value="posterior">Posterior</mat-button-toggle>
+    </mat-button-toggle-group>
+    <mat-button-toggle-group
+      name="modeSelect"
+      aria-label="Mode Select"
+      hideSingleSelectionIndicator
+      hraButtonToggleSize="medium"
+      (change)="updateView($event.value === 'preview')"
+    >
+      <mat-button-toggle value="register" checked>Register</mat-button-toggle>
+      <mat-button-toggle value="preview">Preview</mat-button-toggle>
+    </mat-button-toggle-group>
+  </hra-expansion-panel-header-content>
+</hra-expansion-panel>
+<ccf-content class="stage-content" [disablePositionChange]="disablePositionChange"></ccf-content>
+<ccf-right-sidebar
+  [modalClosed]="registrationStarted"
+  (registrationExpanded)="registrationToggle($event)"
+></ccf-right-sidebar>