Rui update application r8

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/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/src/app/app.component.html

@@ -1,26 +1,25 @@
 <ccf-registration-modal></ccf-registration-modal>
 <hra-nav-header-buttons
-  [app]="'rui'"
-  [appLink]="'https://apps.humanatlas.io/rui/'"
-  [appTitle]="'Registration User Interface'"
+  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 title="Registration" disabled class="registration">
   <hra-expansion-panel-actions>
-    <button
-      mat-icon-button
-      [matMenuTriggerFor]="menu"
-      [hraIconButtonSize]="'large'"
-      aria-label="Icon to open nested menu"
-    >
+    <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" [class]="'reg-overlay'">
+    <mat-menu #menu="matMenu">
       <button mat-menu-item matRipple matRippleColor="#201E3D14" (click)="resetStage()">Reset all</button>
-      <button mat-menu-item matRipple matRippleColor="#201E3D14">Reset camera view</button>
-      <button mat-menu-item matRipple matRippleColor="#201E3D14">Reset tissue block</button>
-      <button mat-menu-item matRipple matRippleColor="#201E3D14">Reset registration metadata</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>
@@ -53,13 +52,3 @@
   [modalClosed]="registrationStarted"
   (registrationExpanded)="registrationToggle($event)"
 ></ccf-right-sidebar>
-<!-- <ccf-header
-  [class.header-hidden]="(header$ | async) === false"
-  [logoTooltip]="(logoTooltip$ | async) ?? ''"
-  [homeUrl]="(homeUrl$ | async) ?? ''"
-></ccf-header> -->
-
-<!-- <ccf-drawer-container>
-  <ccf-drawer-content>
-  </ccf-drawer-content>
-</ccf-drawer-container> -->

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

@@ -1,6 +1,6 @@
 :host {
   display: grid;
-  grid-template-columns: 21rem minmax(586px, calc(100vw - 43.25rem)) 22.25rem;
+  grid-template-columns: 21rem minmax(586px, calc(100vw - 44.25rem)) 22.25rem;
   grid-template-rows: 4.5rem auto;
   grid-template-areas:
     'header registration metadata'
@@ -40,9 +40,11 @@
 
   hra-expansion-panel {
     padding: 1rem;
+
     ::ng-deep .title {
       font: var(--sys-label-large);
     }
+
     hra-expansion-panel-header-content {
       display: flex;
       gap: 1rem;
@@ -52,141 +54,3 @@
     }
   }
 }
-
-// :host {
-//   display: flex;
-//   flex-direction: column;
-//   height: 100%;
-//   overflow: hidden;
-//   font-size: 1rem;
-//   color: black;
-
-//   hra-nav-header-buttons {
-//     margin: 0.75rem;
-//   }
-
-//   hra-expansion-panel {
-//     padding: 1rem;
-//     ::ng-deep .title {
-//       font: var(--sys-label-large);
-//     }
-//     hra-expansion-panel-header-content {
-//       display: flex;
-//       gap: 1rem;
-//       mat-button-toggle-group {
-//         --mat-standard-button-toggle-height: auto;
-//       }
-//     }
-//   }
-
-//   .header-hidden {
-//     display: none;
-//   }
-
-//   ccf-drawer-container {
-//     height: 100%;
-
-//     ccf-drawer {
-//       width: 25.5rem;
-//     }
-
-//     ccf-drawer-content {
-//       position: relative;
-//       z-index: 1;
-
-//       .selector-drawer {
-//         top: 0rem;
-//         display: flex;
-//         flex-direction: column;
-//         position: relative;
-//         height: 5.688rem;
-//         transition: all 0.5s ease-in-out;
-
-//         &.expanded {
-//           height: 15rem;
-//         }
-
-//         ccf-organ-selector {
-//           height: 100%;
-//           padding-top: 0.5rem;
-//           transition: all 0.5s;
-
-//           &.closed {
-//             padding-top: 0;
-//           }
-//         }
-
-//         .close-button-wrapper {
-//           display: flex;
-//           justify-content: center;
-//           height: 0;
-//           z-index: 2;
-
-//           .close-button {
-//             cursor: pointer;
-//             transition: 0.6s;
-
-//             .expand-collapse-icon {
-//               width: 3rem;
-//               height: 1.2rem;
-//               display: flex;
-//               justify-content: center;
-//               align-items: center;
-//               cursor: pointer;
-//               background-color: white;
-//               border-bottom-left-radius: 0.2rem;
-//               border-bottom-right-radius: 0.2rem;
-//               transition: 0.6s;
-
-//               &:hover {
-//                 background-color: #ececec;
-//               }
-//             }
-//           }
-//         }
-
-//         &.closed {
-//           height: 3rem;
-//           top: -2.9rem;
-//         }
-//       }
-
-//       .stage-content {
-//         border-radius: 0.5rem;
-//         height: calc(100% - 4.5rem);
-//         top: 4.5rem;
-//       }
-
-//       .expanded-stage {
-//         height: calc(100% - 1.5rem);
-//         padding-bottom: 1rem;
-//       }
-
-//       .retracted-stage {
-//         height: calc(100% - 2.688rem - 14rem);
-//       }
-//     }
-
-//     ccf-content {
-//       // top: 0rem;
-//       position: absolute;
-//       transition-duration: 0.5s;
-//       transition-timing-function: ease-in-out;
-//       transition-property: all;
-//       bottom: 1.5rem;
-//       z-index: 1;
-//     }
-//   }
-// }
-
-::ng-deep {
-  .mdc-snackbar__surface {
-    box-shadow: none !important;
-  }
-
-  .reg-overlay {
-    button.mat-mdc-menu-item .mat-mdc-menu-item-text {
-      font: var(--sys-label-medium);
-    }
-  }
-}

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

@@ -4,7 +4,6 @@ import {
   ChangeDetectorRef,
   Component,
   ElementRef,
-  HostListener,
   Injector,
   Input,
   OnDestroy,
@@ -34,7 +33,6 @@ import { ThemingService } from './core/services/theming/theming.service';
 import { ModelState, ViewSide, ViewType } from './core/store/model/model.state';
 import { PageState } from './core/store/page/page.state';
 import { RegistrationState } from './core/store/registration/registration.state';
-import { Side } from './modules/content/stage-nav/stage-nav.component';
 import {
   DEFAULT_SCREEN_SIZE_NOTICE_STORAGE_KEY,
   SCREEN_SIZE_NOTICE_MAX_HEIGHT,
@@ -85,6 +83,9 @@ export function openScreenSizeNotice(dialog: MatDialog): Subscription {
   });
 }
 
+/** Valid values for side. */
+export type Side = 'left' | 'right' | 'anterior' | 'posterior' | '3D';
+
 /**
  * App component
  */
@@ -93,6 +94,9 @@ export function openScreenSizeNotice(dialog: MatDialog): Subscription {
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    '(document:mousedown)': 'handleClick($event.target)',
+  },
 })
 export class AppComponent implements OnDestroy, OnInit {
   /** False until the initial registration modal is closed */
@@ -181,7 +185,9 @@ export class AppComponent implements OnDestroy, OnInit {
           snackBar.dismiss();
         },
       },
+
       duration: this.consentService.consent === 'not-set' ? Infinity : 3000,
+      panelClass: 'usage-snackbar',
     });
 
     this.themeMode$.next('light');
@@ -203,53 +209,13 @@ export class AppComponent implements OnDestroy, OnInit {
     }
   }
 
-  /**
-   * Shifts block position when certain keys are pressed
-   *
-   * @param target The keyboard event
-   */
-  @HostListener('document:keydown', ['$event'])
-  handleKey(target: KeyboardEvent): void {
-    const oldPosition = this.model.snapshot.position;
-    if (this.disablePositionChange || !this.registrationStarted) {
-      return;
-    }
-    target.preventDefault();
-    const delta = target.repeat ? 1.0 : 0.5;
-    let newPosition = oldPosition;
-    switch (target.key) {
-      case 'q':
-        newPosition = { ...oldPosition, z: oldPosition.z + delta };
-        break;
-      case 'e':
-        newPosition = { ...oldPosition, z: oldPosition.z - delta };
-        break;
-      case 'w':
-        newPosition = { ...oldPosition, y: oldPosition.y + delta };
-        break;
-      case 's':
-        newPosition = { ...oldPosition, y: oldPosition.y - delta };
-        break;
-      case 'a':
-        newPosition = { ...oldPosition, x: oldPosition.x - delta };
-        break;
-      case 'd':
-        newPosition = { ...oldPosition, x: oldPosition.x + delta };
-        break;
-      default:
-        break;
-    }
-    this.model.setPosition(newPosition);
-  }
-
   /**
    * Disables block position change if an input element is clicked
    *
    * @param target The element clicked
    */
-  @HostListener('document:mousedown', ['$event.target'])
   handleClick(target: HTMLElement): void {
-    const disableWhenClicked = ['mat-mdc-input-element', 'form-input-label'];
+    const disableWhenClicked = ['mat-mdc-input-element', 'mat-mdc-form-field', 'form-input-label'];
     for (const className of disableWhenClicked) {
       if (typeof target.className === 'string' && target.className.includes(className)) {
         this.disablePositionChange = true;
@@ -291,12 +257,28 @@ export class AppComponent implements OnDestroy, OnInit {
   }
 
   resetStage(): void {
+    this.resetMetadata();
+    this.resetCamera();
+  }
+
+  resetCamera(): void {
+    this.model.setViewSide('anterior');
+    this.model.setViewType('register');
+  }
+
+  resetMetadata(): void {
     if (this.registration.snapshot.initialRegistration) {
       this.registration.setToInitialRegistration();
     } else {
       this.model.setOrganDefaults();
     }
-    this.model.setViewSide('anterior');
-    this.model.setViewType('register');
+  }
+
+  resetBlock(): void {
+    if (this.registration.snapshot.initialRegistration) {
+      this.registration.resetPosition();
+    } else {
+      this.model.setDefaultPosition();
+    }
   }
 }