@jbrowse/plugin-hic 3.0.3 → 3.0.5

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.
@@ -21,6 +21,7 @@ export interface RenderArgsDeserialized extends ServerSideRenderArgsDeserialized
21
21
  highResolutionScaling: number;
22
22
  resolution: number;
23
23
  adapterConfig: AnyConfigurationModel;
24
+ displayHeight?: number;
24
25
  }
25
26
  export interface RenderArgsDeserializedWithFeatures extends RenderArgsDeserialized {
26
27
  features: HicFeature[];
@@ -31,18 +32,18 @@ export type ResultsDeserialized = ServerSideResultsDeserialized;
31
32
  export default class HicRenderer extends ServerSideRendererType {
32
33
  supportsSVG: boolean;
33
34
  render(renderProps: RenderArgsDeserialized): Promise<{
34
- height: any;
35
+ height: number;
35
36
  width: number;
36
37
  canvasRecordedData: any;
37
38
  reactElement?: React.ReactElement;
38
39
  html?: string;
39
40
  } | {
40
- height: any;
41
+ height: number;
41
42
  width: number;
42
43
  reactElement: import("react/jsx-runtime").JSX.Element;
43
44
  html?: string;
44
45
  } | {
45
- height: any;
46
+ height: number;
46
47
  width: number;
47
48
  imageData: any;
48
49
  reactElement?: React.ReactElement;
@@ -36,7 +36,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
36
36
  return (mod && mod.__esModule) ? mod : { "default": mod };
37
37
  };
38
38
  Object.defineProperty(exports, "__esModule", { value: true });
39
- const configuration_1 = require("@jbrowse/core/configuration");
40
39
  const dataAdapterCache_1 = require("@jbrowse/core/data_adapters/dataAdapterCache");
41
40
  const ServerSideRendererType_1 = __importDefault(require("@jbrowse/core/pluggableElementTypes/renderers/ServerSideRendererType"));
42
41
  const offscreenCanvasUtils_1 = require("@jbrowse/core/util/offscreenCanvasUtils");
@@ -48,14 +47,16 @@ class HicRenderer extends ServerSideRendererType_1.default {
48
47
  this.supportsSVG = true;
49
48
  }
50
49
  async render(renderProps) {
51
- const { config, regions, bpPerPx } = renderProps;
50
+ const { displayHeight, regions, bpPerPx } = renderProps;
52
51
  const region = regions[0];
53
52
  const width = (region.end - region.start) / bpPerPx;
54
- const height = (0, configuration_1.readConfObject)(config, 'maxHeight');
53
+ const hyp = width / 2;
54
+ const height = displayHeight !== null && displayHeight !== void 0 ? displayHeight : hyp;
55
55
  const features = await this.getFeatures(renderProps);
56
56
  const { makeImageData } = await Promise.resolve().then(() => __importStar(require('./makeImageData')));
57
57
  const res = await (0, offscreenCanvasUtils_1.renderToAbstractCanvas)(width, height, renderProps, ctx => makeImageData(ctx, {
58
58
  ...renderProps,
59
+ yScalar: height / Math.max(height, hyp),
59
60
  features,
60
61
  pluginManager: this.pluginManager,
61
62
  }));
@@ -6,5 +6,6 @@ export interface RenderArgs extends ServerSideRenderArgs {
6
6
  regions: Region[];
7
7
  }
8
8
  export declare function makeImageData(ctx: CanvasRenderingContext2D, props: RenderArgsDeserializedWithFeatures & {
9
+ yScalar: number;
9
10
  pluginManager: PluginManager;
10
11
  }): Promise<undefined>;
@@ -12,7 +12,7 @@ const d3_interpolate_1 = require("@mui/x-charts-vendor/d3-interpolate");
12
12
  const d3_scale_1 = require("@mui/x-charts-vendor/d3-scale");
13
13
  const viridis_1 = __importDefault(require("./viridis"));
14
14
  async function makeImageData(ctx, props) {
15
- const { features, config, bpPerPx, stopToken, resolution, sessionId, adapterConfig, useLogScale, colorScheme, regions, pluginManager, } = props;
15
+ const { features, config, bpPerPx, stopToken, resolution, sessionId, adapterConfig, useLogScale, colorScheme, regions, pluginManager, yScalar, } = props;
16
16
  const { statusCallback = () => { } } = props;
17
17
  statusCallback('Drawing Hi-C matrix');
18
18
  const region = regions[0];
@@ -55,6 +55,9 @@ async function makeImageData(ctx, props) {
55
55
  const scale = useLogScale
56
56
  ? (0, d3_scale_1.scaleSequentialLog)(x1).domain([1, m])
57
57
  : (0, d3_scale_1.scaleSequential)(x1).domain([0, m]);
58
+ if (yScalar) {
59
+ ctx.scale(1, yScalar);
60
+ }
58
61
  ctx.save();
59
62
  if (region.reversed === true) {
60
63
  ctx.scale(-1, 1);
@@ -82,6 +82,7 @@ export default function stateModelFactory(configSchema: AnyConfigurationSchemaTy
82
82
  useLogScale: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
83
83
  colorScheme: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
84
84
  activeNormalization: import("mobx-state-tree").IType<string | undefined, string, string>;
85
+ mode: import("mobx-state-tree").IType<string | undefined, string, string>;
85
86
  }, {
86
87
  rendererTypeName: string;
87
88
  error: unknown;
@@ -220,6 +221,7 @@ export default function stateModelFactory(configSchema: AnyConfigurationSchemaTy
220
221
  setColorScheme(f?: string): void;
221
222
  setActiveNormalization(f: string): void;
222
223
  setAvailableNormalizations(f: string[]): void;
224
+ setMode(arg: string): void;
223
225
  } & {
224
226
  trackMenuItems(): (import("@jbrowse/core/ui").MenuDivider | import("@jbrowse/core/ui").MenuSubHeader | import("@jbrowse/core/ui").NormalMenuItem | import("@jbrowse/core/ui").CheckboxMenuItem | import("@jbrowse/core/ui").RadioMenuItem | import("@jbrowse/core/ui").SubMenuItem | {
225
227
  label: string;
@@ -232,6 +234,8 @@ export default function stateModelFactory(configSchema: AnyConfigurationSchemaTy
232
234
  type: string;
233
235
  subMenu: {
234
236
  label: string;
237
+ type: string;
238
+ checked: boolean;
235
239
  onClick: () => void;
236
240
  }[];
237
241
  checked?: undefined;
@@ -16,6 +16,7 @@ function stateModelFactory(configSchema) {
16
16
  useLogScale: false,
17
17
  colorScheme: mobx_state_tree_1.types.maybe(mobx_state_tree_1.types.string),
18
18
  activeNormalization: 'KR',
19
+ mode: 'triangular',
19
20
  }))
20
21
  .volatile(() => ({
21
22
  availableNormalizations: undefined,
@@ -39,6 +40,7 @@ function stateModelFactory(configSchema) {
39
40
  return {
40
41
  ...superRenderProps(),
41
42
  config,
43
+ displayHeight: self.mode === 'adjust' ? self.height : undefined,
42
44
  normalization: self.activeNormalization,
43
45
  rpcDriverName: self.rpcDriverName,
44
46
  displayModel: self,
@@ -65,6 +67,9 @@ function stateModelFactory(configSchema) {
65
67
  setAvailableNormalizations(f) {
66
68
  self.availableNormalizations = f;
67
69
  },
70
+ setMode(arg) {
71
+ self.mode = arg;
72
+ },
68
73
  }))
69
74
  .views(self => {
70
75
  const { trackMenuItems: superTrackMenuItems } = self;
@@ -80,30 +85,60 @@ function stateModelFactory(configSchema) {
80
85
  self.setUseLogScale(!self.useLogScale);
81
86
  },
82
87
  },
88
+ {
89
+ label: 'Rendering mode',
90
+ type: 'subMenu',
91
+ subMenu: [
92
+ {
93
+ label: 'Triangular',
94
+ type: 'radio',
95
+ checked: self.mode === 'triangular',
96
+ onClick: () => {
97
+ self.setMode('triangular');
98
+ },
99
+ },
100
+ {
101
+ label: 'Adjust to height of display',
102
+ type: 'radio',
103
+ checked: self.mode === 'adjust',
104
+ onClick: () => {
105
+ self.setMode('adjust');
106
+ },
107
+ },
108
+ ],
109
+ },
83
110
  {
84
111
  label: 'Color scheme',
85
112
  type: 'subMenu',
86
113
  subMenu: [
87
114
  {
88
115
  label: 'Fall',
116
+ type: 'radio',
117
+ checked: self.colorScheme === 'fall',
89
118
  onClick: () => {
90
119
  self.setColorScheme('fall');
91
120
  },
92
121
  },
93
122
  {
94
123
  label: 'Viridis',
124
+ type: 'radio',
125
+ checked: self.colorScheme === 'viridis',
95
126
  onClick: () => {
96
127
  self.setColorScheme('viridis');
97
128
  },
98
129
  },
99
130
  {
100
131
  label: 'Juicebox',
132
+ type: 'radio',
133
+ checked: self.colorScheme === 'juicebox',
101
134
  onClick: () => {
102
135
  self.setColorScheme('juicebox');
103
136
  },
104
137
  },
105
138
  {
106
- label: 'Clear',
139
+ label: 'Default',
140
+ type: 'radio',
141
+ checked: self.colorScheme === undefined,
107
142
  onClick: () => {
108
143
  self.setColorScheme(undefined);
109
144
  },
@@ -133,7 +168,7 @@ function stateModelFactory(configSchema) {
133
168
  label: 'Normalization scheme',
134
169
  subMenu: self.availableNormalizations.map(norm => ({
135
170
  label: norm,
136
- type: 'checkbox',
171
+ type: 'radio',
137
172
  checked: norm === self.activeNormalization,
138
173
  onClick: () => {
139
174
  self.setActiveNormalization(norm);
@@ -21,6 +21,7 @@ export interface RenderArgsDeserialized extends ServerSideRenderArgsDeserialized
21
21
  highResolutionScaling: number;
22
22
  resolution: number;
23
23
  adapterConfig: AnyConfigurationModel;
24
+ displayHeight?: number;
24
25
  }
25
26
  export interface RenderArgsDeserializedWithFeatures extends RenderArgsDeserialized {
26
27
  features: HicFeature[];
@@ -31,18 +32,18 @@ export type ResultsDeserialized = ServerSideResultsDeserialized;
31
32
  export default class HicRenderer extends ServerSideRendererType {
32
33
  supportsSVG: boolean;
33
34
  render(renderProps: RenderArgsDeserialized): Promise<{
34
- height: any;
35
+ height: number;
35
36
  width: number;
36
37
  canvasRecordedData: any;
37
38
  reactElement?: React.ReactElement;
38
39
  html?: string;
39
40
  } | {
40
- height: any;
41
+ height: number;
41
42
  width: number;
42
43
  reactElement: import("react/jsx-runtime").JSX.Element;
43
44
  html?: string;
44
45
  } | {
45
- height: any;
46
+ height: number;
46
47
  width: number;
47
48
  imageData: any;
48
49
  reactElement?: React.ReactElement;
@@ -1,4 +1,3 @@
1
- import { readConfObject } from '@jbrowse/core/configuration';
2
1
  import { getAdapter } from '@jbrowse/core/data_adapters/dataAdapterCache';
3
2
  import ServerSideRendererType from '@jbrowse/core/pluggableElementTypes/renderers/ServerSideRendererType';
4
3
  import { renderToAbstractCanvas } from '@jbrowse/core/util/offscreenCanvasUtils';
@@ -10,14 +9,16 @@ export default class HicRenderer extends ServerSideRendererType {
10
9
  this.supportsSVG = true;
11
10
  }
12
11
  async render(renderProps) {
13
- const { config, regions, bpPerPx } = renderProps;
12
+ const { displayHeight, regions, bpPerPx } = renderProps;
14
13
  const region = regions[0];
15
14
  const width = (region.end - region.start) / bpPerPx;
16
- const height = readConfObject(config, 'maxHeight');
15
+ const hyp = width / 2;
16
+ const height = displayHeight !== null && displayHeight !== void 0 ? displayHeight : hyp;
17
17
  const features = await this.getFeatures(renderProps);
18
18
  const { makeImageData } = await import('./makeImageData');
19
19
  const res = await renderToAbstractCanvas(width, height, renderProps, ctx => makeImageData(ctx, {
20
20
  ...renderProps,
21
+ yScalar: height / Math.max(height, hyp),
21
22
  features,
22
23
  pluginManager: this.pluginManager,
23
24
  }));
@@ -6,5 +6,6 @@ export interface RenderArgs extends ServerSideRenderArgs {
6
6
  regions: Region[];
7
7
  }
8
8
  export declare function makeImageData(ctx: CanvasRenderingContext2D, props: RenderArgsDeserializedWithFeatures & {
9
+ yScalar: number;
9
10
  pluginManager: PluginManager;
10
11
  }): Promise<undefined>;
@@ -6,7 +6,7 @@ import { interpolateRgbBasis } from '@mui/x-charts-vendor/d3-interpolate';
6
6
  import { scaleSequential, scaleSequentialLog, } from '@mui/x-charts-vendor/d3-scale';
7
7
  import interpolateViridis from './viridis';
8
8
  export async function makeImageData(ctx, props) {
9
- const { features, config, bpPerPx, stopToken, resolution, sessionId, adapterConfig, useLogScale, colorScheme, regions, pluginManager, } = props;
9
+ const { features, config, bpPerPx, stopToken, resolution, sessionId, adapterConfig, useLogScale, colorScheme, regions, pluginManager, yScalar, } = props;
10
10
  const { statusCallback = () => { } } = props;
11
11
  statusCallback('Drawing Hi-C matrix');
12
12
  const region = regions[0];
@@ -49,6 +49,9 @@ export async function makeImageData(ctx, props) {
49
49
  const scale = useLogScale
50
50
  ? scaleSequentialLog(x1).domain([1, m])
51
51
  : scaleSequential(x1).domain([0, m]);
52
+ if (yScalar) {
53
+ ctx.scale(1, yScalar);
54
+ }
52
55
  ctx.save();
53
56
  if (region.reversed === true) {
54
57
  ctx.scale(-1, 1);
@@ -82,6 +82,7 @@ export default function stateModelFactory(configSchema: AnyConfigurationSchemaTy
82
82
  useLogScale: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
83
83
  colorScheme: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
84
84
  activeNormalization: import("mobx-state-tree").IType<string | undefined, string, string>;
85
+ mode: import("mobx-state-tree").IType<string | undefined, string, string>;
85
86
  }, {
86
87
  rendererTypeName: string;
87
88
  error: unknown;
@@ -220,6 +221,7 @@ export default function stateModelFactory(configSchema: AnyConfigurationSchemaTy
220
221
  setColorScheme(f?: string): void;
221
222
  setActiveNormalization(f: string): void;
222
223
  setAvailableNormalizations(f: string[]): void;
224
+ setMode(arg: string): void;
223
225
  } & {
224
226
  trackMenuItems(): (import("@jbrowse/core/ui").MenuDivider | import("@jbrowse/core/ui").MenuSubHeader | import("@jbrowse/core/ui").NormalMenuItem | import("@jbrowse/core/ui").CheckboxMenuItem | import("@jbrowse/core/ui").RadioMenuItem | import("@jbrowse/core/ui").SubMenuItem | {
225
227
  label: string;
@@ -232,6 +234,8 @@ export default function stateModelFactory(configSchema: AnyConfigurationSchemaTy
232
234
  type: string;
233
235
  subMenu: {
234
236
  label: string;
237
+ type: string;
238
+ checked: boolean;
235
239
  onClick: () => void;
236
240
  }[];
237
241
  checked?: undefined;
@@ -13,6 +13,7 @@ export default function stateModelFactory(configSchema) {
13
13
  useLogScale: false,
14
14
  colorScheme: types.maybe(types.string),
15
15
  activeNormalization: 'KR',
16
+ mode: 'triangular',
16
17
  }))
17
18
  .volatile(() => ({
18
19
  availableNormalizations: undefined,
@@ -36,6 +37,7 @@ export default function stateModelFactory(configSchema) {
36
37
  return {
37
38
  ...superRenderProps(),
38
39
  config,
40
+ displayHeight: self.mode === 'adjust' ? self.height : undefined,
39
41
  normalization: self.activeNormalization,
40
42
  rpcDriverName: self.rpcDriverName,
41
43
  displayModel: self,
@@ -62,6 +64,9 @@ export default function stateModelFactory(configSchema) {
62
64
  setAvailableNormalizations(f) {
63
65
  self.availableNormalizations = f;
64
66
  },
67
+ setMode(arg) {
68
+ self.mode = arg;
69
+ },
65
70
  }))
66
71
  .views(self => {
67
72
  const { trackMenuItems: superTrackMenuItems } = self;
@@ -77,30 +82,60 @@ export default function stateModelFactory(configSchema) {
77
82
  self.setUseLogScale(!self.useLogScale);
78
83
  },
79
84
  },
85
+ {
86
+ label: 'Rendering mode',
87
+ type: 'subMenu',
88
+ subMenu: [
89
+ {
90
+ label: 'Triangular',
91
+ type: 'radio',
92
+ checked: self.mode === 'triangular',
93
+ onClick: () => {
94
+ self.setMode('triangular');
95
+ },
96
+ },
97
+ {
98
+ label: 'Adjust to height of display',
99
+ type: 'radio',
100
+ checked: self.mode === 'adjust',
101
+ onClick: () => {
102
+ self.setMode('adjust');
103
+ },
104
+ },
105
+ ],
106
+ },
80
107
  {
81
108
  label: 'Color scheme',
82
109
  type: 'subMenu',
83
110
  subMenu: [
84
111
  {
85
112
  label: 'Fall',
113
+ type: 'radio',
114
+ checked: self.colorScheme === 'fall',
86
115
  onClick: () => {
87
116
  self.setColorScheme('fall');
88
117
  },
89
118
  },
90
119
  {
91
120
  label: 'Viridis',
121
+ type: 'radio',
122
+ checked: self.colorScheme === 'viridis',
92
123
  onClick: () => {
93
124
  self.setColorScheme('viridis');
94
125
  },
95
126
  },
96
127
  {
97
128
  label: 'Juicebox',
129
+ type: 'radio',
130
+ checked: self.colorScheme === 'juicebox',
98
131
  onClick: () => {
99
132
  self.setColorScheme('juicebox');
100
133
  },
101
134
  },
102
135
  {
103
- label: 'Clear',
136
+ label: 'Default',
137
+ type: 'radio',
138
+ checked: self.colorScheme === undefined,
104
139
  onClick: () => {
105
140
  self.setColorScheme(undefined);
106
141
  },
@@ -130,7 +165,7 @@ export default function stateModelFactory(configSchema) {
130
165
  label: 'Normalization scheme',
131
166
  subMenu: self.availableNormalizations.map(norm => ({
132
167
  label: norm,
133
- type: 'checkbox',
168
+ type: 'radio',
134
169
  checked: norm === self.activeNormalization,
135
170
  onClick: () => {
136
171
  self.setActiveNormalization(norm);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@jbrowse/plugin-hic",
3
- "version": "3.0.3",
3
+ "version": "3.0.5",
4
4
  "description": "JBrowse 2 hic adapters, tracks, etc.",
5
5
  "keywords": [
6
6
  "jbrowse",
@@ -36,8 +36,8 @@
36
36
  "clean": "rimraf dist esm *.tsbuildinfo"
37
37
  },
38
38
  "dependencies": {
39
- "@jbrowse/core": "^3.0.3",
40
- "@jbrowse/plugin-linear-genome-view": "^3.0.3",
39
+ "@jbrowse/core": "^3.0.5",
40
+ "@jbrowse/plugin-linear-genome-view": "^3.0.5",
41
41
  "@mui/material": "^6.0.0",
42
42
  "@mui/x-charts-vendor": "^7.12.0",
43
43
  "hic-straw": "^2.0.3",
@@ -55,5 +55,5 @@
55
55
  "publishConfig": {
56
56
  "access": "public"
57
57
  },
58
- "gitHead": "f516540428282351d26e46743e69a724651bfb2c"
58
+ "gitHead": "a03749efe19e51609922272b845a331897346789"
59
59
  }