@jbrowse/plugin-wiggle 2.4.2 → 2.6.1

package/src/MultiLinearWiggleDisplay/components/SetColorDialog.tsx

@@ -13,7 +13,6 @@ import clone from 'clone'
 // locals
 import DraggableDialog from './DraggableDialog'
 import ColorPicker, { ColorPopover } from '@jbrowse/core/ui/ColorPicker'
-import { UriLink } from '@jbrowse/core/BaseFeatureWidget/BaseFeatureDetail'
 import { moveUp, moveDown } from './util'
 import { Source } from '../../util'
 
@@ -22,6 +21,7 @@ import KeyboardDoubleArrowUpIcon from '@mui/icons-material/KeyboardDoubleArrowUp
 import KeyboardDoubleArrowDownIcon from '@mui/icons-material/KeyboardDoubleArrowDown'
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown'
 import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp'
+import UriLink from '@jbrowse/core/BaseFeatureWidget/BaseFeatureDetail/UriLink'
 
 const useStyles = makeStyles()({
   content: {
@@ -129,6 +129,11 @@ export default function SetColorDialog({
   )
 }
 
+interface SortField {
+  idx: number
+  field: string | null
+}
+
 function SourcesGrid({
   rows,
   onChange,
@@ -143,53 +148,11 @@ function SourcesGrid({
 
   // @ts-expect-error
   const { name: _name, color: _color, baseUri: _baseUri, ...rest } = rows[0]
-
-  // similar to BaseFeatureDetail data-grid for auto-measuring columns
-  const columns = [
-    {
-      field: 'color',
-      headerName: 'Color',
-      renderCell: (params: GridCellParams) => {
-        const { value, id } = params
-        return (
-          <ColorPicker
-            color={value || 'blue'}
-            onChange={c => {
-              const elt = rows.find(f => f.name === id)
-              if (elt) {
-                elt.color = c
-              }
-              onChange([...rows])
-            }}
-          />
-        )
-      },
-    },
-    {
-      field: 'name',
-      sortingOrder: [null],
-      headerName: 'Name',
-      width: measureGridWidth(rows.map(r => r.name)),
-    },
-    ...Object.keys(rest).map(val => ({
-      field: val,
-      sortingOrder: [null],
-      renderCell: (params: GridCellParams) => {
-        const { value } = params
-        return isUriLocation(value) ? <UriLink value={value} /> : getStr(value)
-      },
-      // @ts-expect-error
-      width: measureGridWidth(rows.map(r => r[val])),
-    })),
-  ]
-
-  // this helps keep track of the selection, even though it is not used
-  // anywhere except inside the picker
   const [widgetColor, setWidgetColor] = useState('blue')
-  const [currSort, setCurrSort] = useState<{
-    idx: number
-    field: string | null
-  }>({ idx: 0, field: null })
+  const [currSort, setCurrSort] = useState<SortField>({
+    idx: 0,
+    field: null,
+  })
 
   return (
     <div>
@@ -247,12 +210,52 @@ function SourcesGrid({
         <DataGrid
           getRowId={row => row.name}
           checkboxSelection
-          disableSelectionOnClick
-          onSelectionModelChange={arg => setSelected(arg as string[])}
+          disableRowSelectionOnClick
+          onRowSelectionModelChange={arg => setSelected(arg as string[])}
           rows={rows}
           rowHeight={25}
-          headerHeight={33}
-          columns={columns}
+          columnHeaderHeight={33}
+          columns={[
+            {
+              field: 'color',
+              headerName: 'Color',
+              renderCell: params => {
+                const { value, id } = params
+                return (
+                  <ColorPicker
+                    color={value || 'blue'}
+                    onChange={c => {
+                      const elt = rows.find(f => f.name === id)
+                      if (elt) {
+                        elt.color = c
+                      }
+                      onChange([...rows])
+                    }}
+                  />
+                )
+              },
+            },
+            {
+              field: 'name',
+              sortingOrder: [null],
+              headerName: 'Name',
+              width: measureGridWidth(rows.map(r => r.name)),
+            },
+            ...Object.keys(rest).map(val => ({
+              field: val,
+              sortingOrder: [null],
+              renderCell: (params: GridCellParams) => {
+                const { value } = params
+                return isUriLocation(value) ? (
+                  <UriLink value={value} />
+                ) : (
+                  getStr(value)
+                )
+              },
+              // @ts-ignore
+              width: measureGridWidth(rows.map(r => r[val])),
+            })),
+          ]}
           sortModel={
             [
               /* we control the sort as a controlled component using onSortModelChange */

package/src/MultiLinearWiggleDisplay/index.ts

@@ -3,7 +3,7 @@ import DisplayType from '@jbrowse/core/pluggableElementTypes/DisplayType'
 
 import configSchemaFactory from './models/configSchema'
 import modelFactory from './models/model'
-import ReactComponent from './components/WiggleDisplayComponent'
+import { lazy } from 'react'
 
 export default (pluginManager: PluginManager) => {
   pluginManager.addDisplayType(() => {
@@ -15,7 +15,7 @@ export default (pluginManager: PluginManager) => {
       stateModel: modelFactory(pluginManager, configSchema),
       trackType: 'MultiQuantitativeTrack',
       viewType: 'LinearGenomeView',
-      ReactComponent,
+      ReactComponent: lazy(() => import('./components/WiggleDisplayComponent')),
     })
   })
 }

package/src/MultiLinearWiggleDisplay/models/configSchema.ts

@@ -1,8 +1,10 @@
 import { ConfigurationSchema } from '@jbrowse/core/configuration'
-import { baseLinearDisplayConfigSchema } from '@jbrowse/plugin-linear-genome-view'
 import { types } from 'mobx-state-tree'
 import PluginManager from '@jbrowse/core/PluginManager'
 
+// locals
+import sharedWiggleConfigFactory from '../../shared/configShared'
+
 /**
  * #config MultiLinearWiggleDisplay
  */
@@ -27,76 +29,6 @@ export default function WiggleConfigFactory(pluginManager: PluginManager) {
   return ConfigurationSchema(
     'MultiLinearWiggleDisplay',
     {
-      /**
-       * #slot
-       */
-      autoscale: {
-        type: 'stringEnum',
-        defaultValue: 'local',
-        model: types.enumeration('Autoscale type', [
-          'global',
-          'local',
-          'globalsd',
-          'localsd',
-          'zscore',
-        ]),
-        description:
-          'global/local using their min/max values or w/ standard deviations (globalsd/localsd)',
-      },
-
-      /**
-       * #slot
-       */
-      minimalTicks: {
-        type: 'boolean',
-        defaultValue: false,
-        description: 'use the minimal amount of ticks',
-      },
-
-      /**
-       * #slot
-       */
-      minScore: {
-        type: 'number',
-        defaultValue: Number.MIN_VALUE,
-        description: 'minimum value for the y-scale',
-      },
-      /**
-       * #slot
-       */
-      maxScore: {
-        type: 'number',
-        description: 'maximum value for the y-scale',
-        defaultValue: Number.MAX_VALUE,
-      },
-      /**
-       * #slot
-       */
-      numStdDev: {
-        type: 'number',
-        description:
-          'number of standard deviations to use for autoscale types globalsd or localsd',
-        defaultValue: 3,
-      },
-      /**
-       * #slot
-       */
-      scaleType: {
-        type: 'stringEnum',
-        model: types.enumeration('Scale type', ['linear', 'log']), // todo zscale
-        description: 'The type of scale to use',
-        defaultValue: 'linear',
-      },
-
-      /**
-       * #slot
-       */
-      inverted: {
-        type: 'boolean',
-        description: 'draw upside down',
-        defaultValue: false,
-      },
-
       /**
        * #slot
        */
@@ -135,7 +67,7 @@ export default function WiggleConfigFactory(pluginManager: PluginManager) {
       /**
        * #baseConfiguration
        */
-      baseConfiguration: baseLinearDisplayConfigSchema,
+      baseConfiguration: sharedWiggleConfigFactory(),
       explicitlyTyped: true,
     },
   )