Use static-layout for ancestry-bar and tutorial-pane

3 files changed, 22 insertions, 55 deletions

diff --git a/src/components/AncestryBar.vue b/src/components/AncestryBar.vue
index 66c1b13..8f31900 100644
--- a/src/components/AncestryBar.vue
+++ b/src/components/AncestryBar.vue
@@ -8,57 +8,29 @@ import type {TolMap} from '../tol';
 // Displays a sequence of nodes, representing ancestors from a tree-of-life root to a currently-active root
 export default defineComponent({
 	props: {
-		// For absolute positioning
-		pos: {type: Array as unknown as PropType<[number,number]>, required: true},
-		dims: {type: Array as unknown as PropType<[number,number]>, required: true},
-		// The ancestors to display
 		nodes: {type: Array as PropType<LayoutNode[]>, required: true},
+		vert: {type: Boolean, default: false},
 		// Other
 		tolMap: {type: Object as PropType<TolMap>, required: true},
 		lytOpts: {type: Object as PropType<LayoutOptions>, required: true},
 		uiOpts: {type: Object, required: true},
 	},
 	computed: {
-		wideArea(){
-			return this.dims[0] >= this.dims[1];
-		},
-		tileSz(){
-			return (this.wideArea ? this.dims[1] : this.dims[0]) -
-				(this.uiOpts.ancestryTileMargin * 2) - this.uiOpts.scrollGap;
-		},
 		usedNodes(){ // Childless versions of 'nodes' used to parameterise <tile>
 			return this.nodes.map(n => {
 				let newNode = new LayoutNode(n.name, []);
-				newNode.dims = [this.tileSz, this.tileSz];
+				newNode.dims = [this.uiOpts.ancestryBarImgSz, this.uiOpts.ancestryBarImgSz];
 				return newNode;
 			});
 		},
-		overflowing(){
-			let len = this.uiOpts.ancestryTileMargin +
-				(this.tileSz + this.uiOpts.ancestryTileMargin) * this.nodes.length;
-			return len > (this.wideArea ? this.dims[0] : this.dims[1]);
-		},
-		width(){
-			return this.dims[0] + (this.wideArea || this.overflowing ? 0 : -this.uiOpts.scrollGap);
-		},
-		height(){
-			return this.dims[1] + (!this.wideArea || this.overflowing ? 0 : -this.uiOpts.scrollGap);
-		},
 		styles(): Record<string,string> {
 			return {
-				position: 'absolute',
-				left: this.pos[0] + 'px',
-				top: this.pos[1] + 'px',
-				width: this.width + 'px',
-				height: this.height + 'px',
-				overflowX: this.wideArea ? 'auto' : 'hidden',
-				overflowY: this.wideArea ? 'hidden' : 'auto',
-				// Extra padding for scrollbar inclusion
-				paddingRight: (this.overflowing && !this.wideArea ? this.uiOpts.scrollGap : 0) + 'px',
-				paddingBottom: (this.overflowing && this.wideArea ? this.uiOpts.scrollGap : 0) + 'px',
+				overflowX: this.vert ? 'hidden' : 'auto',
+				overflowY: this.vert ? 'auto' : 'hidden',
+				maxHeight: '100vh',
 				// For child layout
 				display: 'flex',
-				flexDirection: this.wideArea ? 'row' : 'column',
+				flexDirection: this.vert ? 'column' : 'row',
 				gap: this.uiOpts.ancestryTileMargin + 'px',
 				padding: this.uiOpts.ancestryTileMargin + 'px',
 				// Other
@@ -71,7 +43,7 @@ export default defineComponent({
 		nodes(){
 			setTimeout(() => this.scrollToEnd(), 0); // Without timeout, seems to run before new tiles are added
 		},
-		wideArea(){
+		vert(){
 			setTimeout(() => this.scrollToEnd(), 0);
 		},
 	},
@@ -84,15 +56,15 @@ export default defineComponent({
 		},
 		onWheelEvt(evt: WheelEvent){
 			// Possibly convert vertical scroll to horizontal
-			if (this.wideArea && Math.abs(evt.deltaX) < Math.abs(evt.deltaY)){
+			if (!this.vert && Math.abs(evt.deltaX) < Math.abs(evt.deltaY)){
 				this.$el.scrollLeft -= (evt.deltaY > 0 ? 30 : -30);
 			}
 		},
 		scrollToEnd(){
-			if (this.wideArea){
-				this.$el.scrollLeft = this.$el.scrollWidth;
-			} else {
+			if (this.vert){
 				this.$el.scrollTop = this.$el.scrollHeight;
+			} else {
+				this.$el.scrollLeft = this.$el.scrollWidth;
 			}
 		},
 	},
diff --git a/src/components/SearchModal.vue b/src/components/SearchModal.vue
index 35efb55..e5e8596 100644
--- a/src/components/SearchModal.vue
+++ b/src/components/SearchModal.vue
@@ -16,7 +16,7 @@ export default defineComponent({
 			searchHasMoreSuggs: false,
 			focusedSuggIdx: null as null | number, // Denotes a search-suggestion selected using the arrow keys
 			pendingSuggReq: 0, // Set via setTimeout() upon a search-suggestion request
-			pendingSuggReqUrl: null, // Used by a pendingSuggReq callback to use the latest user input
+			pendingSuggReqUrl: '', // Used by a pendingSuggReq callback to use the latest user input
 		};
 	},
 	props: {
diff --git a/src/components/TutorialPane.vue b/src/components/TutorialPane.vue
index c04aeee..d5f681c 100644
--- a/src/components/TutorialPane.vue
+++ b/src/components/TutorialPane.vue
@@ -5,11 +5,10 @@ import {Action} from '../lib';
 
 export default defineComponent({
 	props: {
-		pos: {type: Array as unknown as PropType<[number,number]>, required: true},
-		dims: {type: Array as unknown as PropType<[number,number]>, required: true},
 		uiOpts: {type: Object, required: true},
 		triggerFlag: {type: Boolean, required: true},
 		skipWelcome: {type: Boolean, default: false},
+		height: {type: String, default: 'auto'},
 	},
 	data(){
 		return {
@@ -20,13 +19,9 @@ export default defineComponent({
 	computed: {
 		 styles(): Record<string,string> {
 			return {
-				position: 'absolute',
-				left: this.pos[0] + 'px',
-				top: this.pos[1] + 'px',
-				width: this.dims[0] + 'px',
-				height: this.dims[1] + 'px',
 				backgroundColor: this.uiOpts.tutorialPaneBgColor,
 				color: this.uiOpts.tutorialPaneTextColor,
+				height: this.height,
 			};
 		 },
 		 contentStyles(): Record<string,string> {
@@ -98,18 +93,20 @@ export default defineComponent({
 </script>
 
 <template>
-<div :style="styles" class="flex flex-col justify-evenly">
-	<close-icon @click.stop="onClose"
-		class="block absolute top-2 right-2 w-6 h-6 hover:cursor-pointer"/>
+<div :style="styles" class="p-2 flex flex-col justify-between">
+	<div class="flex">
+		<h2 class="text-center mb-2">{{stage == 0 ? 'Welcome' : 'Tutorial'}}</h2>
+		<close-icon @click.stop="onClose"
+			class="block ml-auto w-6 h-6 hover:cursor-pointer"/>
+	</div>
 	<template v-if="stage == 0">
-		<h2 class="text-center">Welcome</h2>
 		<div :style="contentStyles">
 			Lorem ipsum dolor sit amet, consectetur adipiscing
 			elit, sed do eiusmod tempor incididunt ut labore
 			et dolore magna aliqua. Ut enim ad minim veniam,
 			quis nostrud exercitation ullamco.
 		</div>
-		<div class="w-full flex justify-evenly">
+		<div class="w-full flex justify-evenly mt-2">
 			<button :style="buttonStyles" class="hover:brightness-125" @click="onStartTutorial">
 				Start Tutorial
 			</button>
@@ -119,8 +116,6 @@ export default defineComponent({
 		</div>
 	</template>
 	<template v-else>
-		<h2 class="text-center">Tutorial</h2>
-		<!-- Text content -->
 		<div v-if="stage == 1" :style="contentStyles">
 			Click/touch on the tile to expand it and see it's children. <br/>
 			A green title means the tile has children. Orange and red mean 100+ or 1000+ children.
@@ -170,7 +165,7 @@ export default defineComponent({
 			And finally, the help icon provides summarised usage information.
 		</div>
 		<!-- Buttons -->
-		<div class="w-full flex justify-evenly">
+		<div class="w-full flex justify-evenly mt-2">
 			<button :style="buttonStyles"
 				:disabled="stage == 1" :class="stage == 1 ? ['brightness-75'] : ['hover:brightness-125']"
 				@click="onPrevClick">