react-msaview 3.1.2 → 3.1.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/model.ts

@@ -44,13 +44,13 @@ export interface RowDetails {
   range?: { start: number; end: number }
 }
 
-interface BasicTrackModel {
+export interface BasicTrackModel {
   id: string
   name: string
   associatedRowName?: string
   height: number
 }
-interface Structure {
+export interface Structure {
   pdb: string
   startPos: number
   endPos: number
@@ -79,8 +79,9 @@ export interface IBoxTrack {
   model: BoxTrackModel
 }
 
-type BasicTrack = IBoxTrack | ITextTrack
-type StructureSnap = SnapshotIn<typeof StructureModel>
+export type BasicTrack = IBoxTrack | ITextTrack
+
+export type StructureSnap = SnapshotIn<typeof StructureModel>
 
 /**
  * #stateModel MsaView
@@ -1220,7 +1221,11 @@ const model = types
     /**
      * #action
      */
-    async exportSVG(opts: { theme: Theme; includeMinimap?: boolean }) {
+    async exportSVG(opts: {
+      theme: Theme
+      includeMinimap?: boolean
+      exportType: string
+    }) {
       const html = await renderToSvg(self as MsaViewModel, opts)
       const blob = new Blob([html], { type: 'image/svg+xml' })
       saveAs(blob, 'image.svg')

package/src/renderToSvg.tsx

@@ -11,23 +11,129 @@ import { renderMSABlock } from './components/MSAPanel/renderMSABlock'
 import { colorContrast } from './util'
 import MinimapSVG from './components/MinimapSVG'
 
-// render LGV to SVG
 export async function renderToSvg(
   model: MsaViewModel,
-  opts: { theme: Theme; includeMinimap?: boolean },
+  opts: { theme: Theme; includeMinimap?: boolean; exportType: string },
 ) {
   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,
+}: {
+  width: number
+  height: number
+  offsetX: number
+  offsetY: number
+  theme: Theme
+  model: MsaViewModel
+  includeMinimap?: boolean
+}) {
   const { Context } = await import('svgcanvas')
+  const Wrapper = includeMinimap ? MinimapWrapper : NullWrapper
+
+  return renderToStaticMarkup(
+    <SvgWrapper width={width} height={height}>
+      <Wrapper model={model}>
+        <CoreRendering
+          Context={Context}
+          model={model}
+          theme={theme}
+          offsetX={offsetX}
+          offsetY={offsetY}
+          width={width}
+          height={height}
+        />
+      </Wrapper>
+    </SvgWrapper>,
+    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,
+}: {
+  model: MsaViewModel
+  theme: Theme
+  width: number
+  height: number
+  offsetX: number
+  offsetY: number
+  Context: (
+    width: number,
+    height: number,
+  ) => CanvasRenderingContext2D & { getSvg: () => { innerHTML: string } }
+}) {
+  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,
@@ -35,45 +141,32 @@ export async function renderToSvg(
   })
   renderMSABlock({
     model,
-    offsetY: scrollY,
-    offsetX: -scrollX,
+    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(
-    <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()}
-    >
-      <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>
-    </svg>,
-    createRoot,
+  return (
+    <>
+      <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 }}
+      />
+    </>
   )
 }
 
@@ -97,6 +190,28 @@ function MinimapWrapper({
   )
 }
 
+function SvgWrapper({
+  width,
+  height,
+  children,
+}: {
+  width: number
+  height: number
+  children: React.ReactNode
+}) {
+  return (
+    <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}
+    </svg>
+  )
+}
+
 function NullWrapper({ children }: { children: React.ReactNode }) {
   return <>{children}</>
 }

package/src/version.ts

@@ -1 +1 @@
-export const version = '3.1.2'
+export const version = '3.1.3'