add ontologies display

IPK-BIT · Feb 6, 2025 · 5e84fb7 · 5e84fb7
1 parent 08aa464
commit 5e84fb7
Show file tree

Hide file tree

Showing 8 changed files with 123 additions and 5 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -0,0 +1,7 @@
+# v0.1.1
+- Add Ontology Source Reference
+- Header title is limited to 50 character; otherwise abbreviated
+
+# v0.1.0
+- Read in RO-Crate Metadata JSON of an ARC and display information
+- Displays Investigation, People, Studies, and Assays
diff --git a/CITATION.cff b/CITATION.cff
@@ -24,4 +24,4 @@ keywords:
   - RO-Crate
   - Visualization
 license: MIT
-version: 0.1.0
+version: 0.1.1
diff --git a/index.html b/index.html
@@ -33,7 +33,7 @@
           "http://edamontology.org/operation_1812"
         ],
         "license": "https://spdx.org/licenses/MIT",
-        "softwareVersion": "0.1.0",
+        "softwareVersion": "0.1.1",
         "codeRepository": "https://github.com/IPK-BIT/ro-crate-viewer",
         "isAccessibleForFree": true,
         "keywords": [

diff --git a/src/components/general/Header.svelte b/src/components/general/Header.svelte
@@ -10,7 +10,11 @@
             <img src="/rocrate-viewer/rocrate.png" alt="RO-Crate logo" />
         </div>
         <div class="header__title">
+            {#if $rocrate['about']['title'].length>47 || $rocrate['about']['identifier'].length > 50}
+            <h1 title={$rocrate['about']['title']?$rocrate['about']['title']:$rocrate['about']['identifier']}>{($rocrate['about']['title']?$rocrate['about']['title']:$rocrate['about']['identifier']).slice(0, 50)}...</h1>
+            {:else}
             <h1>{$rocrate['about']['title']?$rocrate['about']['title']:$rocrate['about']['identifier']}</h1>
+            {/if}
         </div>
     </div>
     <div class="header__menu">
@@ -19,6 +23,7 @@
             <li><button class="btn-ghost font-medium" on:click={()=>{$rocrateLevel = 'people'}}>People</button></li>
             <li><button class="btn-ghost font-medium" on:click={()=>{$rocrateLevel = 'studies'}}>Studies</button></li>
             <li><button class="btn-ghost font-medium" on:click={()=>{$rocrateLevel = 'assays'}}>Assays</button></li>
+            <li><button class="btn-ghost font-medium" on:click={()=>{$rocrateLevel = 'ontologies'}}>Ontologies</button></li>
         </ul>
     </div>
 </div>

diff --git a/src/components/general/MainView.svelte b/src/components/general/MainView.svelte
@@ -6,12 +6,14 @@
     import ComponentWrapper from "@/components/general/ComponentWrapper.svelte";
 
     import { rocrateLevel } from '@/stores/rocrate';
+    import Ontologies from "@/components/pages/Ontologies.svelte";
 
     const components: any = {
         'investigation': Investigation,
         'people': People,
         'studies': Studies,
-        'assays': Assays
+        'assays': Assays,
+        'ontologies': Ontologies
     }
 </script>
 

diff --git a/src/components/pages/Ontologies.svelte b/src/components/pages/Ontologies.svelte
@@ -0,0 +1,48 @@
+<script lang="ts">
+    import OntologySourceReference from '@/components/rocrate/OntologySourceReference.svelte';
+    import { rocrate, rocrateLevel } from '@/stores/rocrate';
+
+    let ontologies = $rocrate['about']['ontologySourceReferences'];
+
+    let ontology;
+    function focusOntology(ontologyId: string) {
+        ontology = ontologies.find(p => p['@id'] === ontologyId);
+    }
+</script>
+
+<div class="grid">
+    <ul>
+    {#each ontologies as ontology}
+        <li>
+            <button class="btn-ghost font-medium" on:click={()=>focusOntology(ontology['@id'])}>{ontology['name']?ontology['name']:ontology['file']}</button>
+        </li>
+    {/each}
+    </ul>
+
+    <section>
+
+        <div class="main-content">
+            {#if ontology}
+            <OntologySourceReference {ontology} />
+            {:else}
+                {#if ontologies && ontologies.length > 0}
+                    <p>Select an ontology to view its details</p>
+                {:else}
+                    <p>No ontologies found</p>
+                {/if}
+            {/if}
+        </div>
+    </section>
+</div>
+
+<style>
+    .grid {
+        display: grid;
+        grid-template-columns: 1fr 4fr;
+        gap: .5rem;
+    }
+
+    .main-content {
+        padding-top: 1rem;
+    }  
+</style>
diff --git a/src/components/rocrate/OntologySourceReference.svelte b/src/components/rocrate/OntologySourceReference.svelte
@@ -0,0 +1,49 @@
+<script lang="ts">
+    export let ontology;
+</script>
+
+<table>
+    <tbody>
+        {#if ontology['name']}
+        <tr>
+            <th>Name</th>
+            <td>{ontology['name']}</td>
+        </tr>
+        {/if}
+        {#if ontology['version']}
+        <tr>
+            <th>Version</th>
+            <td>{ontology['version']}</td>
+        </tr>
+        {/if}
+        {#if ontology['file']}
+        <tr>
+            <th>File</th>
+            <td>{ontology['file']}</td>
+        </tr>
+        {/if}
+        {#if ontology['description']}
+        <tr>
+            <th>Description</th>
+            <td>{ontology['description']}</td>
+        </tr>
+        {/if}
+        {#if ontology['comments']}
+        <tr>
+            <th>Comments</th>
+            <td>
+                <table style="border: 0;">
+                    <tbody>
+                    {#each ontology.comments as comment}
+                        <tr>
+                            <th style="border: 0; border-bottom: 1px solid black;">{comment['name']}</th>
+                            <td style="border: 0; border-bottom: 1px solid black;">{comment['value']}</td>
+                        </tr>
+                    {/each}
+                </tbody>
+                </table>  
+            </td>
+        </tr>
+        {/if}
+    </tbody>
+</table>
diff --git a/src/components/rocrate/Publication.svelte b/src/components/rocrate/Publication.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
     import Modal from "@/components/general/Modal.svelte";
+    import OntologyAnnotation from "@/components/rocrate/OntologyAnnotation.svelte";
     import Person from "@/components/rocrate/Person.svelte";
 
     export let publication;
@@ -11,6 +12,8 @@
     }
 
     let focussedAuthor = publication['authorList'][0];
+
+    console.log(publication);
 </script>
 
 <table>
@@ -34,12 +37,16 @@
         {#if publication.status}
         <tr>
             <th>Status</th>
-            <td>{publication['status']['annotationValue']}</td>
+            <td><button class="btn-ghost modal-link" on:click={()=>document.getElementById('annotation-modal').showModal()}>{publication['status']['annotationValue']}</button></td>
         </tr>
         {/if}
     </tbody>
 </table>
-
+<Modal id="annotation-modal">
+    {#if publication.status}
+        <OntologyAnnotation ontologyAnnotation={publication['status']} />
+    {/if}
+</Modal>
 <Modal id="person-modal">
     <Person person={focussedAuthor} />
 </Modal>