Merge pull request #145 from ts4nfdi/feat/ontology-tab-for-metadatawi…

…dget Feat/ontology tab for metadatawidget
ts4nfdi · Oct 15, 2024 · d95cb7a · d95cb7a
2 parents f011c20 + 3dff7f1
commit d95cb7a
Show file tree

Hide file tree

Showing 17 changed files with 893 additions and 582 deletions.
diff --git a/.gitignore b/.gitignore
@@ -143,3 +143,5 @@ fabric.properties
 /.nvmrc
 /dist/
 /.idea/
+
+.vscode/
diff --git a/.vscode/settings.json b/.vscode/settings.json
diff --git a/dist_plainjs/manually_maintained_types.d.ts b/dist_plainjs/manually_maintained_types.d.ts
@@ -140,6 +140,10 @@ declare global {
           | "property"
           | string;
       parameter?: string;
+      altNamesTab?: boolean;
+      hierarchyTab?: boolean;
+      crossRefTab?: boolean;
+      terminologyInfoTab?: boolean;
     }
     )=>void,
     createAlternativeNameTab:(props:{
@@ -252,6 +256,11 @@ declare global {
           | "property"
           | string;
       parameter?: string,
+      termLink?: string,
+      altNamesTab?: boolean,
+      hierarchyTab?: boolean,
+      crossRefTab?: boolean,
+      terminologyInfoTab?: boolean,
       onNavigateToOntology?: (ontologyId: string, entity: { iri: string, label?: string, entityType: string }) => void
     })=>void,
     createOntologyInfo:(props:{

diff --git a/dist_plainjs/terminology-service-suite.js b/dist_plainjs/terminology-service-suite.js
diff --git a/dist_plainjs/terminology-service-suite.min.js b/dist_plainjs/terminology-service-suite.min.js
diff --git a/src/app/types.ts b/src/app/types.ts
@@ -36,6 +36,23 @@ type ParameterObj = {
     parameter?: string;
 };
 
+type TermParameterObj = {
+    /**
+     * Additional parameters to pass to the API.
+     *
+     * Each parameter can be combined via
+     * the special character <i><b>&</b></i>. The values of a parameter key can be combined with a comma sign
+     * <i><b>,</b></i>. The following keys could be used:<br/> <br/>
+     *  <table>
+     *  <thead><tr><th>Parameter</th><th>Description</th></tr></thead>
+     *  <tr><td>lang</td><td>Set the language for the response e.g. <b><i>en</i></b>, <b><i>de</i></b>, <b><i>fr</i></b>. The default value is <b><i>en</i></b>.</td></tr>
+     *  <tr><td>collection</td><td>Restrict a search to a terminology subset e.g. <b><i>collection=nfdi4health</i></b></td></tr>
+     *  <tr><td>database</td><td>Restrict a search via the API Gateway to specific terminology software stacks, choose from <b><i>ols</i></b>, <b><i>ontoportal</i></b>, or <b><i>skosmos</i></b></td></tr>
+     * </table>
+     */
+    parameter?: string;
+};
+
 type ApiObj = {
     /**
      * The API instance for the API call.
@@ -121,6 +138,32 @@ type TargetLinkObj = {
     targetLink?: string;
 }
 
+type ContainerWidthObj = {
+    /**
+     * The container width for a target widget render function. Example: EuiCard for OntologyInfoWidget
+     */
+    width?: number
+}
+
+type TabList = {
+    /**
+     * It is possible to show and hide the Alternative Names tab. **True** shows the tab. **False** hides the tab.
+     */
+    altNamesTab?: boolean;
+    /**
+     * It is possible to show and hide the Hierarchy tab. **True** shows the tab. **False** hides the tab.
+     */
+    hierarchyTab?: boolean;
+    /**
+     * It is possible to show and hide the Cross-references tab. **True** shows the tab. **False** hides the tab.
+     */
+    crossRefTab?: boolean;
+    /**
+     * It is possible to show and hide the About Terminology Info tab. **True** shows the tab. **False** hides the tab.
+     */
+    terminologyInfoTab?: boolean;
+}
+
 export type AutocompleteWidgetProps = EuiComboBoxProps<string> & ParameterObj & ApiObj & {
     /**
      * A method that is called once the set of selection changes
@@ -202,6 +245,7 @@ export type ColorSecondObj = {
     colorSecond?: EuiLinkColor | string;
 }
 
+
 export type BreadcrumbWidgetProps = ApiObj & OptionalEntityTypeObj & OptionalOntologyIdObj & ForcedIriObj & ParameterObj & UseLegacyObj & ColorFirstObj & ColorSecondObj & OnNavigateToOntology;
 
 export type BreadcrumbPresentationProps = OptionalOntologyIdObj & ColorFirstObj & ColorSecondObj & {
@@ -253,9 +297,9 @@ export type IriWidgetProps = ForcedIriObj & {
     copyButton?: boolean;
 }
 
-export type TabWidgetProps = ApiObj & OptionalEntityTypeObj & OptionalOntologyIdObj & ForcedIriObj & ParameterObj & UseLegacyObj;
+export type TabWidgetProps = ApiObj & OptionalEntityTypeObj & OptionalOntologyIdObj & ForcedIriObj & TermParameterObj & UseLegacyObj & TabList;
 
-export type TabPresentationProps = ApiObj & OptionalOntologyIdObj & ForcedIriObj & UseLegacyObj & OptionalEntityTypeObj & {
+export type TabPresentationProps = ApiObj & OptionalOntologyIdObj & ForcedIriObj & UseLegacyObj & OptionalEntityTypeObj & TabList &{
     data: Thing;
 }
 
@@ -402,10 +446,23 @@ export type TitlePresentationProps = TitleTextObj & {
     defaultValue?: string
 }
 
-export type MetadataWidgetProps = ApiObj & OptionalEntityTypeObj & OptionalOntologyIdObj & ForcedIriObj & ParameterObj & UseLegacyObj & OnNavigateToOntology;
+export type MetadataWidgetProps = ApiObj &
+    OptionalEntityTypeObj &
+    OptionalOntologyIdObj &
+    ForcedIriObj &
+    TermParameterObj &
+    UseLegacyObj &
+    OnNavigateToOntology &
+    TabList &
+    {
+        /**
+         * The term backlink. User can use this to make the term's label a link. For example, a link to the term page on a terminology service.
+         */
+        termLink?: string;
+    };
 
 /*TODO: add onNavigate functions*/
-export type OntologyInfoWidgetProps = ApiObj & ForcedOntologyIdObj & HasTitleObj & ShowBadgesObj & ParameterObj & UseLegacyObj;
+export type OntologyInfoWidgetProps = ApiObj & ForcedOntologyIdObj & HasTitleObj & ShowBadgesObj & ParameterObj & UseLegacyObj & ContainerWidthObj;
 
 export type ResourcesWidgetProps = ApiObj & TargetLinkObj & ParameterObj & {
     /**
@@ -507,4 +564,4 @@ export type MetadataCompactProps = Partial<Omit<EuiCardProps, "layout">> & ApiOb
     result: SearchResultProps;
 };
 
-export type TermDepictionWidgetProps = ApiObj & ForcedIriObj & ForcedOntologyIdObj & UseLegacyObj;
+export type TermDepictionWidgetProps = ApiObj & ForcedIriObj & ForcedOntologyIdObj & UseLegacyObj;
diff --git a/src/components/widgets/MetadataWidget/MetadataWidget.stories.tsx b/src/components/widgets/MetadataWidget/MetadataWidget.stories.tsx
@@ -24,4 +24,6 @@ export {
     OLS4V2,
     SelectingDefiningOntology,
     DefiningOntologyUnavailable,
+    HiddenTabs,
+    TermAsLink
 } from "./MetadataWidgetStories"
diff --git a/src/components/widgets/MetadataWidget/MetadataWidget.tsx b/src/components/widgets/MetadataWidget/MetadataWidget.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import {EuiFlexGroup, EuiFlexItem, EuiLoadingSpinner, EuiProvider, EuiText} from "@elastic/eui";
+import {EuiFlexGroup, EuiFlexItem, EuiLoadingSpinner, EuiProvider, EuiText, EuiLink} from "@elastic/eui";
 import { IriWidget } from "./IriWidget";
 import {QueryClient, QueryClientProvider, useQuery} from "react-query";
 import {OlsApi} from "../../../api/OlsApi";
@@ -24,8 +24,13 @@ type MetadataInfo = {
 }
 
 function MetadataWidget(props: MetadataWidgetProps) {
-  const { iri, api, ontologyId, entityType, parameter, useLegacy, onNavigateToOntology } = props;
+  const { iri, api, ontologyId, entityType, parameter, useLegacy, onNavigateToOntology, hierarchyTab, crossRefTab, terminologyInfoTab, altNamesTab, termLink } = props;
   const olsApi = new OlsApi(api);
+  const metadataWidgetCSS = `
+    .boldText{
+      font-weight: bold;
+    }
+  `;
 
   const {
     data,
@@ -65,7 +70,23 @@ function MetadataWidget(props: MetadataWidgetProps) {
   function render(data: MetadataInfo) {
     return (
       <>
+        <style>{metadataWidgetCSS}</style>
         <EuiFlexGroup direction="column">
+          <EuiFlexItem grow={false} style={{ maxWidth: 600 }}>
+                {termLink ?
+                  <EuiLink href={termLink} target="_blank" external={false}>
+                    <TitlePresentation
+                    title={data.entity.getLabel()}
+                    className="boldText"
+                    />
+                  </EuiLink>
+                  :
+                  <TitlePresentation
+                    title={data.entity.getLabel()}
+                    className="boldText"
+                  />
+                }
+          </EuiFlexItem>
           <EuiFlexItem grow={false}>
                 <span>
                   <BreadcrumbPresentation
@@ -87,11 +108,6 @@ function MetadataWidget(props: MetadataWidgetProps) {
                   </EuiFlexItem>
                 </EuiFlexGroup>
               </EuiFlexItem>
-              <EuiFlexItem grow={false} style={{ maxWidth: 600 }}>
-                <TitlePresentation
-                  title={data.entity.getLabel()}
-                />
-              </EuiFlexItem>
             </EuiFlexGroup>
           </EuiFlexItem>
           <EuiFlexItem style={{ maxWidth: 600 }}>
@@ -113,6 +129,10 @@ function MetadataWidget(props: MetadataWidgetProps) {
                 api={api}
                 ontologyId={props.ontologyId ? props.ontologyId : data.entity.getOntologyId()}
                 useLegacy={useLegacy}
+                hierarchyTab={hierarchyTab}
+                crossRefTab={crossRefTab}
+                terminologyInfoTab={terminologyInfoTab}
+                altNamesTab={altNamesTab}
               />
           </EuiFlexItem>
         </EuiFlexGroup>
@@ -150,6 +170,11 @@ function WrappedMetadataWidget(props: MetadataWidgetProps) {
                     parameter={props.parameter}
                     useLegacy={props.useLegacy}
                     onNavigateToOntology={props.onNavigateToOntology}
+                    termLink={props.termLink}
+                    altNamesTab={props.altNamesTab}
+                    hierarchyTab={props.hierarchyTab}
+                    crossRefTab={props.crossRefTab}
+                    terminologyInfoTab={props.terminologyInfoTab}
                 />
             </QueryClientProvider>
         </EuiProvider>

diff --git a/src/components/widgets/MetadataWidget/MetadataWidgetHTML.stories.ts b/src/components/widgets/MetadataWidget/MetadataWidgetHTML.stories.ts
@@ -32,7 +32,12 @@ window['SemLookPWidgets'].createMetadata(
         entityType:"${args.entityType}",
         parameter:"${args.parameter}",
         useLegacy:${args.useLegacy},
-        onNavigateToOntology:${args.onNavigateToOntology}
+        onNavigateToOntology:${args.onNavigateToOntology},
+        termLink: "${args.termLink}",
+        altNamesTab: ${args.altNamesTab},
+        hierarchyTab: ${args.hierarchyTab},
+        crossRefTab: ${args.crossRefTab},
+        terminologyInfoTab: ${args.terminologyInfoTab}
     },
     document.querySelector('#metadata_widget_container_${num}')
 )
@@ -50,5 +55,7 @@ export {
     OLS4V2,
     SelectingDefiningOntology,
     DefiningOntologyUnavailable,
-    DefinedByAlsoAppearsInWidgets
+    DefinedByAlsoAppearsInWidgets,
+    HiddenTabs,
+    TermAsLink
 } from "./MetadataWidgetStories"
diff --git a/src/components/widgets/MetadataWidget/MetadataWidgetStories.ts b/src/components/widgets/MetadataWidget/MetadataWidgetStories.ts
@@ -50,6 +50,11 @@ export const MetadataWidgetStoryArgs = {
     ontologyId: "",
     entityType: "",
     iri: "",
+    termLink: "",
+    altNamesTab: true,
+    hierarchyTab: true,
+    crossRefTab: true,
+    terminologyInfoTab: true,
     onNavigateToOntology: "Console message",
 }
 
@@ -123,3 +128,28 @@ export const DefinedByAlsoAppearsInWidgets = {
         ontologyId: "efo"
     }
 }
+
+export const HiddenTabs = {
+    storyName: "Hidden Tabs",
+    args: {
+        api: globals.EBI_API_ENDPOINT,
+        ontologyId: "ncit",
+        iri: "http://purl.obolibrary.org/obo/NCIT_C2984",
+        entityType: "term",
+        useLegacy: false,
+        parameter: "",
+        altNamesTab: false,
+        hierarchyTab: false,
+        crossRefTab: false,
+        terminologyInfoTab: false
+    }
+};
+
+export const TermAsLink = {
+    args: {
+        api: globals.EBI_API_ENDPOINT,
+        iri: "http://purl.obolibrary.org/obo/HP_0000819",
+        ontologyId: "efo",
+        termLink: "https://www.ebi.ac.uk/ols4/ontologies/efo/classes/http%253A%252F%252Fpurl.obolibrary.org%252Fobo%252FHP_0000819"
+    }
+}