Adjust frontend coding style

Add line spacing and section comments
Fix 'Last updated' line in help modal being shown despite overflow

1 files changed, 14 insertions, 7 deletions

diff --git a/src/components/AncestryBar.vue b/src/components/AncestryBar.vue
index 8eabf22..762fa99 100644
--- a/src/components/AncestryBar.vue
+++ b/src/components/AncestryBar.vue
@@ -8,51 +8,56 @@
 
 <script setup lang="ts">
 import {ref, computed, watch, onMounted, nextTick, PropType} from 'vue';
+
 import TolTile from './TolTile.vue';
 import {TolMap} from '../tol';
 import {LayoutNode} from '../layout';
 import {useStore} from '../store';
 
-// Refs
 const rootRef = ref(null as HTMLDivElement | null);
 
-// Global store
 const store = useStore();
 
-// Props + events
 const props = defineProps({
 	nodes: {type: Array as PropType<LayoutNode[]>, required: true},
 	vert: {type: Boolean, default: false},
 	breadth: {type: Number, required: true},
 	tolMap: {type: Object as PropType<TolMap>, required: true},
 });
+
 const emit = defineEmits(['ancestor-click', 'info-click']);
 
-// Computed prop data for display
+// ========== Computed prop data for display ==========
+
 const imgSz = computed(() =>
 	props.breadth - store.lytOpts.tileSpacing - store.scrollGap
 		// Intentionally omitting extra tileSpacing, to allow for scrollGap with less image shrinkage
 );
+
 const dummyNodes = computed(() => props.nodes.map(n => {
 	let newNode = new LayoutNode(n.name, []);
 	newNode.dims = [imgSz.value, imgSz.value];
 	return newNode;
 }));
 
-// Click handling
+// ========== Click handling ==========
+
 function onTileClick(node: LayoutNode){
 	emit('ancestor-click', node);
 }
+
 function onInfoIconClick(data: string){
 	emit('info-click', data);
 }
 
-// Scroll handling
+// ========== Scroll handling ==========
+
 function onWheelEvt(evt: WheelEvent){ // For converting vertical scrolling to horizontal
 	if (!props.vert && Math.abs(evt.deltaX) < Math.abs(evt.deltaY)){
 		rootRef.value!.scrollLeft -= (evt.deltaY > 0 ? -30 : 30);
 	}
 }
+
 function scrollToEnd(){
 	let el = rootRef.value;
 	if (el != null){
@@ -63,6 +68,7 @@ function scrollToEnd(){
 		}
 	}
 }
+
 watch(props.nodes, () => {
 	nextTick(() => scrollToEnd());
 });
@@ -71,7 +77,8 @@ watch(() => props.vert, () => {
 });
 onMounted(() => scrollToEnd());
 
-// Styles
+// ========== For styling ==========
+
 const styles = computed(() => ({
 	// For child layout
 	display: 'flex',