Display IUCN status in TileInfoModal

1 files changed, 32 insertions, 0 deletions

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