react-msaview 8.4.1 → 9.1.0

package/src/viewerSnapshot.ts

@@ -0,0 +1,147 @@
+import { createJBrowseTheme } from '@jbrowse/core/ui/theme'
+
+import type { MSAViewerProps } from './components/MSAViewer.tsx'
+import type { ColorScheme, Highlight } from './types.ts'
+
+export function colorSchemeSnapshot(scheme: ColorScheme | undefined) {
+  return typeof scheme === 'string'
+    ? { colorSchemeName: scheme }
+    : scheme
+      ? { customColorScheme: scheme.map }
+      : {}
+}
+
+/**
+ * The `highlightColumns` prop as `highlights`: one `{start, end}` per run of
+ * adjacent 1-based alignment columns
+ */
+export function columnHighlights(columns: number[] = []) {
+  const sorted = [...new Set(columns)].sort((a, b) => a - b)
+  const runs: { start: number; end: number }[] = []
+  for (const column of sorted) {
+    const last = runs.at(-1)
+    if (last?.end === column - 1) {
+      last.end = column
+    } else {
+      runs.push({ start: column, end: column })
+    }
+  }
+  return runs
+}
+
+export function viewerHighlights({
+  highlights = [],
+  highlightColumns,
+}: Pick<MSAViewerProps, 'highlights' | 'highlightColumns'>): Highlight[] {
+  return [...highlights, ...columnHighlights(highlightColumns)]
+}
+
+function urlLocation(uri: string | undefined) {
+  return uri ? { uri, locationType: 'UriLocation' as const } : undefined
+}
+
+/** each filehandle prop, or the URL prop standing in for it */
+export function fileLocations({
+  msaFilehandle,
+  treeFilehandle,
+  gffFilehandle,
+  msaUrl,
+  treeUrl,
+  gffUrl,
+}: MSAViewerProps) {
+  return {
+    msaFilehandle: msaFilehandle ?? urlLocation(msaUrl),
+    treeFilehandle: treeFilehandle ?? urlLocation(treeUrl),
+    gffFilehandle: gffFilehandle ?? urlLocation(gffUrl),
+  }
+}
+
+export function resolveTheme(theme: MSAViewerProps['theme']) {
+  return createJBrowseTheme(
+    theme === 'dark'
+      ? { palette: { mode: 'dark' } }
+      : typeof theme === 'object'
+        ? theme
+        : undefined,
+  )
+}
+
+/**
+ * The model snapshot `MSAViewer` creates from its props. The CLI's `--props`
+ * reads the same JSON the R and Python widgets send, so a figure exported
+ * headlessly draws what the widget drew.
+ */
+export function viewerSnapshot(props: MSAViewerProps) {
+  const {
+    msa,
+    tree,
+    gff,
+    rowData,
+    colorScheme,
+    height,
+    colWidth,
+    rowHeight,
+    allowedGappyness,
+    highlightColumns,
+    highlights,
+    features,
+    selection,
+    clades,
+    relativeTo,
+    columnTracks,
+    residueMappings,
+    encodings,
+    rowPanels,
+    drawTree,
+    treeAreaWidth,
+    showBranchLen,
+    treeOrder,
+    treeRoot,
+    region,
+    residueEncoding,
+  } = props
+  const { msaFilehandle, treeFilehandle, gffFilehandle } = fileLocations(props)
+  return {
+    type: 'MsaView' as const,
+    ...(msa || tree || gff || rowData
+      ? {
+          data: {
+            msa: msa ?? '',
+            tree: tree ?? '',
+            gff,
+            // the row table is stored as this JSON string, which is what a
+            // shared URL and the size limit already cover
+            ...(rowData ? { treeMetadata: JSON.stringify(rowData) } : {}),
+          },
+        }
+      : {}),
+    ...(msaFilehandle ? { msaFilehandle } : {}),
+    ...(treeFilehandle ? { treeFilehandle } : {}),
+    ...(gffFilehandle ? { gffFilehandle } : {}),
+    ...colorSchemeSnapshot(colorScheme),
+    ...(height ? { height } : {}),
+    ...(colWidth ? { colWidth } : {}),
+    ...(rowHeight ? { rowHeight } : {}),
+    ...(allowedGappyness !== undefined ? { allowedGappyness } : {}),
+    ...(highlights || highlightColumns
+      ? { highlights: viewerHighlights({ highlights, highlightColumns }) }
+      : {}),
+    ...(features ? { features } : {}),
+    ...(selection ? { selection } : {}),
+    ...(clades ? { clades } : {}),
+    ...(relativeTo ? { relativeTo } : {}),
+    ...(columnTracks ? { columnTracks } : {}),
+    ...(residueMappings ? { residueMappings } : {}),
+    ...(encodings ? { encodings } : {}),
+    ...(rowPanels ? { rowPanels } : {}),
+    ...(drawTree !== undefined ? { drawTree } : {}),
+    ...(treeAreaWidth ? { treeAreaWidth } : {}),
+    ...(showBranchLen !== undefined ? { showBranchLen } : {}),
+    ...(treeOrder ? { treeOrder } : {}),
+    ...(treeRoot ? { treeRoot } : {}),
+    ...(region ? { region } : {}),
+    ...(residueEncoding !== undefined
+      ? { bgColor: residueEncoding === 'fill' }
+      : {}),
+  }
+}

package/dist/components/header/ZoomMenu.d.ts

@@ -1,6 +0,0 @@
-import React from 'react';
-import type { MsaViewModel } from '../../model.ts';
-declare const ZoomMenu: ({ model }: {
-    model: MsaViewModel;
-}) => React.JSX.Element;
-export default ZoomMenu;

package/dist/components/header/ZoomMenu.js

@@ -1,37 +0,0 @@
-import React from 'react';
-import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton';
-import MoreVert from '@mui/icons-material/MoreVert';
-import RestartAlt from '@mui/icons-material/RestartAlt';
-import { observer } from 'mobx-react';
-const ZoomMenu = observer(function ({ model }) {
-    return (React.createElement(CascadingMenuButton, { tooltip: "Fit / zoom options", menuItems: [
-            {
-                label: 'Fit both vertically/horizontally',
-                onClick: () => {
-                    model.fit();
-                },
-            },
-            {
-                label: 'Fit vertically',
-                onClick: () => {
-                    model.fitVertically();
-                },
-            },
-            {
-                label: 'Fit horizontally',
-                onClick: () => {
-                    model.fitHorizontally();
-                },
-            },
-            {
-                label: 'Reset zoom to default',
-                icon: RestartAlt,
-                onClick: () => {
-                    model.resetZoom();
-                },
-            },
-        ] },
-        React.createElement(MoreVert, null)));
-});
-export default ZoomMenu;
-//# sourceMappingURL=ZoomMenu.js.map

package/dist/components/header/ZoomMenu.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ZoomMenu.js","sourceRoot":"","sources":["../../../src/components/header/ZoomMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,mBAAmB,MAAM,sCAAsC,CAAA;AACtE,OAAO,QAAQ,MAAM,8BAA8B,CAAA;AACnD,OAAO,UAAU,MAAM,gCAAgC,CAAA;AACvD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAIrC,MAAM,QAAQ,GAAG,QAAQ,CAAC,UAAU,EAAE,KAAK,EAA2B;IACpE,OAAO,CACL,oBAAC,mBAAmB,IAClB,OAAO,EAAC,oBAAoB,EAC5B,SAAS,EAAE;YACT;gBACE,KAAK,EAAE,kCAAkC;gBACzC,OAAO,EAAE,GAAG,EAAE;oBACZ,KAAK,CAAC,GAAG,EAAE,CAAA;gBACb,CAAC;aACF;YACD;gBACE,KAAK,EAAE,gBAAgB;gBACvB,OAAO,EAAE,GAAG,EAAE;oBACZ,KAAK,CAAC,aAAa,EAAE,CAAA;gBACvB,CAAC;aACF;YACD;gBACE,KAAK,EAAE,kBAAkB;gBACzB,OAAO,EAAE,GAAG,EAAE;oBACZ,KAAK,CAAC,eAAe,EAAE,CAAA;gBACzB,CAAC;aACF;YAED;gBACE,KAAK,EAAE,uBAAuB;gBAC9B,IAAI,EAAE,UAAU;gBAChB,OAAO,EAAE,GAAG,EAAE;oBACZ,KAAK,CAAC,SAAS,EAAE,CAAA;gBACnB,CAAC;aACF;SACF;QAED,oBAAC,QAAQ,OAAG,CACQ,CACvB,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,QAAQ,CAAA"}

package/src/components/header/ZoomMenu.tsx

@@ -1,48 +0,0 @@
-import React from 'react'
-
-import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton'
-import MoreVert from '@mui/icons-material/MoreVert'
-import RestartAlt from '@mui/icons-material/RestartAlt'
-import { observer } from 'mobx-react'
-
-import type { MsaViewModel } from '../../model.ts'
-
-const ZoomMenu = observer(function ({ model }: { model: MsaViewModel }) {
-  return (
-    <CascadingMenuButton
-      tooltip="Fit / zoom options"
-      menuItems={[
-        {
-          label: 'Fit both vertically/horizontally',
-          onClick: () => {
-            model.fit()
-          },
-        },
-        {
-          label: 'Fit vertically',
-          onClick: () => {
-            model.fitVertically()
-          },
-        },
-        {
-          label: 'Fit horizontally',
-          onClick: () => {
-            model.fitHorizontally()
-          },
-        },
-
-        {
-          label: 'Reset zoom to default',
-          icon: RestartAlt,
-          onClick: () => {
-            model.resetZoom()
-          },
-        },
-      ]}
-    >
-      <MoreVert />
-    </CascadingMenuButton>
-  )
-})
-
-export default ZoomMenu