@i-vresse/haddock3-ui 0.2.1 → 0.2.2

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 (28) hide show
  1. package/README.md +6 -3
  2. package/dist/DialogViewer.js +3 -3
  3. package/dist/DialogViewer.js.map +1 -1
  4. package/dist/index.d.ts +3 -0
  5. package/dist/index.d.ts.map +1 -1
  6. package/dist/index.js +3 -0
  7. package/dist/index.js.map +1 -1
  8. package/dist/molviewer.js +2 -2
  9. package/dist/molviewer.js.map +1 -1
  10. package/dist/table/SortableTable.js +2 -2
  11. package/dist/toggles.d.ts +2 -2
  12. package/dist/toggles.d.ts.map +1 -1
  13. package/dist/toggles.js +1 -1
  14. package/dist/toggles.js.map +1 -1
  15. package/package.json +5 -3
  16. package/src/DialogViewer.tsx +5 -5
  17. package/src/index.tsx +3 -0
  18. package/src/molviewer.tsx +2 -2
  19. package/src/table/SortableTable.tsx +2 -2
  20. package/src/toggles.tsx +3 -2
  21. package/src/CopyToClipBoardIcon.stories.tsx +0 -5
  22. package/src/HiddenFileInput.stories.tsx +0 -30
  23. package/src/LinkToFile.stories.tsx +0 -20
  24. package/src/ResiduesSelect.stories.tsx +0 -417
  25. package/src/hetero.test.ts +0 -1368
  26. package/src/table/SortableTable.test.ts +0 -87
  27. package/src/toggles/ResidueHeader.stories.tsx +0 -15
  28. package/src/useChunked.test.ts +0 -33
package/src/ResiduesSelect.stories.tsx DELETED
@@ -1,417 +0,0 @@
1
- import { type Story, action, useLadleContext } from "@ladle/react";
2
- import { useState } from "react";
3
-
4
- import {
5
- type ResidueNeighbourSelection,
6
- type ResidueSelection,
7
- ResiduesSelect,
8
- } from "./toggles.js";
9
-
10
- export const Surface: Story = () => {
11
- const { globalState } = useLadleContext();
12
- return (
13
- <ResiduesSelect
14
- showPassive={true}
15
- disabledPassive={true}
16
- highlight={undefined}
17
- options={[
18
- {
19
- resno: 1,
20
- resname: "A",
21
- seq: "A",
22
- surface: true,
23
- },
24
- {
25
- resno: 2,
26
- resname: "T",
27
- seq: "T",
28
- surface: false,
29
- },
30
- ]}
31
- selected={{ act: [], pass: [1], neighbours: [] }}
32
- onChange={action("onChange")}
33
- onHover={action("onHover")}
34
- theme={globalState.theme === "dark" ? "dark" : "light"}
35
- />
36
- );
37
- };
38
-
39
- export const ActiveOnly: Story = () => {
40
- const { globalState } = useLadleContext();
41
- const [selected, setSelected] = useState<ResidueNeighbourSelection>({
42
- act: [3],
43
- pass: [],
44
- neighbours: [],
45
- });
46
-
47
- const onChange = (selected: ResidueSelection) => {
48
- setSelected({
49
- ...selected,
50
- neighbours: [],
51
- });
52
- };
53
-
54
- return (
55
- <ResiduesSelect
56
- showActive={true}
57
- showPassive={false}
58
- highlight={undefined}
59
- options={[
60
- {
61
- resno: 1,
62
- resname: "A",
63
- seq: "A",
64
- surface: true,
65
- },
66
- {
67
- resno: 2,
68
- resname: "T",
69
- seq: "T",
70
- surface: false,
71
- },
72
- {
73
- resno: 3,
74
- resname: "G",
75
- seq: "G",
76
- surface: true,
77
- },
78
- ]}
79
- selected={selected}
80
- onChange={onChange}
81
- onHover={action("onHover")}
82
- theme={globalState.theme === "dark" ? "dark" : "light"}
83
- />
84
- );
85
- };
86
-
87
- export const PassiveOnly: Story = () => {
88
- const { globalState } = useLadleContext();
89
- const [selected, setSelected] = useState<ResidueNeighbourSelection>({
90
- act: [],
91
- pass: [3],
92
- neighbours: [],
93
- });
94
-
95
- const onChange = (selected: ResidueSelection) => {
96
- setSelected({
97
- ...selected,
98
- neighbours: [],
99
- });
100
- };
101
-
102
- return (
103
- <ResiduesSelect
104
- showActive={false}
105
- showPassive={true}
106
- highlight={undefined}
107
- options={[
108
- {
109
- resno: 1,
110
- resname: "A",
111
- seq: "A",
112
- surface: true,
113
- },
114
- {
115
- resno: 2,
116
- resname: "T",
117
- seq: "T",
118
- surface: false,
119
- },
120
- {
121
- resno: 3,
122
- resname: "G",
123
- seq: "G",
124
- surface: true,
125
- },
126
- ]}
127
- selected={selected}
128
- onChange={onChange}
129
- onHover={action("onHover")}
130
- theme={globalState.theme === "dark" ? "dark" : "light"}
131
- />
132
- );
133
- };
134
-
135
- export const ActiveAndNeigbours: Story = () => {
136
- const { globalState } = useLadleContext();
137
- const [selected, setSelected] = useState<ResidueNeighbourSelection>({
138
- act: [3],
139
- pass: [],
140
- neighbours: [1, 2],
141
- });
142
-
143
- const onChange = (selected: ResidueSelection) => {
144
- // Use inverse of selected as fake neighbours computation
145
- const neighbours = [1, 2, 3].filter(
146
- (resno) =>
147
- !selected.act.includes(resno) && !selected.pass.includes(resno),
148
- );
149
- setSelected({
150
- ...selected,
151
- neighbours,
152
- });
153
- };
154
-
155
- return (
156
- <ResiduesSelect
157
- showActive={true}
158
- showPassive={true}
159
- disabledPassive={true}
160
- highlight={undefined}
161
- options={[
162
- {
163
- resno: 1,
164
- resname: "A",
165
- seq: "A",
166
- surface: true,
167
- },
168
- {
169
- resno: 2,
170
- resname: "T",
171
- seq: "T",
172
- surface: false,
173
- },
174
- {
175
- resno: 3,
176
- resname: "G",
177
- seq: "G",
178
- surface: true,
179
- },
180
- ]}
181
- selected={selected}
182
- onChange={onChange}
183
- onHover={action("onHover")}
184
- theme={globalState.theme === "dark" ? "dark" : "light"}
185
- />
186
- );
187
- };
188
-
189
- export const ActiveDisabledAndPassive = () => (
190
- <div className="text-red-500 text-xl">Unwanted combination</div>
191
- );
192
-
193
- export const ActiveAndPassive: Story = () => {
194
- const { globalState } = useLadleContext();
195
- const [selected, setSelected] = useState<ResidueNeighbourSelection>({
196
- act: [3],
197
- pass: [1],
198
- neighbours: [],
199
- });
200
-
201
- const onChange = (selected: ResidueSelection) => {
202
- setSelected({
203
- ...selected,
204
- neighbours: [],
205
- });
206
- };
207
-
208
- return (
209
- <ResiduesSelect
210
- showActive={true}
211
- showPassive={true}
212
- highlight={undefined}
213
- options={[
214
- {
215
- resno: 1,
216
- resname: "A",
217
- seq: "A",
218
- surface: true,
219
- },
220
- {
221
- resno: 2,
222
- resname: "T",
223
- seq: "T",
224
- surface: true,
225
- },
226
- {
227
- resno: 3,
228
- resname: "G",
229
- seq: "G",
230
- surface: true,
231
- },
232
- {
233
- resno: 4,
234
- resname: "C",
235
- seq: "C",
236
- surface: true,
237
- },
238
- ]}
239
- selected={selected}
240
- onChange={onChange}
241
- onHover={action("onHover")}
242
- theme={globalState.theme === "dark" ? "dark" : "light"}
243
- />
244
- );
245
- };
246
-
247
- export const LongList: Story = () => {
248
- const { globalState } = useLadleContext();
249
- const aa = [
250
- { resname: "ALA", seq: "A" },
251
- { resname: "GLY", seq: "G" },
252
- { resname: "THR", seq: "T" },
253
- { resname: "CYS", seq: "C" },
254
- ];
255
- const options = Array.from({ length: 400 }, (_, i) => ({
256
- resno: i + 42,
257
- ...aa[i % 4]!,
258
- surface: true,
259
- }));
260
- return (
261
- <ResiduesSelect
262
- showActive={true}
263
- showPassive={true}
264
- disabledPassive={true}
265
- disabledActive={true}
266
- highlight={undefined}
267
- options={options}
268
- selected={{
269
- act: [43, 111],
270
- pass: [51, 78],
271
- neighbours: [],
272
- }}
273
- onChange={action("onChange")}
274
- onHover={action("onHover")}
275
- theme={globalState.theme === "dark" ? "dark" : "light"}
276
- />
277
- );
278
- };
279
-
280
- export const ResnameAsLabelPassiveActive: Story = () => {
281
- const { globalState } = useLadleContext();
282
- const [selected, setSelected] = useState<ResidueNeighbourSelection>({
283
- act: [3],
284
- pass: [1],
285
- neighbours: [],
286
- });
287
-
288
- const onChange = (selected: ResidueSelection) => {
289
- setSelected({
290
- ...selected,
291
- neighbours: [],
292
- });
293
- };
294
-
295
- return (
296
- <ResiduesSelect
297
- showActive={true}
298
- showPassive={true}
299
- highlight={undefined}
300
- options={[
301
- {
302
- resno: 3,
303
- resname: "IML",
304
- seq: "X",
305
- surface: true,
306
- },
307
- {
308
- resno: 4,
309
- resname: "IP1",
310
- seq: "X",
311
- surface: true,
312
- },
313
- ]}
314
- selected={selected}
315
- onChange={onChange}
316
- onHover={action("onHover")}
317
- theme={globalState.theme === "dark" ? "dark" : "light"}
318
- />
319
- );
320
- };
321
-
322
- export const ResnameAsLabelPassive: Story = () => {
323
- const { globalState } = useLadleContext();
324
- const [selected, setSelected] = useState<ResidueNeighbourSelection>({
325
- act: [3],
326
- pass: [1],
327
- neighbours: [],
328
- });
329
-
330
- const onChange = (selected: ResidueSelection) => {
331
- setSelected({
332
- ...selected,
333
- neighbours: [],
334
- });
335
- };
336
-
337
- return (
338
- <ResiduesSelect
339
- showActive={false}
340
- showPassive={true}
341
- highlight={undefined}
342
- options={[
343
- {
344
- resno: 3,
345
- resname: "IML",
346
- seq: "X",
347
- surface: true,
348
- },
349
- {
350
- resno: 4,
351
- resname: "IP1",
352
- seq: "X",
353
- surface: true,
354
- },
355
- ]}
356
- selected={selected}
357
- onChange={onChange}
358
- onHover={action("onHover")}
359
- theme={globalState.theme === "dark" ? "dark" : "light"}
360
- />
361
- );
362
- };
363
-
364
- export const ResnameOrSeqAsLabel: Story = () => {
365
- const { globalState } = useLadleContext();
366
- const [selected, setSelected] = useState<ResidueNeighbourSelection>({
367
- act: [3],
368
- pass: [1],
369
- neighbours: [],
370
- });
371
-
372
- const onChange = (selected: ResidueSelection) => {
373
- setSelected({
374
- ...selected,
375
- neighbours: [],
376
- });
377
- };
378
-
379
- return (
380
- <ResiduesSelect
381
- showActive={true}
382
- showPassive={true}
383
- highlight={undefined}
384
- options={[
385
- {
386
- resno: 1,
387
- resname: "A",
388
- seq: "A",
389
- surface: true,
390
- },
391
- {
392
- resno: 2,
393
- resname: "T",
394
- seq: "T",
395
- surface: true,
396
- },
397
- {
398
- resno: 3,
399
- resname: "IML",
400
- seq: "X",
401
- surface: true,
402
- },
403
- {
404
- resno: 4,
405
- resname: "IP1",
406
- seq: "X",
407
- surface: true,
408
- },
409
- ]}
410
- selected={selected}
411
- onChange={onChange}
412
- onHover={action("onHover")}
413
- theme={globalState.theme === "dark" ? "dark" : "light"}
414
- />
415
- );
416
- };
417
- // TODO align checkboxes vertically