Restore loading bar when opening a dotplot track and other small fixes (

#3569)

* Fix loading message not displaying after dotplot refactors

* Release ctrlKey mode on mouse up

* Avoid a crash in the renderer when passed empty region set

* Bump lock

plugins/dotplot-view/src/DotplotDisplay/components/DotplotDisplay.tsx

@@ -11,24 +11,21 @@ function DotplotDisplay(props: {
   children?: React.ReactNode
 }) {
   const { model, children } = props
-  const { offsetX = 0, offsetY = 0, bpPerPxX, bpPerPxY } = model.data || {}
+  const { offsetX = 0, offsetY = 0 } = model.data || {}
   const view = getContainingView(model) as DotplotViewModel
-  const same =
-    view.vview.bpPerPx === bpPerPxY && view.hview.bpPerPx === bpPerPxX
+
   const top = view.vview.offsetPx - offsetY
   const left = -(view.hview.offsetPx - offsetX)
   return (
     <div style={{ position: 'relative' }}>
-      {same ? (
-        <model.ReactComponent2
-          {...props}
-          style={{
-            position: 'absolute',
-            top,
-            left,
-          }}
-        />
-      ) : null}
+      <model.ReactComponent2
+        {...props}
+        style={{
+          position: 'absolute',
+          top,
+          left,
+        }}
+      />
       {children}
     </div>
   )

plugins/dotplot-view/src/DotplotDisplay/stateModelFactory.tsx

@@ -52,6 +52,13 @@ export function stateModelFactory(configSchema: AnyConfigurationSchemaType) {
         })),
     )
     .views(self => ({
+      get shouldDisplay() {
+        const view = getContainingView(self)
+        return (
+          view.vview.bpPerPx === self.data.bpPerPxY &&
+          view.hview.bpPerPx === self.data.bpPerPxX
+        )
+      },
       /**
        * #getter
        */

plugins/dotplot-view/src/DotplotRenderer/DotplotRenderer.ts

@@ -319,8 +319,8 @@ export default class DotplotRenderer extends ComparativeRenderer {
       ...ret,
       height,
       width,
-      offsetX: views[0].dynamicBlocks.blocks[0].offsetPx,
-      offsetY: views[1].dynamicBlocks.blocks[0].offsetPx,
+      offsetX: views[0].dynamicBlocks.blocks[0]?.offsetPx || 0,
+      offsetY: views[1].dynamicBlocks.blocks[0]?.offsetPx || 0,
       bpPerPxX: views[0].bpPerPx,
       bpPerPxY: views[1].bpPerPx,
     }

plugins/dotplot-view/src/DotplotView/1dview.ts

@@ -46,14 +46,14 @@ const Dotplot1DView = Base1DView.extend(self => {
        * #getter
        */
       get maxOffset() {
-        return self.displayedRegionsTotalPx - self.width * 0.95
+        return self.displayedRegionsTotalPx - self.width * 0.2
       },
 
       /**
        * #getter
        */
       get minOffset() {
-        return -self.width * 0.05
+        return -self.width * 0.8
       },
     },
     actions: {

plugins/dotplot-view/src/DotplotView/components/DotplotView.tsx

@@ -192,6 +192,7 @@ const DotplotViewInternal = observer(function ({
     let cleanup = () => {}
 
     function globalMouseUp(event: MouseEvent) {
+      setCtrlKeyWasUsed(false)
       if (Math.abs(xdistance) > 3 && Math.abs(ydistance) > 3 && validSelect) {
         setMouseUpClient([event.clientX, event.clientY])
       } else {

plugins/dotplot-view/src/DotplotView/model.ts

@@ -111,30 +111,6 @@ export default function stateModelFactory(pm: PluginManager) {
          * #property
          */
         vview: types.optional(DotplotVView, {}),
-        /**
-         * #property
-         */
-        cursorMode: types.optional(
-          types.string,
-          () => localStorageGetItem('dotplot-cursorMode') || 'crosshair',
-        ),
-
-        /**
-         * #property
-         */
-        wheelMode: types.optional(
-          types.string,
-          () => localStorageGetItem('dotplot-wheelMode') || 'zoom',
-        ),
-
-        /**
-         * #property
-         */
-        showPanButtons: types.optional(types.boolean, () =>
-          Boolean(
-            JSON.parse(localStorageGetItem('dotplot-showPanbuttons') || 'true'),
-          ),
-        ),
 
         /**
          * #property
@@ -155,6 +131,14 @@ export default function stateModelFactory(pm: PluginManager) {
     .volatile(() => ({
       volatileWidth: undefined as number | undefined,
       volatileError: undefined as unknown,
+
+      // these are 'personal preferences', stored in volatile and
+      // loaded/written to localStorage
+      cursorMode: localStorageGetItem('dotplot-cursorMode') || 'crosshair',
+      showPanButtons: Boolean(
+        JSON.parse(localStorageGetItem('dotplot-showPanbuttons') || 'true'),
+      ),
+      wheelMode: localStorageGetItem('dotplot-wheelMode') || 'zoom',
       borderX: 100,
       borderY: 100,
     }))

plugins/dotplot-view/src/DotplotView/svgcomponents/SVGDotplotView.tsx

@@ -47,7 +47,6 @@ export async function renderToSvg(
           <VerticalAxisRaw model={model} />
           <g transform={`translate(${borderX} 0)`}>
             <GridRaw model={model} />
-
             <defs>
               <clipPath id="clip-ruler">
                 <rect x={0} y={0} width={viewWidth} height={viewHeight} />

plugins/dotplot-view/src/ServerSideRenderedBlockContent.tsx

@@ -60,12 +60,17 @@ function BlockError({ error }: { error: unknown }) {
   )
 }
 
-const ServerSideRenderedBlockContent = observer(function ({
+export default observer(function ({
   model,
   style,
 }: {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  model: any
+  model: {
+    error?: unknown
+    message?: string
+    filled?: boolean
+    shouldDisplay?: boolean
+    reactElement?: React.ReactElement
+  }
   style: CSSProperties
 }) {
   if (model.error) {
@@ -74,9 +79,8 @@ const ServerSideRenderedBlockContent = observer(function ({
     return <BlockMessage messageText={model.message} />
   } else if (!model.filled) {
     return <LoadingMessage />
-  } else {
+  } else if (model.shouldDisplay) {
     return <div style={style}>{model.reactElement}</div>
   }
+  return null
 })
-
-export default ServerSideRenderedBlockContent

plugins/linear-genome-view/src/LinearGenomeView/svgcomponents/SVGTrackLabel.tsx

@@ -17,6 +17,7 @@ export default function SVGTrackLabel({
   const theme = useTheme()
   const fill = theme.palette.text.primary
   const xoff = trackLabels === 'overlay' ? 5 : 0
+  const yoff = trackLabels === 'offset' ? 5 : 0
   return trackLabels !== 'none' ? (
     <g>
       {trackLabels === 'left' ? (
@@ -33,6 +34,7 @@ export default function SVGTrackLabel({
       ) : (
         <text
           x={x + xoff}
+          y={yoff}
           fill={fill}
           fontSize={fontSize}
           dominantBaseline="hanging"