react-msaview 8.2.0 → 8.4.0

package/src/components/import/ImportForm.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react'
 
 import { ErrorMessage, FileSelector } from '@jbrowse/core/ui'
-import { Button, Container, Typography } from '@mui/material'
+import { Box, Button, Container, Typography } from '@mui/material'
 import { observer } from 'mobx-react'
 
 import ImportFormExamples from './ImportFormExamples.tsx'
@@ -10,6 +10,8 @@ import { load } from './util.ts'
 import type { MsaViewModel } from '../../model.ts'
 import type { FileLocation } from '@jbrowse/core/util/types'
 
+const phone = '@media (max-width: 640px)'
+
 const ImportForm = observer(function ({ model }: { model: MsaViewModel }) {
   const [msaFile, setMsaFile] = useState<FileLocation>()
   const [treeFile, setTreeFile] = useState<FileLocation>()
@@ -18,7 +20,7 @@ const ImportForm = observer(function ({ model }: { model: MsaViewModel }) {
 
   return (
     <Container>
-      <div style={{ width: '50%' }}>
+      <Box sx={{ width: '50%', [phone]: { width: '100%' } }}>
         {error ? <ErrorMessage error={error} /> : null}
         <Typography>
           Open an MSA file (FASTA, Stockholm, Clustal, A3M or EMF format) and/or
@@ -28,14 +30,19 @@ const ImportForm = observer(function ({ model }: { model: MsaViewModel }) {
           An MSA alone or a tree alone is enough, and a Stockholm file with an
           embedded tree needs no separate tree file.
         </Typography>
-      </div>
+      </Box>
 
-      <div
-        style={{
+      <Box
+        sx={{
           display: 'flex',
           justifyContent: 'center',
           alignItems: 'center',
-          gap: 40,
+          gap: '40px',
+          [phone]: {
+            flexDirection: 'column',
+            alignItems: 'stretch',
+            gap: '16px',
+          },
         }}
       >
         <div>
@@ -74,7 +81,7 @@ const ImportForm = observer(function ({ model }: { model: MsaViewModel }) {
           <Typography>Examples</Typography>
           <ImportFormExamples model={model} />
         </div>
-      </div>
+      </Box>
     </Container>
   )
 })

package/src/components/import/ImportFormExamples.tsx

@@ -3,16 +3,17 @@ import React from 'react'
 import { Link, Typography } from '@mui/material'
 import { observer } from 'mobx-react'
 
-import { smallMSA, smallMSAOnly, smallTree } from './data/seq2.ts'
+import { smallMSA, smallTree } from './data/seq2.ts'
 import { load } from './util.ts'
 
 import type { MsaViewModel } from '../../model.ts'
 
 const BASE = 'https://jbrowse.org/genomes/multiple_sequence_alignments'
 const TREES = 'https://jbrowse.org/genomes/newick_trees'
+const DEMO = 'https://gmod.org/JBrowseMSA/demo/data'
 
 // each example points at remote files (msa/tree/gff urls) or carries its data
-// inline, as the two small bundled ones do
+// inline
 interface Example {
   label: string
   msa?: string
@@ -23,42 +24,33 @@ interface Example {
 
 const examples: Example[] = [
   {
-    label: '230k COVID-19 samples (tree only)',
-    tree: `${TREES}/sarscov2phylo.pub.ft.nh`,
-  },
-  {
-    label: 'Small protein MSA+tree',
-    inline: { msa: smallMSA, tree: smallTree },
-  },
-  {
-    label: 'Small MSA only',
-    inline: { msa: smallMSAOnly },
-  },
-  {
-    label: 'PFAM SARS-CoV2 multi-stockholm with domains',
-    msa: `${BASE}/pfam-cov2.stock`,
-    gff: `${BASE}/pfam-cov2-domains.gff`,
+    label: 'NLRP1 in 12 mammals, with Pfam domains',
+    msa: `${DEMO}/nlrp1.aln`,
+    tree: `${DEMO}/nlrp1.nh`,
+    gff: `${DEMO}/nlrp1-domains.gff`,
   },
   {
-    label: 'Lysine stockholm file',
-    msa: `${BASE}/Lysine.stock`,
+    label: '474 human protein kinase domains, with a FastTree tree',
+    msa: `${DEMO}/kinase-pocket/kinase-pocket.afa`,
+    tree: `${DEMO}/kinase-pocket/kinase-pocket.nwk`,
   },
   {
-    label: 'PF01601 stockholm file (SARS-CoV2 spike protein)',
-    msa: `${BASE}/PF01601_full.txt`,
+    label: 'RSV-A G gene in 1,840 genomes, with the Nextstrain tree',
+    msa: `${DEMO}/scale/rsv-full.aln`,
+    tree: `${DEMO}/scale/rsv-full.nh`,
   },
   {
-    label: 'Europe COVID full genomes (LR883044.1 and 199 other sequences)',
-    msa: `${BASE}/europe_covid.fa`,
+    label: '230k COVID-19 samples (tree only)',
+    tree: `${TREES}/sarscov2phylo.pub.ft.nh`,
   },
   {
-    label: 'MAFFT+VeryFastTree(17.9k samples)',
-    msa: `${BASE}/rhv_test-only.aligned_with_mafft_auto.fa`,
-    tree: `${BASE}/rhv_test-only.aligned_with_mafft_auto.nh`,
+    label: 'Pfam SARS-CoV-2 families, multi-Stockholm with domains',
+    msa: `${BASE}/pfam-cov2.stock`,
+    gff: `${BASE}/pfam-cov2-domains.gff`,
   },
   {
-    label: 'Human BLAST results mfa',
-    msa: 'https://jbrowse.org/demos/ttc39a.mfa',
+    label: 'Small protein alignment and tree',
+    inline: { msa: smallMSA, tree: smallTree },
   },
 ]
 

package/src/components/minimap/Minimap.tsx

@@ -70,6 +70,13 @@ const Minimap = observer(function ({ model }: { model: MsaViewModel }) {
         ref={ref}
         width={barWidth}
         height={barHeight}
+        onMouseDown={event => {
+          if (event.button === 0 && unit > 0) {
+            const x =
+              event.clientX - event.currentTarget.getBoundingClientRect().left
+            model.setScrollX(-x / unit + msaCanvasWidth / 2)
+          }
+        }}
         style={{
           display: 'block',
           width: msaCanvasWidth,

package/src/components/msa/AnnotationLegend.tsx

@@ -32,16 +32,17 @@ const AnnotationLegend = observer(function ({
         display: 'flex',
         flexDirection: 'column',
         opacity: 0.95,
+        pointerEvents: 'none',
       }}
     >
       <IconButton
         size="small"
         title={expanded ? 'Collapse key' : 'Expand key'}
-        style={
-          expanded
-            ? { position: 'absolute', top: 0, right: 0, padding: 1 }
-            : { padding: 1 }
-        }
+        style={{
+          padding: 1,
+          pointerEvents: 'auto',
+          ...(expanded && { position: 'absolute', top: 0, right: 0 }),
+        }}
         onClick={() => {
           model.setShowDomainLegend(!expanded)
         }}
@@ -59,7 +60,6 @@ const AnnotationLegend = observer(function ({
                 gap: 4,
                 marginRight: i === 0 ? 18 : 0,
               }}
-              title={row.hint}
             >
               {row.color ? (
                 <div
@@ -74,10 +74,16 @@ const AnnotationLegend = observer(function ({
               <Typography
                 variant="caption"
                 noWrap
+                title={
+                  row.hint && row.hint !== row.label
+                    ? `${row.label} (${row.hint})`
+                    : row.label
+                }
                 style={{
                   fontSize: 10,
                   lineHeight: 1.4,
                   fontWeight: row.color ? undefined : 'bold',
+                  pointerEvents: 'auto',
                 }}
               >
                 {row.label}

package/src/components/msa/MSACanvas.tsx

@@ -5,6 +5,7 @@ import { observer } from 'mobx-react'
 import { useWheelScroll } from '../../useWheelScroll.ts'
 import Loading from './Loading.tsx'
 import MSACanvasBlock from './MSACanvasBlock.tsx'
+import { onMsaKey } from './msaKeys.ts'
 
 import type { MsaViewModel } from '../../model.ts'
 
@@ -52,7 +53,24 @@ const MSACanvas = observer(function ({ model }: { model: MsaViewModel }) {
       // screenshot callouts anchor to columns from this rect's origin:
       // col*colWidth + scrollX, row*rowHeight + scrollY
       data-testid="msa_canvas"
-      onMouseDown={onMouseDown}
+      tabIndex={0}
+      aria-label="Alignment. Arrow keys scroll, shift pages, + and - zoom, Home and End jump to the first and last column. Shift-drag selects cells, and Escape clears the selection."
+      onKeyDown={event => {
+        if (onMsaKey(model, event)) {
+          event.preventDefault()
+        }
+      }}
+      onMouseDown={event => {
+        // a shifted press selects cells (useMsaBlockMouse), so it takes the
+        // focus Escape clears from, and leaves out the pan and the page's own
+        // text selection
+        if (event.shiftKey) {
+          event.preventDefault()
+          ref.current?.focus({ preventScroll: true })
+        } else {
+          onMouseDown(event)
+        }
+      }}
       onMouseUp={onMouseUp}
       style={{
         position: 'relative',

package/src/components/msa/MSACanvasBlock.tsx

@@ -23,13 +23,8 @@ const MSACanvasBlock = observer(function ({
 }) {
   const { blockSize, highResScaleFactor } = model
   const theme = useTheme()
-  const { tooltipPoint, onMouseMove, onClick, onMouseLeave } = useMsaBlockMouse(
-    {
-      model,
-      offsetX,
-      offsetY,
-    },
-  )
+  const { anchor, onMouseMove, onMouseDown, onClick, onMouseLeave } =
+    useMsaBlockMouse({ model, offsetX, offsetY })
 
   const canvasSize = blockSize * highResScaleFactor
   const ref = useCanvasAutorun({
@@ -76,6 +71,11 @@ const MSACanvasBlock = observer(function ({
             onMouseMove(event, ref.current)
           }
         }}
+        onMouseDown={event => {
+          if (ref.current) {
+            onMouseDown(event, ref.current)
+          }
+        }}
         onClick={event => {
           if (ref.current) {
             onClick(event, ref.current)
@@ -94,10 +94,8 @@ const MSACanvasBlock = observer(function ({
           height: blockSize,
         }}
       />
-      {tooltipPoint ? (
-        <BaseTooltip
-          clientPoint={{ x: tooltipPoint.x, y: tooltipPoint.y + 15 }}
-        >
+      {anchor ? (
+        <BaseTooltip clientPoint={anchor.clientPoint}>
           {hoveredInsertion ? (
             <>
               Insertion ({hoveredInsertion.letters.length}

package/src/components/msa/msaKeys.ts

@@ -0,0 +1,45 @@
+import type { MsaViewModel } from '../../model.ts'
+
+export function onMsaKey(
+  model: MsaViewModel,
+  { key, shiftKey }: { key: string; shiftKey: boolean },
+) {
+  const { colWidth, rowHeight, msaCanvasWidth, msaAreaHeight } = model
+  const dx = shiftKey ? msaCanvasWidth : colWidth
+  const dy = shiftKey ? msaAreaHeight : rowHeight
+  switch (key) {
+    case 'ArrowLeft':
+      model.doScrollX(dx)
+      return true
+    case 'ArrowRight':
+      model.doScrollX(-dx)
+      return true
+    case 'ArrowUp':
+      model.doScrollY(dy)
+      return true
+    case 'ArrowDown':
+      model.doScrollY(-dy)
+      return true
+    case '+':
+    case '=':
+      model.zoomIn()
+      return true
+    case '-':
+      model.zoomOut()
+      return true
+    case 'Home':
+      model.setScrollX(0)
+      return true
+    case 'End':
+      model.setScrollX(model.maxScrollX)
+      return true
+    case 'Escape':
+      if (model.selection) {
+        model.clearSelection()
+        return true
+      }
+      return false
+    default:
+      return false
+  }
+}

package/src/components/msa/msaRaster.ts

@@ -297,6 +297,7 @@ function rasterKeys(model: MsaViewModel, theme: Theme) {
     model.columns,
     model.leaves,
     model.colorSchemeName,
+    model.customColorScheme,
     tileColorTable(model),
     model.relativeTo,
     theme.palette.action.hover,

package/src/components/msa/renderHighlights.ts

@@ -1,5 +1,9 @@
 import { setFontSize } from '../../setFontSize.ts'
-import { referenceColor } from '../overlayColors.ts'
+import {
+  referenceColor,
+  selectionBorder,
+  selectionFill,
+} from '../overlayColors.ts'
 
 import type { MsaViewModel } from '../../model.ts'
 import type { RenderCtx } from '../renderCtx.ts'
@@ -172,11 +176,48 @@ export function renderHighlights({
   }
 }
 
+/**
+ * The selected block, a bordered band per run of consecutive selected rows,
+ * culled to the rows this block covers
+ */
+export function renderSelection({
+  ctx,
+  model,
+  offsetX,
+  offsetY,
+  height,
+}: {
+  ctx: RenderCtx
+  model: MsaViewModel
+  offsetX: number
+  offsetY: number
+  height: number
+}) {
+  const { resolvedSelection, colWidth, rowHeight } = model
+  if (!resolvedSelection) {
+    return
+  }
+  const { startCol, endCol, rowRuns } = resolvedSelection
+  const x = startCol * colWidth - offsetX
+  const w = (endCol - startCol + 1) * colWidth
+  ctx.lineWidth = 1
+  for (const [first, last] of rowRuns) {
+    const y = first * rowHeight - offsetY
+    const h = (last - first + 1) * rowHeight
+    if (y < height && y + h > 0) {
+      ctx.fillStyle = selectionFill
+      ctx.fillRect(x, y, w, h)
+      ctx.strokeStyle = selectionBorder
+      ctx.strokeRect(x, y, w, h)
+    }
+  }
+}
+
 /**
  * The overlay parts that come from the snapshot: the reference row's tint, a
- * bordered band per run of highlighted columns, and the `highlights` layer. The
- * live overlay draws these under its hover and click bands; the SVG export
- * draws only these.
+ * bordered band per run of highlighted columns, the `highlights` layer and the
+ * selected block. The live overlay draws these under its hover and click
+ * bands; the SVG export draws only these.
  */
 export function renderPersistentHighlights({
   ctx,
@@ -214,4 +255,5 @@ export function renderPersistentHighlights({
   }
 
   renderHighlights({ ctx, model, theme, offsetX, offsetY, width, height })
+  renderSelection({ ctx, model, offsetX, offsetY, height })
 }

package/src/components/msa/tileColor.ts

@@ -4,12 +4,12 @@ import type { MsaViewModel } from '../../model.ts'
 // only the active scheme's column table leaves the other per-column table
 // uncomputed.
 export function tileColorFn(model: MsaViewModel) {
-  const { colorSchemeName } = model
-  if (colorSchemeName === 'clustalx_protein_dynamic') {
+  const { dynamicColorSchemeName } = model
+  if (dynamicColorSchemeName === 'clustalx_protein_dynamic') {
     const { colClustalX } = model
     return (col: number, letter: string) => colClustalX[col]![letter]
   }
-  if (colorSchemeName === 'percent_identity_dynamic') {
+  if (dynamicColorSchemeName === 'percent_identity_dynamic') {
     const { colConsensus } = model
     return (col: number, letter: string) => {
       const consensus = colConsensus[col]!
@@ -20,14 +20,15 @@ export function tileColorFn(model: MsaViewModel) {
   return (_col: number, letter: string) => colorScheme[letter]
 }
 
-// The column table the active scheme colors from, or undefined for the static
-// schemes. A cache of rendered colors keys on its identity plus the scheme name.
+// The table the active scheme colors from: a dynamic scheme's per-column table,
+// or the letter table of a static scheme or a `customColorScheme` map. A cache
+// of rendered colors keys on its identity plus the scheme name.
 export function tileColorTable(model: MsaViewModel) {
-  const { colorSchemeName } = model
-  if (colorSchemeName === 'clustalx_protein_dynamic') {
+  const { dynamicColorSchemeName } = model
+  if (dynamicColorSchemeName === 'clustalx_protein_dynamic') {
     return model.colClustalX
   }
-  if (colorSchemeName === 'percent_identity_dynamic') {
+  if (dynamicColorSchemeName === 'percent_identity_dynamic') {
     return model.colConsensus
   }
   return model.colorScheme

package/src/components/msa/useMsaBlockMouse.ts

@@ -1,30 +1,12 @@
-import { useState } from 'react'
+import { useRef } from 'react'
+
+import { dragSelection, maxClickTravel } from '../selectionDrag.ts'
+import { useHoverAnchor } from '../useHoverAnchor.ts'
 
 import type { MsaViewModel } from '../../model.ts'
+import type { ClientPoint } from '../selectionDrag.ts'
 import type React from 'react'
 
-function eventToColRow({
-  event,
-  el,
-  offsetX,
-  offsetY,
-  colWidth,
-  rowHeight,
-}: {
-  event: React.MouseEvent
-  el: HTMLElement
-  offsetX: number
-  offsetY: number
-  colWidth: number
-  rowHeight: number
-}) {
-  const { left, top } = el.getBoundingClientRect()
-  return {
-    col: Math.floor((event.clientX - left + offsetX) / colWidth),
-    row: Math.floor((event.clientY - top + offsetY) / rowHeight),
-  }
-}
-
 /**
  * Translates pointer events over one MSA block into model column/row hover and
  * click state, and reports where a tooltip should be anchored.
@@ -44,11 +26,26 @@ export function useMsaBlockMouse({
   offsetX: number
   offsetY: number
 }) {
-  const [tooltipPoint, setTooltipPoint] = useState<{ x: number; y: number }>()
+  const { anchor, hoverAt, clearAnchor } = useHoverAnchor<true>()
+  const downAt = useRef<{ x: number; y: number }>(undefined)
+
+  // The block's rect places its cells on the page. A drag keeps the mapping
+  // it started with, so each point subtracts the scroll since then.
+  function cellMapper(el: HTMLElement) {
+    const { left, top } = el.getBoundingClientRect()
+    const { scrollX, scrollY } = model
+    return ({ clientX, clientY }: ClientPoint) => ({
+      col: Math.floor(
+        (clientX - left + offsetX - (model.scrollX - scrollX)) / model.colWidth,
+      ),
+      row: Math.floor(
+        (clientY - top + offsetY - (model.scrollY - scrollY)) / model.rowHeight,
+      ),
+    })
+  }
 
   function colRow(event: React.MouseEvent, el: HTMLElement) {
-    const { colWidth, rowHeight } = model
-    return eventToColRow({ event, el, offsetX, offsetY, colWidth, rowHeight })
+    return cellMapper(el)(event)
   }
 
   // a block can extend past the alignment (the last block is a full tile wide,
@@ -65,12 +62,28 @@ export function useMsaBlockMouse({
 
     const hasTooltip =
       !!model.hoveredInsertion || model.mouseOverDomains.length > 0
-    setTooltipPoint(
-      hasTooltip ? { x: event.clientX, y: event.clientY } : undefined,
-    )
+    hoverAt(event, hasTooltip || undefined)
+  }
+
+  // shift+drag selects a block; MSACanvas leaves a shifted press out of its
+  // pan
+  function onMouseDown(event: React.MouseEvent, el: HTMLElement) {
+    downAt.current = { x: event.clientX, y: event.clientY }
+    if (event.shiftKey && event.button === 0) {
+      dragSelection(model, event, cellMapper(el))
+    }
   }
 
   function onClick(event: React.MouseEvent, el: HTMLElement) {
+    const down = downAt.current
+    downAt.current = undefined
+    if (
+      down &&
+      Math.hypot(event.clientX - down.x, event.clientY - down.y) >
+        maxClickTravel
+    ) {
+      return
+    }
     const pos = colRow(event, el)
     const { col, row } = pos
     const { mouseClickCol, mouseClickRow } = model
@@ -83,8 +96,8 @@ export function useMsaBlockMouse({
 
   function onMouseLeave() {
     model.setMousePos()
-    setTooltipPoint(undefined)
+    clearAnchor()
   }
 
-  return { tooltipPoint, onMouseMove, onClick, onMouseLeave }
+  return { anchor, onMouseMove, onMouseDown, onClick, onMouseLeave }
 }

package/src/components/overlayColors.ts

@@ -16,3 +16,7 @@ export const multiRowHoverColor = 'rgba(255,165,0,0.15)'
 // match or the crosshair appears to change color as it crosses the tracks.
 export const hoverColor = 'rgba(0,0,0,0.15)'
 export const clickColor = 'rgba(128,128,0,0.2)'
+
+// the selected block, a blue that reads apart from the orange highlights
+export const selectionFill = 'rgba(25,118,210,0.22)'
+export const selectionBorder = 'rgba(25,118,210,0.95)'

package/src/components/rowpanels/RowPanelBlock.tsx

@@ -1,23 +1,17 @@
-import React, { useState } from 'react'
+import React from 'react'
 
+import BaseTooltip from '@jbrowse/core/ui/BaseTooltip'
 import { useTheme } from '@mui/material'
 import { observer } from 'mobx-react'
 
 import { featureField, featureName } from '../../featureFields.ts'
 import { useCanvasAutorun } from '../../useCanvasAutorun.ts'
-import PortalTooltip from '../PortalTooltip.tsx'
+import { useHoverAnchor } from '../useHoverAnchor.ts'
 import { renderRowPanel } from './renderRowPanel.ts'
 
 import type { MsaViewModel } from '../../model.ts'
 import type { ResolvedRowPanel } from '../../types.ts'
 
-interface Hover {
-  name: string
-  lines: string[]
-  clientX: number
-  clientY: number
-}
-
 // what the cell or span under the pointer reads, which is the field a strip
 // colors by, and a span's name, its coordinates and its encoded field
 function hoverLines({
@@ -66,7 +60,10 @@ const RowPanelBlock = observer(function ({
   panel: ResolvedRowPanel
   offsetY: number
 }) {
-  const [hovered, setHovered] = useState<Hover>()
+  const { anchor, hoverAt, clearAnchor } = useHoverAnchor<{
+    name: string
+    lines: string[]
+  }>()
   const theme = useTheme()
   const { blockSize, highResScaleFactor, rowHeight } = model
   const width = panel.width
@@ -107,30 +104,26 @@ const RowPanelBlock = observer(function ({
                   name,
                   x: event.clientX - left,
                 })
-          setHovered(
+          hoverAt(
+            event,
             name === undefined || lines.length === 0
               ? undefined
-              : {
-                  name,
-                  lines,
-                  clientX: event.clientX,
-                  clientY: event.clientY,
-                },
+              : { name, lines },
           )
           model.setMousePos(undefined, name === undefined ? undefined : row)
         }}
         onMouseLeave={() => {
-          setHovered(undefined)
+          clearAnchor()
           model.setMousePos(undefined, undefined)
         }}
       />
-      {hovered ? (
-        <PortalTooltip clientX={hovered.clientX} clientY={hovered.clientY}>
-          <div>{hovered.name}</div>
-          {hovered.lines.map(line => (
+      {anchor ? (
+        <BaseTooltip clientPoint={anchor.clientPoint}>
+          <div>{anchor.value.name}</div>
+          {anchor.value.lines.map(line => (
             <div key={line}>{line}</div>
           ))}
-        </PortalTooltip>
+        </BaseTooltip>
       ) : null}
     </>
   )

package/src/components/selectionDrag.ts

@@ -0,0 +1,42 @@
+import { isAlive } from '@jbrowse/mobx-state-tree'
+
+import type { MsaViewModel } from '../model.ts'
+
+// a press that travels further than this, in px, is a drag and not a click
+export const maxClickTravel = 3
+
+export interface ClientPoint {
+  clientX: number
+  clientY: number
+}
+
+/**
+ * Follows a press through the window until its release, selecting the block
+ * between the cell it started on and the cell under the pointer. The selection
+ * starts once the pointer travels past `maxClickTravel`, so a press that stays
+ * put reaches the click handlers unchanged. `cellAt` maps a client point to a
+ * visible column and row index, or a column alone to select across every row.
+ */
+export function dragSelection(
+  model: MsaViewModel,
+  start: ClientPoint,
+  cellAt: (point: ClientPoint) => { col: number; row?: number },
+) {
+  const anchor = cellAt(start)
+  const { clientX, clientY } = start
+  let dragging = false
+  function onMove(event: MouseEvent) {
+    dragging ||=
+      Math.hypot(event.clientX - clientX, event.clientY - clientY) >
+      maxClickTravel
+    if (dragging && isAlive(model)) {
+      model.selectBlock(anchor, cellAt(event))
+    }
+  }
+  function onUp() {
+    window.removeEventListener('mousemove', onMove)
+    window.removeEventListener('mouseup', onUp)
+  }
+  window.addEventListener('mousemove', onMove)
+  window.addEventListener('mouseup', onUp)
+}