react-msaview 3.1.2 → 3.1.4

package/dist/renderToSvg.js

@@ -6,19 +6,75 @@ import { renderTreeCanvas } from './components/TreePanel/renderTreeCanvas';
 import { renderMSABlock } from './components/MSAPanel/renderMSABlock';
 import { colorContrast } from './util';
 import MinimapSVG from './components/MinimapSVG';
-// render LGV to SVG
 export async function renderToSvg(model, opts) {
     await when(() => !!model.initialized);
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const { width, height, scrollX, scrollY, colorScheme, treeAreaWidth } = model;
-    const { theme, includeMinimap } = opts;
+    const { width, height, scrollX, scrollY } = model;
+    const { exportType, theme, includeMinimap } = opts;
+    if (exportType === 'entire') {
+        return render({
+            width: model.totalWidth + model.treeAreaWidth,
+            height: model.totalHeight,
+            theme,
+            model,
+            offsetY: 0,
+            offsetX: 0,
+            includeMinimap,
+        });
+    }
+    else if (exportType === 'viewport') {
+        return render({
+            width,
+            height,
+            theme,
+            model,
+            offsetY: scrollY,
+            offsetX: -scrollX,
+            includeMinimap,
+        });
+    }
+    else {
+        throw new Error('unknown export type');
+    }
+}
+async function render({ width, height, offsetX, offsetY, theme, model, includeMinimap, }) {
     const { Context } = await import('svgcanvas');
+    const Wrapper = includeMinimap ? MinimapWrapper : NullWrapper;
+    return renderToStaticMarkup(React.createElement(SvgWrapper, { width: width, height: height },
+        React.createElement(Wrapper, { model: model },
+            React.createElement(CoreRendering, { Context: Context, model: model, theme: theme, offsetX: offsetX, offsetY: offsetY, width: width, height: height }))), createRoot);
+}
+// function renderMultiline({ model }: { model: MsaViewModel }) {
+//   const { treeAreaWidth, height } = model
+//   const clipId = 'tree'
+//   return (
+//     <Wrapper model={model}>
+//       <defs>
+//         <clipPath id={clipId}>
+//           <rect x={0} y={0} width={treeAreaWidth} height={height} />
+//         </clipPath>
+//       </defs>
+//       <g
+//         clipPath={`url(#${clipId})`}
+//         /* eslint-disable-next-line react/no-danger */
+//         dangerouslySetInnerHTML={{ __html: ctx1.getSvg().innerHTML }}
+//       />
+//       <g
+//         transform={`translate(${treeAreaWidth} 0)`}
+//         /* eslint-disable-next-line react/no-danger */
+//         dangerouslySetInnerHTML={{ __html: ctx2.getSvg().innerHTML }}
+//       />
+//     </Wrapper>
+//   )
+// }
+function CoreRendering({ model, theme, width, height, offsetX, offsetY, Context, }) {
+    const clipId = 'tree';
+    const { treeAreaWidth, colorScheme } = model;
+    const contrastScheme = colorContrast(colorScheme, theme);
     const ctx1 = Context(width, height);
     const ctx2 = Context(width, height);
-    const contrastScheme = colorContrast(colorScheme, theme);
     renderTreeCanvas({
         model,
-        offsetY: scrollY,
+        offsetY,
         ctx: ctx1,
         theme,
         blockSizeYOverride: height,
@@ -26,28 +82,25 @@ export async function renderToSvg(model, opts) {
     });
     renderMSABlock({
         model,
-        offsetY: scrollY,
-        offsetX: -scrollX,
+        theme,
+        offsetY,
+        offsetX,
         contrastScheme,
         ctx: ctx2,
         blockSizeXOverride: width - treeAreaWidth,
         blockSizeYOverride: height,
         highResScaleFactorOverride: 1,
     });
-    const Wrapper = includeMinimap ? MinimapWrapper : NullWrapper;
-    const clipId = 'tree';
-    // the xlink namespace is used for rendering <image> tag
-    return renderToStaticMarkup(React.createElement("svg", { width: width, height: height, xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", viewBox: [0, 0, width, height].toString() },
-        React.createElement(Wrapper, { model: model },
-            React.createElement("defs", null,
-                React.createElement("clipPath", { id: clipId },
-                    React.createElement("rect", { x: 0, y: 0, width: treeAreaWidth, height: height }))),
-            React.createElement("g", { clipPath: `url(#${clipId})`, 
-                /* eslint-disable-next-line react/no-danger */
-                dangerouslySetInnerHTML: { __html: ctx1.getSvg().innerHTML } }),
-            React.createElement("g", { transform: `translate(${treeAreaWidth} 0)`, 
-                /* eslint-disable-next-line react/no-danger */
-                dangerouslySetInnerHTML: { __html: ctx2.getSvg().innerHTML } }))), createRoot);
+    return (React.createElement(React.Fragment, null,
+        React.createElement("defs", null,
+            React.createElement("clipPath", { id: clipId },
+                React.createElement("rect", { x: 0, y: 0, width: treeAreaWidth, height: height }))),
+        React.createElement("g", { clipPath: `url(#${clipId})`, 
+            /* eslint-disable-next-line react/no-danger */
+            dangerouslySetInnerHTML: { __html: ctx1.getSvg().innerHTML } }),
+        React.createElement("g", { transform: `translate(${treeAreaWidth} 0)`, 
+            /* eslint-disable-next-line react/no-danger */
+            dangerouslySetInnerHTML: { __html: ctx2.getSvg().innerHTML } })));
 }
 function MinimapWrapper({ model, children, }) {
     const { minimapHeight, treeAreaWidth } = model;
@@ -56,6 +109,9 @@ function MinimapWrapper({ model, children, }) {
             React.createElement(MinimapSVG, { model: model })),
         React.createElement("g", { transform: `translate(0 ${minimapHeight})` }, children)));
 }
+function SvgWrapper({ width, height, children, }) {
+    return (React.createElement("svg", { width: width, height: height, xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", viewBox: [0, 0, width, height].toString() }, children));
+}
 function NullWrapper({ children }) {
     return React.createElement(React.Fragment, null, children);
 }

package/dist/renderToSvg.js.map

@@ -1 +1 @@
-{"version":3,"file":"renderToSvg.js","sourceRoot":"","sources":["../src/renderToSvg.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"renderToSvg.js","sourceRoot":"","sources":["../src/renderToSvg.tsx"],"names":[],"mappings":"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"}

package/dist/util.js

@@ -6,13 +6,12 @@ export function transform(obj, cb) {
     return Object.fromEntries(Object.entries(obj).map(cb));
 }
 export function generateNodeIds(tree, parent = 'node', depth = 0) {
-    var _a;
     const id = `${parent}-${depth}`;
     return {
         ...tree,
         id,
         name: tree.name || id,
-        branchset: ((_a = tree.branchset) === null || _a === void 0 ? void 0 : _a.map((b, i) => generateNodeIds(b, `${id}-${i}`, depth + 1))) || [],
+        branchset: tree.branchset?.map((b, i) => generateNodeIds(b, `${id}-${i}`, depth + 1)) || [],
     };
 }
 export function colorContrast(colorScheme, theme) {
@@ -22,7 +21,11 @@ export function colorContrast(colorScheme, theme) {
     ]);
 }
 export function parseGFF(str) {
-    return str === null || str === void 0 ? void 0 : str.split('\n').map(f => f.trim()).filter(f => !!f && !f.startsWith('#')).map(f => {
+    return str
+        ?.split('\n')
+        .map(f => f.trim())
+        .filter(f => !!f && !f.startsWith('#'))
+        .map(f => {
         const [seq_id, source, type, start, end, score, strand, phase, col9] = f.split('\t');
         return {
             seq_id,
@@ -87,7 +90,7 @@ export function collapse(d) {
 // Collapse the node and all it's children, from
 // https://bl.ocks.org/d3noob/43a860bc0024792f8803bba8ca0d5ecd
 export function filterHiddenLeafNodes(d, hiddenId) {
-    if (d === null || d === void 0 ? void 0 : d.children) {
+    if (d?.children) {
         d.children = d.children.filter(f => f.id !== hiddenId);
     }
 }

package/dist/util.js.map

@@ -1 +1 @@
-{"version":3,"file":"util.js","sourceRoot":"","sources":["../src/util.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"util.js","sourceRoot":"","sources":["../src/util.ts"],"names":[],"mappings":"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"}

package/dist/version.d.ts

@@ -1 +1 @@
-export declare const version = "3.1.2";
+export declare const version = "3.1.4";

package/dist/version.js

@@ -1,2 +1,2 @@
-export const version = '3.1.2';
+export const version = '3.1.4';
 //# sourceMappingURL=version.js.map

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-msaview",
   "author": "Colin",
-  "version": "3.1.2",
+  "version": "3.1.4",
   "license": "MIT",
   "main": "dist/index.js",
   "files": [
@@ -34,29 +34,7 @@
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0"
   },
-  "devDependencies": {
-    "@rollup/plugin-commonjs": "^25.0.4",
-    "@rollup/plugin-json": "^6.0.0",
-    "@rollup/plugin-node-resolve": "^15.0.2",
-    "@rollup/plugin-replace": "^5.0.5",
-    "@rollup/plugin-terser": "^0.4.1",
-    "@rollup/plugin-typescript": "^11.1.0",
-    "@types/color": "^3.0.1",
-    "@types/d3": "^7.4.0",
-    "@types/react": "^18.2.55",
-    "@types/react-dom": "^18.2.19",
-    "@typescript-eslint/eslint-plugin": "^6.21.0",
-    "@typescript-eslint/parser": "^6.21.0",
-    "eslint-plugin-unicorn": "^51.0.1",
-    "rollup": "^4.9.1",
-    "rollup-plugin-polyfill-node": "^0.13.0",
-    "slugify": "^1.6.6",
-    "tslib": "^2.1.0",
-    "typescript": "^5.0.4"
-  },
   "dependencies": {
-    "@typescript-eslint/eslint-plugin": "^6.21.0",
-    "@typescript-eslint/parser": "^6.21.0",
     "canvas2svg": "^1.0.16",
     "clustal-js": "^2.0.0",
     "colord": "^2.9.3",

package/src/components/ExportSVGDialog.tsx

@@ -1,13 +1,17 @@
 import React, { useState } from 'react'
 import { Dialog, ErrorMessage } from '@jbrowse/core/ui'
 import {
-  DialogContent,
-  DialogActions,
   Button,
   Checkbox,
+  DialogContent,
+  DialogActions,
   FormControlLabel,
-  useTheme,
+  FormControl,
+  FormLabel,
+  RadioGroup,
+  Radio,
   Typography,
+  useTheme,
 } from '@mui/material'
 import { MsaViewModel } from '../model'
 
@@ -19,22 +23,48 @@ export default function ExportSVGDialog({
   onClose: () => void
 }) {
   const [includeMinimap, setIncludeMinimap] = useState(true)
+  const [exportType, setExportType] = useState('viewport')
   const [error, setError] = useState<unknown>()
   const theme = useTheme()
   return (
     <Dialog onClose={() => onClose()} open title="Export SVG">
       <DialogContent>
-        <Typography>Export SVG of current view</Typography>
         {error ? <ErrorMessage error={error} /> : null}
-        <FormControlLabel
-          control={
-            <Checkbox
-              checked={includeMinimap}
-              onChange={event => setIncludeMinimap(event.target.checked)}
+        <Typography>Settings:</Typography>
+        <div>
+          <FormControl>
+            <FormControlLabel
+              control={
+                <Checkbox
+                  checked={includeMinimap}
+                  onChange={event => setIncludeMinimap(event.target.checked)}
+                />
+              }
+              disabled={exportType === 'entire'}
+              label="Include minimap?"
             />
-          }
-          label="Include minimap?"
-        />
+          </FormControl>
+        </div>
+        <div>
+          <FormControl>
+            <FormLabel>Export type</FormLabel>
+            <RadioGroup
+              value={exportType}
+              onChange={event => setExportType(event.target.value)}
+            >
+              <FormControlLabel
+                value="entire"
+                control={<Radio />}
+                label="Entire MSA"
+              />
+              <FormControlLabel
+                value="viewport"
+                control={<Radio />}
+                label="Current viewport only"
+              />
+            </RadioGroup>
+          </FormControl>
+        </div>
       </DialogContent>
       <DialogActions>
         <Button
@@ -42,7 +72,12 @@ export default function ExportSVGDialog({
           color="primary"
           onClick={async () => {
             try {
-              await model.exportSVG({ theme, includeMinimap })
+              await model.exportSVG({
+                theme,
+                includeMinimap:
+                  exportType === 'entire' ? false : includeMinimap,
+                exportType,
+              })
             } catch (e) {
               console.error(e)
               setError(e)

package/src/components/ImportForm/util.ts

@@ -15,6 +15,7 @@ export async function load(
       await model.setTreeFilehandle(treeFile)
     }
   } catch (e) {
+    console.error(e)
     model.setError(e)
   }
 }

package/src/components/Loading.tsx

@@ -0,0 +1,27 @@
+import React from 'react'
+
+import { observer } from 'mobx-react'
+import { Typography } from '@mui/material'
+
+// locals
+import ImportForm from './ImportForm'
+import MSAView from './MSAView'
+import { MsaViewModel } from '../model'
+
+const Loading = observer(function ({ model }: { model: MsaViewModel }) {
+  const { done, initialized } = model
+
+  return (
+    <div>
+      {!initialized ? (
+        <ImportForm model={model} />
+      ) : !done ? (
+        <Typography variant="h4">Loading...</Typography>
+      ) : (
+        <MSAView model={model} />
+      )}
+    </div>
+  )
+})
+
+export default Loading

package/src/components/MSAPanel/MSABlock.tsx

@@ -42,13 +42,14 @@ const MSABlock = observer(function ({
     return autorun(() => {
       renderMSABlock({
         ctx,
+        theme,
         offsetX,
         offsetY,
         contrastScheme,
         model,
       })
     })
-  }, [model, offsetX, offsetY, contrastScheme])
+  }, [model, offsetX, offsetY, theme, contrastScheme])
   return (
     <canvas
       ref={ref}

package/src/components/MSAPanel/MSAMouseoverCanvas.tsx

@@ -15,17 +15,17 @@ const MSAMouseoverCanvas = observer(function ({
   const { height, width } = model
   useEffect(() => {
     const ctx = ref.current?.getContext('2d')
-    if (!ctx) {
-      return
-    }
-    return autorun(() => {
-      renderMouseover({ ctx, model })
-    })
+    return ctx
+      ? autorun(() => {
+          renderMouseover({ ctx, model })
+        })
+      : undefined
   }, [model])
 
   return (
     <canvas
       ref={ref}
+      id="mouseover"
       width={width}
       height={height}
       style={{

package/src/components/MSAPanel/index.tsx

@@ -5,9 +5,9 @@ import { MsaViewModel } from '../../model'
 
 export default function MSAPanel({ model }: { model: MsaViewModel }) {
   return (
-    <>
+    <div style={{ position: 'relative' }}>
       <MSACanvas model={model} />
       <MSAMouseoverCanvas model={model} />
-    </>
+    </div>
   )
 }

package/src/components/MSAPanel/renderMSABlock.ts

@@ -3,6 +3,7 @@ import { MsaViewModel } from '../../model'
 import { getClustalXColor, getPercentIdentityColor } from '../../colorSchemes'
 import { NodeWithIdsAndLength } from '../../util'
 import { HierarchyNode } from 'd3-hierarchy'
+import { Theme } from '@mui/material'
 
 export function renderMSABlock({
   model,
@@ -10,12 +11,14 @@ export function renderMSABlock({
   offsetY,
   contrastScheme,
   ctx,
+  theme,
   highResScaleFactorOverride,
   blockSizeXOverride,
   blockSizeYOverride,
 }: {
   offsetX: number
   offsetY: number
+  theme: Theme
   model: MsaViewModel
   contrastScheme: Record<string, string>
   ctx: CanvasRenderingContext2D
@@ -52,6 +55,7 @@ export function renderMSABlock({
   drawTiles({
     model,
     ctx,
+    theme,
     offsetX,
     offsetY,
     xStart,
@@ -63,6 +67,7 @@ export function renderMSABlock({
     ctx,
     offsetX,
     contrastScheme,
+    theme,
     xStart,
     xEnd,
     visibleLeaves,
@@ -74,11 +79,13 @@ function drawTiles({
   offsetX,
   ctx,
   visibleLeaves,
+  theme,
   xStart,
   xEnd,
 }: {
   model: MsaViewModel
   offsetX: number
+  theme: Theme
   offsetY: number
   ctx: CanvasRenderingContext2D
   visibleLeaves: HierarchyNode<NodeWithIdsAndLength>[]
@@ -118,7 +125,7 @@ function drawTiles({
             : colorScheme[letter.toUpperCase()]
       if (bgColor) {
         const x = i * colWidth + offsetX - (offsetX % colWidth)
-        ctx.fillStyle = color || 'white'
+        ctx.fillStyle = color || theme.palette.background.default
         ctx.fillRect(x, y - rowHeight, colWidth, rowHeight)
       }
     }
@@ -129,6 +136,7 @@ function drawText({
   model,
   offsetX,
   contrastScheme,
+  theme,
   ctx,
   visibleLeaves,
   xStart,
@@ -137,6 +145,7 @@ function drawText({
   offsetX: number
   model: MsaViewModel
   contrastScheme: Record<string, string>
+  theme: Theme
   ctx: CanvasRenderingContext2D
   visibleLeaves: HierarchyNode<NodeWithIdsAndLength>[]
   xStart: number

package/src/components/MSAPanel/renderMSAMouseover.ts

@@ -10,8 +10,6 @@ export function renderMouseover({
   const {
     mouseCol,
     colWidth,
-    treeAreaWidth,
-    resizeHandleWidth,
     width,
     height,
     rowHeight,
@@ -20,31 +18,19 @@ export function renderMouseover({
     mouseRow,
     // @ts-expect-error
     mouseCol2,
-    minimapHeight,
-    totalTrackAreaHeight,
   } = model
   ctx.resetTransform()
   ctx.clearRect(0, 0, width, height)
-
   if (mouseCol !== undefined) {
     ctx.fillStyle = 'rgba(0,0,0,0.15)'
-    const x =
-      (mouseCol - 1) * colWidth + scrollX + treeAreaWidth + resizeHandleWidth
-
-    ctx.fillRect(x, minimapHeight, colWidth, height)
+    ctx.fillRect((mouseCol - 1) * colWidth + scrollX, 0, colWidth, height)
   }
-
   if (mouseRow !== undefined) {
     ctx.fillStyle = 'rgba(0,0,0,0.15)'
-    const y =
-      mouseRow * rowHeight + scrollY + minimapHeight + totalTrackAreaHeight
-    ctx.fillRect(treeAreaWidth + resizeHandleWidth, y, width, rowHeight)
+    ctx.fillRect(0, mouseRow * rowHeight + scrollY, width, rowHeight)
   }
   if (mouseCol2 !== undefined) {
     ctx.fillStyle = 'rgba(255,255,0,0.2)'
-    const x =
-      (mouseCol2 - 1) * colWidth + scrollX + treeAreaWidth + resizeHandleWidth
-
-    ctx.fillRect(x, 0, colWidth, height)
+    ctx.fillRect((mouseCol2 - 1) * colWidth + scrollX, 0, colWidth, height)
   }
 }

package/src/components/MSAView.tsx

@@ -1,10 +1,7 @@
 import React, { Suspense } from 'react'
-
 import { observer } from 'mobx-react'
-import { Typography } from '@mui/material'
 
 // locals
-import ImportForm from './ImportForm'
 import TreeRuler from './TreePanel/TreeRuler'
 import Header from './Header'
 import Track from './Track'
@@ -14,43 +11,44 @@ import MSAPanel from './MSAPanel'
 import TreePanel from './TreePanel'
 import Minimap from './Minimap'
 
-const MSAView = observer(function ({ model }: { model: MsaViewModel }) {
-  const { done, initialized } = model
+function TopArea({ model }: { model: MsaViewModel }) {
+  return (
+    <div style={{ display: 'flex' }}>
+      <TreeRuler model={model} />
+      <Minimap model={model} />
+    </div>
+  )
+}
+function MainArea({ model }: { model: MsaViewModel }) {
+  return (
+    <div style={{ display: 'flex' }}>
+      <TreePanel model={model} />
+      <VerticalResizeHandle model={model} />
+      <MSAPanel model={model} />
+    </div>
+  )
+}
 
+const View = observer(function ({ model }: { model: MsaViewModel }) {
+  const { turnedOnTracks } = model
   return (
-    <div>
-      {!initialized ? (
-        <ImportForm model={model} />
-      ) : !done ? (
-        <Typography variant="h4">Loading...</Typography>
-      ) : (
-        <MSAView2 model={model} />
-      )}
+    <div style={{ paddingLeft: 20, position: 'relative' }}>
+      <TopArea model={model} />
+      {turnedOnTracks?.map(track => (
+        <Track key={track.model.id} model={model} track={track} />
+      ))}
+      <MainArea model={model} />
     </div>
   )
 })
 
-const MSAView2 = observer(function ({ model }: { model: MsaViewModel }) {
-  const { height, turnedOnTracks, DialogComponent, DialogProps } = model
+const MSAView = observer(function ({ model }: { model: MsaViewModel }) {
+  const { height, DialogComponent, DialogProps } = model
   return (
     <div>
       <div style={{ height, overflow: 'hidden' }}>
         <Header model={model} />
-        <div style={{ position: 'relative' }}>
-          <div style={{ display: 'flex' }}>
-            <TreeRuler model={model} />
-            <Minimap model={model} />
-          </div>
-          {turnedOnTracks?.map(track => (
-            <Track key={track.model.id} model={model} track={track} />
-          ))}
-
-          <div style={{ display: 'flex' }}>
-            <TreePanel model={model} />
-            <VerticalResizeHandle model={model} />
-            <MSAPanel model={model} />
-          </div>
-        </div>
+        <View model={model} />
       </div>
       <HorizontalResizeHandle model={model} />