From 0f39be89c3d5620b8187b1d7621b7680800c268b Mon Sep 17 00:00:00 2001
From: Terry Truong <terry06890@gmail.com>
Date: Tue, 30 Aug 2022 14:54:33 +1000
Subject: Display IUCN status in TileInfoModal

---
 src/components/TileInfoModal.vue | 32 ++++++++++++++++++++++++++++++++
 src/tol.ts                       |  2 ++
 2 files changed, 34 insertions(+)

(limited to 'src')

diff --git a/src/components/TileInfoModal.vue b/src/components/TileInfoModal.vue
index 421f22f..a6b2986 100644
--- a/src/components/TileInfoModal.vue
+++ b/src/components/TileInfoModal.vue
@@ -20,6 +20,11 @@
 			<div class="flex justify-evenly text-sm md:text-base">
 				<div> Children: {{(tolNode.children.length).toLocaleString()}} </div>
 				<div> Tips: {{(tolNode.tips).toLocaleString()}} </div>
+				<div v-if="tolNode.iucn != null">
+					<a href="https://en.wikipedia.org/wiki/Endangered_species_(IUCN_status)"
+						target="_blank" title="IUCN Conservation Status">IUCN</a>:
+					<span :style="iucnStyles">{{getDisplayIucn(tolNode.iucn)}}</span>
+				</div>
 				<div>
 					<a :href="'https://tree.opentreeoflife.org/opentree/argus/opentree13.4@' + tolNode.otolId"
 						target="_blank" title="Look up in Open Tree of Life">OTOL <external-link-icon class="inline-block w-3 h-3"/></a>
@@ -170,6 +175,21 @@ export default defineComponent({
 				overflow: 'visible auto',
 			};
 		},
+		iucnStyles(): Record<string,string> {
+			let col = 'currentcolor';
+			switch (this.tolNode.iucn){
+				case 'least concern': col = 'green'; break;
+				case 'near threatened': col = 'limegreen'; break;
+				case 'vulnerable': col = 'goldenrod'; break;
+				case 'endangered': col = 'darkorange'; break;
+				case 'critically endangered': col = 'red'; break;
+				case 'extinct in the wild':
+				case 'extinct species': col = 'gray'; break;
+			}
+			return {
+				color: col,
+			};
+		},
 		linkCopyLabelStyles(): Record<string,string> {
 			return {
 				color: this.uiOpts.textColor,
@@ -186,6 +206,18 @@ export default defineComponent({
 				return `${capitalizeWords(tolNode.commonName)} (aka ${capitalizeWords(name)})`;
 			}
 		},
+		getDisplayIucn(iucn: string){
+			switch (this.tolNode.iucn){
+				case 'least concern': return 'LC';
+				case 'near threatened': return 'NT';
+				case 'vulnerable': return 'VN';
+				case 'endangered': return 'EN';
+				case 'critically endangered': return 'CR';
+				case 'extinct in the wild': return 'EX';
+				case 'extinct species': return 'ES';
+				case 'data deficient': return 'DD';
+			}
+		},
 		getImgStyles(tolNode: TolNode | null): Record<string,string> {
 			let imgName = null;
 			if (tolNode != null && typeof(tolNode.imgName) === 'string'){ // Exclude string-array case
diff --git a/src/tol.ts b/src/tol.ts
index 2618bfc..bd299b3 100644
--- a/src/tol.ts
+++ b/src/tol.ts
@@ -12,6 +12,7 @@ export class TolNode {
 	commonName: null | string;
 	imgName: null | string |
 		[string, string] | [null, string] | [string, null]; // Pairs represent compound images
+	iucn: null | string;
 	constructor(children: string[] = [], parent = null, tips = 0, pSupport = false){
 		this.otolId = null;
 		this.children = children;
@@ -20,6 +21,7 @@ export class TolNode {
 		this.pSupport = pSupport;
 		this.commonName = null;
 		this.imgName = null;
+		this.iucn = null;
 	}
 }
 // Maps TolNode names to TolNode objects
-- 
cgit v1.2.3