@apollo-annotation/jbrowse-plugin-apollo 0.1.20 → 0.1.21

package/dist/jbrowse-plugin-apollo.cjs.development.js

@@ -100,7 +100,7 @@ var ExpandMoreIcon__default = /*#__PURE__*/_interopDefaultLegacy(ExpandMoreIcon)
 var ErrorIcon__default = /*#__PURE__*/_interopDefaultLegacy(ErrorIcon);
 var SaveIcon__default = /*#__PURE__*/_interopDefaultLegacy(SaveIcon);
 
-var version = "0.1.20";
+var version = "0.1.21";
 
 const ApolloConfigSchema = configuration.ConfigurationSchema('ApolloInternetAccount', {
     baseURL: {
@@ -4107,7 +4107,7 @@ class ApolloSequenceAdapter extends BaseAdapter.BaseSequenceAdapter {
     freeResources( /* { region } */) { }
 }
 
-var configSchema$2 = configuration.ConfigurationSchema('ApolloSequenceAdapter', {
+var configSchema$3 = configuration.ConfigurationSchema('ApolloSequenceAdapter', {
     assemblyId: {
         type: 'string',
         defaultValue: '',
@@ -4117,7 +4117,7 @@ var configSchema$2 = configuration.ConfigurationSchema('ApolloSequenceAdapter',
 function installApolloSequenceAdapter(pluginManager) {
     pluginManager.addAdapterType(() => new AdapterType__default["default"]({
         name: 'ApolloSequenceAdapter',
-        configSchema: configSchema$2,
+        configSchema: configSchema$3,
         adapterMetadata: {
             category: undefined,
             hiddenFromGUI: true,
@@ -4711,7 +4711,7 @@ class ApolloTextSearchAdapter extends BaseAdapter.BaseAdapter {
     freeResources() { }
 }
 
-var configSchema$1 = configuration.ConfigurationSchema('ApolloTextSearchAdapter', {
+var configSchema$2 = configuration.ConfigurationSchema('ApolloTextSearchAdapter', {
     assemblyNames: {
         type: 'stringArray',
         defaultValue: [],
@@ -4734,7 +4734,7 @@ function installApolloTextSearchAdapter(pluginManager) {
     pluginManager.addTextSearchAdapterType(() => new pluggableElementTypes.TextSearchAdapterType({
         name: 'ApolloTextSearchAdapter',
         displayName: 'Apollo text search adapter',
-        configSchema: configSchema$1,
+        configSchema: configSchema$2,
         AdapterClass: ApolloTextSearchAdapter,
         description: 'Apollo Text Search adapter',
     }));
@@ -6037,11 +6037,7 @@ const ApolloTranscriptDetailsWidget = mobxReact.observer(function ApolloTranscri
         React__default["default"].createElement(TranscriptSequence, { feature: feature, session: apolloSession, assembly: currentAssembly._id || '', refName: refName })));
 });
 
-function configSchemaFactory$1(pluginManager) {
-    const LGVPlugin = pluginManager.getPlugin('LinearGenomeViewPlugin');
-    const { baseLinearDisplayConfigSchema } = LGVPlugin.exports;
-    return configuration.ConfigurationSchema('LinearApolloDisplay', { height: { type: 'number', defaultValue: 500 } }, { baseConfiguration: baseLinearDisplayConfigSchema, explicitlyTyped: true });
-}
+const configSchema$1 = configuration.ConfigurationSchema('LinearApolloDisplay', {}, { explicitIdentifier: 'displayId', explicitlyTyped: true });
 
 function handleFeatureTypeChange(changeManager, feature, oldType, newType) {
     const featureId = feature._id;
@@ -6285,56 +6281,16 @@ const NumberCell = mobxReact.observer(function NumberCell({ initialValue, notify
             } })));
 });
 
-// TODO: get this added to LGV runtime exports so we don't have to duplicate it
 const minDisplayHeight = 20;
-/**
- * #stateModel TrackHeightMixin
- * #category display
- */
-const TrackHeightMixin = mobxStateTree.types
-    .model({
-    heightPreConfig: mobxStateTree.types.maybe(mobxStateTree.types.refinement('displayHeight', mobxStateTree.types.number, (n) => n >= minDisplayHeight)),
-})
-    .volatile(() => ({
-    scrollTop: 0,
-}))
-    .views((self) => ({
-    get height() {
-        // @ts-expect-error getConf needs self.configuration
-        return self.heightPreConfig ?? configuration.getConf(self, 'height');
-    },
-}))
-    .actions((self) => ({
-    setScrollTop(scrollTop) {
-        self.scrollTop = scrollTop;
-    },
-    setHeight(displayHeight) {
-        self.heightPreConfig = Math.max(displayHeight, minDisplayHeight);
-        return self.height;
-    },
-    resizeHeight(distance) {
-        const oldHeight = self.height;
-        const newHeight = this.setHeight(self.height + distance);
-        return newHeight - oldHeight;
-    },
-}));
-
 function baseModelFactory(_pluginManager, configSchema) {
-    // TODO: Restore this when TRackHeightMixin is in LGV runtime exports
-    // const LGVPlugin = pluginManager.getPlugin(
-    //   'LinearGenomeViewPlugin',
-    // ) as LinearGenomeViewPlugin
-    // const { TrackHeightMixin } = LGVPlugin.exports
-    return mobxStateTree.types
-        .compose(pluggableElementTypes.BaseDisplay, TrackHeightMixin)
-        .named('BaseLinearApolloDisplay')
+    return pluggableElementTypes.BaseDisplay.named('BaseLinearApolloDisplay')
         .props({
         type: mobxStateTree.types.literal('LinearApolloDisplay'),
         configuration: configuration.ConfigurationReference(configSchema),
+        graphical: true,
+        table: false,
+        heightPreConfig: mobxStateTree.types.maybe(mobxStateTree.types.refinement('displayHeight', mobxStateTree.types.number, (n) => n >= minDisplayHeight)),
     })
-        .volatile((self) => ({
-        lgv: util.getContainingView(self),
-    }))
         .views((self) => {
         const { configuration, renderProps: superRenderProps } = self;
         return {
@@ -6347,6 +6303,26 @@ function baseModelFactory(_pluginManager, configSchema) {
             },
         };
     })
+        .volatile(() => ({
+        scrollTop: 0,
+    }))
+        .views((self) => ({
+        get lgv() {
+            return util.getContainingView(self);
+        },
+        get height() {
+            if (self.heightPreConfig) {
+                return self.heightPreConfig;
+            }
+            if (self.graphical && self.table) {
+                return 500;
+            }
+            if (self.graphical) {
+                return 200;
+            }
+            return 300;
+        },
+    }))
         .views((self) => ({
         get rendererTypeName() {
             return self.configuration.renderer.type;
@@ -6403,6 +6379,73 @@ function baseModelFactory(_pluginManager, configSchema) {
                 .apolloSelectedFeature;
         },
     }))
+        .actions((self) => ({
+        setScrollTop(scrollTop) {
+            self.scrollTop = scrollTop;
+        },
+        setHeight(displayHeight) {
+            self.heightPreConfig = Math.max(displayHeight, minDisplayHeight);
+            return self.height;
+        },
+        resizeHeight(distance) {
+            const oldHeight = self.height;
+            const newHeight = this.setHeight(self.height + distance);
+            return newHeight - oldHeight;
+        },
+        showGraphicalOnly() {
+            self.graphical = true;
+            self.table = false;
+        },
+        showTableOnly() {
+            self.graphical = false;
+            self.table = true;
+        },
+        showGraphicalAndTable() {
+            self.graphical = true;
+            self.table = true;
+        },
+    }))
+        .views((self) => {
+        const { trackMenuItems: superTrackMenuItems } = self;
+        return {
+            trackMenuItems() {
+                const { graphical, table } = self;
+                return [
+                    ...superTrackMenuItems(),
+                    {
+                        type: 'subMenu',
+                        label: 'Appearance',
+                        subMenu: [
+                            {
+                                label: 'Show graphical display',
+                                type: 'radio',
+                                checked: graphical && !table,
+                                onClick: () => {
+                                    self.showGraphicalOnly();
+                                },
+                            },
+                            {
+                                label: 'Show table display',
+                                type: 'radio',
+                                checked: table && !graphical,
+                                onClick: () => {
+                                    self.showTableOnly();
+                                },
+                            },
+                            {
+                                label: 'Show both graphical and table display',
+                                type: 'radio',
+                                checked: table && graphical,
+                                onClick: () => {
+                                    self.showGraphicalAndTable();
+                                },
+                            },
+                        ],
+                    },
+                ];
+            },
+        };
+    })
         .actions((self) => ({
         setSelectedFeature(feature) {
             self.session.apolloSetSelectedFeature(feature);
@@ -8416,7 +8459,7 @@ const useStyles$1 = mui.makeStyles()((theme) => ({
 const LinearApolloDisplay = mobxReact.observer(function LinearApolloDisplay(props) {
     const theme = material.useTheme();
     const { model } = props;
-    const { apolloRowHeight, contextMenuItems: getContextMenuItems, cursor, featuresHeight, isShown, onMouseDown, onMouseLeave, onMouseMove, onMouseUp, regionCannotBeRendered, session, setCanvas, setCollaboratorCanvas, setOverlayCanvas, setSeqTrackCanvas, setSeqTrackOverlayCanvas, setTheme, tabularEditor, } = model;
+    const { apolloRowHeight, contextMenuItems: getContextMenuItems, cursor, featuresHeight, isShown, onMouseDown, onMouseLeave, onMouseMove, onMouseUp, regionCannotBeRendered, session, setCanvas, setCollaboratorCanvas, setOverlayCanvas, setSeqTrackCanvas, setSeqTrackOverlayCanvas, setTheme, } = model;
     const { classes } = useStyles$1();
     const lgv = util.getContainingView(model);
     React.useEffect(() => {
@@ -8473,9 +8516,7 @@ const LinearApolloDisplay = mobxReact.observer(function LinearApolloDisplay(prop
             React__default["default"].createElement("canvas", { ref: async (node) => {
                     await Promise.resolve();
                     setOverlayCanvas(node);
-                }, width: lgv.dynamicBlocks.totalWidthPx, height: featuresHeight, onMouseMove: onMouseMove, onMouseLeave: onMouseLeave, onMouseDown: onMouseDown, onMouseUp: onMouseUp, onClick: () => {
-                    tabularEditor.showPane();
-                }, className: classes.canvas, style: { cursor: cursor ?? 'default' }, "data-testid": "overlayCanvas" }),
+                }, width: lgv.dynamicBlocks.totalWidthPx, height: featuresHeight, onMouseMove: onMouseMove, onMouseLeave: onMouseLeave, onMouseDown: onMouseDown, onMouseUp: onMouseUp, className: classes.canvas, style: { cursor: cursor ?? 'default' }, "data-testid": "overlayCanvas" }),
             lgv.displayedRegions.flatMap((region, idx) => {
                 const assembly = assemblyManager.get(region.assemblyName);
                 return [...session.apolloDataStore.checkResults.values()]
@@ -8611,25 +8652,33 @@ const AccordionControl = mobxReact.observer(function AccordionControl({ onClick,
 });
 const DisplayComponent = mobxReact.observer(function DisplayComponent({ model, ...other }) {
     const { classes } = useStyles();
-    const { height: overallHeight, isShown, selectedFeature, tabularEditor, toggleShown, } = model;
-    const detailsHeight = tabularEditor.isShown ? model.detailsHeight : 0;
-    const featureAreaHeight = isShown
-        ? overallHeight - detailsHeight - accordionControlHeight * 2
-        : 0;
-    const onDetailsResize = (delta) => {
-        model.setDetailsHeight(model.detailsHeight - delta);
-    };
+    const { detailsHeight, graphical, height: overallHeight, isShown, selectedFeature, table, tabularEditor, toggleShown, } = model;
     const canvasScrollContainerRef = React.useRef(null);
     React.useEffect(() => {
         scrollSelectedFeatureIntoView(model, canvasScrollContainerRef);
     }, [model, selectedFeature]);
+    const onDetailsResize = (delta) => {
+        model.setDetailsHeight(detailsHeight - delta);
+    };
+    if (graphical && table) {
+        const tabularHeight = tabularEditor.isShown ? detailsHeight : 0;
+        const featureAreaHeight = isShown
+            ? overallHeight - detailsHeight - accordionControlHeight * 2
+            : 0;
+        return (React__default["default"].createElement("div", { style: { height: overallHeight } },
+            React__default["default"].createElement(AccordionControl, { open: isShown, title: "Graphical", onClick: toggleShown }),
+            React__default["default"].createElement("div", { className: classes.shading, ref: canvasScrollContainerRef, style: { height: featureAreaHeight } },
+                React__default["default"].createElement(LinearApolloDisplay, { model: model, ...other })),
+            React__default["default"].createElement(AccordionControl, { title: "Table", open: tabularEditor.isShown, onClick: tabularEditor.togglePane, onResize: onDetailsResize }),
+            React__default["default"].createElement("div", { className: classes.details, style: { height: tabularHeight } },
+                React__default["default"].createElement(TabularEditorPane, { model: model }))));
+    }
+    if (graphical) {
+        return (React__default["default"].createElement("div", { className: classes.shading, ref: canvasScrollContainerRef, style: { height: overallHeight } },
+            React__default["default"].createElement(LinearApolloDisplay, { model: model, ...other })));
+    }
     return (React__default["default"].createElement("div", { className: classes.details, style: { height: overallHeight } },
-        React__default["default"].createElement(AccordionControl, { open: isShown, title: "Graphical", onClick: toggleShown }),
-        React__default["default"].createElement("div", { className: classes.shading, ref: canvasScrollContainerRef, style: { height: featureAreaHeight } },
-            React__default["default"].createElement(LinearApolloDisplay, { model: model, ...other })),
-        React__default["default"].createElement(AccordionControl, { title: "Table", open: tabularEditor.isShown, onClick: tabularEditor.togglePane, onResize: onDetailsResize }),
-        React__default["default"].createElement("div", { style: { height: detailsHeight } },
-            React__default["default"].createElement(TabularEditorPane, { model: model }))));
+        React__default["default"].createElement(TabularEditorPane, { model: model })));
 });
 function makeSixFrameDisplayComponent(pluginManager) {
     const LGVPlugin = pluginManager.getPlugin('LinearGenomeViewPlugin');
@@ -10349,7 +10398,7 @@ class ApolloPlugin extends Plugin__default["default"] {
             });
         });
         pluginManager.addDisplayType(() => {
-            const configSchema = configSchemaFactory$1(pluginManager);
+            const configSchema = configSchema$1;
             return new pluggableElementTypes.DisplayType({
                 name: 'LinearApolloDisplay',
                 configSchema,