diff --git a/SynonymGroup.ts b/SynonymGroup.ts index 967c821..92c254c 100644 --- a/SynonymGroup.ts +++ b/SynonymGroup.ts @@ -8,7 +8,7 @@ export class SynonymGroup implements AsyncIterable { */ isFinished = false; /** Used internally to watch for new names found */ - private monitor = new EventTarget(); + private monitor: EventTarget = new EventTarget(); /** Used internally to abort in-flight network requests when SynonymGroup is aborted */ private controller = new AbortController(); @@ -94,9 +94,12 @@ export class SynonymGroup implements AsyncIterable { this.startWithSubTaxa = startWithSubTaxa; if (taxonName.startsWith("http")) { - this.getName(taxonName, { searchTerm: true, subTaxon: false }).finally( - () => this.finish(), - ); + this.getName(taxonName, { searchTerm: true, subTaxon: false }) + .catch((e) => { + console.log("SynoGroup Failure: ", e); + this.controller.abort("SynoGroup Failed"); + }) + .finally(() => this.finish()); } else { const name = [ ...taxonName.split(" ").filter((n) => !!n), @@ -602,7 +605,7 @@ LIMIT 500`; cite, }; } else if (this.expanded.has(t.tc.value)) { - console.log("Skipping known", t.tc.value); + // console.log("Skipping known", t.tc.value); return; } else { authorizedTCNames.push({ diff --git a/example/index.css b/example/index.css index b61bbaa..a7066fc 100644 --- a/example/index.css +++ b/example/index.css @@ -21,7 +21,8 @@ syno-name { margin: 1rem 0; } -.rank { +.rank, +.justification { font-size: 0.8rem; line-height: 1rem; padding: 0 0.2rem; @@ -61,14 +62,6 @@ syno-name { } } -.justification { - font-size: 0.8rem; - padding: 0.2rem; - margin: 0.2rem; - border-radius: 0.2rem; - background: #ededed; -} - h2, h3, ul { @@ -87,13 +80,14 @@ syno-treatment, } .details { - display: grid; + /* display: grid; */ } .hidden { height: 0; + max-height: 0; overflow: hidden; - transition: height 1s; + transition: all 200ms; } &.expanded { @@ -105,7 +99,9 @@ syno-treatment, margin: -0.2rem; .hidden { - height: 100%; + height: auto; + max-height: 100px; + overflow: auto; } } } diff --git a/example/index.html b/example/index.html index 2a454c9..e717096 100644 --- a/example/index.html +++ b/example/index.html @@ -9,6 +9,31 @@

SynoLib

+

+ Use url parameters to configure: (e.g. /?q=Sadayoshia&subtaxa=&show_col) +

+
+ Click on a treatment to show all cited taxa. Click on a taxon identifier + beneath a treatment to scroll to that name — if it is (already) in the + list. +

+
diff --git a/example/index.ts b/example/index.ts index aece473..72b7cb8 100644 --- a/example/index.ts +++ b/example/index.ts @@ -72,17 +72,13 @@ class SynoTreatment extends HTMLElement { } this.append(date); - const creators = document.createElement("span"); - creators.innerText = "…"; - this.append(": ", creators); - - const title = document.createElement("i"); - title.innerText = "…"; - this.append(" ", title); + const spinner = document.createElement("progress"); + this.append(": ", spinner); const url = document.createElement("a"); url.classList.add("treatment", "uri"); url.href = trt.url; + url.target = "_blank"; url.innerText = trt.url.replace("http://treatment.plazi.org/id/", ""); url.innerHTML += icons.link; this.append(" ", url); @@ -92,6 +88,10 @@ class SynoTreatment extends HTMLElement { this.append(names); trt.details.then((details) => { + const creators = document.createElement("span"); + const title = document.createElement("i"); + spinner.replaceWith(creators, " ", title); + if (details.creators) creators.innerText = details.creators; else { creators.classList.add("missing"); @@ -115,9 +115,12 @@ class SynoTreatment extends HTMLElement { names.append(line); details.treats.def.forEach((n) => { - const url = document.createElement("code"); + const url = document.createElement("a"); url.classList.add("taxon", "uri"); - url.innerText = n.replace("http://taxon-concept.plazi.org/id/", ""); + const short = n.replace("http://taxon-concept.plazi.org/id/", ""); + url.innerText = short; + url.href = "#" + short; + url.title = "show name"; line.append(url); }); } @@ -132,15 +135,21 @@ class SynoTreatment extends HTMLElement { names.append(line); details.treats.aug.forEach((n) => { - const url = document.createElement("code"); + const url = document.createElement("a"); url.classList.add("taxon", "uri"); - url.innerText = n.replace("http://taxon-concept.plazi.org/id/", ""); + const short = n.replace("http://taxon-concept.plazi.org/id/", ""); + url.innerText = short; + url.href = "#" + short; + url.title = "show name"; line.append(url); }); details.treats.treattn.forEach((n) => { - const url = document.createElement("code"); + const url = document.createElement("a"); url.classList.add("taxon", "uri"); - url.innerText = n.replace("http://taxon-name.plazi.org/id/", ""); + const short = n.replace("http://taxon-name.plazi.org/id/", ""); + url.innerText = short; + url.href = "#" + short; + url.title = "show name"; line.append(url); }); } @@ -155,9 +164,12 @@ class SynoTreatment extends HTMLElement { names.append(line); details.treats.dpr.forEach((n) => { - const url = document.createElement("code"); + const url = document.createElement("a"); url.classList.add("taxon", "uri"); - url.innerText = n.replace("http://taxon-concept.plazi.org/id/", ""); + const short = n.replace("http://taxon-concept.plazi.org/id/", ""); + url.innerText = short; + url.href = "#" + short; + url.title = "show name"; line.append(url); }); } @@ -170,15 +182,21 @@ class SynoTreatment extends HTMLElement { names.append(line); details.treats.citetc.forEach((n) => { - const url = document.createElement("code"); + const url = document.createElement("a"); url.classList.add("taxon", "uri"); - url.innerText = n.replace("http://taxon-concept.plazi.org/id/", ""); + const short = n.replace("http://taxon-concept.plazi.org/id/", ""); + url.innerText = short; + url.href = "#" + short; + url.title = "show name"; line.append(url); }); details.treats.citetn.forEach((n) => { - const url = document.createElement("code"); + const url = document.createElement("a"); url.classList.add("taxon", "uri"); - url.innerText = n.replace("http://taxon-name.plazi.org/id/", ""); + const short = n.replace("http://taxon-name.plazi.org/id/", ""); + url.innerText = short; + url.href = "#" + short; + url.title = "show name"; line.append(url); }); } @@ -203,13 +221,17 @@ class SynoName extends HTMLElement { title.append(" ", rank_badge); if (name.taxonNameURI) { - const name_uri = document.createElement("code"); + const name_uri = document.createElement("a"); name_uri.classList.add("taxon", "uri"); - name_uri.innerText = name.taxonNameURI.replace( + const short = name.taxonNameURI.replace( "http://taxon-name.plazi.org/id/", "", ); - name_uri.title = name.taxonNameURI; + name_uri.innerText = short; + name_uri.id = short; + name_uri.href = name.taxonNameURI; + name_uri.target = "_blank"; + name_uri.innerHTML += icons.link; title.append(" ", name_uri); } @@ -255,17 +277,21 @@ class SynoName extends HTMLElement { this.append(treatments); if (authorizedName.taxonConceptURI) { - const name_uri = document.createElement("code"); + const name_uri = document.createElement("a"); name_uri.classList.add("taxon", "uri"); - name_uri.innerText = authorizedName.taxonConceptURI.replace( + const short = authorizedName.taxonConceptURI.replace( "http://taxon-concept.plazi.org/id/", "", ); - name_uri.title = authorizedName.taxonConceptURI; - authName.append(name_uri); + name_uri.innerText = short; + name_uri.id = short; + name_uri.href = authorizedName.taxonConceptURI; + name_uri.target = "_blank"; + name_uri.innerHTML += icons.link; + authName.append(" ", name_uri); } if (authorizedName.colURI) { - const col_uri = document.createElement("code"); + const col_uri = document.createElement("a"); col_uri.classList.add("col", "uri"); const id = authorizedName.colURI.replace( "https://www.catalogueoflife.org/data/taxon/", @@ -273,8 +299,10 @@ class SynoName extends HTMLElement { ); col_uri.innerText = id; col_uri.id = id; - col_uri.title = authorizedName.colURI; - authName.append(col_uri); + col_uri.href = authorizedName.colURI; + col_uri.target = "_blank"; + col_uri.innerHTML += icons.link; + authName.append(" ", col_uri); const li = document.createElement("div"); li.classList.add("treatmentline"); @@ -304,7 +332,7 @@ class SynoName extends HTMLElement { ); col_uri.innerText = id; col_uri.href = `#${id}`; - col_uri.title = authorizedName.acceptedColURI!; + col_uri.title = "show name"; line.append(col_uri); } } @@ -361,7 +389,8 @@ async function justify(name: Name): Promise { const indicator = document.createElement("div"); root.insertAdjacentElement("beforebegin", indicator); indicator.append(`Finding Synonyms for ${NAME} `); -indicator.append(document.createElement("progress")); +const progress = document.createElement("progress"); +indicator.append(progress); const timeStart = performance.now();