From 1d443d39a5dda4c6993e03aeb1384e8c1e17205b Mon Sep 17 00:00:00 2001
From: Terry Truong <terry06890@gmail.com>
Date: Tue, 5 Jul 2022 03:11:01 +1000
Subject: Add images to help information

---
 public/basicTol.svg          | 118 +++++++++++++++++++++++++++++++++++++++++++
 public/itol.jpg              | Bin 0 -> 49494 bytes
 public/onezoom.jpg           | Bin 0 -> 42595 bytes
 public/sweepCmp.jpg          | Bin 0 -> 172925 bytes
 public/sweepPCmp.jpg         | Bin 0 -> 173181 bytes
 public/treeWithTiles.jpg     | Bin 0 -> 38205 bytes
 src/components/HelpModal.vue |  69 +++++++++++++++----------
 src/util.ts                  |   1 +
 8 files changed, 160 insertions(+), 28 deletions(-)
 create mode 100644 public/basicTol.svg
 create mode 100644 public/itol.jpg
 create mode 100644 public/onezoom.jpg
 create mode 100644 public/sweepCmp.jpg
 create mode 100644 public/sweepPCmp.jpg
 create mode 100644 public/treeWithTiles.jpg

diff --git a/public/basicTol.svg b/public/basicTol.svg
new file mode 100644
index 0000000..484336c
--- /dev/null
+++ b/public/basicTol.svg
@@ -0,0 +1,118 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+ "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<!-- Generated by graphviz version 2.43.0 (0)
+ -->
+<!-- Title: tol Pages: 1 -->
+<svg width="287pt" height="172pt"
+ viewBox="0.00 0.00 287.00 172.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 168)">
+<title>tol</title>
+<polygon fill="#fafaf9" stroke="transparent" points="-4,4 -4,-168 283,-168 283,4 -4,4"/>
+<!-- Cellular Organisms -->
+<g id="node1" class="node">
+<title>Cellular Organisms</title>
+<text text-anchor="middle" x="144" y="-154.2" font-family="Ubuntu" font-size="11.00">Cellular Organisms</text>
+</g>
+<!-- Bacteria -->
+<g id="node2" class="node">
+<title>Bacteria</title>
+<text text-anchor="middle" x="74" y="-104.2" font-family="Ubuntu" font-size="11.00">Bacteria</text>
+</g>
+<!-- Cellular Organisms&#45;&gt;Bacteria -->
+<g id="edge1" class="edge">
+<title>Cellular Organisms&#45;&gt;Bacteria</title>
+<path fill="none" stroke="black" d="M135.13,-149.92C121.74,-140.74 96.49,-123.42 83.01,-114.18"/>
+</g>
+<!-- Eukaryotes -->
+<g id="node3" class="node">
+<title>Eukaryotes</title>
+<text text-anchor="middle" x="144" y="-104.2" font-family="Ubuntu" font-size="11.00">Eukaryotes</text>
+</g>
+<!-- Cellular Organisms&#45;&gt;Eukaryotes -->
+<g id="edge2" class="edge">
+<title>Cellular Organisms&#45;&gt;Eukaryotes</title>
+<path fill="none" stroke="black" d="M144,-149.72C144,-140.47 144,-123.29 144,-114.12"/>
+</g>
+<!-- Archaea -->
+<g id="node4" class="node">
+<title>Archaea</title>
+<text text-anchor="middle" x="214" y="-104.2" font-family="Ubuntu" font-size="11.00">Archaea</text>
+</g>
+<!-- Cellular Organisms&#45;&gt;Archaea -->
+<g id="edge3" class="edge">
+<title>Cellular Organisms&#45;&gt;Archaea</title>
+<path fill="none" stroke="black" d="M152.87,-149.92C166.26,-140.74 191.51,-123.42 204.99,-114.18"/>
+</g>
+<!-- Land Plants -->
+<g id="node5" class="node">
+<title>Land Plants</title>
+<text text-anchor="middle" x="80" y="-54.2" font-family="Ubuntu" font-size="11.00">Land Plants</text>
+</g>
+<!-- Eukaryotes&#45;&gt;Land Plants -->
+<g id="edge4" class="edge">
+<title>Eukaryotes&#45;&gt;Land Plants</title>
+<path fill="none" stroke="black" d="M135.89,-99.92C123.65,-90.74 100.57,-73.42 88.24,-64.18"/>
+</g>
+<!-- Fungi -->
+<g id="node6" class="node">
+<title>Fungi</title>
+<text text-anchor="middle" x="144" y="-54.2" font-family="Ubuntu" font-size="11.00">Fungi</text>
+</g>
+<!-- Eukaryotes&#45;&gt;Fungi -->
+<g id="edge5" class="edge">
+<title>Eukaryotes&#45;&gt;Fungi</title>
+<path fill="none" stroke="black" d="M144,-99.72C144,-90.47 144,-73.29 144,-64.12"/>
+</g>
+<!-- Animals -->
+<g id="node7" class="node">
+<title>Animals</title>
+<text text-anchor="middle" x="199" y="-54.2" font-family="Ubuntu" font-size="11.00">Animals</text>
+</g>
+<!-- Eukaryotes&#45;&gt;Animals -->
+<g id="edge6" class="edge">
+<title>Eukaryotes&#45;&gt;Animals</title>
+<path fill="none" stroke="black" d="M151.19,-99.72C161.79,-90.47 181.48,-73.29 191.98,-64.12"/>
+</g>
+<!-- Ferns -->
+<g id="node10" class="node">
+<title>Ferns</title>
+<text text-anchor="middle" x="15" y="-4.2" font-family="Ubuntu" font-size="11.00">Ferns</text>
+</g>
+<!-- Land Plants&#45;&gt;Ferns -->
+<g id="edge9" class="edge">
+<title>Land Plants&#45;&gt;Ferns</title>
+<path fill="none" stroke="black" d="M71.77,-49.92C59.33,-40.74 35.89,-23.42 23.37,-14.18"/>
+</g>
+<!-- Spermatophyta -->
+<g id="node11" class="node">
+<title>Spermatophyta</title>
+<text text-anchor="middle" x="89" y="-4.2" font-family="Ubuntu" font-size="11.00">Spermatophyta</text>
+</g>
+<!-- Land Plants&#45;&gt;Spermatophyta -->
+<g id="edge10" class="edge">
+<title>Land Plants&#45;&gt;Spermatophyta</title>
+<path fill="none" stroke="black" d="M81.18,-49.72C82.91,-40.47 86.13,-23.29 87.85,-14.12"/>
+</g>
+<!-- Mammals -->
+<g id="node8" class="node">
+<title>Mammals</title>
+<text text-anchor="middle" x="191" y="-4.2" font-family="Ubuntu" font-size="11.00">Mammals</text>
+</g>
+<!-- Animals&#45;&gt;Mammals -->
+<g id="edge7" class="edge">
+<title>Animals&#45;&gt;Mammals</title>
+<path fill="none" stroke="black" d="M197.95,-49.72C196.41,-40.47 193.55,-23.29 192.02,-14.12"/>
+</g>
+<!-- Reptiles -->
+<g id="node9" class="node">
+<title>Reptiles</title>
+<text text-anchor="middle" x="257" y="-4.2" font-family="Ubuntu" font-size="11.00">Reptiles</text>
+</g>
+<!-- Animals&#45;&gt;Reptiles -->
+<g id="edge8" class="edge">
+<title>Animals&#45;&gt;Reptiles</title>
+<path fill="none" stroke="black" d="M206.58,-49.72C217.76,-40.47 238.53,-23.29 249.6,-14.12"/>
+</g>
+</g>
+</svg>
diff --git a/public/itol.jpg b/public/itol.jpg
new file mode 100644
index 0000000..15f1034
Binary files /dev/null and b/public/itol.jpg differ
diff --git a/public/onezoom.jpg b/public/onezoom.jpg
new file mode 100644
index 0000000..39d04c2
Binary files /dev/null and b/public/onezoom.jpg differ
diff --git a/public/sweepCmp.jpg b/public/sweepCmp.jpg
new file mode 100644
index 0000000..9150eff
Binary files /dev/null and b/public/sweepCmp.jpg differ
diff --git a/public/sweepPCmp.jpg b/public/sweepPCmp.jpg
new file mode 100644
index 0000000..b8c488c
Binary files /dev/null and b/public/sweepPCmp.jpg differ
diff --git a/public/treeWithTiles.jpg b/public/treeWithTiles.jpg
new file mode 100644
index 0000000..c88e958
Binary files /dev/null and b/public/treeWithTiles.jpg differ
diff --git a/src/components/HelpModal.vue b/src/components/HelpModal.vue
index 506a1d8..ab55325 100644
--- a/src/components/HelpModal.vue
+++ b/src/components/HelpModal.vue
@@ -1,7 +1,7 @@
 <template>
 <div class="fixed left-0 top-0 w-full h-full bg-black/40" @click="onClose">
 	<div class="absolute left-1/2 -translate-x-1/2 top-1/2 -translate-y-1/2
-		w-4/5 max-w-[16cm] max-h-[80%] overflow-auto" :style="styles">
+		w-[90%] max-w-[16cm] max-h-[80%] overflow-auto" :style="styles">
 		<close-icon @click.stop="onClose" ref="closeIcon"
 			class="block absolute top-1 right-1 md:top-2 md:right-2 w-8 h-8 hover:cursor-pointer"/>
 		<h1 class="text-center text-xl font-bold pt-2 pb-1">Help</h1>
@@ -19,13 +19,14 @@
 							In theory, the Tree of Life represents all living organisms, along with their parents,
 							grandparents, and so on, all the way up to a single common ancestor.
 						</p>
-						<div class="my-2 w-4/5 mx-auto flex flex-col items-center gap-1 md:flex-row md:gap-2 md:w-fit">
-							<img src="data:," width="240" height="180" alt="Simple Tree of Life"
-								class="border border-black block mx-auto md:mx-0 md:shrink-0"/>
-							<p class="text-sm md:max-w-[4cm]">
-								Each dot is a <strong>node</strong>, and represents a <strong>taxon</strong>,
-								which might be a species, genus, or otherwise. The top node is the
-								<strong>root</strong>, and those at the bottom are <strong>leaves</strong>.
+						<div class="my-2 flex flex-col items-center gap-1 md:flex-row md:gap-2">
+							<img src="/basicTol.svg" alt="Simple Tree of Life"
+								class="border border-stone-300 rounded mx-auto md:mx-0 md:shrink-0"/>
+							<p class="text-xs md:text-sm text-stone-500 md:text-current">
+								Each name labels a <strong>node</strong>, and represents a biological
+								<strong>taxon</strong>, such as a species or genus.
+								The top node is the <strong>root</strong>, and those at the bottom are
+								<strong>leaves</strong>.
 							</p>
 						</div>
 						<p>
@@ -35,8 +36,8 @@
 						</p>
 						<br/>
 						<p>
-							Determining the structure of the tree is an ongoing area
-							of work, but much of it has been traced out using genetic information,
+							Determining the structure of the tree is an ongoing area of work,
+							but much of it has been traced out using genetic information,
 							statistical analysis, and human inference.
 						</p>
 					</div>
@@ -55,9 +56,8 @@
 							Tilo attempts to display the Tree of Life by representing nodes with tiles,
 							and placing tiles within other tiles to show structure.
 						</p>
-						<img src="data:," width="400" height="200" alt="Tree with Tile layout"
-							class="border border-black block mx-auto mt-2"/>
-						<br/>
+						<img src="/treeWithTiles.jpg" alt="Tree and tile-layout comparison"
+							class="border border-stone-300 mx-auto my-2"/>
 						<p>
 							Within a tile's header:
 							<ul class="list-disc pl-4">
@@ -83,15 +83,25 @@
 							There are many other methods of visualisation, which can enable viewing
 							many more nodes as text, or for exploring a more natural tree-like diagram.
 							Examples include
-							<a href="https://itol.embl.de/">iTOL</a>
+							<a href="https://itol.embl.de/" :style="anchorStyles">iTOL</a>
 								<external-link-icon :class="linkIconClasses"/>
-							and <a href="https://www.onezoom.org/">OneZoom</a>
+							and <a href="https://www.onezoom.org/" :style="anchorStyles">OneZoom</a>
 								<external-link-icon :class="linkIconClasses"/>.
-							<div class="flex gap-2 justify-evenly mt-1 md:mt-2">
-								<img src="data:," width="200" height="200" alt="iTOL"
-									class="border border-black block"/>
-								<img src="data:," width="200" height="200" alt="OneZoom"
-									class="border border-black block"/>
+							<div class="flex gap-2 mt-1 md:mt-2">
+								<div class="flex flex-col items-center">
+									<img src="/itol.jpg" alt="iTOL screenshot"
+										class="border border-stone-300"/>
+									<div class="text-xs text-center">
+										iTOL screenshot taken 05/07/2022
+									</div>
+								</div>
+								<div class="flex flex-col items-center">
+									<img src="/onezoom.jpg" alt="OneZoom screenshot"
+										class="border border-stone-300"/>
+									<div class="text-xs text-center">
+										OneZoom screenshot taken 05/07/2022
+									</div>
+								</div>
 							</div>
 						</p>
 					</div>
@@ -115,11 +125,12 @@
 							<li>
 								<h2 class="font-bold">Sweep leaves left</h2>
 								<p>
-									If disabled, an expanded tile's children are simply laid out in order.
+									If disabled, an expanded tile's children are simply laid out in order,
+									fromleft to right, then top to bottom.
 									This can leave a lot of empty space when large children are next to small ones.
 									Moving the unexpanded children (the 'leaves') to the left helps avoid this.
-									<img src="data:," width="400" height="200" alt="Sweep leaves setting effect"
-										class="border border-black block mx-auto my-1"/>
+									<img src="/sweepCmp.jpg" alt="Sweep-leaves on/off comparison"
+										class="border border-stone-300 mx-auto my-1"/>
 								</p>
 							</li>
 							<li>
@@ -127,8 +138,8 @@
 								<p>
 									If enabled, leaves being swept left can be moved beyond the tile's
 									rectangle, into leftover space in the parent.
-									<img src="data:," width="400" height="200" alt="Sweep into parent setting effect"
-										class="border border-black block mx-auto my-1"/>
+									<img src="/sweepPCmp.jpg" alt="Sweep-into-parent on/off comparison"
+										class="border border-stone-300 mx-auto my-1"/>
 								</p>
 							</li>
 							<li>
@@ -188,8 +199,9 @@
 							<li>
 								<h2 class="font-bold">Disambiguation Nodes</h2>
 								<p>
-									These have names like 'Iris [2]'. When multiple nodes have the same
-									name, all but one gets an '[N]' appended, where N is 2 or above.
+									These have names like 'Iris [2]'. When multiple nodes are found to
+									have the same name, all but one gets an '[N]' appended, where N
+									is 2 or higher.
 								</p>
 							</li>
 							<li>
@@ -404,7 +416,8 @@ export default defineComponent({
 			return this.downIconClasses + ' -rotate-90';
 		},
 		contentClasses(): string {
-			return 'p-2 text-sm md:text-base';
+			return 'py-2 mx-2 md:mx-4 text-sm md:text-base';
+				// For some reason, a smaller margin sometimes results in the collapsible not fully expanding
 		},
 		anchorStyles(): Record<string,string> {
 			return {
diff --git a/src/util.ts b/src/util.ts
index 034879e..142e8eb 100644
--- a/src/util.ts
+++ b/src/util.ts
@@ -135,6 +135,7 @@ export function randWeightedChoice(weights: number[]): number | null {
 export function capitalizeWords(str: string){
 	str = str.replace(/\b\w/g, x => x.toUpperCase()); // '\b' matches word boundary, '\w' is like [a-zA-Z0-9_]
 	str = str.replace(/(\w)'S/, '$1\'s'); // Avoid cases like "traveler's tree" -> "Traveler'S Tree"
+	str = str.replace(/ And\b/, ' and'); // Avoid cases like "frogs and toads" -> "Frogs And Toads"
 	return str;
 }
 // Used to async-await for until after a timeout
-- 
cgit v1.2.3