@jbrowse/plugin-arc 2.6.1

package/src/ArcRenderer/__snapshots__/ArcRendering.test.tsx.snap

@@ -0,0 +1,40 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`no features 1`] = `
+<svg
+  class="ArcRendering"
+  height="500"
+  style="outline: none; position: relative;"
+  width="100"
+/>
+`;
+
+exports[`one feature 1`] = `
+<svg
+  class="ArcRendering"
+  height="500"
+  style="outline: none; position: relative;"
+  width="333.3333333333333"
+>
+  <g>
+    <path
+      d="M 0.3 0 C 0.3 100, 1 100, 1 0"
+      fill="transparent"
+      id="1-one"
+      pointer-events="stroke"
+      stroke-width="1"
+    />
+    <g />
+    <text
+      style="stroke: white; stroke-width: 0.6em;"
+      x="0.6499999999999999"
+      y="78"
+    />
+    <text
+      style="stroke: black;"
+      x="0.6499999999999999"
+      y="78"
+    />
+  </g>
+</svg>
+`;

package/src/ArcRenderer/configSchema.ts

@@ -0,0 +1,60 @@
+import { ConfigurationSchema } from '@jbrowse/core/configuration'
+
+/**
+ * #config ArcRenderer
+ */
+function x() {} // eslint-disable-line @typescript-eslint/no-unused-vars
+
+const ArcRenderer = ConfigurationSchema(
+  'ArcRenderer',
+  {
+    /**
+     * #slot
+     */
+    color: {
+      type: 'color',
+      description: 'the color of the arcs',
+      defaultValue: 'darkblue',
+      contextVariable: ['feature'],
+    },
+    /**
+     * #slot
+     */
+    thickness: {
+      type: 'number',
+      description: 'the thickness of the arcs',
+      defaultValue: `jexl:logThickness(feature,'score')`,
+      contextVariable: ['feature'],
+    },
+    /**
+     * #slot
+     */
+    label: {
+      type: 'string',
+      description: 'the label to appear at the apex of the arcs',
+      defaultValue: `jexl:get(feature,'score')`,
+      contextVariable: ['feature'],
+    },
+    /**
+     * #slot
+     */
+    height: {
+      type: 'number',
+      description: 'the height of the arcs',
+      defaultValue: `jexl:log10(get(feature,'end')-get(feature,'start'))*50`,
+      contextVariable: ['feature'],
+    },
+    /**
+     * #slot
+     */
+    caption: {
+      type: 'string',
+      description:
+        'the caption to appear when hovering over any point on the arcs',
+      defaultValue: `jexl:get(feature,'name')`,
+      contextVariable: ['feature'],
+    },
+  },
+  { explicitlyTyped: true },
+)
+export default ArcRenderer

package/src/ArcRenderer/index.ts

@@ -0,0 +1,17 @@
+import PluginManager from '@jbrowse/core/PluginManager'
+
+import ReactComponent from './ArcRendering'
+import configSchema from './configSchema'
+import ArcRenderer from './ArcRenderer'
+
+export default (pluginManager: PluginManager) => {
+  pluginManager.addRendererType(
+    () =>
+      new ArcRenderer({
+        name: 'ArcRenderer',
+        ReactComponent,
+        configSchema,
+        pluginManager,
+      }),
+  )
+}

package/src/LinearArcDisplay/configSchema.ts

@@ -0,0 +1,29 @@
+import PluginManager from '@jbrowse/core/PluginManager'
+import { types } from 'mobx-state-tree'
+import { ConfigurationSchema } from '@jbrowse/core/configuration'
+import { baseLinearDisplayConfigSchema } from '@jbrowse/plugin-linear-genome-view'
+
+/**
+ * #config LinearArcDisplay
+ */
+export function configSchemaFactory(pluginManager: PluginManager) {
+  return ConfigurationSchema(
+    'LinearArcDisplay',
+    {
+      /**
+       * #slot
+       */
+      renderer: types.optional(
+        pluginManager.pluggableConfigSchemaType('renderer'),
+        { type: 'ArcRenderer' },
+      ),
+    },
+    {
+      /**
+       * #baseConfiguration
+       */
+      baseConfiguration: baseLinearDisplayConfigSchema,
+      explicitlyTyped: true,
+    },
+  )
+}

package/src/LinearArcDisplay/index.ts

@@ -0,0 +1,21 @@
+import PluginManager from '@jbrowse/core/PluginManager'
+import { DisplayType } from '@jbrowse/core/pluggableElementTypes'
+import { BaseLinearDisplayComponent } from '@jbrowse/plugin-linear-genome-view'
+
+import { configSchemaFactory } from './configSchema'
+import { stateModelFactory } from './model'
+
+export default (pluginManager: PluginManager) => {
+  pluginManager.addDisplayType(() => {
+    const configSchema = configSchemaFactory(pluginManager)
+    return new DisplayType({
+      name: 'LinearArcDisplay',
+      displayName: 'Arc display',
+      configSchema,
+      stateModel: stateModelFactory(configSchema),
+      trackType: 'FeatureTrack',
+      viewType: 'LinearGenomeView',
+      ReactComponent: BaseLinearDisplayComponent,
+    })
+  })
+}

package/src/LinearArcDisplay/model.ts

@@ -0,0 +1,40 @@
+import {
+  AnyConfigurationSchemaType,
+  ConfigurationReference,
+} from '@jbrowse/core/configuration'
+import { types } from 'mobx-state-tree'
+import { BaseLinearDisplay } from '@jbrowse/plugin-linear-genome-view'
+
+export function stateModelFactory(configSchema: AnyConfigurationSchemaType) {
+  return types
+    .compose(
+      'LinearArcDisplay',
+      BaseLinearDisplay,
+      types.model({
+        type: types.literal('LinearArcDisplay'),
+        configuration: ConfigurationReference(configSchema),
+      }),
+    )
+
+    .views(self => {
+      const { renderProps: superRenderProps } = self
+      return {
+        get blockType() {
+          return 'staticBlocks'
+        },
+        get renderDelay() {
+          return 500
+        },
+        renderProps() {
+          return {
+            ...superRenderProps(),
+            rpcDriverName: self.rpcDriverName,
+            config: self.configuration.renderer,
+          }
+        },
+        get rendererTypeName() {
+          return self.configuration.renderer.type
+        },
+      }
+    })
+}

package/src/declare.d.ts

@@ -0,0 +1 @@
+declare module '*.json'

package/src/index.ts

@@ -0,0 +1,20 @@
+import Plugin from '@jbrowse/core/Plugin'
+import PluginManager from '@jbrowse/core/PluginManager'
+import LinearArcDisplayF from './LinearArcDisplay'
+import ArcRendererF from './ArcRenderer'
+import { Feature } from '@jbrowse/core/util'
+
+export default class ArcPlugin extends Plugin {
+  name = 'ArcRenderer'
+  install(pluginManager: PluginManager) {
+    ArcRendererF(pluginManager)
+    LinearArcDisplayF(pluginManager)
+
+    pluginManager.jexl.addFunction(
+      'logThickness',
+      (feature: Feature, attributeName: string) => {
+        return Math.log(feature.get(attributeName) + 1)
+      },
+    )
+  }
+}