@jbrowse/plugin-sequence 2.10.2 → 2.10.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -9,6 +9,8 @@ declare const DivSequenceRendering: (props: {
9
9
  features: Map<string, Feature>;
10
10
  regions: Region[];
11
11
  bpPerPx: number;
12
+ rowHeight: number;
13
+ sequenceHeight: number;
12
14
  config: AnyConfigurationModel;
13
15
  theme?: Theme;
14
16
  showForward?: boolean;
@@ -41,7 +41,7 @@ function Translation(props) {
41
41
  : util_1.defaultStops.includes(codon)
42
42
  ? theme === null || theme === void 0 ? void 0 : theme.palette.stopCodon
43
43
  : map[Math.abs(frame)] }),
44
- render ? (react_1.default.createElement("text", { x: x + w / 2, y: y + height / 2, dominantBaseline: "middle", textAnchor: "middle" }, letter)) : null));
44
+ render ? (react_1.default.createElement("text", { x: x + w / 2, y: y + height / 2, dominantBaseline: "middle", textAnchor: "middle", fontSize: height - 2 }, letter)) : null));
45
45
  })));
46
46
  }
47
47
  function DNA(props) {
@@ -57,14 +57,13 @@ function DNA(props) {
57
57
  const x = reverse ? rightPx - (index + 1) * w : leftPx + index * w;
58
58
  return (react_1.default.createElement(react_1.default.Fragment, { key: index },
59
59
  react_1.default.createElement("rect", { x: x, y: y, width: w, height: height, fill: color ? color.main : '#aaa', stroke: render ? '#555' : 'none' }),
60
- render ? (react_1.default.createElement("text", { x: x + w / 2, y: y + height / 2, dominantBaseline: "middle", textAnchor: "middle", fill: color ? theme.palette.getContrastText(color.main) : 'black' }, letter)) : null));
60
+ render ? (react_1.default.createElement("text", { x: x + w / 2, y: y + height / 2, dominantBaseline: "middle", textAnchor: "middle", fontSize: height - 2, fill: color ? theme.palette.getContrastText(color.main) : 'black' }, letter)) : null));
61
61
  })));
62
62
  }
63
- function SequenceSVG({ regions, theme: configTheme, features = new Map(), showReverse = true, showForward = true, showTranslation = true, bpPerPx, }) {
63
+ function SequenceSVG({ regions, theme: configTheme, features = new Map(), showReverse = true, showForward = true, showTranslation = true, bpPerPx, rowHeight, }) {
64
64
  const [region] = regions;
65
65
  const theme = (0, ui_1.createJBrowseTheme)(configTheme);
66
66
  const codonTable = (0, util_1.generateCodonTable)(util_1.defaultCodonTable);
67
- const height = 20;
68
67
  const [feature] = [...features.values()];
69
68
  if (!feature) {
70
69
  return null;
@@ -75,26 +74,31 @@ function SequenceSVG({ regions, theme: configTheme, features = new Map(), showRe
75
74
  }
76
75
  // incrementer for the y-position of the current sequence being rendered
77
76
  // (applies to both translation rows and dna rows)
78
- let currY = -20;
77
+ let currY = -rowHeight;
79
78
  return (react_1.default.createElement(react_1.default.Fragment, null,
80
79
  showTranslation && (region.reversed ? showReverse : showForward)
81
- ? [2, 1, 0].map(index => (react_1.default.createElement(Translation, { key: `translation-${index}`, seq: seq, y: (currY += 20), codonTable: codonTable, frame: index, bpPerPx: bpPerPx, region: region, theme: theme, height: height, reverse: region.reversed })))
80
+ ? [2, 1, 0].map(index => (react_1.default.createElement(Translation, { key: `translation-${index}`, seq: seq, y: (currY += rowHeight), codonTable: codonTable, frame: index, bpPerPx: bpPerPx, region: region, theme: theme, height: rowHeight, reverse: region.reversed })))
82
81
  : null,
83
- showForward ? (react_1.default.createElement(DNA, { height: height, y: (currY += 20), feature: feature, region: region, seq: region.reversed ? (0, util_1.complement)(seq) : seq, bpPerPx: bpPerPx, theme: theme })) : null,
84
- showReverse ? (react_1.default.createElement(DNA, { height: height, y: (currY += 20), feature: feature, region: region, seq: region.reversed ? seq : (0, util_1.complement)(seq), bpPerPx: bpPerPx, theme: theme })) : null,
82
+ showForward ? (react_1.default.createElement(DNA, { height: rowHeight, y: (currY += rowHeight), feature: feature, region: region, seq: region.reversed ? (0, util_1.complement)(seq) : seq, bpPerPx: bpPerPx, theme: theme })) : null,
83
+ showReverse ? (react_1.default.createElement(DNA, { height: rowHeight, y: (currY += rowHeight), feature: feature, region: region, seq: region.reversed ? seq : (0, util_1.complement)(seq), bpPerPx: bpPerPx, theme: theme })) : null,
85
84
  showTranslation && (region.reversed ? showForward : showReverse)
86
- ? [0, -1, -2].map(index => (react_1.default.createElement(Translation, { key: `rev-translation-${index}`, seq: seq, y: (currY += 20), codonTable: codonTable, frame: index, bpPerPx: bpPerPx, region: region, theme: theme, height: height, reverse: !region.reversed })))
85
+ ? [0, -1, -2].map(index => (react_1.default.createElement(Translation, { key: `rev-translation-${index}`, seq: seq, y: (currY += rowHeight), codonTable: codonTable, frame: index, bpPerPx: bpPerPx, region: region, theme: theme, height: rowHeight, reverse: !region.reversed })))
87
86
  : null));
88
87
  }
89
88
  function Wrapper({ exportSVG, width, totalHeight, children, }) {
90
- return exportSVG ? (react_1.default.createElement(react_1.default.Fragment, null, children)) : (react_1.default.createElement("svg", { "data-testid": "sequence_track", width: width, height: totalHeight, style: { width, height: totalHeight, userSelect: 'none' } }, children));
89
+ return exportSVG ? (react_1.default.createElement(react_1.default.Fragment, null, children)) : (react_1.default.createElement("svg", { "data-testid": "sequence_track", width: width, height: totalHeight, style: {
90
+ width,
91
+ height: totalHeight,
92
+ userSelect: 'none',
93
+ // use block because svg by default is inline, which adds a margin
94
+ display: 'block',
95
+ } }, children));
91
96
  }
92
97
  const DivSequenceRendering = (0, mobx_react_1.observer)(function (props) {
93
- const { regions, bpPerPx } = props;
98
+ const { regions, bpPerPx, sequenceHeight } = props;
94
99
  const [region] = regions;
95
100
  const width = (region.end - region.start) / bpPerPx;
96
- const totalHeight = 200;
97
- return (react_1.default.createElement(Wrapper, { ...props, totalHeight: totalHeight, width: width },
101
+ return (react_1.default.createElement(Wrapper, { ...props, totalHeight: sequenceHeight, width: width },
98
102
  react_1.default.createElement(SequenceSVG, { ...props })));
99
103
  });
100
104
  exports.default = DivSequenceRendering;
@@ -31,9 +31,6 @@ export declare function modelFactory(configSchema: AnyConfigurationSchemaType):
31
31
  isRightEndOfDisplayedRegion: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
32
32
  }, {
33
33
  renderInProgress: AbortController | undefined;
34
- /**
35
- * #method
36
- */
37
34
  filled: boolean;
38
35
  reactElement: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
39
36
  features: Map<string, import("@jbrowse/core/util").Feature> | undefined;
@@ -43,8 +40,15 @@ export declare function modelFactory(configSchema: AnyConfigurationSchemaType):
43
40
  message: string | undefined;
44
41
  maxHeightReached: boolean;
45
42
  ReactComponent: ({ model, }: {
46
- model: any;
47
- }) => any;
43
+ model: {
44
+ error?: unknown;
45
+ reload: () => void;
46
+ message: import("react").ReactNode;
47
+ filled?: boolean | undefined;
48
+ status?: string | undefined;
49
+ reactElement?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
50
+ };
51
+ }) => import("react").JSX.Element | undefined;
48
52
  renderProps: any;
49
53
  } & {
50
54
  doReload(): void;
@@ -77,7 +81,9 @@ export declare function modelFactory(configSchema: AnyConfigurationSchemaType):
77
81
  height: {
78
82
  type: string;
79
83
  defaultValue: number;
80
- description: string;
84
+ description: string; /**
85
+ * #property
86
+ */
81
87
  };
82
88
  mouseover: {
83
89
  type: string;
@@ -122,9 +128,7 @@ export declare function modelFactory(configSchema: AnyConfigurationSchemaType):
122
128
  }>;
123
129
  readonly DisplayBlurb: import("react").FC<{
124
130
  model: {
125
- id: string; /**
126
- * #action
127
- */
131
+ id: string;
128
132
  type: string;
129
133
  rpcDriverName: string | undefined;
130
134
  } & import("mobx-state-tree/dist/internal").NonEmptyObject & {
@@ -141,9 +145,6 @@ export declare function modelFactory(configSchema: AnyConfigurationSchemaType):
141
145
  message: string | undefined;
142
146
  }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
143
147
  }> | null;
144
- /**
145
- * #method
146
- */
147
148
  readonly adapterConfig: any;
148
149
  readonly parentTrack: any;
149
150
  renderProps(): any;
@@ -178,7 +179,9 @@ export declare function modelFactory(configSchema: AnyConfigurationSchemaType):
178
179
  readonly featureDensityStatsReady: boolean;
179
180
  readonly maxAllowableBytes: number;
180
181
  } & {
181
- afterAttach(): void;
182
+ afterAttach(): void; /**
183
+ * #getter
184
+ */
182
185
  } & {
183
186
  setCurrStatsBpPerPx(n: number): void;
184
187
  setFeatureDensityStatsLimit(stats?: import("@jbrowse/core/data_adapters/BaseAdapter").FeatureDensityStats | undefined): void;
@@ -225,6 +228,16 @@ export declare function modelFactory(configSchema: AnyConfigurationSchemaType):
225
228
  } & {
226
229
  renderSvg(opts: import("@jbrowse/plugin-linear-genome-view").ExportSvgDisplayOptions): Promise<import("react").JSX.Element>;
227
230
  afterAttach(): void;
231
+ } & {
232
+ /**
233
+ * #property
234
+ */
235
+ rowHeight: number;
236
+ } & {
237
+ /**
238
+ * #getter
239
+ */
240
+ readonly sequenceHeight: number;
228
241
  } & {
229
242
  /**
230
243
  * #method
@@ -292,9 +305,6 @@ export declare function modelFactory(configSchema: AnyConfigurationSchemaType):
292
305
  isRightEndOfDisplayedRegion: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
293
306
  }, {
294
307
  renderInProgress: AbortController | undefined;
295
- /**
296
- * #method
297
- */
298
308
  filled: boolean;
299
309
  reactElement: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
300
310
  features: Map<string, import("@jbrowse/core/util").Feature> | undefined;
@@ -304,8 +314,15 @@ export declare function modelFactory(configSchema: AnyConfigurationSchemaType):
304
314
  message: string | undefined;
305
315
  maxHeightReached: boolean;
306
316
  ReactComponent: ({ model, }: {
307
- model: any;
308
- }) => any;
317
+ model: {
318
+ error?: unknown;
319
+ reload: () => void;
320
+ message: import("react").ReactNode;
321
+ filled?: boolean | undefined;
322
+ status?: string | undefined;
323
+ reactElement?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
324
+ };
325
+ }) => import("react").JSX.Element | undefined;
309
326
  renderProps: any;
310
327
  } & {
311
328
  doReload(): void;
@@ -338,7 +355,9 @@ export declare function modelFactory(configSchema: AnyConfigurationSchemaType):
338
355
  height: {
339
356
  type: string;
340
357
  defaultValue: number;
341
- description: string;
358
+ description: string; /**
359
+ * #property
360
+ */
342
361
  };
343
362
  mouseover: {
344
363
  type: string;
@@ -33,6 +33,26 @@ function modelFactory(configSchema) {
33
33
  * #property
34
34
  */
35
35
  showTranslation: true,
36
+ }))
37
+ .volatile(() => ({
38
+ /**
39
+ * #property
40
+ */
41
+ rowHeight: 15,
42
+ }))
43
+ .views(self => ({
44
+ /**
45
+ * #getter
46
+ */
47
+ get sequenceHeight() {
48
+ const { showTranslation, showReverse, showForward } = self;
49
+ const r1 = showReverse && showTranslation ? self.rowHeight * 3 : 0;
50
+ const r2 = showForward && showTranslation ? self.rowHeight * 3 : 0;
51
+ const t = r1 + r2;
52
+ const r = showReverse ? self.rowHeight : 0;
53
+ const s = showForward ? self.rowHeight : 0;
54
+ return t + r + s;
55
+ },
36
56
  }))
37
57
  .views(self => {
38
58
  const { renderProps: superRenderProps } = self;
@@ -41,7 +61,7 @@ function modelFactory(configSchema) {
41
61
  * #method
42
62
  */
43
63
  renderProps() {
44
- const { showForward, rpcDriverName, showReverse, showTranslation } = self;
64
+ const { showForward, rpcDriverName, showReverse, showTranslation, rowHeight, sequenceHeight, } = self;
45
65
  return {
46
66
  ...superRenderProps(),
47
67
  config: self.configuration.renderer,
@@ -49,6 +69,8 @@ function modelFactory(configSchema) {
49
69
  showForward,
50
70
  showReverse,
51
71
  showTranslation,
72
+ rowHeight,
73
+ sequenceHeight,
52
74
  };
53
75
  },
54
76
  };
@@ -94,13 +116,7 @@ function modelFactory(configSchema) {
94
116
  self.setHeight(50);
95
117
  }
96
118
  else {
97
- const { showTranslation, showReverse, showForward } = self;
98
- const r1 = showReverse && showTranslation ? 60 : 0;
99
- const r2 = showForward && showTranslation ? 60 : 0;
100
- const t = r1 + r2;
101
- const r = showReverse ? 20 : 0;
102
- const s = showForward ? 20 : 0;
103
- self.setHeight(t + r + s);
119
+ self.setHeight(self.sequenceHeight);
104
120
  }
105
121
  }));
106
122
  },
@@ -9,6 +9,8 @@ declare const DivSequenceRendering: (props: {
9
9
  features: Map<string, Feature>;
10
10
  regions: Region[];
11
11
  bpPerPx: number;
12
+ rowHeight: number;
13
+ sequenceHeight: number;
12
14
  config: AnyConfigurationModel;
13
15
  theme?: Theme;
14
16
  showForward?: boolean;
@@ -36,7 +36,7 @@ function Translation(props) {
36
36
  : defaultStops.includes(codon)
37
37
  ? theme === null || theme === void 0 ? void 0 : theme.palette.stopCodon
38
38
  : map[Math.abs(frame)] }),
39
- render ? (React.createElement("text", { x: x + w / 2, y: y + height / 2, dominantBaseline: "middle", textAnchor: "middle" }, letter)) : null));
39
+ render ? (React.createElement("text", { x: x + w / 2, y: y + height / 2, dominantBaseline: "middle", textAnchor: "middle", fontSize: height - 2 }, letter)) : null));
40
40
  })));
41
41
  }
42
42
  function DNA(props) {
@@ -52,14 +52,13 @@ function DNA(props) {
52
52
  const x = reverse ? rightPx - (index + 1) * w : leftPx + index * w;
53
53
  return (React.createElement(React.Fragment, { key: index },
54
54
  React.createElement("rect", { x: x, y: y, width: w, height: height, fill: color ? color.main : '#aaa', stroke: render ? '#555' : 'none' }),
55
- render ? (React.createElement("text", { x: x + w / 2, y: y + height / 2, dominantBaseline: "middle", textAnchor: "middle", fill: color ? theme.palette.getContrastText(color.main) : 'black' }, letter)) : null));
55
+ render ? (React.createElement("text", { x: x + w / 2, y: y + height / 2, dominantBaseline: "middle", textAnchor: "middle", fontSize: height - 2, fill: color ? theme.palette.getContrastText(color.main) : 'black' }, letter)) : null));
56
56
  })));
57
57
  }
58
- function SequenceSVG({ regions, theme: configTheme, features = new Map(), showReverse = true, showForward = true, showTranslation = true, bpPerPx, }) {
58
+ function SequenceSVG({ regions, theme: configTheme, features = new Map(), showReverse = true, showForward = true, showTranslation = true, bpPerPx, rowHeight, }) {
59
59
  const [region] = regions;
60
60
  const theme = createJBrowseTheme(configTheme);
61
61
  const codonTable = generateCodonTable(defaultCodonTable);
62
- const height = 20;
63
62
  const [feature] = [...features.values()];
64
63
  if (!feature) {
65
64
  return null;
@@ -70,26 +69,31 @@ function SequenceSVG({ regions, theme: configTheme, features = new Map(), showRe
70
69
  }
71
70
  // incrementer for the y-position of the current sequence being rendered
72
71
  // (applies to both translation rows and dna rows)
73
- let currY = -20;
72
+ let currY = -rowHeight;
74
73
  return (React.createElement(React.Fragment, null,
75
74
  showTranslation && (region.reversed ? showReverse : showForward)
76
- ? [2, 1, 0].map(index => (React.createElement(Translation, { key: `translation-${index}`, seq: seq, y: (currY += 20), codonTable: codonTable, frame: index, bpPerPx: bpPerPx, region: region, theme: theme, height: height, reverse: region.reversed })))
75
+ ? [2, 1, 0].map(index => (React.createElement(Translation, { key: `translation-${index}`, seq: seq, y: (currY += rowHeight), codonTable: codonTable, frame: index, bpPerPx: bpPerPx, region: region, theme: theme, height: rowHeight, reverse: region.reversed })))
77
76
  : null,
78
- showForward ? (React.createElement(DNA, { height: height, y: (currY += 20), feature: feature, region: region, seq: region.reversed ? complement(seq) : seq, bpPerPx: bpPerPx, theme: theme })) : null,
79
- showReverse ? (React.createElement(DNA, { height: height, y: (currY += 20), feature: feature, region: region, seq: region.reversed ? seq : complement(seq), bpPerPx: bpPerPx, theme: theme })) : null,
77
+ showForward ? (React.createElement(DNA, { height: rowHeight, y: (currY += rowHeight), feature: feature, region: region, seq: region.reversed ? complement(seq) : seq, bpPerPx: bpPerPx, theme: theme })) : null,
78
+ showReverse ? (React.createElement(DNA, { height: rowHeight, y: (currY += rowHeight), feature: feature, region: region, seq: region.reversed ? seq : complement(seq), bpPerPx: bpPerPx, theme: theme })) : null,
80
79
  showTranslation && (region.reversed ? showForward : showReverse)
81
- ? [0, -1, -2].map(index => (React.createElement(Translation, { key: `rev-translation-${index}`, seq: seq, y: (currY += 20), codonTable: codonTable, frame: index, bpPerPx: bpPerPx, region: region, theme: theme, height: height, reverse: !region.reversed })))
80
+ ? [0, -1, -2].map(index => (React.createElement(Translation, { key: `rev-translation-${index}`, seq: seq, y: (currY += rowHeight), codonTable: codonTable, frame: index, bpPerPx: bpPerPx, region: region, theme: theme, height: rowHeight, reverse: !region.reversed })))
82
81
  : null));
83
82
  }
84
83
  function Wrapper({ exportSVG, width, totalHeight, children, }) {
85
- return exportSVG ? (React.createElement(React.Fragment, null, children)) : (React.createElement("svg", { "data-testid": "sequence_track", width: width, height: totalHeight, style: { width, height: totalHeight, userSelect: 'none' } }, children));
84
+ return exportSVG ? (React.createElement(React.Fragment, null, children)) : (React.createElement("svg", { "data-testid": "sequence_track", width: width, height: totalHeight, style: {
85
+ width,
86
+ height: totalHeight,
87
+ userSelect: 'none',
88
+ // use block because svg by default is inline, which adds a margin
89
+ display: 'block',
90
+ } }, children));
86
91
  }
87
92
  const DivSequenceRendering = observer(function (props) {
88
- const { regions, bpPerPx } = props;
93
+ const { regions, bpPerPx, sequenceHeight } = props;
89
94
  const [region] = regions;
90
95
  const width = (region.end - region.start) / bpPerPx;
91
- const totalHeight = 200;
92
- return (React.createElement(Wrapper, { ...props, totalHeight: totalHeight, width: width },
96
+ return (React.createElement(Wrapper, { ...props, totalHeight: sequenceHeight, width: width },
93
97
  React.createElement(SequenceSVG, { ...props })));
94
98
  });
95
99
  export default DivSequenceRendering;
@@ -31,9 +31,6 @@ export declare function modelFactory(configSchema: AnyConfigurationSchemaType):
31
31
  isRightEndOfDisplayedRegion: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
32
32
  }, {
33
33
  renderInProgress: AbortController | undefined;
34
- /**
35
- * #method
36
- */
37
34
  filled: boolean;
38
35
  reactElement: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
39
36
  features: Map<string, import("@jbrowse/core/util").Feature> | undefined;
@@ -43,8 +40,15 @@ export declare function modelFactory(configSchema: AnyConfigurationSchemaType):
43
40
  message: string | undefined;
44
41
  maxHeightReached: boolean;
45
42
  ReactComponent: ({ model, }: {
46
- model: any;
47
- }) => any;
43
+ model: {
44
+ error?: unknown;
45
+ reload: () => void;
46
+ message: import("react").ReactNode;
47
+ filled?: boolean | undefined;
48
+ status?: string | undefined;
49
+ reactElement?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
50
+ };
51
+ }) => import("react").JSX.Element | undefined;
48
52
  renderProps: any;
49
53
  } & {
50
54
  doReload(): void;
@@ -77,7 +81,9 @@ export declare function modelFactory(configSchema: AnyConfigurationSchemaType):
77
81
  height: {
78
82
  type: string;
79
83
  defaultValue: number;
80
- description: string;
84
+ description: string; /**
85
+ * #property
86
+ */
81
87
  };
82
88
  mouseover: {
83
89
  type: string;
@@ -122,9 +128,7 @@ export declare function modelFactory(configSchema: AnyConfigurationSchemaType):
122
128
  }>;
123
129
  readonly DisplayBlurb: import("react").FC<{
124
130
  model: {
125
- id: string; /**
126
- * #action
127
- */
131
+ id: string;
128
132
  type: string;
129
133
  rpcDriverName: string | undefined;
130
134
  } & import("mobx-state-tree/dist/internal").NonEmptyObject & {
@@ -141,9 +145,6 @@ export declare function modelFactory(configSchema: AnyConfigurationSchemaType):
141
145
  message: string | undefined;
142
146
  }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
143
147
  }> | null;
144
- /**
145
- * #method
146
- */
147
148
  readonly adapterConfig: any;
148
149
  readonly parentTrack: any;
149
150
  renderProps(): any;
@@ -178,7 +179,9 @@ export declare function modelFactory(configSchema: AnyConfigurationSchemaType):
178
179
  readonly featureDensityStatsReady: boolean;
179
180
  readonly maxAllowableBytes: number;
180
181
  } & {
181
- afterAttach(): void;
182
+ afterAttach(): void; /**
183
+ * #getter
184
+ */
182
185
  } & {
183
186
  setCurrStatsBpPerPx(n: number): void;
184
187
  setFeatureDensityStatsLimit(stats?: import("@jbrowse/core/data_adapters/BaseAdapter").FeatureDensityStats | undefined): void;
@@ -225,6 +228,16 @@ export declare function modelFactory(configSchema: AnyConfigurationSchemaType):
225
228
  } & {
226
229
  renderSvg(opts: import("@jbrowse/plugin-linear-genome-view").ExportSvgDisplayOptions): Promise<import("react").JSX.Element>;
227
230
  afterAttach(): void;
231
+ } & {
232
+ /**
233
+ * #property
234
+ */
235
+ rowHeight: number;
236
+ } & {
237
+ /**
238
+ * #getter
239
+ */
240
+ readonly sequenceHeight: number;
228
241
  } & {
229
242
  /**
230
243
  * #method
@@ -292,9 +305,6 @@ export declare function modelFactory(configSchema: AnyConfigurationSchemaType):
292
305
  isRightEndOfDisplayedRegion: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
293
306
  }, {
294
307
  renderInProgress: AbortController | undefined;
295
- /**
296
- * #method
297
- */
298
308
  filled: boolean;
299
309
  reactElement: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
300
310
  features: Map<string, import("@jbrowse/core/util").Feature> | undefined;
@@ -304,8 +314,15 @@ export declare function modelFactory(configSchema: AnyConfigurationSchemaType):
304
314
  message: string | undefined;
305
315
  maxHeightReached: boolean;
306
316
  ReactComponent: ({ model, }: {
307
- model: any;
308
- }) => any;
317
+ model: {
318
+ error?: unknown;
319
+ reload: () => void;
320
+ message: import("react").ReactNode;
321
+ filled?: boolean | undefined;
322
+ status?: string | undefined;
323
+ reactElement?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
324
+ };
325
+ }) => import("react").JSX.Element | undefined;
309
326
  renderProps: any;
310
327
  } & {
311
328
  doReload(): void;
@@ -338,7 +355,9 @@ export declare function modelFactory(configSchema: AnyConfigurationSchemaType):
338
355
  height: {
339
356
  type: string;
340
357
  defaultValue: number;
341
- description: string;
358
+ description: string; /**
359
+ * #property
360
+ */
342
361
  };
343
362
  mouseover: {
344
363
  type: string;
@@ -30,6 +30,26 @@ export function modelFactory(configSchema) {
30
30
  * #property
31
31
  */
32
32
  showTranslation: true,
33
+ }))
34
+ .volatile(() => ({
35
+ /**
36
+ * #property
37
+ */
38
+ rowHeight: 15,
39
+ }))
40
+ .views(self => ({
41
+ /**
42
+ * #getter
43
+ */
44
+ get sequenceHeight() {
45
+ const { showTranslation, showReverse, showForward } = self;
46
+ const r1 = showReverse && showTranslation ? self.rowHeight * 3 : 0;
47
+ const r2 = showForward && showTranslation ? self.rowHeight * 3 : 0;
48
+ const t = r1 + r2;
49
+ const r = showReverse ? self.rowHeight : 0;
50
+ const s = showForward ? self.rowHeight : 0;
51
+ return t + r + s;
52
+ },
33
53
  }))
34
54
  .views(self => {
35
55
  const { renderProps: superRenderProps } = self;
@@ -38,7 +58,7 @@ export function modelFactory(configSchema) {
38
58
  * #method
39
59
  */
40
60
  renderProps() {
41
- const { showForward, rpcDriverName, showReverse, showTranslation } = self;
61
+ const { showForward, rpcDriverName, showReverse, showTranslation, rowHeight, sequenceHeight, } = self;
42
62
  return {
43
63
  ...superRenderProps(),
44
64
  config: self.configuration.renderer,
@@ -46,6 +66,8 @@ export function modelFactory(configSchema) {
46
66
  showForward,
47
67
  showReverse,
48
68
  showTranslation,
69
+ rowHeight,
70
+ sequenceHeight,
49
71
  };
50
72
  },
51
73
  };
@@ -91,13 +113,7 @@ export function modelFactory(configSchema) {
91
113
  self.setHeight(50);
92
114
  }
93
115
  else {
94
- const { showTranslation, showReverse, showForward } = self;
95
- const r1 = showReverse && showTranslation ? 60 : 0;
96
- const r2 = showForward && showTranslation ? 60 : 0;
97
- const t = r1 + r2;
98
- const r = showReverse ? 20 : 0;
99
- const s = showForward ? 20 : 0;
100
- self.setHeight(t + r + s);
116
+ self.setHeight(self.sequenceHeight);
101
117
  }
102
118
  }));
103
119
  },
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@jbrowse/plugin-sequence",
3
- "version": "2.10.2",
3
+ "version": "2.10.3",
4
4
  "description": "JBrowse 2 sequence adapters, tracks, etc.",
5
5
  "keywords": [
6
6
  "jbrowse",
@@ -57,5 +57,5 @@
57
57
  "distModule": "esm/index.js",
58
58
  "srcModule": "src/index.ts",
59
59
  "module": "esm/index.js",
60
- "gitHead": "7ca3b7db337ebd88853e2d96cdab940ed550c4fb"
60
+ "gitHead": "c8fc800cd17decd72b2e971c7a6add3b95214e72"
61
61
  }