From a8f80a02b88055cfcb45664ce3a3d24c2b2da98c Mon Sep 17 00:00:00 2001
From: Terry Truong <terry06890@gmail.com>
Date: Sun, 10 Jul 2022 23:41:20 +1000
Subject: Update project-level and client-side documentation

---
 src/App.vue                      |  6 +++---
 src/README.md                    | 41 ++++++++++++++++++-----------------
 src/components/AncestryBar.vue   |  2 +-
 src/components/HelpModal.vue     |  4 ++--
 src/components/LoadingModal.vue  |  4 +---
 src/components/SButton.vue       |  3 +--
 src/components/SearchModal.vue   |  4 ++--
 src/components/SettingsModal.vue |  4 +---
 src/components/Tile.vue          |  3 ++-
 src/components/TileInfoModal.vue |  3 +--
 src/components/TutorialPane.vue  |  8 +++----
 src/index.css                    | 46 +++++++++++++++++++++-------------------
 src/lib.ts                       |  4 ++--
 src/main.ts                      |  8 +++----
 src/tol.ts                       |  6 +++---
 15 files changed, 72 insertions(+), 74 deletions(-)

(limited to 'src')

diff --git a/src/App.vue b/src/App.vue
index f26e1fb..4285f6a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -101,6 +101,9 @@ import {queryServer, InfoResponse, Action,
 	UiOptions, getDefaultLytOpts, getDefaultUiOpts, OptionType} from './lib';
 import {arraySum, randWeightedChoice, timeout} from './util';
 
+// Constants
+const SERVER_WAIT_MSG = 'Loading data';
+const PROCESSING_WAIT_MSG = 'Processing';
 // Type representing auto-mode actions
 type AutoAction = 'move across' | 'move down' | 'move up' | Action;
 // Function used in auto-mode to reduce action cycles
@@ -117,9 +120,6 @@ function getReverseAction(action: AutoAction): AutoAction | null {
 		return null;
 	}
 }
-// Constants
-const SERVER_WAIT_MSG = 'Loading data';
-const PROCESSING_WAIT_MSG = 'Processing';
 
 export default defineComponent({
 	data(){
diff --git a/src/README.md b/src/README.md
index 23f05ee..5c88b2e 100644
--- a/src/README.md
+++ b/src/README.md
@@ -1,21 +1,22 @@
 # Files
--   main.ts: Included by ../index.html. Creates the main Vue component.
--   App.vue: The main Vue component.
--   components:
-    -   Tile.vue:          Displays a tree-of-life node.
-    -   TileInfoModal.vue: Modal displaying info about a Tile's node.
-    -   SearchModal.vue:   Modal providing a search bar.
-    -   SettingsModal:     Modal displaying configurable settings.
-    -   HelpModal.vue:     Modal displaying help info.
-    -   AncestryBar.vue:   Displays ancestors of the outermost Tile.
-    -   TutorialPane.vue:  Displays tutorial content.
-    -   LoadingModal.vue:  Displays a loading indicator.
-    -   SButton.vue:       Simple button component.
-    -   IconButton.vue:    Simple button component containing an SVG icon.
-    -   SCollapsible.vue:  Simple collapsible-content component.
-    -   icon:              Contains components that display SVG icons.
--   lib.ts:    Contains classes/types and utility functions.
--   layout.ts: Contains code for laying out Tiles.
--   util.ts:   Contains utility functions.
--   index.css: Included by main.ts. Provides Tailwind's CSS classes.
--   env.d.ts:  From Vite's template files.
+-   **main.ts**: Included by ../index.html. Creates the main Vue component.
+-   **App.vue**: The main Vue component.
+-   **components**:
+    -   **Tile.vue**:          Displays a tree-of-life node.
+    -   **TileInfoModal.vue**: Modal displaying info about a Tile's node.
+    -   **SearchModal.vue**:   Modal providing a search bar.
+    -   **SettingsModal**:     Modal displaying configurable settings.
+    -   **HelpModal.vue**:     Modal displaying help info.
+    -   **AncestryBar.vue**:   Displays ancestors of the outermost Tile.
+    -   **TutorialPane.vue**:  Displays tutorial content.
+    -   **LoadingModal.vue**:  Displays a loading indicator.
+    -   **SButton.vue**:       Simple button component.
+    -   **IconButton.vue**:    Simple button component containing an SVG icon.
+    -   **SCollapsible.vue**:  Simple collapsible-content component.
+    -   **icon**:              Contains components that display SVG icons.
+-   **tol.ts**:    Holds types for tree-of-life data.
+-   **layout.ts**: Holds code for laying out tiles.
+-   **lib.ts**:    Holds project-wide globals.
+-   **util.ts**:   Holds utility functions.
+-   **index.css**: Included by main.ts. Provides Tailwind's CSS classes.
+-   **env.d.ts**:  From Vite's template files.
diff --git a/src/components/AncestryBar.vue b/src/components/AncestryBar.vue
index fcf9933..6f2d37c 100644
--- a/src/components/AncestryBar.vue
+++ b/src/components/AncestryBar.vue
@@ -75,7 +75,7 @@ export default defineComponent({
 		},
 	},
 	watch: {
-		// Used to scroll to end of bar upon node/screen changes
+		// For scrolling-to-end upon node/screen changes
 		nodes(){
 			this.$nextTick(() => this.scrollToEnd());
 		},
diff --git a/src/components/HelpModal.vue b/src/components/HelpModal.vue
index 7375584..cc11afb 100644
--- a/src/components/HelpModal.vue
+++ b/src/components/HelpModal.vue
@@ -358,14 +358,14 @@
 				</template>
 				<template #content>
 					<div :class="contentClasses">
-						<li>Tilo's code is licensed under the MIT license.</li>
+						<li>Tilo's code is licensed under the MIT licence.</li>
 						<br/>
 						<h1 class="text-lg font-bold">Other Credits</h1>
 						<ul class="list-disc pl-4">
 							<li>
 								The UI was largely coded in
 								<a href="https://www.typescriptlang.org/" :style="aStyles">Typescript</a>,
-								and built using the <a href="https://vuejs.org/" :style="aStyles">Vue framework</a>
+								and built using the <a href="https://vuejs.org/" :style="aStyles">Vue</a> framework.
 							</li>
 							<li>
 								Tree data was processed using
diff --git a/src/components/LoadingModal.vue b/src/components/LoadingModal.vue
index 506abf4..ee8d699 100644
--- a/src/components/LoadingModal.vue
+++ b/src/components/LoadingModal.vue
@@ -28,8 +28,6 @@ export default defineComponent({
 			};
 		},
 	},
-	components: {
-		LoaderIcon,
-	},
+	components: {LoaderIcon, },
 });
 </script>
diff --git a/src/components/SButton.vue b/src/components/SButton.vue
index 54c7843..508f8e6 100644
--- a/src/components/SButton.vue
+++ b/src/components/SButton.vue
@@ -1,6 +1,5 @@
 <template>
-<button :disabled="disabled"
-	class="block rounded px-4 py-2"
+<button :disabled="disabled" class="block rounded px-4 py-2"
 	:class="{'hover:brightness-125': !disabled, 'brightness-50': disabled}">
 	<slot>?</slot>
 </button>
diff --git a/src/components/SearchModal.vue b/src/components/SearchModal.vue
index 025ed71..e90707a 100644
--- a/src/components/SearchModal.vue
+++ b/src/components/SearchModal.vue
@@ -61,7 +61,7 @@ export default defineComponent({
 			pendingDelayedSuggReq: 0, // Set via setTimeout() for a non-initial search-suggestions request
 			pendingSuggInput: '', // Used to remember what input triggered a suggestions request
 			// Other
-			focusedSuggIdx: null as null | number, // Denotes a search-suggestion selected using the arrow keys
+			focusedSuggIdx: null as null | number, // Index of a search-suggestion selected using the arrow keys
 		};
 	},
 	computed: {
@@ -197,7 +197,7 @@ export default defineComponent({
 			if (tolNodeName == ''){
 				return;
 			}
-			// Check if the node has already been retrieved
+			// Check if the node data is already here
 			if (this.lytMap.has(tolNodeName)){
 				this.$emit('search', tolNodeName);
 				return;
diff --git a/src/components/SettingsModal.vue b/src/components/SettingsModal.vue
index a298230..4f5f05e 100644
--- a/src/components/SettingsModal.vue
+++ b/src/components/SettingsModal.vue
@@ -107,9 +107,7 @@
 			Reset
 		</s-button>
 		<transition name="fade">
-			<div v-if="saved" class="absolute right-1 bottom-1" ref="saveIndicator">
-				Saved
-			</div>
+			<div v-if="saved" class="absolute right-1 bottom-1" ref="saveIndicator"> Saved </div>
 		</transition>
 	</div>
 </div>
diff --git a/src/components/Tile.vue b/src/components/Tile.vue
index c2f2b9c..2edd531 100644
--- a/src/components/Tile.vue
+++ b/src/components/Tile.vue
@@ -1,5 +1,5 @@
 <template>
-<div :style="styles" @scroll="onScroll"> <!-- Need enclosing div for transitions -->
+<div :style="styles" @scroll="onScroll">
 	<div v-if="isLeaf" :class="[hasOneImage ? 'flex' : 'grid', {'hover:cursor-pointer': isExpandableLeaf}]"
 		class="w-full h-full flex-col grid-cols-1" :style="leafStyles"
 		@mouseenter="onMouseEnter" @mouseleave="onMouseLeave" @mousedown="onMouseDown" @mouseup="onMouseUp">
@@ -557,6 +557,7 @@ export default defineComponent({
 </script>
 
 <style>
+/* For making a parent-swept-area div look continuous with the tile div */
 .hide-right-edge::before {
 	content: '';
 	position: absolute;
diff --git a/src/components/TileInfoModal.vue b/src/components/TileInfoModal.vue
index 0461de6..053604c 100644
--- a/src/components/TileInfoModal.vue
+++ b/src/components/TileInfoModal.vue
@@ -1,8 +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
-		max-w-[80%] min-w-[8cm] md:min-w-[14cm] max-h-[80%]"
-		:style="styles">
+		max-w-[80%] min-w-[8cm] md:min-w-[14cm] max-h-[80%]" :style="styles">
 		<div class="pb-1 md:pb-2">
 			<close-icon @click.stop="onClose" ref="closeIcon"
 				class="absolute top-1 right-1 md:top-2 md:right-2 w-8 h-8 hover:cursor-pointer"/>
diff --git a/src/components/TutorialPane.vue b/src/components/TutorialPane.vue
index 90d0aca..8de656c 100644
--- a/src/components/TutorialPane.vue
+++ b/src/components/TutorialPane.vue
@@ -1,13 +1,12 @@
 <template>
 <div :style="styles" class="relative flex flex-col justify-between">
-	<close-icon @click.stop="onClose"
-		class="absolute top-2 right-2 w-8 h-8 hover:cursor-pointer"/>
+	<close-icon @click.stop="onClose" class="absolute top-2 right-2 w-8 h-8 hover:cursor-pointer"/>
 	<h1 class="text-center text-lg font-bold pt-3 pb-2">
 		{{stage == 0 ? 'Welcome' : `Tutorial (Step ${stage} of ${lastStage})`}}
 	</h1>
 	<transition name="fade" mode="out-in">
 		<div v-if="stage == 0" :style="contentStyles">
-			This is a visualiser for exploring the biological Tree of Life.
+			This is a visual explorer for the biological Tree of Life.
 		</div>
 		<div v-else-if="stage == 1" :style="contentStyles">
 			{{touchDevice ? 'Tap' : 'Click'}} a tile to expand it, showing it's children
@@ -75,7 +74,8 @@ import {Action, UiOptions} from '../lib';
 
 export default defineComponent({
 	props: {
-		actionsDone: {type: Object as PropType<Set<Action>>, required: true}, // Used to avoid disabling actions already seen
+		actionsDone: {type: Object as PropType<Set<Action>>, required: true},
+			// Used to avoid disabling actions already done
 		triggerFlag: {type: Boolean, required: true},
 			// Used to indicate that a tutorial-requested 'trigger' action has been done
 		skipWelcome: {type: Boolean, default: false},
diff --git a/src/index.css b/src/index.css
index 3330a37..855e9f0 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,29 +1,8 @@
+/* From Tailwind */
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
-@font-face {
-	font-family: Ubuntu;
-	src: url('/fonts/Ubuntu-Regular.woff2');
-}
-body {
-	font-family: Ubuntu, system-ui, sans-serif;
-	touch-action: manipulation; /* Prevents non-standard gestures such as double-tap to zoom */
-}
-a {
-	@apply hover:underline hover:cursor-pointer;
-}
-::-webkit-scrollbar {
-	background-color: #1c1917;
-	width: 12px;
-	height: 12px;
-}
-::-webkit-scrollbar-thumb {
-	background: #65a30d;
-	border-radius: 5px;
-	border: 3px solid #1c1917;
-}
-
 /* For transitions/animations */
 .fade-enter-from, .fade-leave-to {
 	opacity: 0;
@@ -114,3 +93,26 @@ a {
 		color: inherit;
 	}
 }
+
+/* Other */
+@font-face {
+	font-family: Ubuntu;
+	src: url('/fonts/Ubuntu-Regular.woff2');
+}
+body {
+	font-family: Ubuntu, system-ui, sans-serif;
+	touch-action: manipulation; /* Prevents non-standard gestures such as double-tap to zoom */
+}
+a {
+	@apply hover:underline hover:cursor-pointer;
+}
+::-webkit-scrollbar {
+	background-color: #1c1917;
+	width: 12px;
+	height: 12px;
+}
+::-webkit-scrollbar-thumb {
+	background: #65a30d;
+	border-radius: 5px;
+	border: 3px solid #1c1917;
+}
diff --git a/src/lib.ts b/src/lib.ts
index 7ff0b73..d2ad959 100644
--- a/src/lib.ts
+++ b/src/lib.ts
@@ -1,5 +1,5 @@
 /*
- * Project-wide types/classes
+ * Project-wide globals
  */
 
 import {TolNode} from './tol';
@@ -8,6 +8,7 @@ import {getBreakpoint, Breakpoint, getScrollBarWidth, onTouchDevice} from './uti
 
 // For server requests
 const SERVER_URL = (new URL(window.location.href)).origin + '/data'
+const SERVER_IMG_PATH = '/img/'
 export async function queryServer(params: URLSearchParams){
 	// Construct URL
 	let url = new URL(SERVER_URL);
@@ -23,7 +24,6 @@ export async function queryServer(params: URLSearchParams){
 	}
 	return responseObj;
 }
-const SERVER_IMG_PATH = '/img/'
 export function getImagePath(imgName: string): string {
 	return SERVER_IMG_PATH + imgName.replaceAll('\'', '\\\'');
 }
diff --git a/src/main.ts b/src/main.ts
index 50a4dab..f289386 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,5 +1,5 @@
-import { createApp } from 'vue'
-import App from './App.vue'
-import './index.css'
+import {createApp} from 'vue';
+import App from './App.vue';
+import './index.css';
 
-createApp(App).mount('#app')
+createApp(App).mount('#app');
diff --git a/src/tol.ts b/src/tol.ts
index bf7a2f5..2618bfc 100644
--- a/src/tol.ts
+++ b/src/tol.ts
@@ -1,5 +1,5 @@
 /*
- * Used to represent tree-of-life data
+ * Types for representing tree-of-life data
  */
 
 // Represents a tree-of-life node
@@ -8,10 +8,10 @@ export class TolNode {
 	children: string[];
 	parent: string | null;
 	tips: number;
-	pSupport: boolean;
+	pSupport: boolean; // Indicates phylogenetic support
 	commonName: null | string;
 	imgName: null | string |
-		[string, string] | [null, string] | [string, null]; // Pairs represent compound-images
+		[string, string] | [null, string] | [string, null]; // Pairs represent compound images
 	constructor(children: string[] = [], parent = null, tips = 0, pSupport = false){
 		this.otolId = null;
 		this.children = children;
-- 
cgit v1.2.3