@jbrowse/plugin-canvas 4.1.3 → 4.1.4

package/esm/CanvasFeatureRenderer/configSchema.d.ts

@@ -1,4 +1,4 @@
-declare const CanvasFeatureRenderer: import("node_modules/@jbrowse/core/src/configuration/configurationSchema").ConfigurationSchemaType<{
+declare const CanvasFeatureRenderer: import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaType<{
     color1: {
         type: string;
         description: string;
@@ -55,7 +55,7 @@ declare const CanvasFeatureRenderer: import("node_modules/@jbrowse/core/src/conf
         defaultValue: string;
         contextVariable: string[];
     };
-    labels: import("node_modules/@jbrowse/core/src/configuration/configurationSchema").ConfigurationSchemaType<{
+    labels: import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaType<{
         name: {
             type: string;
             description: string;
@@ -86,7 +86,7 @@ declare const CanvasFeatureRenderer: import("node_modules/@jbrowse/core/src/conf
             defaultValue: number;
             contextVariable: string[];
         };
-    }, import("node_modules/@jbrowse/core/src/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, undefined>>;
+    }, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, undefined>>;
     displayMode: {
         type: string;
         model: import("@jbrowse/mobx-state-tree").ISimpleType<string>;
@@ -132,5 +132,5 @@ declare const CanvasFeatureRenderer: import("node_modules/@jbrowse/core/src/conf
         description: string;
         defaultValue: boolean;
     };
-}, import("node_modules/@jbrowse/core/src/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, undefined>>;
+}, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, undefined>>;
 export default CanvasFeatureRenderer;

package/esm/CanvasFeatureRenderer/configSchema2.d.ts

@@ -1,4 +1,4 @@
-declare const SvgFeatureRenderer: import("node_modules/@jbrowse/core/src/configuration/configurationSchema.ts").ConfigurationSchemaType<{}, import("node_modules/@jbrowse/core/src/configuration/configurationSchema.ts").ConfigurationSchemaOptions<import("node_modules/@jbrowse/core/src/configuration/configurationSchema.ts").ConfigurationSchemaType<{
+declare const SvgFeatureRenderer: import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaType<{}, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaType<{
     color1: {
         type: string;
         description: string;
@@ -55,7 +55,7 @@ declare const SvgFeatureRenderer: import("node_modules/@jbrowse/core/src/configu
         defaultValue: string;
         contextVariable: string[];
     };
-    labels: import("node_modules/@jbrowse/core/src/configuration/configurationSchema.ts").ConfigurationSchemaType<{
+    labels: import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaType<{
         name: {
             type: string;
             description: string;
@@ -86,7 +86,7 @@ declare const SvgFeatureRenderer: import("node_modules/@jbrowse/core/src/configu
             defaultValue: number;
             contextVariable: string[];
         };
-    }, import("node_modules/@jbrowse/core/src/configuration/configurationSchema.ts").ConfigurationSchemaOptions<undefined, undefined>>;
+    }, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, undefined>>;
     displayMode: {
         type: string;
         model: import("@jbrowse/mobx-state-tree").ISimpleType<string>;
@@ -132,5 +132,5 @@ declare const SvgFeatureRenderer: import("node_modules/@jbrowse/core/src/configu
         description: string;
         defaultValue: boolean;
     };
-}, import("node_modules/@jbrowse/core/src/configuration/configurationSchema.ts").ConfigurationSchemaOptions<undefined, undefined>>, undefined>>;
+}, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, undefined>>, undefined>>;
 export default SvgFeatureRenderer;

package/esm/CanvasFeatureRenderer/floatingLabels.js

@@ -8,36 +8,21 @@ export function createFeatureFloatingLabels({ feature, config, configContext, na
     const description = truncateLabel(rawDescription);
     const shouldShowLabel = /\S/.test(name) && showLabels;
     const shouldShowDescription = /\S/.test(description) && showDescriptions;
-    if (!shouldShowLabel && !shouldShowDescription) {
-        return [];
-    }
-    const actualFontHeight = readCachedConfig(fontHeight, config, ['labels', 'fontSize'], feature);
     const floatingLabels = [];
-    if (shouldShowLabel && shouldShowDescription) {
-        floatingLabels.push({
-            text: name,
-            relativeY: 0,
-            color: nameColor,
-            textWidth: measureText(name, FLOATING_LABEL_FONT_SIZE),
-        }, {
-            text: description,
-            relativeY: actualFontHeight,
-            color: descriptionColor,
-            textWidth: measureText(description, FLOATING_LABEL_FONT_SIZE),
-        });
-    }
-    else if (shouldShowLabel) {
+    let currentY = 0;
+    if (shouldShowLabel) {
         floatingLabels.push({
             text: name,
-            relativeY: 0,
+            relativeY: currentY,
             color: nameColor,
             textWidth: measureText(name, FLOATING_LABEL_FONT_SIZE),
         });
+        currentY += readCachedConfig(fontHeight, config, ['labels', 'fontSize'], feature);
     }
-    else if (shouldShowDescription) {
+    if (shouldShowDescription) {
         floatingLabels.push({
             text: description,
-            relativeY: 0,
+            relativeY: currentY,
             color: descriptionColor,
             textWidth: measureText(description, FLOATING_LABEL_FONT_SIZE),
         });

package/esm/CanvasFeatureRenderer/layout/layoutFeatures.js

@@ -1,6 +1,7 @@
 import { readConfObject } from '@jbrowse/core/configuration';
 import { createFeatureFloatingLabels } from "../floatingLabels.js";
 import { layoutFeature } from "./layoutFeature.js";
+import { readCachedConfig } from "../renderConfig.js";
 const yPadding = 5;
 export function layoutFeatures({ features, bpPerPx, region, configContext, layout, pluginManager, }) {
     const reversed = region.reversed || false;
@@ -18,12 +19,14 @@ export function layoutFeatures({ features, bpPerPx, region, configContext, layou
         const totalLayoutHeight = featureLayout.totalLayoutHeight;
         const name = String(readConfObject(config, ['labels', 'name'], { feature }) || '');
         const description = String(readConfObject(config, ['labels', 'description'], { feature }) || '');
+        const { nameColor, descriptionColor } = configContext;
+        const resolvedNameColor = readCachedConfig(nameColor, config, ['labels', 'nameColor'], feature);
         const floatingLabels = createFeatureFloatingLabels({
             feature,
             config,
             configContext,
-            nameColor: 'black',
-            descriptionColor: 'blue',
+            nameColor: resolvedNameColor === '#f0f' ? 'black' : resolvedNameColor,
+            descriptionColor: readCachedConfig(descriptionColor, config, ['labels', 'descriptionColor'], feature),
             name,
             description,
         });
@@ -32,15 +35,20 @@ export function layoutFeatures({ features, bpPerPx, region, configContext, layou
         const leftPaddingBp = featureLayout.leftPadding * bpPerPx;
         const rightPaddingBp = (totalLayoutWidth - featureLayout.width - featureLayout.leftPadding) *
             bpPerPx;
-        const layoutStart = featureStart - leftPaddingBp;
-        const layoutEnd = featureEnd + rightPaddingBp;
+        let layoutStart;
+        let layoutEnd;
+        if (reversed) {
+            layoutStart = featureStart - rightPaddingBp;
+            layoutEnd = featureEnd + leftPaddingBp;
+        }
+        else {
+            layoutStart = featureStart - leftPaddingBp;
+            layoutEnd = featureEnd + rightPaddingBp;
+        }
         const topPx = layout.addRect(feature.id(), layoutStart, layoutEnd, totalLayoutHeight + yPadding, feature, {
-            label: name,
-            description,
             refName: feature.get('refName'),
             floatingLabels,
             totalFeatureHeight: featureLayout.height,
-            totalLayoutWidth,
             featureWidth: featureLayout.width,
             featureStartBp: featureStart,
             featureEndBp: featureEnd,
@@ -50,8 +58,6 @@ export function layoutFeatures({ features, bpPerPx, region, configContext, layou
                 feature,
                 layout: featureLayout,
                 topPx,
-                label: name,
-                description,
             });
         }
     }

package/esm/CanvasFeatureRenderer/layout/layoutUtils.js

@@ -102,7 +102,6 @@ function addChildrenRecursive({ layout, featureLayout, subfeatureCoords, subfeat
                     refName: childFeature.get('refName'),
                     floatingLabels,
                     totalFeatureHeight: child.height,
-                    totalLayoutWidth: child.totalLayoutWidth,
                     actualTopPx: topPx,
                     featureWidth: child.width,
                     featureStartBp: childStart,

package/esm/CanvasFeatureRenderer/makeImageData.js

@@ -39,7 +39,7 @@ export function makeImageData({ ctx, layoutRecords, canvasWidth, renderArgs, con
     ctx.textAlign = 'left';
     const { subfeatureLabels, transcriptTypes, config } = configContext;
     for (const record of layoutRecords) {
-        const { feature, layout: featureLayout, topPx: recordTopPx, label, description, } = record;
+        const { feature, layout: featureLayout, topPx: recordTopPx } = record;
         const featureStartBp = feature.get(region.reversed ? 'end' : 'start');
         const startPx = bpToPx(featureStartBp, region, bpPerPx);
         const canvasLayout = convertToCanvasCoords(featureLayout, startPx, recordTopPx);
@@ -50,6 +50,8 @@ export function makeImageData({ ctx, layoutRecords, canvasWidth, renderArgs, con
             top: canvasLayout.y,
             bottom: canvasLayout.y + canvasLayout.totalLayoutHeight,
         };
+        const label = String(readConfObject(config, ['labels', 'name'], { feature }) || '');
+        const description = String(readConfObject(config, ['labels', 'description'], { feature }) || '');
         const tooltip = String(readConfObject(config, 'mouseover', { feature, label, description }) ||
             '');
         coords.push(bounds.left, bounds.top, bounds.right, bounds.bottom);

package/esm/CanvasFeatureRenderer/peptides/peptideUtils.d.ts

@@ -2,4 +2,5 @@ import type { PeptideData } from '../types.ts';
 import type PluginManager from '@jbrowse/core/PluginManager';
 import type { RenderArgsDeserialized } from '@jbrowse/core/pluggableElementTypes/renderers/BoxRendererType';
 import type { Feature } from '@jbrowse/core/util';
+export declare function findTranscriptsWithCDS(features: Map<string, Feature>): Feature[];
 export declare function fetchPeptideData(pluginManager: PluginManager, renderProps: RenderArgsDeserialized, features: Map<string, Feature>): Promise<Map<string, PeptideData>>;

package/esm/CanvasFeatureRenderer/peptides/peptideUtils.js

@@ -37,18 +37,23 @@ function hasCDSSubfeatures(feature) {
     const subfeatures = feature.get('subfeatures');
     return subfeatures?.some((sub) => sub.get('type') === 'CDS') ?? false;
 }
-function findTranscriptsWithCDS(features) {
+export function findTranscriptsWithCDS(features) {
     const transcripts = [];
     for (const feature of features.values()) {
         const type = feature.get('type');
         const subfeatures = feature.get('subfeatures');
         if (type === 'gene' && subfeatures?.length) {
+            let hasTranscriptWithCDS = false;
             for (const subfeature of subfeatures) {
                 const subType = subfeature.get('type');
                 if (isTranscriptType(subType) && hasCDSSubfeatures(subfeature)) {
                     transcripts.push(subfeature);
+                    hasTranscriptWithCDS = true;
                 }
             }
+            if (!hasTranscriptWithCDS && hasCDSSubfeatures(feature)) {
+                transcripts.push(feature);
+            }
         }
         else if (isTranscriptType(type) && hasCDSSubfeatures(feature)) {
             transcripts.push(feature);

package/esm/CanvasFeatureRenderer/renderConfig.d.ts

@@ -19,6 +19,8 @@ export interface RenderConfigContext {
     outline: CachedConfig<string>;
     featureHeight: CachedConfig<number>;
     fontHeight: CachedConfig<number>;
+    nameColor: CachedConfig<string>;
+    descriptionColor: CachedConfig<string>;
     labelAllowed: boolean;
     geneGlyphMode: string;
     displayDirectionalChevrons: boolean;

package/esm/CanvasFeatureRenderer/renderConfig.js

@@ -36,6 +36,8 @@ export function createRenderConfigContext(config) {
         outline: createCachedConfig(config, 'outline', ''),
         featureHeight: createCachedConfig(config, 'height', 10),
         fontHeight: createCachedConfig(config, ['labels', 'fontSize'], 12),
+        nameColor: createCachedConfig(config, ['labels', 'nameColor'], 'black'),
+        descriptionColor: createCachedConfig(config, ['labels', 'descriptionColor'], 'blue'),
         labelAllowed: displayMode !== 'collapse',
         heightMultiplier: getHeightMultiplier(displayMode),
     };

package/esm/CanvasFeatureRenderer/types.d.ts

@@ -56,8 +56,6 @@ export interface LayoutRecord {
     feature: Feature;
     layout: FeatureLayout;
     topPx: number;
-    label: string;
-    description: string;
 }
 export interface FlatbushItem {
     featureId: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbrowse/plugin-canvas",
-  "version": "4.1.3",
+  "version": "4.1.4",
   "type": "module",
   "description": "JBrowse 2 plugin for canvas features",
   "keywords": [
@@ -22,13 +22,13 @@
   ],
   "dependencies": {
     "@jbrowse/mobx-state-tree": "^5.5.0",
-    "@mui/material": "^7.3.7",
+    "@mui/material": "^7.3.8",
     "g2p_mapper": "^2.0.0",
     "mobx": "^6.15.0",
     "mobx-react": "^9.2.1",
     "rxjs": "^7.8.2",
-    "@jbrowse/core": "^4.1.3",
-    "@jbrowse/plugin-linear-genome-view": "^4.1.3"
+    "@jbrowse/plugin-linear-genome-view": "^4.1.4",
+    "@jbrowse/core": "^4.1.4"
   },
   "peerDependencies": {
     "react": ">=18.0.0"