@jbrowse/plugin-circular-view 2.2.2 → 2.3.0

package/esm/index.js

@@ -1,37 +1,17 @@
-import { lazy } from 'react';
-import { when } from 'mobx';
 import { isAbstractMenuManager } from '@jbrowse/core/util';
 import Plugin from '@jbrowse/core/Plugin';
-import ViewType from '@jbrowse/core/pluggableElementTypes/ViewType';
+import CircularViewF from './CircularView';
+import LaunchCircularViewF from './LaunchCircularView';
+// icons
 import DataUsageIcon from '@mui/icons-material/DataUsage';
-import stateModelFactory from './CircularView/models/CircularView';
 export default class CircularViewPlugin extends Plugin {
     constructor() {
         super(...arguments);
         this.name = 'CircularViewPlugin';
     }
     install(pluginManager) {
-        pluginManager.addViewType(() => new ViewType({
-            ReactComponent: lazy(() => import('./CircularView/components/CircularView')),
-            stateModel: stateModelFactory(pluginManager),
-            name: 'CircularView',
-        }));
-        pluginManager.addToExtensionPoint('LaunchView-CircularView', 
-        // @ts-ignore
-        async ({ session, assembly, loc, tracks = [], }) => {
-            const { assemblyManager } = session;
-            const view = session.addView('CircularView', {});
-            await when(() => view.initialized);
-            if (!assembly) {
-                throw new Error('No assembly provided when launching circular genome view');
-            }
-            const asm = await assemblyManager.waitForAssembly(assembly);
-            if (!asm) {
-                throw new Error(`Assembly "${assembly}" not found when launching circular genome view`);
-            }
-            view.setDisplayedRegions(asm.regions || []);
-            tracks.forEach(track => view.showTrack(track));
-        });
+        CircularViewF(pluginManager);
+        LaunchCircularViewF(pluginManager);
     }
     configure(pluginManager) {
         if (isAbstractMenuManager(pluginManager.rootModel)) {
@@ -45,5 +25,5 @@ export default class CircularViewPlugin extends Plugin {
         }
     }
 }
-export { BaseChordDisplayModel, baseChordDisplayConfig, BaseChordDisplayComponent, } from './BaseChordDisplay';
+export { baseChordDisplayConfig, BaseChordDisplayModel, BaseChordDisplayComponent, } from './BaseChordDisplay';
 //# sourceMappingURL=index.js.map

package/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,OAAO,CAAA;AAC5B,OAAO,EAAE,IAAI,EAAE,MAAM,MAAM,CAAA;AAC3B,OAAO,EAAwB,qBAAqB,EAAE,MAAM,oBAAoB,CAAA;AAEhF,OAAO,MAAM,MAAM,sBAAsB,CAAA;AACzC,OAAO,QAAQ,MAAM,8CAA8C,CAAA;AACnE,OAAO,aAAa,MAAM,+BAA+B,CAAA;AACzD,OAAO,iBAGN,MAAM,oCAAoC,CAAA;AAI3C,MAAM,CAAC,OAAO,OAAO,kBAAmB,SAAQ,MAAM;IAAtD;;QACE,SAAI,GAAG,oBAAoB,CAAA;IAgE7B,CAAC;IA9DC,OAAO,CAAC,aAA4B;QAClC,aAAa,CAAC,WAAW,CACvB,GAAG,EAAE,CACH,IAAI,QAAQ,CAAC;YACX,cAAc,EAAE,IAAI,CAClB,GAAG,EAAE,CAAC,MAAM,CAAC,wCAAwC,CAAC,CACvD;YACD,UAAU,EAAE,iBAAiB,CAAC,aAAa,CAAC;YAC5C,IAAI,EAAE,cAAc;SACrB,CAAC,CACL,CAAA;QAED,aAAa,CAAC,mBAAmB,CAC/B,yBAAyB;QACzB,aAAa;QACb,KAAK,EAAE,EACL,OAAO,EACP,QAAQ,EACR,GAAG,EACH,MAAM,GAAG,EAAE,GAMZ,EAAE,EAAE;YACH,MAAM,EAAE,eAAe,EAAE,GAAG,OAAO,CAAA;YACnC,MAAM,IAAI,GAAG,OAAO,CAAC,OAAO,CAAC,cAAc,EAAE,EAAE,CAAQ,CAAA;YAEvD,MAAM,IAAI,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,CAAA;YAElC,IAAI,CAAC,QAAQ,EAAE;gBACb,MAAM,IAAI,KAAK,CACb,0DAA0D,CAC3D,CAAA;aACF;YAED,MAAM,GAAG,GAAG,MAAM,eAAe,CAAC,eAAe,CAAC,QAAQ,CAAC,CAAA;YAC3D,IAAI,CAAC,GAAG,EAAE;gBACR,MAAM,IAAI,KAAK,CACb,aAAa,QAAQ,iDAAiD,CACvE,CAAA;aACF;YAED,IAAI,CAAC,mBAAmB,CAAC,GAAG,CAAC,OAAO,IAAI,EAAE,CAAC,CAAA;YAE3C,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAA;QAChD,CAAC,CACF,CAAA;IACH,CAAC;IAED,SAAS,CAAC,aAA4B;QACpC,IAAI,qBAAqB,CAAC,aAAa,CAAC,SAAS,CAAC,EAAE;YAClD,aAAa,CAAC,SAAS,CAAC,eAAe,CAAC,CAAC,KAAK,CAAC,EAAE;gBAC/C,KAAK,EAAE,eAAe;gBACtB,IAAI,EAAE,aAAa;gBACnB,OAAO,EAAE,CAAC,OAA6B,EAAE,EAAE;oBACzC,OAAO,CAAC,OAAO,CAAC,cAAc,EAAE,EAAE,CAAC,CAAA;gBACrC,CAAC;aACF,CAAC,CAAA;SACH;IACH,CAAC;CACF;AAED,OAAO,EACL,qBAAqB,EACrB,sBAAsB,EACtB,yBAAyB,GAC1B,MAAM,oBAAoB,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAwB,qBAAqB,EAAE,MAAM,oBAAoB,CAAA;AAEhF,OAAO,MAAM,MAAM,sBAAsB,CAAA;AAOzC,OAAO,aAAa,MAAM,gBAAgB,CAAA;AAC1C,OAAO,mBAAmB,MAAM,sBAAsB,CAAA;AAEtD,QAAQ;AACR,OAAO,aAAa,MAAM,+BAA+B,CAAA;AAEzD,MAAM,CAAC,OAAO,OAAO,kBAAmB,SAAQ,MAAM;IAAtD;;QACE,SAAI,GAAG,oBAAoB,CAAA;IAkB7B,CAAC;IAhBC,OAAO,CAAC,aAA4B;QAClC,aAAa,CAAC,aAAa,CAAC,CAAA;QAC5B,mBAAmB,CAAC,aAAa,CAAC,CAAA;IACpC,CAAC;IAED,SAAS,CAAC,aAA4B;QACpC,IAAI,qBAAqB,CAAC,aAAa,CAAC,SAAS,CAAC,EAAE;YAClD,aAAa,CAAC,SAAS,CAAC,eAAe,CAAC,CAAC,KAAK,CAAC,EAAE;gBAC/C,KAAK,EAAE,eAAe;gBACtB,IAAI,EAAE,aAAa;gBACnB,OAAO,EAAE,CAAC,OAA6B,EAAE,EAAE;oBACzC,OAAO,CAAC,OAAO,CAAC,cAAc,EAAE,EAAE,CAAC,CAAA;gBACrC,CAAC;aACF,CAAC,CAAA;SACH;IACH,CAAC;CACF;AAED,OAAO,EACL,sBAAsB,EACtB,qBAAqB,EACrB,yBAAyB,GAC1B,MAAM,oBAAoB,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbrowse/plugin-circular-view",
-  "version": "2.2.2",
+  "version": "2.3.0",
   "description": "JBrowse 2 circular view",
   "keywords": [
     "jbrowse",
@@ -37,7 +37,8 @@
     "clean": "rimraf dist esm *.tsbuildinfo"
   },
   "dependencies": {
-    "@mui/icons-material": "^5.0.1"
+    "@mui/icons-material": "^5.0.1",
+    "clone": "^2.1.2"
   },
   "peerDependencies": {
     "@jbrowse/core": "^2.0.0",
@@ -47,7 +48,7 @@
     "mobx-state-tree": "^5.0.0",
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0",
-    "tss-react": "^3.0.0"
+    "tss-react": "^4.0.0"
   },
   "publishConfig": {
     "access": "public"
@@ -55,5 +56,5 @@
   "distModule": "esm/index.js",
   "srcModule": "src/index.ts",
   "module": "esm/index.js",
-  "gitHead": "abbc00e8feedbc58de84a7a3e735ec0224909b29"
+  "gitHead": "a85b280a8af4d1a11e81ab42913f5f6049e6e580"
 }

package/src/BaseChordDisplay/components/BaseChordDisplay.tsx

@@ -1,16 +1,26 @@
 import React from 'react'
 import { observer } from 'mobx-react'
+
+// locals
 import Loading from './Loading'
 import DisplayError from './DisplayError'
-import RpcRenderedSvgGroup from './RpcRenderedSvgGroup'
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-function BaseChordDisplay({ display }: any) {
+
+export default observer(function BaseChordDisplay({
+  display,
+}: {
+  display: {
+    filled: boolean
+    error: unknown
+    reactElement: React.ReactElement
+    renderProps: { radius: number }
+  }
+}) {
   if (display.error) {
     return <DisplayError model={display} />
   }
   if (!display.filled) {
     return <Loading model={display} />
   }
-  return <RpcRenderedSvgGroup model={display} />
-}
-export default observer(BaseChordDisplay)
+
+  return display.reactElement
+})

package/src/BaseChordDisplay/components/DisplayError.tsx

@@ -1,49 +1,47 @@
 import React from 'react'
 import { observer } from 'mobx-react'
 
-const DisplayError = observer(
-  ({
-    model,
-  }: {
-    model: { renderProps: { radius: number }; error: unknown }
-  }) => {
-    const {
-      renderProps: { radius },
-      error,
-    } = model
-    return (
-      <g>
-        <defs>
-          <pattern
-            id="diagonalHatch"
-            width="10"
-            height="10"
-            patternTransform="rotate(45 0 0)"
-            patternUnits="userSpaceOnUse"
-          >
-            <line
-              x1="0"
-              y1="0"
-              x2="0"
-              y2="10"
-              style={{ stroke: 'rgba(255,0,0,0.5)', strokeWidth: 10 }}
-            />
-          </pattern>
-        </defs>
-        <circle cx="0" cy="0" r={radius} fill="#ffb4b4" />
-        <circle cx="0" cy="0" r={radius} fill="url(#diagonalHatch)" />
-        <text
-          x="0"
-          y="0"
-          transform="rotate(90 0 0)"
-          dominantBaseline="middle"
-          textAnchor="middle"
+const DisplayError = observer(function ({
+  model,
+}: {
+  model: { renderProps: { radius: number }; error: unknown }
+}) {
+  const {
+    renderProps: { radius },
+    error,
+  } = model
+  return (
+    <g>
+      <defs>
+        <pattern
+          id="diagonalHatch"
+          width="10"
+          height="10"
+          patternTransform="rotate(45 0 0)"
+          patternUnits="userSpaceOnUse"
         >
-          {String(error)}
-        </text>
-      </g>
-    )
-  },
-)
+          <line
+            x1="0"
+            y1="0"
+            x2="0"
+            y2="10"
+            style={{ stroke: 'rgba(255,0,0,0.5)', strokeWidth: 10 }}
+          />
+        </pattern>
+      </defs>
+      <circle cx="0" cy="0" r={radius} fill="#ffb4b4" />
+      <circle cx="0" cy="0" r={radius} fill="url(#diagonalHatch)" />
+      <text
+        x="0"
+        y="0"
+        transform="rotate(90 0 0)"
+        dominantBaseline="middle"
+        textAnchor="middle"
+      >
+        {String(error)}
+      </text>
+    </g>
+  )
+})
 
 export default DisplayError

package/src/BaseChordDisplay/components/Loading.tsx

@@ -48,66 +48,63 @@ const useStyles = makeStyles()(theme => {
   }
 })
 
-// 'repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(255,255,255,.5) 5px, rgba(255,255,255,.5) 10px)',
-const Loading = observer(
-  ({
-    model: {
-      renderProps: { radius },
-    },
-  }: {
-    model: { renderProps: { radius: number } }
-  }) => {
-    const { classes } = useStyles()
+const Loading = observer(function ({
+  model: {
+    renderProps: { radius },
+  },
+}: {
+  model: { renderProps: { radius: number } }
+}) {
+  const { classes } = useStyles()
 
-    // only show the loading message after 400ms to prevent excessive flickering
-    const [shown, setShown] = useState(false)
-    useEffect(() => {
-      const timeout = setTimeout(() => setShown(true), 400)
-      return () => clearTimeout(timeout)
-    })
+  // only show the loading message after 400ms to prevent excessive flickering
+  const [shown, setShown] = useState(false)
+  useEffect(() => {
+    const timeout = setTimeout(() => setShown(true), 400)
+    return () => clearTimeout(timeout)
+  })
 
-    return !shown ? null : (
-      <g>
-        <defs>
-          <pattern
-            id="diagonalHatch"
-            width="10"
-            height="10"
-            patternTransform="rotate(45 0 0)"
-            patternUnits="userSpaceOnUse"
-          >
-            <line
-              x1="0"
-              y1="0"
-              x2="0"
-              y2="10"
-              style={{ stroke: 'rgba(255,255,255,0.5)', strokeWidth: 10 }}
-            />
-          </pattern>
-        </defs>
-        <circle cx="0" cy="0" r={radius} fill="#f1f1f1" />
-        <circle cx="0" cy="0" r={radius} fill="url(#diagonalHatch)" />
-        <text
-          x="0"
-          y="0"
-          transform="rotate(90 0 0)"
-          dominantBaseline="middle"
-          textAnchor="middle"
+  return !shown ? null : (
+    <g>
+      <defs>
+        <pattern
+          id="diagonalHatch"
+          width="10"
+          height="10"
+          patternTransform="rotate(45 0 0)"
+          patternUnits="userSpaceOnUse"
         >
-          Loading&hellip;
-        </text>
-        <circle
-          className={classes.path}
-          fill="none"
-          strokeWidth="4"
-          strokeLinecap="round"
-          cx="0"
-          cy="0"
-          r="60"
-        />
-      </g>
-    )
-  },
-)
+          <line
+            x1="0"
+            y1="0"
+            x2="0"
+            y2="10"
+            style={{ stroke: 'rgba(255,255,255,0.5)', strokeWidth: 10 }}
+          />
+        </pattern>
+      </defs>
+      <circle cx="0" cy="0" r={radius} fill="#f1f1f1" />
+      <circle cx="0" cy="0" r={radius} fill="url(#diagonalHatch)" />
+      <text
+        x="0"
+        y="0"
+        transform="rotate(90 0 0)"
+        dominantBaseline="middle"
+        textAnchor="middle"
+      >
+        Loading&hellip;
+      </text>
+      <circle
+        className={classes.path}
+        fill="none"
+        strokeWidth="4"
+        strokeLinecap="round"
+        cx="0"
+        cy="0"
+        r="60"
+      />
+    </g>
+  )
+})
 
 export default Loading