@jbrowse/plugin-linear-genome-view 1.5.0 → 1.5.4

package/src/LinearGenomeView/components/__snapshots__/LinearGenomeView.test.js.snap

@@ -17,52 +17,54 @@ exports[`<LinearGenomeView /> renders one track, one region 1`] = `
         >
           <div
             class="makeStyles-scaleBarVisibleRegion"
-            style="width: 800px; left: 0px;"
+            style="width: 800px; left: 0px; background: rgba(121, 134, 203, 0.3); border-color: #7986cb;"
           />
           <div
             class="makeStyles-scaleBarContig"
             style="width: 0px; left: 0px; background-color: rgb(153, 153, 153);"
           />
-          <div
-            class="makeStyles-scaleBarContig makeStyles-scaleBarContigForward"
-            style="left: 0px; width: 800px; border-color: rgb(153, 102, 0);"
-          >
+          <div>
             <p
               class="MuiTypography-root makeStyles-scaleBarRefName MuiTypography-body1"
-              style="color: rgb(153, 102, 0); z-index: 100;"
+              style="left: 3px; color: rgb(153, 102, 0);"
             >
               ctgA
             </p>
-            <p
-              class="MuiTypography-root makeStyles-scaleBarLabel MuiTypography-body2"
-              style="left: 160px; pointer-events: none; color: rgb(153, 102, 0);"
-            >
-              20
-            </p>
-            <p
-              class="MuiTypography-root makeStyles-scaleBarLabel MuiTypography-body2"
-              style="left: 320px; pointer-events: none; color: rgb(153, 102, 0);"
-            >
-              40
-            </p>
-            <p
-              class="MuiTypography-root makeStyles-scaleBarLabel MuiTypography-body2"
-              style="left: 480px; pointer-events: none; color: rgb(153, 102, 0);"
-            >
-              60
-            </p>
-            <p
-              class="MuiTypography-root makeStyles-scaleBarLabel MuiTypography-body2"
-              style="left: 640px; pointer-events: none; color: rgb(153, 102, 0);"
-            >
-              80
-            </p>
-            <p
-              class="MuiTypography-root makeStyles-scaleBarLabel MuiTypography-body2"
-              style="left: 800px; pointer-events: none; color: rgb(153, 102, 0);"
+            <div
+              class="makeStyles-scaleBarContig makeStyles-scaleBarContigForward makeStyles-scaleBarBorder"
+              style="left: 0px; width: 800px; border-color: rgb(153, 102, 0);"
             >
-              100
-            </p>
+              <p
+                class="MuiTypography-root makeStyles-scaleBarLabel MuiTypography-body2"
+                style="left: 160px; pointer-events: none; color: rgb(153, 102, 0);"
+              >
+                20
+              </p>
+              <p
+                class="MuiTypography-root makeStyles-scaleBarLabel MuiTypography-body2"
+                style="left: 320px; pointer-events: none; color: rgb(153, 102, 0);"
+              >
+                40
+              </p>
+              <p
+                class="MuiTypography-root makeStyles-scaleBarLabel MuiTypography-body2"
+                style="left: 480px; pointer-events: none; color: rgb(153, 102, 0);"
+              >
+                60
+              </p>
+              <p
+                class="MuiTypography-root makeStyles-scaleBarLabel MuiTypography-body2"
+                style="left: 640px; pointer-events: none; color: rgb(153, 102, 0);"
+              >
+                80
+              </p>
+              <p
+                class="MuiTypography-root makeStyles-scaleBarLabel MuiTypography-body2"
+                style="left: 800px; pointer-events: none; color: rgb(153, 102, 0);"
+              >
+                100
+              </p>
+            </div>
           </div>
           <div
             class="makeStyles-scaleBarContig"
@@ -77,7 +79,6 @@ exports[`<LinearGenomeView /> renders one track, one region 1`] = `
       <svg
         class="makeStyles-overviewSvg"
         height="48"
-        width="100%"
       >
         <polygon
           fill="rgba(121, 134, 203, 0.3)"
@@ -206,6 +207,29 @@ exports[`<LinearGenomeView /> renders one track, one region 1`] = `
                       d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
                     />
                   </svg>
+                  <button
+                    class="MuiButtonBase-root MuiIconButton-root"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <span
+                      class="MuiIconButton-label"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        class="MuiSvgIcon-root"
+                        focusable="false"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z"
+                        />
+                      </svg>
+                    </span>
+                    <span
+                      class="MuiTouchRipple-root"
+                    />
+                  </button>
                 </div>
                 <div
                   class="MuiAutocomplete-endAdornment"
@@ -580,67 +604,70 @@ exports[`<LinearGenomeView /> renders two tracks, two regions 1`] = `
         >
           <div
             class="makeStyles-scaleBarVisibleRegion"
-            style="width: 580px; left: 0px;"
+            style="width: 580px; left: 0px; background: rgba(121, 134, 203, 0.3); border-color: #7986cb;"
           />
           <div
             class="makeStyles-scaleBarContig"
             style="width: 0px; left: 0px; background-color: rgb(153, 153, 153);"
           />
-          <div
-            class="makeStyles-scaleBarContig makeStyles-scaleBarContigForward"
-            style="left: 0px; width: 72.72727272727273px; border-color: rgb(153, 102, 0);"
-          >
+          <div>
             <p
               class="MuiTypography-root makeStyles-scaleBarRefName MuiTypography-body1"
-              style="color: rgb(153, 102, 0); z-index: 100;"
+              style="left: 3px; color: rgb(153, 102, 0);"
             >
               ctgA
             </p>
+            <div
+              class="makeStyles-scaleBarContig makeStyles-scaleBarContigForward makeStyles-scaleBarBorder"
+              style="left: 0px; width: 72.72727272727273px; border-color: rgb(153, 102, 0);"
+            />
           </div>
           <div
             class="makeStyles-scaleBarContig"
             style="width: 0px; left: 72.72727272727273px; background-color: rgb(153, 153, 153);"
           />
-          <div
-            class="makeStyles-scaleBarContig makeStyles-scaleBarContigForward"
-            style="left: 72.72727272727273px; width: 727.2727272727273px;"
-          >
+          <div>
             <p
               class="MuiTypography-root makeStyles-scaleBarRefName MuiTypography-body1"
-              style="z-index: 100;"
+              style="left: 75.72727272727273px;"
             >
               ctgB
             </p>
-            <p
-              class="MuiTypography-root makeStyles-scaleBarLabel MuiTypography-body2"
-              style="left: 145.0909090909091px; pointer-events: none;"
-            >
-              1,200
-            </p>
-            <p
-              class="MuiTypography-root makeStyles-scaleBarLabel MuiTypography-body2"
-              style="left: 290.1818181818182px; pointer-events: none;"
-            >
-              1,400
-            </p>
-            <p
-              class="MuiTypography-root makeStyles-scaleBarLabel MuiTypography-body2"
-              style="left: 435.27272727272725px; pointer-events: none;"
-            >
-              1,600
-            </p>
-            <p
-              class="MuiTypography-root makeStyles-scaleBarLabel MuiTypography-body2"
-              style="left: 580.3636363636364px; pointer-events: none;"
-            >
-              1,800
-            </p>
-            <p
-              class="MuiTypography-root makeStyles-scaleBarLabel MuiTypography-body2"
-              style="left: 725.4545454545454px; pointer-events: none;"
+            <div
+              class="makeStyles-scaleBarContig makeStyles-scaleBarContigForward makeStyles-scaleBarBorder"
+              style="left: 72.72727272727273px; width: 727.2727272727273px;"
             >
-              2,000
-            </p>
+              <p
+                class="MuiTypography-root makeStyles-scaleBarLabel MuiTypography-body2"
+                style="left: 145.0909090909091px; pointer-events: none;"
+              >
+                1,200
+              </p>
+              <p
+                class="MuiTypography-root makeStyles-scaleBarLabel MuiTypography-body2"
+                style="left: 290.1818181818182px; pointer-events: none;"
+              >
+                1,400
+              </p>
+              <p
+                class="MuiTypography-root makeStyles-scaleBarLabel MuiTypography-body2"
+                style="left: 435.27272727272725px; pointer-events: none;"
+              >
+                1,600
+              </p>
+              <p
+                class="MuiTypography-root makeStyles-scaleBarLabel MuiTypography-body2"
+                style="left: 580.3636363636364px; pointer-events: none;"
+              >
+                1,800
+              </p>
+              <p
+                class="MuiTypography-root makeStyles-scaleBarLabel MuiTypography-body2"
+                style="left: 725.4545454545454px; pointer-events: none;"
+              >
+                2,000
+              </p>
+            </div>
           </div>
           <div
             class="makeStyles-scaleBarContig"
@@ -655,7 +682,6 @@ exports[`<LinearGenomeView /> renders two tracks, two regions 1`] = `
       <svg
         class="makeStyles-overviewSvg"
         height="48"
-        width="100%"
       >
         <polygon
           fill="rgba(121, 134, 203, 0.3)"
@@ -748,7 +774,7 @@ exports[`<LinearGenomeView /> renders two tracks, two regions 1`] = `
             class="MuiAutocomplete-root"
             data-testid="autocomplete"
             role="combobox"
-            style="width: 235.22500000000002px;"
+            style="width: 255.22500000000002px;"
           >
             <div
               class="MuiFormControl-root MuiTextField-root makeStyles-headerRefName MuiFormControl-fullWidth"
@@ -784,6 +810,29 @@ exports[`<LinearGenomeView /> renders two tracks, two regions 1`] = `
                       d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
                     />
                   </svg>
+                  <button
+                    class="MuiButtonBase-root MuiIconButton-root"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <span
+                      class="MuiIconButton-label"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        class="MuiSvgIcon-root"
+                        focusable="false"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z"
+                        />
+                      </svg>
+                    </span>
+                    <span
+                      class="MuiTouchRipple-root"
+                    />
+                  </button>
                 </div>
                 <div
                   class="MuiAutocomplete-endAdornment"

package/src/LinearGenomeView/components/util.ts

@@ -1,8 +1,10 @@
 import BaseResult from '@jbrowse/core/TextSearch/BaseResults'
 
-export function dedupe(results?: BaseResult[]) {
-  return results?.filter(
-    (elem, index, self) =>
-      index === self.findIndex(t => t.getId() === elem.getId()),
+export function dedupe(
+  results: BaseResult[] = [],
+  cb: (result: BaseResult) => string,
+) {
+  return results.filter(
+    (elt, idx, self) => idx === self.findIndex(t => cb(t) === cb(elt)),
   )
 }

package/src/LinearGenomeView/index.tsx

@@ -10,29 +10,34 @@ import {
   getContainingView,
   getSession,
   isViewContainer,
+  isSessionModelWithWidgets,
+  measureText,
   parseLocString,
   springAnimate,
-  isSessionModelWithWidgets,
 } from '@jbrowse/core/util'
 import BaseResult from '@jbrowse/core/TextSearch/BaseResults'
 import { BlockSet, BaseBlock } from '@jbrowse/core/util/blockTypes'
 import calculateDynamicBlocks from '@jbrowse/core/util/calculateDynamicBlocks'
 import calculateStaticBlocks from '@jbrowse/core/util/calculateStaticBlocks'
 import { getParentRenderProps } from '@jbrowse/core/util/tracks'
-// misc
 import { transaction, autorun } from 'mobx'
 import {
-  getSnapshot,
-  types,
+  addDisposer,
   cast,
-  Instance,
+  getSnapshot,
   getRoot,
   resolveIdentifier,
-  addDisposer,
+  types,
+  Instance,
 } from 'mobx-state-tree'
 
 import Base1DView from '@jbrowse/core/util/Base1DViewModel'
 import PluginManager from '@jbrowse/core/PluginManager'
+import clone from 'clone'
+import { AnyConfigurationModel } from '@jbrowse/core/configuration/configurationSchema'
+import { saveAs } from 'file-saver'
+
+// icons
 import { TrackSelector as TrackSelectorIcon } from '@jbrowse/core/ui/Icons'
 import SyncAltIcon from '@material-ui/icons/SyncAlt'
 import VisibilityIcon from '@material-ui/icons/Visibility'
@@ -41,16 +46,13 @@ import FolderOpenIcon from '@material-ui/icons/FolderOpen'
 import PhotoCameraIcon from '@material-ui/icons/PhotoCamera'
 import ZoomInIcon from '@material-ui/icons/ZoomIn'
 import MenuOpenIcon from '@material-ui/icons/MenuOpen'
-import clone from 'clone'
-import { AnyConfigurationModel } from '@jbrowse/core/configuration/configurationSchema'
-import { saveAs } from 'file-saver'
-import { renderToSvg } from './components/LinearGenomeView'
+
+// locals
+import { renderToSvg } from './components/LinearGenomeViewSvg'
 import RefNameAutocomplete from './components/RefNameAutocomplete'
 import ExportSvgDlg from './components/ExportSvgDialog'
 import ReturnToImportFormDlg from './components/ReturnToImportFormDialog'
 
-export { default as ReactComponent } from './components/LinearGenomeView'
-
 export interface BpOffset {
   refName?: string
   index: number
@@ -122,6 +124,7 @@ export function stateModelFactory(pluginManager: PluginManager) {
         ),
         trackLabels: 'overlapping' as 'overlapping' | 'hidden' | 'offset',
         showCenterLine: false,
+        showCytobandsSetting: true,
       }),
     )
     .volatile(() => ({
@@ -469,6 +472,9 @@ export function stateModelFactory(pluginManager: PluginManager) {
       },
     }))
     .actions(self => ({
+      setShowCytobands(flag: boolean) {
+        self.showCytobandsSetting = flag
+      },
       setWidth(newWidth: number) {
         self.volatileWidth = newWidth
       },
@@ -1215,11 +1221,34 @@ export function stateModelFactory(pluginManager: PluginManager) {
 
       return { zoom }
     })
+    .views(self => ({
+      get canShowCytobands() {
+        return self.displayedRegions.length === 1 && this.anyCytobandsExist
+      },
+      get showCytobands() {
+        return this.canShowCytobands && self.showCytobandsSetting
+      },
+      get anyCytobandsExist() {
+        const { assemblyManager } = getSession(self)
+        const { assemblyNames } = self
+        return assemblyNames.some(
+          asm => assemblyManager.get(asm)?.cytobands?.length,
+        )
+      },
+
+      get cytobandOffset() {
+        return this.showCytobands
+          ? measureText(self.displayedRegions[0].refName, 12) + 15
+          : 0
+      },
+    }))
     .views(self => {
       let currentlyCalculatedStaticBlocks: BlockSet | undefined
       let stringifiedCurrentlyCalculatedStaticBlocks = ''
       return {
         menuItems(): MenuItem[] {
+          const { canShowCytobands, showCytobands } = self
+
           const menuItems: MenuItem[] = [
             {
               label: 'Return to import form',
@@ -1306,6 +1335,16 @@ export function stateModelFactory(pluginManager: PluginManager) {
                 },
               ],
             },
+            ...(canShowCytobands
+              ? [
+                  {
+                    label: showCytobands ? 'Hide ideogram' : 'Show ideograms',
+                    onClick: () => {
+                      self.setShowCytobands(!showCytobands)
+                    },
+                  },
+                ]
+              : []),
           ]
 
           // add track's view level menu options
@@ -1399,8 +1438,9 @@ export function stateModelFactory(pluginManager: PluginManager) {
             label: 'Zoom to region',
             icon: ZoomInIcon,
             onClick: () => {
-              if (self.leftOffset && self.rightOffset) {
-                self.moveTo(self.leftOffset, self.rightOffset)
+              const { leftOffset, rightOffset } = self
+              if (leftOffset && rightOffset) {
+                self.moveTo(leftOffset, rightOffset)
               }
             },
           },
@@ -1419,3 +1459,4 @@ export function stateModelFactory(pluginManager: PluginManager) {
 export { renderToSvg, RefNameAutocomplete }
 export type LinearGenomeViewStateModel = ReturnType<typeof stateModelFactory>
 export type LinearGenomeViewModel = Instance<LinearGenomeViewStateModel>
+export { default as ReactComponent } from './components/LinearGenomeView'

package/src/declare.d.ts

@@ -1 +0,0 @@
-declare module 'normalize-wheel'