feat(resource): add additional routing for an ark url of a value (DEV-196)

src/app/app-routing.module.ts

@@ -166,6 +166,11 @@ const routes: Routes = [
         component: ResourceComponent,
         runGuardsAndResolvers: 'always'
     },
+    {
+        path: 'resource/:id/:val',
+        component: ResourceComponent,
+        runGuardsAndResolvers: 'always'
+    },
     {
         path: 'cookie-policy',
         component: CookiePolicyComponent

src/app/workspace/resource/operations/display-edit/display-edit.component.html

@@ -2,7 +2,7 @@
     <div class="value-component"
         (mouseenter)="mouseEnter()"
         (mouseleave)="mouseLeave()"
-        [ngClass]='backgroundColor'>
+        [ngClass]="{'hover' : valueHovered, 'highlight' : shouldHighlightValue(valueUuidToHighlight)}">
         <span [ngSwitch]="valueTypeOrClass">
             <!-- display value is cast as 'any' because the compiler cannot infer the value type expected by the child component -->
             <app-text-value-as-string class="parent-value-component" #displayVal *ngSwitchCase="'ReadTextValueAsString'" [mode]="mode" [displayValue]="$any(displayValue)" [guiElement]="textValueGuiEle"></app-text-value-as-string>

src/app/workspace/resource/operations/display-edit/display-edit.component.spec.ts

@@ -64,6 +64,8 @@ class TestTextValueAsStringComponent {
     @Input() mode;
 
     @Input() displayValue;
+
+    @Input() guiElement: 'simpleText' | 'textArea' | 'richText' = 'simpleText';
 }
 
 @Component({

src/app/workspace/resource/operations/display-edit/display-edit.component.ts

@@ -79,6 +79,8 @@ export class DisplayEditComponent implements OnInit {
 
     @Input() projectStatus: boolean;
 
+    @Input() valueUuidToHighlight: string;
+
     @Output() referredResourceClicked: EventEmitter<ReadLinkValue> = new EventEmitter<ReadLinkValue>();
 
     @Output() referredResourceHovered: EventEmitter<ReadLinkValue> = new EventEmitter<ReadLinkValue>();
@@ -104,7 +106,7 @@ export class DisplayEditComponent implements OnInit {
     showActionBubble = false;
 
     // string used as class name to add add to value-component element on hover
-    backgroundColor = '';
+    valueHovered: boolean;
 
     dateDisplayOptions: 'era' | 'calendar' | 'all';
 
@@ -218,7 +220,7 @@ export class DisplayEditComponent implements OnInit {
      */
     activateEditMode() {
         this.editModeActive = true;
-        this.backgroundColor = '';
+        this.valueHovered = false;
         this.mode = 'update';
 
         // hide comment toggle button while in edit mode
@@ -358,12 +360,12 @@ export class DisplayEditComponent implements OnInit {
     }
 
     /**
-     * show CRUD buttons and add 'highlighted' class to the element only if editModeActive is false
+     * show CRUD buttons and add 'hover' class to the element only if editModeActive is false
      */
     mouseEnter() {
         this.showActionBubble = true;
         if (!this.editModeActive) {
-            this.backgroundColor = 'highlighted';
+            this.valueHovered = true;
         }
     }
 
@@ -372,7 +374,19 @@ export class DisplayEditComponent implements OnInit {
      */
     mouseLeave() {
         this.showActionBubble = false;
-        this.backgroundColor = '';
+        this.valueHovered = false;
+    }
+
+    /**
+     * given a uuid of a value, highlights the corresponding value
+     * @param uuid uuid of the value
+     * @returns true if the provided uuid matches the uuid of the displayValue and edit mode is not active, false otherwise
+     */
+    shouldHighlightValue(uuid: string): boolean {
+        if (uuid !== undefined && uuid === this.displayValue.uuid && !this.editModeActive) {
+            return true;
+        }
+        return false;
     }
 
     /**

src/app/workspace/resource/properties/properties.component.html

@@ -122,6 +122,7 @@ <h3 class="label mat-title">
                             [propArray]="resource.resProps"
                             [canDelete]="deleteValueIsAllowed(prop)"
                             [projectStatus]="project?.status"
+                            [valueUuidToHighlight]="valueUuidToHighlight"
                             (referredResourceClicked)="openResource($event)"
                             (referredResourceHovered)="previewResource($event)">
                         </app-display-edit>

src/app/workspace/resource/properties/properties.component.spec.ts

@@ -103,9 +103,13 @@ class TestPropertyParentComponent implements OnInit, OnDestroy {
 })
 class TestDisplayValueComponent {
 
-    @Input() parentResource: DspResource;
     @Input() displayValue: ReadValue;
+    @Input() propArray: PropertyInfoValues[];
+    @Input() parentResource: DspResource;
     @Input() configuration?: object;
+    @Input() canDelete: boolean;
+    @Input() projectStatus: boolean;
+    @Input() valueUuidToHighlight: string;
 
     @Output() referredResourceClicked: EventEmitter<ReadLinkValue> = new EventEmitter<ReadLinkValue>();
     @Output() referredResourceHovered: EventEmitter<ReadLinkValue> = new EventEmitter<ReadLinkValue>();

src/app/workspace/resource/properties/properties.component.ts

@@ -86,6 +86,8 @@ export class PropertiesComponent implements OnInit, OnChanges, OnDestroy {
      */
     @Input() isAnnotation = false;
 
+    @Input() valueUuidToHighlight: string;
+
     /**
      * output `referredProjectClicked` of resource view component:
      * can be used to go to project page

src/app/workspace/resource/resource.component.html

@@ -35,15 +35,15 @@
             <!-- first tab for the main resource e.g. book -->
             <mat-tab [label]="resource.res.entityInfo?.classes[resource.res.type].label">
                 <app-properties *ngIf="resource.res" [resource]="resource" [displayProjectInfo]="true"
-                [adminPermissions]="adminPermissions" [editPermissions]="editPermissions">
+                [adminPermissions]="adminPermissions" [editPermissions]="editPermissions" [valueUuidToHighlight]="valueUuid">
                 </app-properties>
             </mat-tab>
 
             <!-- incoming resource -->
             <mat-tab *ngIf="incomingResource"
                 [label]="incomingResource.res.entityInfo.classes[incomingResource.res.type].label">
                 <app-properties *ngIf="incomingResource.res" [resource]="incomingResource" [displayProjectInfo]="false"
-                [adminPermissions]="adminPermissions" [editPermissions]="editPermissions">
+                [adminPermissions]="adminPermissions" [editPermissions]="editPermissions" [valueUuidToHighlight]="valueUuid">
                 </app-properties>
             </mat-tab>
 
@@ -60,7 +60,7 @@
                 <div class="region-property" *ngFor="let annotation of annotationResources" [id]="annotation.res.id"
                     [class.active]="annotation.res.id === selectedRegion">
                     <app-properties [resource]="annotation" [displayProjectInfo]="false" [isAnnotation]="true"
-                    [adminPermissions]="adminPermissions" [editPermissions]="editPermissions">
+                    [adminPermissions]="adminPermissions" [editPermissions]="editPermissions" [valueUuidToHighlight]="valueUuid">
                     </app-properties>
                 </div>
 

src/app/workspace/resource/resource.component.ts

@@ -43,6 +43,9 @@ export class ResourceComponent implements OnInit, OnChanges, OnDestroy {
 
     @Input() resourceIri: string;
 
+    // used to store the uuid of the value that is parsed from the url params
+    valueUuid: string;
+
     // this will be the main resource
     resource: DspResource;
 
@@ -95,6 +98,7 @@ export class ResourceComponent implements OnInit, OnChanges, OnDestroy {
 
         this._route.params.subscribe(params => {
             this.resourceIri = params['id'];
+            this.valueUuid = params['val'];
             this.getResource(this.resourceIri);
         });
 
@@ -200,7 +204,6 @@ export class ResourceComponent implements OnInit, OnChanges, OnDestroy {
         this._dspApiConnection.v2.res.getResource(iri).subscribe(
             (response: ReadResource) => {
                 const res = new DspResource(response);
-
                 this.resource = res;
                 this.selectedTabLabel = this.resource.res.entityInfo?.classes[this.resource.res.type].label;
 

src/assets/style/_viewer.scss

@@ -70,10 +70,14 @@
   position: relative;
 }
 
-.value-component.highlighted {
+.value-component.hover {
   background-color: #f5f5f5;
 }
 
+.value-component.highlight {
+  background-color: #f4f400;
+}
+
 .crud-buttons {
   grid-row-start: 1;
   grid-row-end: auto;