Changes for illustration wc

hubmapconsortium · Nov 17, 2023 · a9c96ab · a9c96ab
1 parent f922bd0
commit a9c96ab
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 6 deletions.
diff --git a/apps/medical-illustration/webcomponent-example.html b/apps/medical-illustration/webcomponent-example.html
@@ -7,7 +7,8 @@
     <link rel="icon" type="image/x-icon" href="favicon.ico" />
     <script>
       window.addEventListener('DOMContentLoaded', () => {
-        const illustrationsUrl = '../assets/TEMP/2d-ftu-illustrations.jsonld';
+        const illustrationsUrl =
+          'https://hubmapconsortium.github.io/hra-ui/apps/medical-illustration/assets/TEMP/2d-ftu-illustrations.jsonld';
         let focusId = '';
 
         function updateHighlight(node) {

diff --git a/apps/medical-illustration/webcomponent-multiple-illustrations-example.html b/apps/medical-illustration/webcomponent-multiple-illustrations-example.html
@@ -7,7 +7,8 @@
     <link rel="icon" type="image/x-icon" href="favicon.ico" />
     <script>
       window.addEventListener('DOMContentLoaded', () => {
-        const illustrationsUrl = '../assets/TEMP/2d-ftu-illustrations.jsonld';
+        const illustrationsUrl =
+          'https://hubmapconsortium.github.io/hra-ui/apps/medical-illustration/assets/TEMP/2d-ftu-illustrations.jsonld';
         let focusId = '';
 
         function updateHighlight(node) {

diff --git a/example-webcomponents/hra-illustration/hra-illustration-example.html b/example-webcomponents/hra-illustration/hra-illustration-example.html
@@ -5,15 +5,15 @@
     <title>Medical Illustration Web Component</title>
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="icon" type="image/x-icon" href="favicon.ico" />
-    <script src="hra-illustration.js"></script>
     <script>
       window.addEventListener('DOMContentLoaded', () => {
-        const illustrationsUrl = '../assets/TEMP/2d-ftu-illustrations.jsonld';
+        const illustrationsUrl =
+          'https://hubmapconsortium.github.io/hra-ui/apps/medical-illustration/assets/TEMP/2d-ftu-illustrations.jsonld';
         let focusId = '';
 
         function updateHighlight(node) {
           if (node.detail) {
-            focusId = node.detail.id;
+            focusId = node.detail.ontologyId;
             illustration.highlightId = focusId;
             illustration2.highlightId = focusId;
           } else {

diff --git a/libs/components/molecules/src/lib/interactive-svg/interactive-svg.component.ts b/libs/components/molecules/src/lib/interactive-svg/interactive-svg.component.ts
@@ -147,7 +147,8 @@ export class InteractiveSvgComponent<T extends NodeMapEntry> implements OnChange
     }
 
     let id = entry.id;
-    const element = crosswalkEl.querySelector(`#${id}`);
+    const encodedId = this.encodeId(entry.id);
+    const element = crosswalkEl.querySelector(`#${id}, #${encodedId}`);
     if (!element) {
       return;
     } else if (element.nodeName !== 'g') {