MET-6977 Chained Rerun Design

Author: andyjmaclean

projects/sandbox/src/app/_services/sandbox-conf.service.ts

@@ -3,6 +3,8 @@ import { FixedLengthArray, SandboxPage, SandboxPageType } from '../_models';
 
 @Injectable({ providedIn: 'root' })
 export class SandboxConfService {
+  readonly ANCESTOR_MODE = 'ancestor-mode';
+
   sandboxNavConf: FixedLengthArray<SandboxPage, 8> = [
     {
       stepTitle: 'Home',
@@ -51,17 +53,23 @@ export class SandboxConfService {
   }
 
   isAncestorMode(): boolean {
-    return this.sandboxNavConf[2].stepSubClass === 'ancestor-mode';
+    return (this.sandboxNavConf[2].stepSubClass ?? '').includes(this.ANCESTOR_MODE);
+  }
+
+  setAncestorAlignment(alignment: string): void {
+    if (this.sandboxNavConf[2].stepSubTitle) {
+      this.sandboxNavConf[2].stepSubClass = `${this.ANCESTOR_MODE} ${alignment}`;
+    }
   }
 
-  toggleAncestorMode(): void {
+  toggleAncestorMode(alignment: string): void {
     if (this.sandboxNavConf[2].stepSubTitle) {
       this.sandboxNavConf[2].stepSubTitle = undefined;
       this.sandboxNavConf[2].stepSubClass = undefined;
       this.sandboxNavConf[2].stepSubTitleClick = undefined;
     } else {
       this.sandboxNavConf[2].stepSubTitle = true;
-      this.sandboxNavConf[2].stepSubClass = 'ancestor-mode';
+      this.sandboxNavConf[2].stepSubClass = `${this.ANCESTOR_MODE} ${alignment}`;
       this.sandboxNavConf[2].stepSubTitleClick = this.toggleAncestorMode.bind(this);
     }
   }

projects/sandbox/src/app/dataset-info/dataset-info.component.html

@@ -201,7 +201,7 @@
       <li>
         <a
           tabindex="0"
-          title="view rerun"
+          title="view rerun ({{ item.id }}) - '{{ item.name }}'"
           #link
           class="rerun-nav"
           href="/dataset/{{ item.id }}"
@@ -274,7 +274,7 @@
       <li>
         <a
           tabindex="0"
-          title="view rerun"
+          title="view sibling rerun ({{ item.id }}) - '{{ item.name }}'"
           #link
           class="rerun-nav"
           href="/dataset/{{ item.id }}"

projects/sandbox/src/app/dataset-info/dataset-info.component.ts

@@ -246,6 +246,18 @@ export class DatasetInfoComponent extends SubscriptionManager implements OnInit
     }
   });
 
+  hierarchyAlignment = computed(() => {
+    const hd = this.hierarchyData();
+    if (hd) {
+      if (hd.siblings.length && !hd.children.length) {
+        return 'push-left';
+      } else if (hd.children.length && !hd.siblings.length) {
+        return 'push-right';
+      }
+    }
+    return 'align-center';
+  });
+
   /**
    *
    **/
@@ -403,6 +415,10 @@ export class DatasetInfoComponent extends SubscriptionManager implements OnInit
       }
     });
 
+    effect(() => {
+      this.sandboxConf.setAncestorAlignment(this.hierarchyAlignment());
+    });
+
     effect(() => {
       const di = this.datasetInfo();
       if (di) {
@@ -639,8 +655,15 @@ export class DatasetInfoComponent extends SubscriptionManager implements OnInit
     });
   }
 
+  /**
+   * toggleAncestorMode
+   * template utility
+   **/
   toggleAncestorMode(): void {
-    this.sandboxConf.toggleAncestorMode();
+    const hd = this.hierarchyData();
+    if (hd) {
+      this.sandboxConf.toggleAncestorMode(this.hierarchyAlignment());
+    }
   }
 
   isAncestorMode(): boolean {

projects/sandbox/src/assets/sass/ancestry.scss

@@ -8,7 +8,6 @@
 @use 'shared-styles/assets/sass/scss/iconography/svg-icons-metis';
 @use './mixins/circle';
 
-$primary-nav-shift-left: 2rem;
 $mid-grey: #777;
 
 $line-colour: variables-colours.$eu-grey-middle;
@@ -140,7 +139,7 @@ $z-blur: 4;
   }
 }
 
-@mixin header-plus() {
+@mixin header-plus($primary-nav-shift-left) {
   &::after,
   &::before {
     content: '';
@@ -363,7 +362,7 @@ body.theme-classic {
   @include hide-all(true);
 }
 
-body.theme-white {
+@mixin ancestry($primary-nav-shift-left) {
   .child-datasets,
   .parent-dataset,
   .related-datasets {
@@ -571,48 +570,12 @@ body.theme-white {
       }
     }
 
-    /*
-    @include apply-to-unfoldable {
-      // right-aligned teeth
-      @include teeth(1em, 13rem, false, true);
-      ul {
-        &:not(:empty) + .child-datasets-label::after {
-          border-top: 1px solid $line-colour;
-          border-right: 1px solid $line-colour;
-          content: '';
-          position: absolute;
-          right: -1.5em;
-          bottom: -1.25em;
-          width: 3rem;
-          height: 1.75rem;
-          display: block;
-        }
-
-        li {
-          padding-left: 0;
-          a {
-            text-align: right;
-            flex-direction: row-reverse;
-            padding-right: 2rem;
-            margin-left: auto;
-            width: 100%;
-          }
-          .rerun-item-field {
-            position: static;
-            padding-right: 0.5rem;
-          }
-        }
-      }
-    }
-    */
-
     .child-datasets-label:not(.inline) {
       display: flex;
-      right: calc(-147px - $primary-nav-shift-left);
+      left: 7rem;
       position: absolute;
-
-      // pushed up when content present
       top: -0.5rem;
+      white-space: nowrap;
     }
 
     ul:empty + .child-datasets-label {
@@ -1063,36 +1026,56 @@ body.theme-white {
       }
     }
   }
+}
 
-  .sandbox-navigation-head.ancestor-mode {
-    @include header-plus();
-
-    .nav-orb.labelled::before {
-      background-image: svg-icons-metis.svg-url-icon-rerun(#fff);
-      background-position-x: 1.5px;
-      background-position-y: 2.25px;
-    }
+body.theme-white {
+  .sandbox-navigation-head {
+    &:not(.ancestor-mode) + .sandbox-navigation-content {
+      @include hide-all();
 
-    & + .sandbox-navigation-content {
-      .parent-dataset .parent-link {
-        transition: opacity $time1 linear $time1;
-      }
-      .title-id .rerun-nav {
-        color: variables-colours.$eu-orange;
-        @include ancestry-opener(variables-colours.$eu-orange);
+      .parent-dataset {
+        opacity: 0;
+        top: -3rem;
+        .parent-link,
+        .parent-label {
+          opacity: 0;
+        }
       }
     }
-  }
+    &.ancestor-mode {
+      .nav-orb.labelled::before {
+        background-image: svg-icons-metis.svg-url-icon-rerun(#fff);
+        background-position-x: 1.5px;
+        background-position-y: 2.25px;
+      }
 
-  .sandbox-navigation-head:not(.ancestor-mode) + .sandbox-navigation-content {
-    @include hide-all();
+      & + .sandbox-navigation-content {
+        .parent-dataset .parent-link {
+          transition: opacity $time1 linear $time1;
+        }
+        .title-id .rerun-nav {
+          color: variables-colours.$eu-orange;
+          @include ancestry-opener(variables-colours.$eu-orange);
+        }
+      }
 
-    .parent-dataset {
-      opacity: 0;
-      top: -3rem;
-      .parent-link,
-      .parent-label {
-        opacity: 0;
+      &.align-center {
+        @include header-plus(3.5rem);
+        & + .sandbox-navigation-content {
+          @include ancestry(3.5rem);
+        }
+      }
+      &.push-left {
+        @include header-plus(10em);
+        & + .sandbox-navigation-content {
+          @include ancestry(10em);
+        }
+      }
+      &.push-right {
+        @include header-plus(0em);
+        & + .sandbox-navigation-content {
+          @include ancestry(0rem);
+        }
       }
     }
   }