diff options
| -rw-r--r-- | public/basicTol.svg | 118 | ||||
| -rw-r--r-- | public/itol.jpg | bin | 0 -> 49494 bytes | |||
| -rw-r--r-- | public/onezoom.jpg | bin | 0 -> 42595 bytes | |||
| -rw-r--r-- | public/sweepCmp.jpg | bin | 0 -> 172925 bytes | |||
| -rw-r--r-- | public/sweepPCmp.jpg | bin | 0 -> 173181 bytes | |||
| -rw-r--r-- | public/treeWithTiles.jpg | bin | 0 -> 38205 bytes | |||
| -rw-r--r-- | src/components/HelpModal.vue | 69 | ||||
| -rw-r--r-- | src/util.ts | 1 |
8 files changed, 160 insertions, 28 deletions
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->Bacteria --> +<g id="edge1" class="edge"> +<title>Cellular Organisms->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->Eukaryotes --> +<g id="edge2" class="edge"> +<title>Cellular Organisms->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->Archaea --> +<g id="edge3" class="edge"> +<title>Cellular Organisms->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->Land Plants --> +<g id="edge4" class="edge"> +<title>Eukaryotes->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->Fungi --> +<g id="edge5" class="edge"> +<title>Eukaryotes->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->Animals --> +<g id="edge6" class="edge"> +<title>Eukaryotes->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->Ferns --> +<g id="edge9" class="edge"> +<title>Land Plants->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->Spermatophyta --> +<g id="edge10" class="edge"> +<title>Land Plants->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->Mammals --> +<g id="edge7" class="edge"> +<title>Animals->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->Reptiles --> +<g id="edge8" class="edge"> +<title>Animals->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 Binary files differnew file mode 100644 index 0000000..15f1034 --- /dev/null +++ b/public/itol.jpg diff --git a/public/onezoom.jpg b/public/onezoom.jpg Binary files differnew file mode 100644 index 0000000..39d04c2 --- /dev/null +++ b/public/onezoom.jpg diff --git a/public/sweepCmp.jpg b/public/sweepCmp.jpg Binary files differnew file mode 100644 index 0000000..9150eff --- /dev/null +++ b/public/sweepCmp.jpg diff --git a/public/sweepPCmp.jpg b/public/sweepPCmp.jpg Binary files differnew file mode 100644 index 0000000..b8c488c --- /dev/null +++ b/public/sweepPCmp.jpg diff --git a/public/treeWithTiles.jpg b/public/treeWithTiles.jpg Binary files differnew file mode 100644 index 0000000..c88e958 --- /dev/null +++ b/public/treeWithTiles.jpg 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 |
