Resizing and url integration [cleaned] (#366)

* feat: resizing and URL integration Changes to tabs * Added buttons that let you control the tabs without dragging * Support minimizing of tabs. * Added a highlight to the tab that is currently selected. * Initial mobile compatibility in the style section of Tab.vue Resizing * Added a reset function to a specimen. This is a hard reset that is used when the specimen is resized and it doesn't override resized function. * Added a resized function to both specimens and visualizers. It is not required for visualizers as they can just not do anything and the specimen will hard reset them. Scope * Adds rudimentary mobile support. Originally authored by @kaldis-berzins et al. * fix: Dock back to where you were and non-overlapping initial tab positions * doc: fix description of docking button * refactor: Use consistent tab minimized height (and revert icon name change)
numberscope · gwhitney · Jun 2, 2024 · Jun 26, 2024 · Jun 28, 2024 · Jun 28, 2024
commit 8ebe12239056c4d989a1de1b23ab6b058d5ffaef
diff --git a/index.html b/index.html
@@ -10,6 +10,8 @@
 
         <!-- Material design icons. Use the .material-icons-sharp class to turn text into an icon -->
         <link href="https://fonts.googleapis.com/css2?family=Material+Icons+Sharp" rel="stylesheet">
+        <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp" rel="stylesheet">
+
     </head>
     <body>
         <noscript>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -115,7 +115,7 @@
         "prettier": "^3.2.5",
         "prettier-eslint": "^16.3.0",
         "prettier-eslint-cli": "^8.0.1",
-        "sass": "^1.77.1",
+        "sass": "^1.77.2",
         "typescript": "^5.4.5",
         "vite": "^5.2.10",
         "vitest": "^1.5.0",

diff --git a/src/App.vue b/src/App.vue
@@ -60,6 +60,9 @@
         /* Bolditude */
         --ns-font-weight-medium: 500;
 
+        /* Dimensions */
+        --ns-desktop-tab-width: 300px;
+
         /* Breakpoint widths 
         Default styles should be for vertical mobile devices
         (devices narrower than --ns-breakpoint-mobile)

diff --git a/src/components/Tab.vue b/src/components/Tab.vue
@@ -1,6 +1,19 @@
 <template>
-    <div class="tab">
-        <div class="drag"></div>
+    <div class="tab" @click="selected">
+        <div class="drag">
+            <div class="buttons">
+                <span
+                    class="minimize material-icons-sharp"
+                    @click="minMaxWindow">
+                    minimize
+                </span>
+                <span
+                    class="docking material-symbols-sharp"
+                    @click="dockWindow">
+                    dock_to_right
+                </span>
+            </div>
+        </div>
         <div class="content">
             <slot></slot>
         </div>
@@ -10,7 +23,13 @@
 
 <script setup lang="ts">
     import interact from 'interactjs'
-    import {positionAndSizeTab} from '../views/Scope.vue'
+    import {
+        positionAndSizeTab,
+        positionAndSizeAllTabs,
+        selectTab,
+    } from '../views/Scope.vue'
+
+    const minimizedTabHeight = 110
 
     // every element with draggable class can be dragged
     interact('.tab').resizable({
@@ -41,8 +60,19 @@
                 if (
                     tab instanceof HTMLElement
                     && !tab.classList.contains('docked')
-                )
+                ) {
+                    // select the tab when it is resized
+                    selectTab(tab)
+                    // update the classlist with "minimized"
+                    // if the height is less or equal than the
+                    // minimized tab height
                     tab.style.height = event.rect.height + 'px'
+                    if (event.rect.height <= minimizedTabHeight) {
+                        tab.classList.add('minimized')
+                    } else {
+                        tab.classList.remove('minimized')
+                    }
+                }
             },
         },
         modifiers: [
@@ -53,7 +83,7 @@
 
             // minimum size
             interact.modifiers.restrictSize({
-                min: {width: 0, height: 128},
+                min: {width: 700, height: 90},
             }),
         ],
     })
@@ -63,9 +93,8 @@
         autoScroll: false,
 
         listeners: {
-            start: (event: Interact.InteractEvent) => {
+            start: () => {
                 document.body.style.userSelect = 'none'
-                event.target.parentElement!.style.zIndex += 10
             },
             move: dragMoveListener,
 
@@ -77,13 +106,15 @@
 
                 const tab = event.target.parentElement
                 if (!(tab instanceof HTMLElement)) return
-                if (tab.getAttribute('docked') === 'none') return
+                const zoneName = tab.getAttribute('docked')
+                if (!zoneName || zoneName === 'none') return
 
                 const dropzone = document.querySelector(
-                    '#' + tab.getAttribute('docked') + '-dropzone'
+                    `#${zoneName}-dropzone`
                 )
                 if (!(dropzone instanceof HTMLElement)) return
 
+                tab.setAttribute('last-dropzone', zoneName)
                 positionAndSizeTab(tab, dropzone)
             },
         },
@@ -96,6 +127,8 @@
             target instanceof HTMLElement
             && container instanceof HTMLElement
         ) {
+            selectTab(target)
+
             const containerRect = container.getBoundingClientRect()
             const targetRect = target.getBoundingClientRect()
             // keep position in attributes
@@ -122,40 +155,224 @@
             target.setAttribute('data-y', boundedY.toString())
         }
     }
-</script>
+    function minMaxWindow(event: MouseEvent) {
+        const tab = (event.currentTarget as HTMLElement).closest('.tab')
+        if (!(tab instanceof HTMLElement)) return
 
-<style scoped lang="scss">
-    .tab {
-        border: 1px solid var(--ns-color-black);
-        width: 300px;
-        height: 200px;
-        z-index: 50;
+        selectTab(tab)
+
+        const content = tab.querySelector('.content')
+        if (!(content instanceof HTMLElement)) return
+
+        // if the tab is docked, we have a different behavior
+        if (tab.classList.contains('docked')) {
+            // vertical and horizontal position of the tab
+            // (eg. top-right, where vert is top and side is right)
+            const vert = tab.getAttribute('docked')?.split('-')[0]
+            const side = tab.getAttribute('docked')?.split('-')[1]
+            // get the correct dropzone wrapper
+            const dropzoneWrapper = tab.parentElement?.querySelector(
+                '#' + side + '-dropzone-container'
+            )?.firstChild
+            if (!(dropzoneWrapper instanceof HTMLElement)) return
+
+            if (dropzoneWrapper instanceof HTMLElement) {
+                if (tab.classList.contains('minimized')) {
+                    // if we want to maximize top tab,
+                    // set height of wrapper to 400px,
+                    // if we want to maximize bottom tab,
+                    // set height (of top tab wrapper) to 100% - 400px
+                    if (vert === 'top') {
+                        dropzoneWrapper.style.height = '400px'
+                    } else {
+                        dropzoneWrapper.style.height = 'calc(100% - 400px)'
+                    }
+                    content.style.overflowY = 'scroll'
+                    tab.classList.remove('minimized')
+                    // update the size and position of all tabs
+                    positionAndSizeAllTabs()
+                } else {
+                    // if we want to minimize top tab,
+                    // set height of wrapper to the minimized tab height,
+                    // if we want to minimize bottom tab,
+                    // set height (of top tab wrapper) to 100% - XXXpx,
+                    // where XXX is a bit less than the minimized tab height
+                    if (vert === 'top') {
+                        dropzoneWrapper.style.height = `${minimizedTabHeight}px`
+                    } else {
+                        // Temp variable to beat lint's line length limits :(
+                        const h = `calc(100% - ${minimizedTabHeight - 20}px)`
+                        dropzoneWrapper.style.height = h
+                    }
+                    content.style.overflowY = 'hidden'
+                    tab.classList.add('minimized')
+                    dropzoneWrapper.classList.add('resized')
+                    // update the size and position of all tabs
+                    positionAndSizeAllTabs()
+                }
+            }
+            return
+        }
+        // If the tab is minimized, maximize it
+        if (tab.classList.contains('minimized')) {
+            tab.style.height = '400px'
+            content.style.overflowY = 'scroll'
+            tab.classList.remove('minimized')
+            return
+        }
+        // If the tab is maximized, minimize it
+        else {
+            tab.style.height = '90px'
+            content.style.overflowY = 'hidden'
+            tab.classList.add('minimized')
+        }
+    }
+    // helper to choose docking site
+    function zoneOrder(preferred: string) {
+        const zoneParts = preferred.split('-')
+        const otherVert = zoneParts[0] === 'top' ? 'bottom' : 'top'
+        return [preferred, `${otherVert}-${zoneParts[1]}`]
     }
 
-    .resize {
-        height: 16px;
-        width: 100%;
-        position: absolute;
-        bottom: 0;
+    function dockWindow(event: MouseEvent) {
+        const tab = (event.currentTarget as HTMLElement).closest('.tab')
+        if (!(tab instanceof HTMLElement)) return
+        // if the tab is docked, different behavior
+        if (tab.classList.contains('docked')) {
+            // get the last undocked position of the tab
+            const x =
+                (tab.getAttribute('last-coords-x') || 0).toString() + 'px'
+            const y =
+                (tab.getAttribute('last-coords-y') || 0).toString() + 'px'
+
+            // move the tab to the last undocked position
+            tab.style.left = x
+            tab.style.top = y
+            // update attributes
+            tab.setAttribute('data-x', x)
+            tab.setAttribute('data-y', y)
+
+            // update the classlist with "docked" if the tab is docked
+            const dropzone = document.querySelector(
+                '#' + tab.getAttribute('docked') + '-dropzone'
+            )
+            const dropzoneContainer = dropzone?.parentElement?.parentElement
+            if (
+                tab instanceof HTMLElement
+                && dropzone instanceof HTMLElement
+                && dropzoneContainer instanceof HTMLElement
+                && tab.classList.contains('docked')
+            ) {
+                // update classlists when undocking
+                dropzone.classList.add('empty')
+                tab.classList.remove('docked')
+                tab.setAttribute('docked', 'none')
+                // if both dropzones are empty,
+                // make the dropzone container empty aswell
+                if (
+                    dropzoneContainer.querySelectorAll('.empty').length == 2
+                ) {
+                    dropzoneContainer.classList.add('empty')
+                }
+            }
+            return
+        }
+
+        selectTab(tab)
+
+        // get current position
+        const x = parseFloat(tab.getAttribute('data-x') || '0')
+        const y = parseFloat(tab.getAttribute('data-y') || '0')
+
+        // save current position before docking
+        tab.setAttribute('last-coords-x', x.toString())
+        tab.setAttribute('last-coords-y', y.toString())
+
+        const preferredZone = tab.getAttribute('last-dropzone') || 'top-right'
+        const zonesToTry = zoneOrder(preferredZone)
+        for (const zoneName of zonesToTry) {
+            const zone = document.querySelector(`#${zoneName}-dropzone`)
+            if (!(zone instanceof HTMLElement)) continue
+            if (zone.classList.contains('empty')) {
+                positionAndSizeTab(tab, zone)
+                tab.setAttribute('last-dropzone', zoneName)
+                break
+            }
+        }
     }
+    // select the tab when it is clicked
+    function selected(event: MouseEvent) {
+        const tab = (event.currentTarget as HTMLElement).closest('.tab')
+        if (!(tab instanceof HTMLElement)) return
 
-    // The drag element is actually underneath the entire window
-    // This is so that dropping is more intuitive
-    .drag {
-        position: absolute;
-        height: 100%;
-        width: 100%;
-        background-color: var(--ns-color-black);
+        selectTab(tab)
     }
+</script>
 
+<style scoped lang="scss">
+    // mobile styles
+    .buttons {
+        display: none;
+    }
+    .tab {
+        width: 300px;
+        height: fit-content;
+    }
     .content {
         padding: 16px;
-        position: absolute;
-        top: 16px;
-        background-color: var(--ns-color-white);
         width: 100%;
-        height: calc(100% - 16px);
         overflow-y: scroll;
         overflow-x: hidden;
+        max-width: 500px;
+    }
+    // desktop styles
+    @media (min-width: 700px) {
+        .buttons {
+            display: flex;
+            justify-content: flex-end;
+            gap: 8px;
+            padding-right: 8px;
+            padding-top: 2px;
+            padding-bottom: 2px;
+        }
+        .minimize,
+        .docking {
+            cursor: pointer;
+            color: var(--ns-color-white);
+            font-size: 12px;
+        }
+        .tab {
+            border: 1px solid var(--ns-color-black);
+            width: var(--ns-desktop-tab-width);
+            height: 200px;
+            z-index: 50;
+        }
+
+        .resize {
+            height: 16px;
+            width: 100%;
+            position: absolute;
+            bottom: 0;
+        }
+
+        // The drag element is actually underneath the entire window
+        // This is so that dropping is more intuitive
+        .drag {
+            position: absolute;
+            height: 100%;
+            width: 100%;
+            background-color: var(--ns-color-black);
+        }
+
+        .content {
+            padding: 16px;
+            position: absolute;
+            top: 16px;
+            background-color: var(--ns-color-white);
+            width: 100%;
+            height: calc(100% - 16px);
+            overflow-y: scroll;
+            overflow-x: hidden;
+        }
     }
 </style>
diff --git a/src/shared/Specimen.ts b/src/shared/Specimen.ts
@@ -33,6 +33,7 @@ export class Specimen {
     private _sequence: SequenceInterface<GenericParamDescription>
     private location?: HTMLElement
     private isSetup: boolean = false
+    private size: {width: number; height: number}
 
     /**
      * Constructs a new specimen from a visualizer and a sequence.
@@ -56,18 +57,40 @@ export class Specimen {
         this._visualizer = new vizMODULES[visualizerKey].visualizer(
             this._sequence
         )
+        this.size = {width: 0, height: 0}
     }
     /**
      * Call this as soon after construction as possible once the HTML
      * element has been mounted
      */
     setup(location: HTMLElement) {
         this.location = location
-        this._visualizer.view(this._sequence)
-        this._visualizer.inhabit(this.location)
-        this._visualizer.show()
+        this.size = this.calculateSize(
+            this.location.clientWidth,
+            this.location.clientHeight,
+            this.visualizer.requestedAspectRatio()
+        )
+
+        this.visualizer.view(this.sequence)
+        this.visualizer.inhabit(this.location, this.size)
+        this.visualizer.show()
         this.isSetup = true
     }
+    /**
+     * Hard resets the specimen
+     */
+    reset() {
+        if (!this.location) return
+        this.size = this.calculateSize(
+            this.location.clientWidth,
+            this.location.clientHeight,
+            this.visualizer.requestedAspectRatio()
+        )
+
+        this.visualizer.depart(this.location)
+        this.visualizer.inhabit(this.location, this.size)
+        this.visualizer.show()
+    }
     /**
      * Returns the name of this specimen
      */
@@ -140,6 +163,61 @@ export class Specimen {
     updateSequence() {
         this.visualizer.view(this.sequence)
     }
+
+    /**
+     * Calculates the size of the visualizer in its container.
+     * @param containerWidth width of the container
+     * @param containerHeight height of the container
+     * @param aspectRatio aspect ratio requested by visualizer
+     * @returns the size of the visualizer
+     */
+    calculateSize(
+        containerWidth: number,
+        containerHeight: number,
+        aspectRatio: number | undefined
+    ): {width: number; height: number} {
+        if (aspectRatio === undefined)
+            return {
+                width: containerWidth,
+                height: containerHeight,
+            }
+        const constraint = containerWidth / containerHeight < aspectRatio
+        return {
+            width: constraint
+                ? containerWidth
+                : containerHeight * aspectRatio,
+            height: constraint
+                ? containerWidth / aspectRatio
+                : containerHeight,
+        }
+    }
+    /**
+     * This function should be called when the size of the visualizer container
+     * has changed. It calculates the size of the contents according to the
+     * aspect ratio requested and calls the resize function.
+     * @param width New width of the visualizer container
+     * @param height New height of the visualizer container
+     */
+    resized(width: number, height: number): void {
+        const newSize = this.calculateSize(
+            width,
+            height,
+            this.visualizer.requestedAspectRatio()
+        )
+
+        if (
+            this.size.width === newSize.width
+            && this.size.height === newSize.height
+        )
+            return
+
+        this.size = newSize
+
+        if (!this.visualizer.resized?.(this.size.width, this.size.height)) {
+            // Reset the visualizer if the resized function isn't implemented
+            this.reset()
+        }
+    }
     /**
      * Converts the specimen to a URL as a way of saving all information
      * about the specimen.

diff --git a/src/views/Gallery.vue b/src/views/Gallery.vue
@@ -6,12 +6,7 @@
                 <h3>Self similarity telescope</h3>
             </div>
             <div type="button" id="change-button">
-                <span
-                    alt="Swap icon"
-                    id="change-icon"
-                    class="material-icons-sharp"
-                    >swap_horiz</span
-                >
+                <span class="material-icons-sharp">swap_horiz</span>
                 <p id="change-text">Select Visualizer</p>
             </div>
         </div>
@@ -87,6 +82,9 @@
     #change-button {
         max-width: 100px;
         width: min-content;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
     }
     #change-icon {
         display: block;

diff --git a/src/views/Scope.vue b/src/views/Scope.vue
@@ -1,6 +1,11 @@
 <template>
     <div id="specimen-container">
-        <tab id="sequenceTab" class="tab docked" docked="top-right">
+        <tab
+            id="sequenceTab"
+            class="tab docked"
+            docked="top-right"
+            :last-coords-x="Math.floor(tabWidth / 3)"
+            :last-coords-y="Math.floor(tabWidth / 3)">
             <ParamEditor
                 title="Sequence"
                 :paramable="specimen.sequence"
@@ -11,7 +16,13 @@
                     }
                 " />
         </tab>
-        <tab id="visualiserTab" class="tab docked" docked="bottom-right">
+        <tab
+            id="visualiserTab"
+            class="tab docked"
+            docked="bottom-right"
+            last-dropzone="bottom-right"
+            :last-coords-x="Math.floor((2 * tabWidth) / 3)"
+            :last-coords-y="Math.floor((2 * tabWidth) / 3)">
             <ParamEditor
                 title="Visualizer"
                 :paramable="specimen.visualizer"
@@ -79,6 +90,9 @@
         tab: HTMLElement,
         dropzone: HTMLElement
     ): void {
+        if (window.innerWidth < 700) return
+
+        const dropzoneContainer = dropzone.parentElement?.parentElement
         const dropzoneRect = dropzone.getBoundingClientRect()
 
         const {x, y} = translateCoords(dropzoneRect.x, dropzoneRect.y)
@@ -87,8 +101,32 @@
         tab.style.left = x + 'px'
         tab.style.height = dropzoneRect.height + 'px'
 
+        // update the classlist with "minimized"
+        // if the height is less or equal than 110
+        if (dropzoneRect.height <= 110) {
+            tab.classList.add('minimized')
+        } else {
+            tab.classList.remove('minimized')
+        }
+
         tab.setAttribute('data-x', x.toString())
         tab.setAttribute('data-y', y.toString())
+
+        if (
+            tab instanceof HTMLElement
+            && dropzoneContainer instanceof HTMLElement
+            && dropzone instanceof HTMLElement
+            && dropzone.classList.contains('empty')
+        ) {
+            dropzone.classList.remove('empty')
+            dropzone.classList.remove('drop-hover')
+            dropzoneContainer.classList.remove('empty')
+            tab.classList.add('docked')
+            const dropzoneAttribute = dropzone.getAttribute('dropzone')
+            if (dropzoneAttribute !== null) {
+                tab.setAttribute('docked', dropzoneAttribute)
+            }
+        }
     }
 
     /**
@@ -121,7 +159,7 @@
      * Doesn't affect non-docked tabs.
      * Used when the window is resized.
      */
-    function positionAndSizeAllTabs(): void {
+    export function positionAndSizeAllTabs(): void {
         document.querySelectorAll('.tab').forEach((tab: Element) => {
             if (!(tab instanceof HTMLElement)) return
             if (tab.getAttribute('docked') === 'none') return
@@ -134,6 +172,29 @@
             positionAndSizeTab(tab, dropzone)
         })
     }
+    // selects a tab
+    export function selectTab(tab: HTMLElement): void {
+        deselectTab()
+        const drag = tab.querySelector('.drag')
+        if (!(drag instanceof HTMLElement)) return
+
+        drag.classList.add('selected')
+        drag.style.backgroundColor = 'var(--ns-color-primary)'
+        tab.style.zIndex = '100'
+    }
+    // deselects all tabs
+    export function deselectTab(): void {
+        const tabs = document.querySelectorAll('.tab')
+        tabs.forEach(tab => {
+            if (tab instanceof HTMLElement) {
+                const drag = tab.querySelector('.drag')
+                if (!(drag instanceof HTMLElement)) return
+                drag.classList.remove('selected')
+                drag.style.backgroundColor = 'var(--ns-color-black)'
+                tab.style.zIndex = '1'
+            }
+        })
+    }
 </script>
 
 <script setup lang="ts">
@@ -156,6 +217,12 @@
             : defaultSpecimen
     )
 
+    const tabWidth = parseInt(
+        window
+            .getComputedStyle(document.documentElement)
+            .getPropertyValue('--ns-desktop-tab-width')
+    )
+
     const updateURL = () =>
         router.push({
             query: {
@@ -173,7 +240,15 @@
         window.addEventListener('resize', () => {
             positionAndSizeAllTabs()
         })
+
         specimen.setup(canvasContainer)
+
+        setInterval(() => {
+            specimen.resized(
+                canvasContainer.clientWidth,
+                canvasContainer.clientHeight
+            )
+        }, 500)
     })
 
     // enable draggables to be dropped into this
@@ -272,7 +347,7 @@
                     dropzoneWrapper.style.height =
                         Math.min(
                             event.rect.height,
-                            dropContRect.height - 144
+                            dropContRect.height - 90
                         ) + 'px'
                     dropzoneWrapper.classList.add('resized')
                     positionAndSizeAllTabs()
@@ -287,13 +362,14 @@
 
             // minimum size
             interact.modifiers.restrictSize({
-                min: {width: 0, height: 128},
+                min: {width: 700, height: 90},
             }),
         ],
     })
 </script>
 
 <style scoped lang="scss">
+    // mobile styles
     #specimen-container {
         height: calc(100vh - 54px);
         position: relative;
@@ -307,64 +383,123 @@
         flex: 1;
         position: relative;
         overflow: hidden;
+        display: flex;
+        align-items: center;
+        justify-content: center;
     }
 
     .dropzone-container {
         display: flex;
         flex-direction: column;
-        width: 300px;
-        height: 100%;
-
-        &#right-dropzone-container {
-            right: 0;
-            top: 0;
+        min-height: fit-content;
+        padding-left: auto;
+        padding-right: auto;
+    }
+    .dropzone-container {
+        display: none;
+    }
+    #canvas-container {
+        order: 1;
+        border-bottom: 1px solid var(--ns-color-black);
+        height: 301px;
+    }
+    #sequenceTab {
+        width: 100%;
+        padding-left: auto;
+        padding-right: auto;
+        order: 2;
+        border-bottom: 1px solid var(--ns-color-black);
+    }
+    #visualiserTab {
+        width: 100%;
+        padding-left: auto;
+        padding-right: auto;
+        order: 3;
+        border-bottom: 1px solid var(--ns-color-black);
+    }
+    // desktop styles
+    @media (min-width: 700px) {
+        #sequenceTab,
+        #visualiserTab {
+            width: var(--ns-desktop-tab-width);
         }
-
-        &#left-dropzone-container {
-            left: 0;
-            top: 0;
+        #specimen-container {
+            height: calc(100vh - 54px);
+            position: relative;
+        }
+        #main {
+            display: flex;
+            height: 100%;
         }
 
-        &.empty {
-            position: absolute;
-            pointer-events: none;
+        #canvas-container {
+            height: unset;
 
-            .dropzone-resize.material-icons-sharp {
-                display: none;
-            }
+            order: unset;
+            flex: 1;
+            position: relative;
+            overflow: hidden;
         }
 
-        .dropzone-size-wrapper {
-            flex-grow: 1;
+        .dropzone-container {
             display: flex;
             flex-direction: column;
-            max-height: calc(100% - 128px);
+            width: var(--ns-desktop-tab-width);
+            height: 100%;
 
-            &.resized {
-                flex-grow: unset;
+            &#right-dropzone-container {
+                right: 0;
+                top: 0;
             }
 
-            .dropzone-resize {
-                height: 16px;
-                font-size: 16px;
-                display: flex;
-                justify-content: center;
-                align-items: center;
-                cursor: ns-resize;
+            &#left-dropzone-container {
+                left: 0;
+                top: 0;
+            }
+
+            &.empty {
+                position: absolute;
+                pointer-events: none;
+
+                .dropzone-resize.material-icons-sharp {
+                    display: none;
+                }
             }
 
-            .dropzone {
+            .dropzone-size-wrapper {
                 flex-grow: 1;
+                display: flex;
+                flex-direction: column;
+                max-height: calc(100% - 90px);
+
+                &.resized {
+                    flex-grow: unset;
+                }
 
-                &.drop-hover {
-                    background-color: var(--ns-color-primary);
-                    filter: brightness(120%);
+                .dropzone-resize {
+                    height: 16px;
+                    font-size: 16px;
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                    cursor: ns-resize;
+                }
+
+                .dropzone {
+                    flex-grow: 1;
+
+                    &.drop-hover {
+                        background-color: var(--ns-color-primary);
+                        filter: brightness(120%);
+                    }
                 }
             }
         }
-    }
 
-    .tab {
-        position: absolute;
+        .tab {
+            width: 300px;
+            position: absolute;
+            order: unset;
+        }
     }
 </style>
diff --git a/src/views/__tests__/Gallery.spec.ts b/src/views/__tests__/Gallery.spec.ts
@@ -0,0 +1,8 @@
+import Gallery from '../Gallery.vue'
+import {expect, test} from 'vitest'
+import {mount} from '@vue/test-utils'
+
+test('should contain specimen gallery', () => {
+    const wrapper = mount(Gallery, {shallow: true})
+    expect(wrapper.html()).toContain('Specimen gallery')
+})
diff --git a/src/visualizers/P5Visualizer.ts b/src/visualizers/P5Visualizer.ts
@@ -60,6 +60,7 @@ export function P5Visualizer<PD extends GenericParamDescription>(desc: PD) {
     {
         _sketch?: p5
         _canvas?: p5.Renderer
+        _size: {width: number; height: number}
 
         within?: HTMLElement
         get sketch(): p5 {
@@ -86,6 +87,7 @@ export function P5Visualizer<PD extends GenericParamDescription>(desc: PD) {
         constructor(seq: SequenceInterface<GenericParamDescription>) {
             super(desc)
             this.seq = seq
+            this._size = {width: 0, height: 0}
             Object.assign(this, defaultObject)
         }
 
@@ -98,13 +100,18 @@ export function P5Visualizer<PD extends GenericParamDescription>(desc: PD) {
          * of the p5 object itself would need to implement an extended or
          * replaced inhabit() method.
          * @param element HTMLElement  Where the visualizer should inject itself
+         * @param size The width and height the visualizer should occupy
          */
-        inhabit(element: HTMLElement): void {
+        inhabit(
+            element: HTMLElement,
+            size: {width: number; height: number}
+        ): void {
             if (this.within === element) return // already inhabiting there
             if (this.within) {
                 // oops, already inhabiting somewhere else; depart there
                 this.depart(this.within)
             }
+            this._size = size
             this.within = element
             this._sketch = new p5(sketch => {
                 this._sketch = sketch // must assign here,  as setup is called
@@ -185,24 +192,14 @@ export function P5Visualizer<PD extends GenericParamDescription>(desc: PD) {
             this._sketch?.noLoop()
         }
 
-        /**
-         * Determining the maximum pixel width and height the containing
-         * element allows.
-         * @returns [number, number] Maximum width and height of inhabited
-         * element
-         */
-        measure(): [number, number] {
-            if (!this.within) return [0, 0]
-            return [this.within.clientWidth, this.within.clientHeight]
-        }
-
         /**
          * The p5 setup for this visualizer. Note that derived Visualizers
          * _must_ call this first.
          */
         setup() {
-            const [w, h] = this.measure()
-            this._canvas = this.sketch.background('white').createCanvas(w, h)
+            this._canvas = this.sketch
+                .background('white')
+                .createCanvas(this._size.width, this._size.height)
         }
 
         /**
@@ -217,18 +214,6 @@ export function P5Visualizer<PD extends GenericParamDescription>(desc: PD) {
          */
         draw(): void {}
 
-        /**
-         * What to do when the window resizes
-         */
-        windowResized(): void {
-            if (!this._sketch) return
-            // Make sure the canvas isn't acting as a "strut" keeping
-            // the div big:
-            this._sketch.resizeCanvas(10, 10)
-            const [w, h] = this.measure()
-            this._sketch.resizeCanvas(w, h)
-        }
-
         /**
          * Get rid of the visualization altogether
          */
@@ -285,7 +270,7 @@ export function P5Visualizer<PD extends GenericParamDescription>(desc: PD) {
             const element = this.within!
             this.stop()
             this.depart(element)
-            this.inhabit(element)
+            this.inhabit(element, this._size)
             this.show()
         }
     }

diff --git a/src/visualizers/VisualizerInterface.ts b/src/visualizers/VisualizerInterface.ts
@@ -40,12 +40,17 @@ export interface VisualizerInterface<PD extends GenericParamDescription>
      * Cause the visualizer to realize itself within a DOM element.
      * The visualizer should remove itself from any other location it might
      * have been displaying, and prepare to draw within the provided element.
-     * It is safe to call this with the same element in which
-     * the visualizer is already displaying.
+     * It is safe to call this with the same element in which the visualizer
+     * is already displaying.
+     * The size provided to the visualizer is the size the visualizer should
+     * assume, respecting its aspect ratio preferences. If needed, the
+     * visualizer can also query the size of the element for the full container
+     * size.
      * @param element HTMLElement The DOM node where the visualizer should
      *     insert itself.
+     * @param size The width and height the visualizer should occupy
      */
-    inhabit(element: HTMLElement): void
+    inhabit(element: HTMLElement, size: {width: number; height: number}): void
     /**
      * Show the sequence according to this visualizer.
      */
@@ -65,7 +70,20 @@ export interface VisualizerInterface<PD extends GenericParamDescription>
      * @param element HTMLElement The DOM node the visualizer was inhabit()ing
      */
     depart(element: HTMLElement): void
-
+    /**
+     * This is called when the size of the visualizer should change, either
+     * because the window is resized, or the docking configuration has changed.
+     * Visualizer writers should take care to resize their canvas and to make
+     * sure that any html elements aren't wider than the requested width.
+     * The new size is the full available size cut down to fit in the requested
+     * aspect ratio.
+     *
+     * Not implementing this function will mean that the visualizer is reset
+     * on resize
+     * @param width The new width of the visualizer (in pixels)
+     * @param height The new height of the visualizer (in pixels)
+     */
+    resized?(width: number, height: number): void
     /**
      * Provides a way for visualizers to request a specific aspect ratio for
      * its canvas. This aspect ratio is specified as a positive n > 0 where