@vitessce/vit-s 2.0.3 → 3.0.1

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.
Files changed (215) hide show
  1. package/dist/index.js +44072 -0
  2. package/dist-tsc/CallbackPublisher.d.ts +18 -0
  3. package/dist-tsc/CallbackPublisher.d.ts.map +1 -0
  4. package/dist-tsc/CallbackPublisher.js +62 -0
  5. package/dist-tsc/LoadingIndicator.d.ts +2 -0
  6. package/dist-tsc/LoadingIndicator.d.ts.map +1 -0
  7. package/dist-tsc/LoadingIndicator.js +26 -0
  8. package/dist-tsc/TitleInfo.d.ts +2 -0
  9. package/dist-tsc/TitleInfo.d.ts.map +1 -0
  10. package/dist-tsc/TitleInfo.js +74 -0
  11. package/dist-tsc/VitS.d.ts +50 -0
  12. package/dist-tsc/VitS.d.ts.map +1 -0
  13. package/dist-tsc/VitS.js +139 -0
  14. package/dist-tsc/VitessceGrid.d.ts +23 -0
  15. package/dist-tsc/VitessceGrid.d.ts.map +1 -0
  16. package/dist-tsc/VitessceGrid.js +63 -0
  17. package/dist-tsc/VitessceGrid.test.d.ts +2 -0
  18. package/dist-tsc/VitessceGrid.test.d.ts.map +1 -0
  19. package/dist-tsc/VitessceGrid.test.js +43 -0
  20. package/dist-tsc/Warning.d.ts +2 -0
  21. package/dist-tsc/Warning.d.ts.map +1 -0
  22. package/dist-tsc/Warning.js +45 -0
  23. package/dist-tsc/classNames.d.ts +8 -0
  24. package/dist-tsc/classNames.d.ts.map +1 -0
  25. package/dist-tsc/classNames.js +8 -0
  26. package/dist-tsc/data/AbstractLoader.d.ts +22 -0
  27. package/dist-tsc/data/AbstractLoader.d.ts.map +1 -0
  28. package/dist-tsc/data/AbstractLoader.js +18 -0
  29. package/dist-tsc/data/AbstractTwoStepLoader.d.ts +6 -0
  30. package/dist-tsc/data/AbstractTwoStepLoader.d.ts.map +1 -0
  31. package/dist-tsc/data/AbstractTwoStepLoader.js +7 -0
  32. package/dist-tsc/data/LoaderResult.d.ts +12 -0
  33. package/dist-tsc/data/LoaderResult.d.ts.map +1 -0
  34. package/dist-tsc/data/LoaderResult.js +12 -0
  35. package/dist-tsc/data/index.d.ts +4 -0
  36. package/dist-tsc/data/index.d.ts.map +1 -0
  37. package/dist-tsc/data/index.js +3 -0
  38. package/dist-tsc/data/loader-registry.d.ts +9 -0
  39. package/dist-tsc/data/loader-registry.d.ts.map +1 -0
  40. package/dist-tsc/data/loader-registry.js +27 -0
  41. package/dist-tsc/data-hook-utils.d.ts +65 -0
  42. package/dist-tsc/data-hook-utils.d.ts.map +1 -0
  43. package/dist-tsc/data-hook-utils.js +191 -0
  44. package/dist-tsc/data-hooks.d.ts +73 -0
  45. package/dist-tsc/data-hooks.d.ts.map +1 -0
  46. package/dist-tsc/data-hooks.js +254 -0
  47. package/dist-tsc/errors/AbstractLoaderError.d.ts +10 -0
  48. package/dist-tsc/errors/AbstractLoaderError.d.ts.map +1 -0
  49. package/dist-tsc/errors/AbstractLoaderError.js +13 -0
  50. package/dist-tsc/errors/DataSourceFetchError.d.ts +8 -0
  51. package/dist-tsc/errors/DataSourceFetchError.d.ts.map +1 -0
  52. package/dist-tsc/errors/DataSourceFetchError.js +13 -0
  53. package/dist-tsc/errors/DatasetNotFoundError.d.ts +6 -0
  54. package/dist-tsc/errors/DatasetNotFoundError.d.ts.map +1 -0
  55. package/dist-tsc/errors/DatasetNotFoundError.js +17 -0
  56. package/dist-tsc/errors/LoaderNotFoundError.d.ts +10 -0
  57. package/dist-tsc/errors/LoaderNotFoundError.d.ts.map +1 -0
  58. package/dist-tsc/errors/LoaderNotFoundError.js +17 -0
  59. package/dist-tsc/errors/LoaderValidationError.d.ts +10 -0
  60. package/dist-tsc/errors/LoaderValidationError.d.ts.map +1 -0
  61. package/dist-tsc/errors/LoaderValidationError.js +15 -0
  62. package/dist-tsc/errors/index.d.ts +6 -0
  63. package/dist-tsc/errors/index.d.ts.map +1 -0
  64. package/dist-tsc/errors/index.js +5 -0
  65. package/dist-tsc/hooks.d.ts +76 -0
  66. package/dist-tsc/hooks.d.ts.map +1 -0
  67. package/dist-tsc/hooks.js +262 -0
  68. package/dist-tsc/index.d.ts +12 -0
  69. package/dist-tsc/index.d.ts.map +1 -0
  70. package/dist-tsc/index.js +11 -17
  71. package/dist-tsc/mui-utils.d.ts +2 -0
  72. package/dist-tsc/mui-utils.d.ts.map +1 -0
  73. package/dist-tsc/mui-utils.js +44 -0
  74. package/dist-tsc/plugins.test.fixtures.d.ts +61 -0
  75. package/dist-tsc/plugins.test.fixtures.d.ts.map +1 -0
  76. package/dist-tsc/plugins.test.fixtures.js +76 -0
  77. package/dist-tsc/shared-mui/components.d.ts +2 -0
  78. package/dist-tsc/shared-mui/components.d.ts.map +1 -0
  79. package/dist-tsc/shared-mui/components.js +29 -0
  80. package/dist-tsc/shared-mui/container.d.ts +2 -0
  81. package/dist-tsc/shared-mui/container.d.ts.map +1 -0
  82. package/dist-tsc/shared-mui/container.js +211 -0
  83. package/dist-tsc/shared-mui/styles.d.ts +5 -0
  84. package/dist-tsc/shared-mui/styles.d.ts.map +1 -0
  85. package/dist-tsc/shared-mui/styles.js +109 -0
  86. package/dist-tsc/shared-plot-options/CellColorEncodingOption.d.ts +2 -0
  87. package/dist-tsc/shared-plot-options/CellColorEncodingOption.d.ts.map +1 -0
  88. package/dist-tsc/shared-plot-options/CellColorEncodingOption.js +17 -0
  89. package/dist-tsc/shared-plot-options/OptionSelect.d.ts +2 -0
  90. package/dist-tsc/shared-plot-options/OptionSelect.d.ts.map +1 -0
  91. package/dist-tsc/shared-plot-options/OptionSelect.js +12 -0
  92. package/dist-tsc/shared-plot-options/OptionsContainer.d.ts +2 -0
  93. package/dist-tsc/shared-plot-options/OptionsContainer.d.ts.map +1 -0
  94. package/dist-tsc/shared-plot-options/OptionsContainer.js +9 -0
  95. package/dist-tsc/shared-plot-options/index.d.ts +5 -0
  96. package/dist-tsc/shared-plot-options/index.d.ts.map +1 -0
  97. package/dist-tsc/shared-plot-options/index.js +4 -0
  98. package/dist-tsc/shared-plot-options/styles.d.ts +2 -0
  99. package/dist-tsc/shared-plot-options/styles.d.ts.map +1 -0
  100. package/dist-tsc/shared-plot-options/styles.js +48 -0
  101. package/dist-tsc/state/hooks.d.ts +242 -0
  102. package/dist-tsc/state/hooks.d.ts.map +1 -0
  103. package/dist-tsc/state/hooks.js +615 -0
  104. package/dist-tsc/title-styles.d.ts +2 -0
  105. package/dist-tsc/title-styles.d.ts.map +1 -0
  106. package/dist-tsc/title-styles.js +72 -0
  107. package/dist-tsc/view-config-utils.d.ts +31 -0
  108. package/dist-tsc/view-config-utils.d.ts.map +1 -0
  109. package/dist-tsc/view-config-utils.js +240 -0
  110. package/dist-tsc/view-config-utils.test.d.ts +2 -0
  111. package/dist-tsc/view-config-utils.test.d.ts.map +1 -0
  112. package/dist-tsc/view-config-utils.test.fixtures.d.ts +1049 -0
  113. package/dist-tsc/view-config-utils.test.fixtures.d.ts.map +1 -0
  114. package/dist-tsc/view-config-utils.test.fixtures.js +883 -0
  115. package/dist-tsc/view-config-utils.test.js +210 -0
  116. package/dist-tsc/vitessce-grid-layout/VitessceGridLayout.d.ts +8 -0
  117. package/dist-tsc/vitessce-grid-layout/VitessceGridLayout.d.ts.map +1 -0
  118. package/dist-tsc/vitessce-grid-layout/VitessceGridLayout.js +114 -0
  119. package/dist-tsc/vitessce-grid-layout/VitessceGridLayout.test.d.ts +2 -0
  120. package/dist-tsc/vitessce-grid-layout/VitessceGridLayout.test.d.ts.map +1 -0
  121. package/dist-tsc/vitessce-grid-layout/VitessceGridLayout.test.js +48 -0
  122. package/dist-tsc/vitessce-grid-layout/index.d.ts +2 -0
  123. package/dist-tsc/vitessce-grid-layout/index.d.ts.map +1 -0
  124. package/dist-tsc/vitessce-grid-layout/index.js +1 -0
  125. package/dist-tsc/vitessce-grid-layout/layout-utils.d.ts +15 -0
  126. package/dist-tsc/vitessce-grid-layout/layout-utils.d.ts.map +1 -0
  127. package/dist-tsc/vitessce-grid-layout/layout-utils.js +61 -0
  128. package/dist-tsc/vitessce-grid-layout/layout-utils.test.d.ts +2 -0
  129. package/dist-tsc/vitessce-grid-layout/layout-utils.test.d.ts.map +1 -0
  130. package/dist-tsc/vitessce-grid-layout/layout-utils.test.js +149 -0
  131. package/dist-tsc/vitessce-grid-utils.d.ts +13 -0
  132. package/dist-tsc/vitessce-grid-utils.d.ts.map +1 -0
  133. package/dist-tsc/vitessce-grid-utils.js +141 -0
  134. package/package.json +25 -11
  135. package/src/CallbackPublisher.js +7 -11
  136. package/src/LoadingIndicator.js +1 -2
  137. package/src/TitleInfo.js +12 -85
  138. package/src/VitS.js +143 -85
  139. package/src/VitessceGrid.js +35 -21
  140. package/src/VitessceGrid.test.jsx +23 -8
  141. package/src/Warning.js +4 -4
  142. package/src/data/AbstractLoader.js +2 -25
  143. package/src/data/AbstractTwoStepLoader.js +1 -1
  144. package/src/data/LoaderResult.js +5 -0
  145. package/src/data/index.js +3 -3
  146. package/src/data/loader-registry.js +22 -13
  147. package/src/data-hook-utils.js +119 -86
  148. package/src/data-hooks.js +150 -131
  149. package/src/errors/DataSourceFetchError.js +2 -2
  150. package/src/errors/DatasetNotFoundError.js +1 -1
  151. package/src/errors/LoaderNotFoundError.js +1 -1
  152. package/src/errors/LoaderValidationError.js +1 -1
  153. package/src/errors/index.js +5 -6
  154. package/src/hooks.js +81 -26
  155. package/src/index.js +23 -46
  156. package/src/mui-utils.js +52 -0
  157. package/src/shared-mui/components.js +10 -8
  158. package/src/shared-mui/container.js +1 -1
  159. package/src/shared-mui/styles.js +5 -2
  160. package/src/shared-plot-options/CellColorEncodingOption.js +3 -4
  161. package/src/shared-plot-options/OptionSelect.js +3 -3
  162. package/src/shared-plot-options/OptionsContainer.js +2 -5
  163. package/src/shared-plot-options/index.js +4 -4
  164. package/src/shared-plot-options/styles.js +2 -2
  165. package/src/state/hooks.js +75 -23
  166. package/src/title-styles.js +73 -0
  167. package/src/view-config-utils.js +54 -98
  168. package/src/view-config-utils.test.jsx +223 -0
  169. package/src/vitessce-grid-layout/VitessceGridLayout.js +51 -30
  170. package/src/vitessce-grid-layout/VitessceGridLayout.test.jsx +17 -9
  171. package/src/vitessce-grid-layout/index.js +1 -1
  172. package/src/vitessce-grid-layout/layout-utils.js +1 -1
  173. package/src/vitessce-grid-layout/layout-utils.test.js +2 -1
  174. package/src/vitessce-grid-utils.js +27 -15
  175. package/dist/index.mjs +0 -84801
  176. package/src/component-registry.js +0 -21
  177. package/src/errors/OptionsValidationError.js +0 -25
  178. package/src/file-options-schemas-legacy.js +0 -139
  179. package/src/file-options-schemas-legacy.test.js +0 -138
  180. package/src/file-options-schemas.js +0 -327
  181. package/src/file-options-schemas.test.js +0 -26
  182. package/src/joint-file-types-legacy.js +0 -298
  183. package/src/joint-file-types-legacy.test.js +0 -412
  184. package/src/joint-file-types.js +0 -171
  185. package/src/joint-file-types.test.js +0 -144
  186. package/src/json-schemas.js +0 -9
  187. package/src/plugins.js +0 -186
  188. package/src/plugins.test.js +0 -42
  189. package/src/schemas/config-0.1.0.schema.json +0 -85
  190. package/src/schemas/config-1.0.0.schema.json +0 -733
  191. package/src/schemas/config-1.0.1.schema.json +0 -909
  192. package/src/schemas/config-1.0.10.schema.json +0 -969
  193. package/src/schemas/config-1.0.11.schema.json +0 -990
  194. package/src/schemas/config-1.0.12.schema.json +0 -997
  195. package/src/schemas/config-1.0.13.schema.json +0 -1013
  196. package/src/schemas/config-1.0.14.schema.json +0 -1048
  197. package/src/schemas/config-1.0.15.schema.json +0 -1048
  198. package/src/schemas/config-1.0.16.schema.json +0 -1069
  199. package/src/schemas/config-1.0.16.schema.test.js +0 -32
  200. package/src/schemas/config-1.0.2.schema.json +0 -911
  201. package/src/schemas/config-1.0.3.schema.json +0 -911
  202. package/src/schemas/config-1.0.4.schema.json +0 -949
  203. package/src/schemas/config-1.0.5.schema.json +0 -949
  204. package/src/schemas/config-1.0.6.schema.json +0 -950
  205. package/src/schemas/config-1.0.7.schema.json +0 -950
  206. package/src/schemas/config-1.0.8.schema.json +0 -966
  207. package/src/schemas/config-1.0.9.schema.json +0 -965
  208. package/src/schemas/obsSets.schema.js +0 -195
  209. package/src/schemas/obsSetsTabular.schema.js +0 -39
  210. package/src/schemas/raster.schema.js +0 -121
  211. package/src/schemas/schema-schema.sh +0 -34
  212. package/src/schemas/schema.test-old.js +0 -49
  213. package/src/view-config-upgraders.js +0 -628
  214. package/src/view-config-utils.test.js +0 -95
  215. package/src/view-config-versions.js +0 -68
@@ -0,0 +1,210 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ /* eslint-disable camelcase */
3
+ import { describe, it, expect } from 'vitest';
4
+ import React from 'react';
5
+ import { z } from '@vitessce/schemas';
6
+ import { PluginViewType, PluginCoordinationType } from '@vitessce/plugins';
7
+ import { getExistingScopesForCoordinationType, initialize, } from './view-config-utils.js';
8
+ function FakeComponent(props) {
9
+ const { text } = props;
10
+ return _jsx("span", { children: text });
11
+ }
12
+ const jointFileTypes = [];
13
+ const coordinationTypes = [
14
+ new PluginCoordinationType('dataset', null, z.string().nullable()),
15
+ new PluginCoordinationType('embeddingTargetX', 0, z.number()),
16
+ new PluginCoordinationType('embeddingTargetY', 0, z.number()),
17
+ new PluginCoordinationType('embeddingZoom', 3, z.number()),
18
+ new PluginCoordinationType('embeddingType', null, z.string().nullable()),
19
+ ];
20
+ const viewTypes = [
21
+ new PluginViewType('description', FakeComponent, ['dataset']),
22
+ new PluginViewType('scatterplot', FakeComponent, ['dataset', 'embeddingType', 'embeddingZoom', 'embeddingTargetX', 'embeddingTargetY']),
23
+ ];
24
+ describe('src/app/view-config-utils.js', () => {
25
+ describe('getExistingScopesForCoordinationType', () => {
26
+ it('gets all scope names for a particular coordination type', () => {
27
+ const config = {
28
+ coordinationSpace: {
29
+ dataset: {
30
+ A: 'my-dataset-1',
31
+ B: 'my-dataset-2',
32
+ },
33
+ },
34
+ layout: [
35
+ {
36
+ coordinationScopes: {
37
+ dataset: 'A',
38
+ },
39
+ },
40
+ {
41
+ coordinationScopes: {
42
+ dataset: 'C',
43
+ },
44
+ },
45
+ ],
46
+ };
47
+ expect(getExistingScopesForCoordinationType(config, 'dataset')).toEqual(['A', 'B', 'C']);
48
+ });
49
+ });
50
+ describe('initialize', () => {
51
+ it('initializes coordination space and component coordination scopes when initStrategy is auto', () => {
52
+ const preInitializationConfig = {
53
+ version: '1.0.16',
54
+ name: 'My config name',
55
+ description: 'My config description',
56
+ initStrategy: 'auto',
57
+ coordinationSpace: {
58
+ embeddingTargetX: {
59
+ A: 0,
60
+ },
61
+ embeddingTargetY: {
62
+ A: 0,
63
+ },
64
+ embeddingType: {
65
+ 't-SNE': 't-SNE',
66
+ },
67
+ },
68
+ datasets: [
69
+ {
70
+ files: [],
71
+ name: 'A',
72
+ uid: 'A',
73
+ },
74
+ ],
75
+ layout: [
76
+ {
77
+ component: 'description',
78
+ coordinationScopes: {},
79
+ h: 2,
80
+ w: 3,
81
+ x: 9,
82
+ y: 0,
83
+ },
84
+ {
85
+ component: 'scatterplot',
86
+ coordinationScopes: {
87
+ embeddingTargetX: 'A',
88
+ embeddingTargetY: 'A',
89
+ embeddingType: 't-SNE',
90
+ },
91
+ h: 4,
92
+ w: 5,
93
+ x: 0,
94
+ y: 2,
95
+ },
96
+ ],
97
+ };
98
+ const initializedViewConfig = {
99
+ version: '1.0.16',
100
+ uid: 'A',
101
+ name: 'My config name',
102
+ description: 'My config description',
103
+ initStrategy: 'auto',
104
+ coordinationSpace: {
105
+ dataset: {
106
+ A: 'A',
107
+ },
108
+ embeddingTargetX: {
109
+ A: 0,
110
+ },
111
+ embeddingTargetY: {
112
+ A: 0,
113
+ },
114
+ embeddingType: {
115
+ 't-SNE': 't-SNE',
116
+ },
117
+ embeddingZoom: {
118
+ A: 3,
119
+ },
120
+ },
121
+ datasets: [
122
+ {
123
+ files: [],
124
+ name: 'A',
125
+ uid: 'A',
126
+ },
127
+ ],
128
+ layout: [
129
+ {
130
+ component: 'description',
131
+ coordinationScopes: {
132
+ dataset: 'A',
133
+ },
134
+ h: 2,
135
+ uid: 'A',
136
+ w: 3,
137
+ x: 9,
138
+ y: 0,
139
+ },
140
+ {
141
+ component: 'scatterplot',
142
+ coordinationScopes: {
143
+ dataset: 'A',
144
+ embeddingTargetX: 'A',
145
+ embeddingTargetY: 'A',
146
+ embeddingType: 't-SNE',
147
+ embeddingZoom: 'A',
148
+ },
149
+ h: 4,
150
+ uid: 'B',
151
+ w: 5,
152
+ x: 0,
153
+ y: 2,
154
+ },
155
+ ],
156
+ };
157
+ expect(initialize(preInitializationConfig, jointFileTypes, coordinationTypes, viewTypes))
158
+ .toEqual(initializedViewConfig);
159
+ });
160
+ it('does not initialize when initStrategy is none', () => {
161
+ const preInitializationConfig = {
162
+ version: '1.0.16',
163
+ name: 'My config name',
164
+ description: 'My config description',
165
+ initStrategy: 'none',
166
+ coordinationSpace: {
167
+ embeddingTargetX: {
168
+ A: 0,
169
+ },
170
+ embeddingTargetY: {
171
+ A: 0,
172
+ },
173
+ embeddingType: {
174
+ 't-SNE': 't-SNE',
175
+ },
176
+ },
177
+ datasets: [
178
+ {
179
+ files: [],
180
+ name: 'A',
181
+ uid: 'A',
182
+ },
183
+ ],
184
+ layout: [
185
+ {
186
+ component: 'description',
187
+ coordinationScopes: {},
188
+ h: 2,
189
+ w: 3,
190
+ x: 9,
191
+ y: 0,
192
+ },
193
+ {
194
+ component: 'scatterplot',
195
+ coordinationScopes: {
196
+ embeddingTargetX: 'A',
197
+ embeddingTargetY: 'A',
198
+ embeddingType: 't-SNE',
199
+ },
200
+ h: 4,
201
+ w: 5,
202
+ x: 0,
203
+ y: 2,
204
+ },
205
+ ],
206
+ };
207
+ expect(initialize(preInitializationConfig, jointFileTypes, coordinationTypes, viewTypes).coordinationSpace).toEqual(preInitializationConfig.coordinationSpace);
208
+ });
209
+ });
210
+ });
@@ -0,0 +1,8 @@
1
+ export function VitessceGridLayout(props: any): any;
2
+ export namespace VitessceGridLayout {
3
+ namespace defaultProps {
4
+ const padding: number;
5
+ const margin: number;
6
+ }
7
+ }
8
+ //# sourceMappingURL=VitessceGridLayout.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"VitessceGridLayout.d.ts","sourceRoot":"","sources":["../../src/vitessce-grid-layout/VitessceGridLayout.js"],"names":[],"mappings":"AAeA,oDA8JC"}
@@ -0,0 +1,114 @@
1
+ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import React, { useState, useMemo, useCallback } from 'react';
3
+ import { Responsive, WidthProvider } from 'react-grid-layout-with-lodash';
4
+ import { isEqual } from 'lodash-es';
5
+ import { getMaxRows, resolveLayout } from './layout-utils.js';
6
+ const ResponsiveGridLayout = WidthProvider(Responsive);
7
+ class ResponsiveHeightGridLayout extends ResponsiveGridLayout {
8
+ componentDidUpdate(prevProps) {
9
+ if (this.props.height !== prevProps.height) {
10
+ this.onWindowResize();
11
+ }
12
+ }
13
+ }
14
+ export function VitessceGridLayout(props) {
15
+ const { layout, viewTypes, padding, margin: marginProp, draggableHandle: draggableHandleClass, onResize, onResizeStop, rowHeight, theme, height, onRemoveComponent, onLayoutChange: onLayoutChangeProp, isBounded, } = props;
16
+ const getComponent = useCallback((viewType) => {
17
+ if (Array.isArray(viewTypes)) {
18
+ const matchingViewType = viewTypes.find(v => v.name === viewType);
19
+ if (matchingViewType) {
20
+ return matchingViewType.component;
21
+ }
22
+ }
23
+ return () => null;
24
+ }, [viewTypes]);
25
+ const draggableHandle = `.${draggableHandleClass}`;
26
+ // If layout changes, update grid components.
27
+ const { cols: gridCols, layouts: gridLayouts, breakpoints: gridBreakpoints, components: gridComponents, } = useMemo(() => resolveLayout(layout), [layout]);
28
+ const containerPadding = useMemo(() => ([padding, padding]), [padding]);
29
+ const margin = useMemo(() => ([marginProp, marginProp]), [marginProp]);
30
+ const maxRows = getMaxRows(gridLayouts);
31
+ // Inline CSS is generally avoided, but this saves the end-user a little work,
32
+ // and prevents class names from getting out of sync.
33
+ const style = (_jsx("style", { children: `
34
+ ${draggableHandle} {
35
+ cursor: grab;
36
+ }
37
+ ${draggableHandle}:active {
38
+ cursor: grabbing;
39
+ }
40
+ ` }));
41
+ // A bit of hacky feeling stuff to prevent users from stacking elements and forcing the
42
+ // grid boundary to change even when isBounded is set to true. It seems like react-grid-layout
43
+ // should support this through isBounded and maxRows, but neither of these actually works for the
44
+ // edge case where a user drags one element above another and forces the first element downwards.
45
+ //
46
+ // Additionally, react-grid-layout doesn't revert if you don't save a new/changed layouts. If you
47
+ // wish to do this, first you have to save the new layouts and render the grid with it, and then
48
+ // you can revert to the original layouts. Thus, we need one state for a temporary grid layout,
49
+ // which gets called on every onLayoutChange. If the grid height is still valid, we then call
50
+ // onValidLayoutChange, otherwise we call onValidLayoutChange with lastValidGridLayouts.
51
+ //
52
+ // See the following GitHub issue for more information.
53
+ // https://github.com/react-grid-layout/react-grid-layout/issues/1104#issuecomment-827785217
54
+ const [tempGridLayouts, setTempGridLayouts] = useState(null);
55
+ const [lastValidGridLayouts, setLastValidGridLayouts] = useState(gridLayouts);
56
+ const onValidLayoutChange = useCallback((newLayout) => {
57
+ if (newLayout.length === Object.entries(gridComponents).length) {
58
+ const newComponentProps = {};
59
+ newLayout.forEach((nextC) => {
60
+ const id = nextC.i;
61
+ const prevC = gridComponents[id];
62
+ if (prevC) {
63
+ const nextProps = {
64
+ x: nextC.x, y: nextC.y, w: nextC.w, h: nextC.h,
65
+ };
66
+ const prevProps = {
67
+ x: prevC.x, y: prevC.y, w: prevC.w, h: prevC.h,
68
+ };
69
+ if (!isEqual(nextProps, prevProps)) {
70
+ newComponentProps[id] = nextProps;
71
+ }
72
+ }
73
+ });
74
+ if (Object.keys(newComponentProps).length > 0) {
75
+ onLayoutChangeProp(newComponentProps);
76
+ }
77
+ }
78
+ }, [gridComponents, onLayoutChangeProp]);
79
+ const onLayoutChange = useCallback((newLayout, allLayouts) => {
80
+ // We first need to set the new layout to the potentially-invalid allLayouts
81
+ // (see comments above about react-grid-layout limitations).
82
+ setTempGridLayouts(allLayouts);
83
+ // Then we wait 50ms and validate/set the new layout.
84
+ setTimeout(() => {
85
+ if (!isBounded || getMaxRows({ ID: newLayout }) <= maxRows) {
86
+ // Good, new layout was valid with respect to isBounded, so set in parent.
87
+ onValidLayoutChange(newLayout);
88
+ setLastValidGridLayouts(allLayouts);
89
+ }
90
+ else {
91
+ // Bad, new layout was not valid with respect to isBounded.
92
+ onValidLayoutChange(lastValidGridLayouts);
93
+ }
94
+ setTempGridLayouts(null);
95
+ }, 50);
96
+ }, [isBounded, lastValidGridLayouts, maxRows, onValidLayoutChange]);
97
+ const saveCurrentLayouts = useCallback(() => {
98
+ setLastValidGridLayouts(gridLayouts);
99
+ }, [gridLayouts]);
100
+ const layoutChildren = useMemo(() => Object.values(gridComponents).map((v) => {
101
+ const Component = getComponent(v.component);
102
+ const removeGridComponent = () => {
103
+ onRemoveComponent(v.uid);
104
+ };
105
+ return (_jsx("div", { children: _jsx(Component, { ...v.props, uuid: v.uid, coordinationScopes: v.coordinationScopes, coordinationScopesBy: v.coordinationScopesBy, theme: theme, removeGridComponent: removeGridComponent }) }, v.uid));
106
+ }), [gridComponents, getComponent, onRemoveComponent, theme]);
107
+ return (gridLayouts && gridComponents && gridBreakpoints && gridCols) && (_jsxs(_Fragment, { children: [style, _jsx(ResponsiveHeightGridLayout, { className: "layout", cols: gridCols, layouts: tempGridLayouts || gridLayouts, breakpoints: gridBreakpoints, height: height, rowHeight: rowHeight
108
+ || ((window.innerHeight - 2 * padding - (maxRows - 1) * margin)
109
+ / maxRows), containerPadding: containerPadding, margin: margin, draggableHandle: draggableHandle, onLayoutChange: onLayoutChange, isBounded: isBounded, onResizeStart: saveCurrentLayouts, onDragStart: saveCurrentLayouts, onResize: onResize, onResizeStop: onResizeStop, children: layoutChildren })] }));
110
+ }
111
+ VitessceGridLayout.defaultProps = {
112
+ padding: 10,
113
+ margin: 10,
114
+ };
@@ -0,0 +1,2 @@
1
+ export {};
2
+ //# sourceMappingURL=VitessceGridLayout.test.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"VitessceGridLayout.test.d.ts","sourceRoot":"","sources":["../../src/vitessce-grid-layout/VitessceGridLayout.test.jsx"],"names":[],"mappings":""}
@@ -0,0 +1,48 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import { describe, it, expect, afterEach } from 'vitest';
3
+ import '@testing-library/jest-dom';
4
+ import { cleanup, render, screen } from '@testing-library/react';
5
+ import React from 'react';
6
+ import { PluginViewType } from '@vitessce/plugins';
7
+ import { VitessceGridLayout } from './VitessceGridLayout.js';
8
+ afterEach(() => {
9
+ cleanup();
10
+ });
11
+ function FakeComponent(props) {
12
+ const { text } = props;
13
+ return _jsx("span", { children: text });
14
+ }
15
+ const layoutJson = {
16
+ columns: {
17
+ 600: [0, 2, 4, 8],
18
+ },
19
+ components: [
20
+ {
21
+ component: 'FakeComponent',
22
+ uid: 'fake',
23
+ props: { text: 'Hello World' },
24
+ x: 0,
25
+ y: 0,
26
+ w: 2,
27
+ },
28
+ ],
29
+ };
30
+ describe('VitessceGridLayout.js', () => {
31
+ describe('<VitessceGridLayout />', () => {
32
+ it('mount() works', async () => {
33
+ const viewTypes = [new PluginViewType('FakeComponent', FakeComponent, [])];
34
+ const { container } = render(_jsx(VitessceGridLayout, { layout: layoutJson, viewTypes: viewTypes, draggableHandle: ".my-handle" }));
35
+ expect(await screen.findByText('Hello World'));
36
+ expect(container.querySelectorAll('.react-grid-item span:not(.react-resizable-handle)').length).toEqual(1);
37
+ const style = container.querySelectorAll('style');
38
+ expect(style.length).toEqual(1);
39
+ expect(style[0].textContent).toContain('.my-handle {');
40
+ expect(style[0].textContent).toContain('.my-handle:active {');
41
+ });
42
+ it('rowHeight works', () => {
43
+ const viewTypes = [new PluginViewType('FakeComponent', FakeComponent, [])];
44
+ const { container } = render(_jsx(VitessceGridLayout, { layout: layoutJson, viewTypes: viewTypes, draggableHandle: ".my-handle", rowHeight: 123 }));
45
+ expect(container.querySelector('.react-grid-item').style.height).toEqual('123px');
46
+ });
47
+ });
48
+ });
@@ -0,0 +1,2 @@
1
+ export { VitessceGridLayout } from "./VitessceGridLayout.js";
2
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/vitessce-grid-layout/index.js"],"names":[],"mappings":""}
@@ -0,0 +1 @@
1
+ export { VitessceGridLayout } from './VitessceGridLayout.js';
@@ -0,0 +1,15 @@
1
+ export function makeGridLayout(colXs: any, colLayout: any): {
2
+ i: string;
3
+ y: any;
4
+ h: any;
5
+ x: any;
6
+ w: any;
7
+ }[];
8
+ export function getMaxRows(layouts: any): number;
9
+ export function resolveLayout(layout: any): {
10
+ cols: {};
11
+ layouts: {};
12
+ breakpoints: {};
13
+ components: {};
14
+ };
15
+ //# sourceMappingURL=layout-utils.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"layout-utils.d.ts","sourceRoot":"","sources":["../../src/vitessce-grid-layout/layout-utils.js"],"names":[],"mappings":"AAMA;;;;;;IAYC;AAED,iDAQC;AAED;;;;;EA6CC"}
@@ -0,0 +1,61 @@
1
+ import { range } from 'lodash-es';
2
+ function sum(a) {
3
+ return a.reduce((x, y) => x + y, 0);
4
+ }
5
+ export function makeGridLayout(colXs, colLayout) {
6
+ const colWs = [];
7
+ for (let i = 0; i < colXs.length; i++) { // eslint-disable-line no-plusplus
8
+ colWs.push(colXs[i + 1] - colXs[i]);
9
+ }
10
+ return Object.entries(colLayout).map(([id, spec]) => ({
11
+ i: id,
12
+ y: spec.y,
13
+ h: spec.h || 1,
14
+ x: colXs[spec.x],
15
+ w: sum(colWs.slice(spec.x, spec.x + (spec.w || 1))),
16
+ }));
17
+ }
18
+ export function getMaxRows(layouts) {
19
+ return Math.max(...Object.values(layouts).map(layout => Math.max(...layout.map(xywh => xywh.y + xywh.h))));
20
+ }
21
+ export function resolveLayout(layout) {
22
+ const cols = {};
23
+ const layouts = {};
24
+ const breakpoints = {};
25
+ const components = {};
26
+ const positions = {};
27
+ (('components' in layout) ? layout.components : layout).forEach((def) => {
28
+ const id = def.uid;
29
+ components[id] = {
30
+ uid: def.uid,
31
+ component: def.component,
32
+ props: def.props || {},
33
+ coordinationScopes: def.coordinationScopes || {},
34
+ coordinationScopesBy: def.coordinationScopesBy || {},
35
+ };
36
+ positions[id] = {
37
+ id, x: def.x, y: def.y, w: def.w, h: def.h,
38
+ };
39
+ });
40
+ if ('components' in layout) {
41
+ Object.entries(layout.columns).forEach(([width, columnXs]) => {
42
+ cols[width] = columnXs[columnXs.length - 1];
43
+ layouts[width] = makeGridLayout(columnXs, positions);
44
+ breakpoints[width] = width;
45
+ });
46
+ }
47
+ else {
48
+ // static layout
49
+ const id = 'ID';
50
+ const columnCount = 12;
51
+ cols[id] = columnCount;
52
+ layouts[id] = makeGridLayout(range(columnCount + 1), positions);
53
+ breakpoints[id] = 1000;
54
+ // Default has different numbers of columns at different widths,
55
+ // so we do need to override that to ensure the same number of columns,
56
+ // regardless of window width.
57
+ }
58
+ return {
59
+ cols, layouts, breakpoints, components,
60
+ };
61
+ }
@@ -0,0 +1,2 @@
1
+ export {};
2
+ //# sourceMappingURL=layout-utils.test.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"layout-utils.test.d.ts","sourceRoot":"","sources":["../../src/vitessce-grid-layout/layout-utils.test.js"],"names":[],"mappings":""}
@@ -0,0 +1,149 @@
1
+ import { describe, it, expect } from 'vitest';
2
+ import { makeGridLayout, getMaxRows, resolveLayout, } from './layout-utils.js';
3
+ describe('layout-utils.js', () => {
4
+ describe('makeGridLayout', () => {
5
+ it('applies columnXs and makes list from object', () => {
6
+ const columnXs = [0, 4, 8, 12];
7
+ const layout = {
8
+ bigLeft: { x: 0, y: 0, w: 2 },
9
+ smallRight: { x: 2, y: 0 },
10
+ smallLeft: { x: 0, y: 1 },
11
+ bigRight: { x: 1, y: 1, w: 2 },
12
+ wholeRow: { x: 0, y: 2, w: 3 },
13
+ };
14
+ const gridLayout = makeGridLayout(columnXs, layout);
15
+ expect(gridLayout).toEqual(
16
+ /* Disable eslint so it's easier to copy-and-paste from test results. */
17
+ /* eslint-disable quote-props */
18
+ /* eslint-disable quotes */
19
+ [
20
+ {
21
+ "h": 1,
22
+ "i": "bigLeft",
23
+ "w": 8,
24
+ "x": 0,
25
+ "y": 0,
26
+ },
27
+ {
28
+ "h": 1,
29
+ "i": "smallRight",
30
+ "w": 4,
31
+ "x": 8,
32
+ "y": 0,
33
+ },
34
+ {
35
+ "h": 1,
36
+ "i": "smallLeft",
37
+ "w": 4,
38
+ "x": 0,
39
+ "y": 1,
40
+ },
41
+ {
42
+ "h": 1,
43
+ "i": "bigRight",
44
+ "w": 8,
45
+ "x": 4,
46
+ "y": 1,
47
+ },
48
+ {
49
+ "h": 1,
50
+ "i": "wholeRow",
51
+ "w": 12,
52
+ "x": 0,
53
+ "y": 2,
54
+ },
55
+ ]);
56
+ });
57
+ });
58
+ describe('getMaxRows', () => {
59
+ it('works', () => {
60
+ const columnXs = [0, 4, 8, 12];
61
+ const layout = {
62
+ bigLeft: { x: 0, y: 0, w: 2 },
63
+ smallRight: { x: 2, y: 0 },
64
+ smallLeft: { x: 0, y: 1 },
65
+ bigRight: { x: 1, y: 1, w: 2 },
66
+ wholeRow: { x: 0, y: 2, w: 3 },
67
+ };
68
+ const gridLayout = makeGridLayout(columnXs, layout);
69
+ expect(getMaxRows([gridLayout])).toEqual(3);
70
+ });
71
+ });
72
+ describe('resolveLayout', () => {
73
+ const componentsSpec = [
74
+ {
75
+ uid: 'i0', component: 'NoProps', x: 0, y: 0,
76
+ },
77
+ {
78
+ uid: 'i1', component: 'HasProps', props: { foo: 'bar' }, x: 1, y: 1, w: 1, h: 1,
79
+ },
80
+ ];
81
+ const expectedComponents = {
82
+ i0: {
83
+ uid: 'i0',
84
+ component: 'NoProps',
85
+ coordinationScopes: {},
86
+ coordinationScopesBy: {},
87
+ props: {},
88
+ },
89
+ i1: {
90
+ uid: 'i1',
91
+ component: 'HasProps',
92
+ coordinationScopes: {},
93
+ coordinationScopesBy: {},
94
+ props: {
95
+ foo: 'bar',
96
+ },
97
+ },
98
+ };
99
+ it('handles responsive', () => {
100
+ const { cols, layouts, breakpoints, components, } = resolveLayout({
101
+ columns: {
102
+ 1000: [0, 3, 9, 12],
103
+ 800: [0, 4, 8, 12],
104
+ },
105
+ components: componentsSpec,
106
+ });
107
+ expect(cols).toEqual({ 800: 12, 1000: 12 });
108
+ expect(layouts).toEqual({
109
+ 800: [
110
+ {
111
+ h: 1, i: 'i0', w: 4, x: 0, y: 0,
112
+ },
113
+ {
114
+ h: 1, i: 'i1', w: 4, x: 4, y: 1,
115
+ },
116
+ ],
117
+ 1000: [
118
+ {
119
+ h: 1, i: 'i0', w: 3, x: 0, y: 0,
120
+ },
121
+ {
122
+ h: 1, i: 'i1', w: 6, x: 3, y: 1,
123
+ },
124
+ ],
125
+ });
126
+ expect(breakpoints).toEqual({
127
+ 800: '800',
128
+ 1000: '1000',
129
+ });
130
+ expect(components).toEqual(expectedComponents);
131
+ });
132
+ it('handles static', () => {
133
+ const { cols, layouts, breakpoints, components, } = resolveLayout(componentsSpec);
134
+ expect(cols).toEqual({ ID: 12 });
135
+ expect(layouts).toEqual({
136
+ ID: [
137
+ {
138
+ h: 1, i: 'i0', w: 1, x: 0, y: 0,
139
+ },
140
+ {
141
+ h: 1, i: 'i1', w: 1, x: 1, y: 1,
142
+ },
143
+ ],
144
+ });
145
+ expect(breakpoints).toEqual({ ID: 1000 });
146
+ expect(components).toEqual(expectedComponents);
147
+ });
148
+ });
149
+ });
@@ -0,0 +1,13 @@
1
+ export function useRowHeight(config: any, initialRowHeight: any, height: any, margin: any, padding: any): any[];
2
+ /**
3
+ * Create a mapping from dataset ID to loader objects by data type.
4
+ * @param {object[]} datasets The datasets array from the view config.
5
+ * @param {string} configDescription The top-level description in the
6
+ * @param {PluginFileType[]} fileTypes
7
+ * @param {PluginCoordinationType[]} coordinationTypes
8
+ * view config.
9
+ * @returns {object} Mapping from dataset ID to data type to loader
10
+ * instance.
11
+ */
12
+ export function createLoaders(datasets: object[], configDescription: string, fileTypes: PluginFileType[], coordinationTypes: PluginCoordinationType[]): object;
13
+ //# sourceMappingURL=vitessce-grid-utils.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"vitessce-grid-utils.d.ts","sourceRoot":"","sources":["../src/vitessce-grid-utils.js"],"names":[],"mappings":"AA0CA,gHA6CC;AA4BD;;;;;;;;;GASG;AACH,wCARW,MAAM,EAAE,qBACR,MAAM,aACN,gBAAgB,qBAChB,wBAAwB,GAEtB,MAAM,CAiDlB"}