Caltech-IPAC · robyww · Feb 26, 2026 · Feb 20, 2026
diff --git a/src/firefly/html/firefly.html b/src/firefly/html/firefly.html
@@ -41,7 +41,7 @@
 
 <body style="margin: 0">
 <!-- attached location for firefly app -->
-<div id='app' style="width:100vw;height: 100vh"/>
+<div id='app' style="width:100dvw;height: 100dvh"/>
 
 
 

diff --git a/src/firefly/html/hydra.html b/src/firefly/html/hydra.html
@@ -25,7 +25,7 @@
 
 <body style="margin: 0">
 <!-- attached location for firefly app -->
-<div id='app' style="width:100vw;height: 100vh"/>
+<div id='app' style="width:100dvw;height: 100dvh"/>
 
 
 

diff --git a/src/firefly/html/slate.html b/src/firefly/html/slate.html
@@ -36,7 +36,7 @@
 
 <body style="margin: 0">
 <!-- attached location for firefly app -->
-<div id='app' style="width:100vw;height: 100vh"/>
+<div id='app' style="width:100dvw;height: 100dvh"/>
 
 
 

diff --git a/src/firefly/html/ts.html b/src/firefly/html/ts.html
@@ -32,7 +32,7 @@
 
 <body style="margin: 0">
 <!-- attached location for firefly app -->
-<div id='app' style="width:100vw;height: 100vh"/>
+<div id='app' style="width:100dvw;height: 100dvh"/>
 
 
 

diff --git a/src/firefly/js/ui/Menu.jsx b/src/firefly/js/ui/Menu.jsx
@@ -217,6 +217,7 @@ function MenuTabBar({menuTabItems=[], size, selected, displayMask, setElement})
     const tabSelected= selected || ResultCmd;
     const variant='soft';
     const color='primary';
+    const adjustedDisplayMask= displayMask?.slice(1);
 
     const tabItems= [
         <ResultsTab {...{key:'results-tab', size, color, variant, ref: (el) => setElement('results-tab ', el)}}/>,
@@ -233,7 +234,7 @@ function MenuTabBar({menuTabItems=[], size, selected, displayMask, setElement})
                 return tip ? <Tooltip key={idx} title={tip}>{tab}</Tooltip> : tab;
             }
             )
-            .filter((item,idx) => displayMask ? displayMask[idx] : true)
+            .filter((item,idx) => adjustedDisplayMask?.[idx] ?? true)
     ];
 
     return (
@@ -288,7 +289,8 @@ function updateMenu(appTitle, menu) {
 
 function getTabBarRealWidth(tabBarElement) {
     const {left: tabBarLeft, width: tabBarWidth} = tabBarElement.getBoundingClientRect() ?? {width: 0, left: 0};
-    const tabBarRealWidth = (window.innerWidth < (tabBarLeft + tabBarWidth)) ? window.innerWidth - tabBarLeft : tabBarWidth;
+    const docWidth= Math.min(document.documentElement.clientWidth, window.innerWidth);
+    const tabBarRealWidth = (docWidth < (tabBarLeft + tabBarWidth)) ? docWidth - tabBarLeft : tabBarWidth;
     return tabBarRealWidth;
 }
 

diff --git a/src/firefly/js/visualize/ImageViewerLayout.jsx b/src/firefly/js/visualize/ImageViewerLayout.jsx
@@ -91,7 +91,7 @@ export const ImageViewerLayout= memo(({ plotView, drawLayersAry, width, height,
     const eventCB= (eventPlotId,mouseState,screenPt,screenX,screenY,nativeEv) => {
         const {DOWN,MOVE}= MouseState;
         const shiftDown= nativeEv.shiftKey;
-        const mouseStatePayload= makeMouseStatePayload(eventPlotId,mouseState,screenPt,screenX,screenY, {shiftDown});
+        const mouseStatePayload= makeMouseStatePayload(eventPlotId,mouseState,screenPt,screenX,screenY, nativeEv.type, {shiftDown});
         const list= drawLayersAry.filter(
             (dl) => dl.visiblePlotIdAry.includes(plotId) && dl.mouseEventMap?.[mouseState.key] );
 
@@ -104,6 +104,11 @@ export const ImageViewerLayout= memo(({ plotView, drawLayersAry, width, height,
             handleScrollWheelEvent(plotView,mouseState,screenPt,nativeEv);
             return;
         }
+        else if (isPinch(mouseState)) {
+            if (!isActivePlotView(visRoot(),eventPlotId)) return;
+            handlePinchEvent(plotView,mouseState,screenPt,nativeEv);
+            return;
+        }
         else {
             const ownerCandidate= !shiftDown && findMouseOwner(list,plot,screenPt);         // see if anyone can own that mouse
             eRef.mouseOwnerLayerId = DOWN.is(mouseState) && ownerCandidate ? ownerCandidate.drawLayerId : null;   // can only happen on mouseDown
@@ -140,6 +145,7 @@ const draggingOrReleasing = (ms) => ms===MouseState.DRAG || ms===MouseState.DRAG
     ms===MouseState.UP || ms===MouseState.EXIT || ms===MouseState.ENTER;
 
 const isWheel= (mouseState) => mouseState===MouseState.WHEEL_DOWN || mouseState===MouseState.WHEEL_UP;
+const isPinch= (mouseState) => mouseState===MouseState.PINCH_IN || mouseState===MouseState.PINCH_OUT;
 
 const zoomThrottle= throttle( (params) => {
     dispatchZoom(params);
@@ -309,14 +315,32 @@ function makeScroll() {
 }
 
 
+function handlePinchEvent(plotView, mouseState, screenPt, nativeEv) {
+    if (!plotView) return;
+    const userZoomType= mouseState===MouseState.PINCH_OUT ? UserZoomTypes.UP : UserZoomTypes.DOWN;
+    const plot= primePlot(plotView) ?? {};
+    const devicePt= CCUtil.getDeviceCoords(plot,screenPt);
+    const {screenSize:{width,height}}= plot;
+    if (mouseState===MouseState.PINCH_IN && width<100 && height<100) return;
+    dispatchZoom(
+        {
+            plotId:plotView.plotId,
+            userZoomType,
+            devicePt,
+            upDownPercent:Math.abs(nativeEv.wheelDeltaY)%120===0?1:  isHiPS(plot)? .2 : .4
+        } );
+
+}
+
 function makeHandleScrollWheelEvent() {
     let mouseWheelDevicePt= undefined;
     let mouseWheelTimeoutId= undefined;
 
     const handleScrollWheelEvent= (plotView, mouseState, screenPt, nativeEv) => {
 
+        const plot= primePlot(plotView) ?? {};
         if (!mouseWheelDevicePt) {
-            mouseWheelDevicePt= CCUtil.getDeviceCoords(primePlot(plotView),screenPt);
+            mouseWheelDevicePt= CCUtil.getDeviceCoords(plot,screenPt);
             mouseWheelTimeoutId= setTimeout(() => {
                 mouseWheelDevicePt= undefined;
             }, 200);
@@ -330,7 +354,6 @@ function makeHandleScrollWheelEvent() {
 
         const userZoomType= mouseState===MouseState.WHEEL_DOWN ? UserZoomTypes.UP : UserZoomTypes.DOWN;
         nativeEv.preventDefault();
-        const plot= primePlot(plotView) ?? {};
         const {screenSize}= plot;
         const {viewDim}= plotView ?? {};
         const smallImage=

diff --git a/src/firefly/js/visualize/VisMouseSync.js b/src/firefly/js/visualize/VisMouseSync.js
@@ -15,23 +15,25 @@ import {STANDARD_READOUT} from './MouseReadoutCntlr';
 
 /**
  * @typedef MouseState
- * @prop NONE,
- * @prop ENTER,
- * @prop EXIT,
- * @prop DOWN,
- * @prop UP,
- * @prop DRAG_COMPONENT,
- * @prop DRAG,
- * @prop MOVE,
- * @prop CLICK,
- * @prop WHEEL_UP,
- * @prop WHEEL_DOWN,
- * @prop DOUBLE_CLICK,
- * @type {Enum}
+ * @prop NONE
+ * @prop ENTER
+ * @prop EXIT
+ * @prop DOWN
+ * @prop UP
+ * @prop DRAG_COMPONENT
+ * @prop DRAG
+ * @prop MOVE
+ * @prop PINCH_IN
+ * @prop PINCH_OUT
+ * @prop CLICK
+ * @prop WHEEL_UP
+ * @prop WHEEL_DOWN
+ * @prop DOUBLE_CLICK
  */
+
 /** @type MouseState */
 export const MouseState= new Enum(['NONE', 'ENTER', 'EXIT', 'DOWN', 'UP',
-    'DRAG_COMPONENT', 'DRAG', 'MOVE', 'CLICK', 'WHEEL_UP', 'WHEEL_DOWN',
+    'DRAG_COMPONENT', 'DRAG', 'MOVE', 'CLICK', 'WHEEL_UP', 'WHEEL_DOWN', 'PINCH_IN', 'PINCH_OUT',
     'DOUBLE_CLICK']);
 
 var lastCtx = {
@@ -110,9 +112,9 @@ export function fireMouseReadoutChange({readoutType= STANDARD_READOUT, plotId, r
  * @param kState.metaDown
  * @return {{plotId: string, mouseState: Enum, screenPt: object, imagePt: object, worldPt: object, screenX: number, screenY: number}}
  */
-export function makeMouseStatePayload(plotId,mouseState,screenPt,screenX,screenY,
+export function makeMouseStatePayload(plotId,mouseState,screenPt,screenX,screenY,eventType='',
                                {shiftDown,controlDown,metaDown}= {}) {
-    const payload={mouseState,screenPt,screenX,screenY, shiftDown,controlDown,metaDown};
+    const payload={mouseState,screenPt,screenX,screenY, shiftDown,controlDown,metaDown,eventType};
     const plot= primePlot(visRoot(),plotId);
     const cc= CysConverter.make(plot);
     if (!plotId || !plot) return payload;