@truedat/qx 8.10.2 → 8.10.4

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 (61) hide show
  1. package/package.json +3 -3
  2. package/src/components/QxRoutes.js +8 -7
  3. package/src/components/__tests__/QxRoutes.spec.js +2 -1
  4. package/src/components/__tests__/__fixtures__/helper.js +13 -0
  5. package/src/components/__tests__/__snapshots__/QxRoutes.spec.js.snap +1 -1
  6. package/src/components/common/ClauseViewer.js +52 -8
  7. package/src/components/common/DescriptionInput.js +9 -34
  8. package/src/components/common/TypeSelector.js +20 -10
  9. package/src/components/common/__tests__/ClauseViewer.spec.js +150 -0
  10. package/src/components/common/__tests__/DescriptionInput.spec.js +2 -5
  11. package/src/components/common/__tests__/__snapshots__/DescriptionInput.spec.js.snap +7 -10
  12. package/src/components/common/expressions/Clauses.js +22 -17
  13. package/src/components/common/expressions/Condition.js +201 -102
  14. package/src/components/common/expressions/Expression.js +17 -23
  15. package/src/components/common/expressions/FunctionSelector.js +3 -3
  16. package/src/components/common/expressions/ShapeSelector.js +1 -1
  17. package/src/components/common/expressions/__tests__/Clauses.spec.js +1 -1
  18. package/src/components/common/expressions/__tests__/Condition.spec.js +83 -26
  19. package/src/components/common/expressions/__tests__/ParamSelector.spec.js +1 -1
  20. package/src/components/common/expressions/__tests__/__snapshots__/Clauses.spec.js.snap +18 -22
  21. package/src/components/common/expressions/__tests__/__snapshots__/Condition.spec.js.snap +215 -216
  22. package/src/components/common/expressions/__tests__/__snapshots__/ConstantSelector.spec.js.snap +6 -10
  23. package/src/components/common/expressions/__tests__/__snapshots__/Expression.spec.js.snap +630 -654
  24. package/src/components/common/expressions/__tests__/__snapshots__/FunctionArgs.spec.js.snap +193 -201
  25. package/src/components/common/expressions/__tests__/__snapshots__/FunctionSelector.spec.js.snap +450 -466
  26. package/src/components/common/expressions/__tests__/__snapshots__/ShapeSelector.spec.js.snap +34 -34
  27. package/src/components/common/expressions/constantInputs/AnySelector.js +1 -0
  28. package/src/components/common/expressions/constantInputs/__tests__/__snapshots__/AnySelector.spec.js.snap +15 -15
  29. package/src/components/dataViews/__tests__/__snapshots__/AdvancedDataViewEditor.spec.js.snap +378 -406
  30. package/src/components/dataViews/__tests__/__snapshots__/DataViewSummary.spec.js.snap +6 -6
  31. package/src/components/dataViews/__tests__/__snapshots__/Queryable.spec.js.snap +489 -577
  32. package/src/components/dataViews/__tests__/__snapshots__/Queryables.spec.js.snap +400 -476
  33. package/src/components/dataViews/advancedForm/Queryable.js +56 -64
  34. package/src/components/dataViews/advancedForm/Queryables.js +11 -2
  35. package/src/components/dataViews/queryableProperties/Join.js +16 -6
  36. package/src/components/dataViews/queryableProperties/__tests__/__snapshots__/Join.spec.js.snap +0 -28
  37. package/src/components/dataViews/queryableProperties/__tests__/__snapshots__/Select.spec.js.snap +270 -282
  38. package/src/components/dataViews/queryableProperties/__tests__/__snapshots__/SelectField.spec.js.snap +172 -180
  39. package/src/components/dataViews/simpleForm/DatasetForm.js +4 -0
  40. package/src/components/dataViews/simpleForm/FormQueryable.js +49 -53
  41. package/src/components/dataViews/summary/Where.js +3 -2
  42. package/src/components/functions/FunctionEdit.js +92 -0
  43. package/src/components/functions/FunctionEditor.js +32 -10
  44. package/src/components/functions/FunctionParams.js +54 -61
  45. package/src/components/functions/FunctionsList.js +213 -0
  46. package/src/components/functions/__tests__/FunctionEdit.spec.js +168 -0
  47. package/src/components/functions/__tests__/FunctionParams.spec.js +1 -8
  48. package/src/components/functions/__tests__/FunctionsList.spec.js +62 -0
  49. package/src/components/functions/__tests__/__snapshots__/FunctionEditor.spec.js.snap +553 -469
  50. package/src/components/functions/__tests__/__snapshots__/FunctionParams.spec.js.snap +139 -161
  51. package/src/components/functions/__tests__/__snapshots__/FunctionsList.spec.js.snap +588 -0
  52. package/src/components/qualityControls/__tests__/NewQualityControl.spec.js +4 -0
  53. package/src/components/qualityControls/__tests__/QualityControlEditor.spec.js +8 -1
  54. package/src/components/qualityControls/__tests__/__snapshots__/EditQualityControl.spec.js.snap +109 -118
  55. package/src/components/qualityControls/__tests__/__snapshots__/NewDraftQualityControl.spec.js.snap +109 -118
  56. package/src/components/qualityControls/__tests__/__snapshots__/QualityControlEditor.spec.js.snap +471 -468
  57. package/src/hooks/useFunctions.js +6 -0
  58. package/src/styles/Expression.less +39 -6
  59. package/src/components/functions/Functions.js +0 -143
  60. package/src/components/functions/__tests__/Functions.spec.js +0 -56
  61. package/src/components/functions/__tests__/__snapshots__/Functions.spec.js.snap +0 -85
@@ -3,133 +3,129 @@
3
3
  exports[`<Expression /> matches the latest snapshot 1`] = `
4
4
  <div>
5
5
  <div
6
- class="ui grid"
6
+ class="expression-container"
7
7
  >
8
8
  <div
9
- class="sixteen wide column"
9
+ class="expression-content"
10
10
  >
11
11
  <div
12
- class="expression-container"
12
+ aria-expanded="false"
13
+ class="ui top left pointing dropdown"
14
+ role="listbox"
15
+ tabindex="0"
13
16
  >
14
17
  <div
15
- aria-expanded="false"
16
- class="ui top left pointing dropdown"
17
- role="listbox"
18
- tabindex="0"
18
+ class="shape-selector-trigger"
19
+ >
20
+ f(x)
21
+ </div>
22
+ <div
23
+ class="menu transition"
19
24
  >
20
25
  <div
21
- class="shape-selector-trigger"
22
- >
23
- f(x)
24
- </div>
25
- <div
26
- class="menu transition"
26
+ aria-checked="true"
27
+ aria-selected="true"
28
+ class="active selected item"
29
+ role="option"
30
+ style="pointer-events: all;"
27
31
  >
28
32
  <div
29
- aria-checked="false"
30
- aria-selected="false"
31
- class="item"
32
- role="option"
33
- style="pointer-events: all;"
33
+ class="text flex-center"
34
34
  >
35
- <div
36
- class="text flex-center"
35
+ <small
36
+ style="margin-right: 5px;"
37
37
  >
38
- <small
39
- style="margin-right: 5px;"
40
- >
41
- <b>
42
- <code>
43
- [π]
44
- </code>
45
- </b>
46
- </small>
47
- functions.expression.shape.constant
48
- </div>
38
+ <b>
39
+ <code>
40
+ f(x)
41
+ </code>
42
+ </b>
43
+ </small>
44
+ functions.expression.shape.function
49
45
  </div>
46
+ </div>
47
+ <div
48
+ aria-checked="false"
49
+ aria-selected="false"
50
+ class="item"
51
+ role="option"
52
+ style="pointer-events: all;"
53
+ >
50
54
  <div
51
- aria-checked="true"
52
- aria-selected="true"
53
- class="active selected item"
54
- role="option"
55
- style="pointer-events: all;"
55
+ class="text flex-center"
56
56
  >
57
- <div
58
- class="text flex-center"
57
+ <small
58
+ style="margin-right: 5px;"
59
59
  >
60
- <small
61
- style="margin-right: 5px;"
62
- >
63
- <b>
64
- <code>
65
- f(x)
66
- </code>
67
- </b>
68
- </small>
69
- functions.expression.shape.function
70
- </div>
60
+ <b>
61
+ <code>
62
+ [π]
63
+ </code>
64
+ </b>
65
+ </small>
66
+ functions.expression.shape.constant
71
67
  </div>
72
68
  </div>
73
69
  </div>
70
+ </div>
71
+ <div
72
+ class="accordion ui fluid no-margin"
73
+ >
74
74
  <div
75
- class="accordion ui fluid no-margin"
75
+ class="active title no-padding"
76
76
  >
77
77
  <div
78
- class="active title no-padding"
78
+ class="flex-center"
79
79
  >
80
+ <i
81
+ aria-hidden="true"
82
+ class="dropdown icon"
83
+ />
80
84
  <div
81
- class="flex-center"
85
+ class="sixteen wide field"
82
86
  >
83
- <i
84
- aria-hidden="true"
85
- class="dropdown icon"
86
- />
87
87
  <div
88
- class="sixteen wide field"
88
+ aria-expanded="false"
89
+ class="ui fluid search selection dropdown"
90
+ role="combobox"
89
91
  >
92
+ <input
93
+ aria-autocomplete="list"
94
+ autocomplete="off"
95
+ class="search"
96
+ tabindex="0"
97
+ type="text"
98
+ value=""
99
+ />
90
100
  <div
91
- aria-expanded="false"
92
- class="ui fluid search selection dropdown"
93
- role="combobox"
101
+ aria-atomic="true"
102
+ aria-live="polite"
103
+ class="divider text"
104
+ role="alert"
105
+ >
106
+ functions.form.expression.function.placeholder
107
+ </div>
108
+ <i
109
+ aria-hidden="true"
110
+ class="dropdown icon"
111
+ />
112
+ <div
113
+ class="menu transition"
114
+ role="listbox"
94
115
  >
95
- <input
96
- aria-autocomplete="list"
97
- autocomplete="off"
98
- class="search"
99
- tabindex="0"
100
- type="text"
101
- value=""
102
- />
103
- <div
104
- aria-atomic="true"
105
- aria-live="polite"
106
- class="divider text"
107
- role="alert"
108
- >
109
- functions.form.expression.function.placeholder
110
- </div>
111
- <i
112
- aria-hidden="true"
113
- class="dropdown icon"
114
- />
115
116
  <div
116
- class="menu transition"
117
- role="listbox"
117
+ class="message"
118
118
  >
119
- <div
120
- class="message"
121
- >
122
- No results found.
123
- </div>
119
+ No results found.
124
120
  </div>
125
121
  </div>
126
122
  </div>
127
123
  </div>
128
124
  </div>
129
- <div
130
- class="content active no-padding"
131
- />
132
125
  </div>
126
+ <div
127
+ class="content active no-padding"
128
+ />
133
129
  </div>
134
130
  </div>
135
131
  </div>
@@ -139,49 +135,99 @@ exports[`<Expression /> matches the latest snapshot 1`] = `
139
135
  exports[`<Expression /> shape constant expression 1`] = `
140
136
  <div>
141
137
  <div
142
- class="ui grid"
138
+ class="expression-container"
143
139
  >
144
140
  <div
145
- class="sixteen wide column"
141
+ class="expression-content"
146
142
  >
147
143
  <div
148
- class="expression-container"
144
+ aria-expanded="false"
145
+ class="ui top left pointing dropdown"
146
+ role="listbox"
147
+ tabindex="0"
149
148
  >
150
149
  <div
151
- aria-expanded="false"
152
- class="ui top left pointing dropdown"
153
- role="listbox"
154
- tabindex="0"
150
+ class="shape-selector-trigger"
151
+ >
152
+ [π]
153
+ </div>
154
+ <div
155
+ class="menu transition"
155
156
  >
156
157
  <div
157
- class="shape-selector-trigger"
158
+ aria-checked="false"
159
+ aria-selected="false"
160
+ class="item"
161
+ role="option"
162
+ style="pointer-events: all;"
158
163
  >
159
- [π]
164
+ <div
165
+ class="text flex-center"
166
+ >
167
+ <small
168
+ style="margin-right: 5px;"
169
+ >
170
+ <b>
171
+ <code>
172
+ f(x)
173
+ </code>
174
+ </b>
175
+ </small>
176
+ functions.expression.shape.function
177
+ </div>
160
178
  </div>
179
+ <div
180
+ aria-checked="true"
181
+ aria-selected="true"
182
+ class="active selected item"
183
+ role="option"
184
+ style="pointer-events: all;"
185
+ >
186
+ <div
187
+ class="text flex-center"
188
+ >
189
+ <small
190
+ style="margin-right: 5px;"
191
+ >
192
+ <b>
193
+ <code>
194
+ [π]
195
+ </code>
196
+ </b>
197
+ </small>
198
+ functions.expression.shape.constant
199
+ </div>
200
+ </div>
201
+ </div>
202
+ </div>
203
+ <div
204
+ class="field"
205
+ >
206
+ <div
207
+ aria-expanded="false"
208
+ class="ui fluid selection dropdown"
209
+ role="listbox"
210
+ tabindex="0"
211
+ >
212
+ <i
213
+ aria-hidden="true"
214
+ class="dropdown icon"
215
+ />
161
216
  <div
162
217
  class="menu transition"
163
218
  >
164
219
  <div
165
- aria-checked="true"
220
+ aria-checked="false"
166
221
  aria-selected="true"
167
- class="active selected item"
222
+ class="selected item"
168
223
  role="option"
169
224
  style="pointer-events: all;"
170
225
  >
171
- <div
172
- class="text flex-center"
226
+ <span
227
+ class="text"
173
228
  >
174
- <small
175
- style="margin-right: 5px;"
176
- >
177
- <b>
178
- <code>
179
- [π]
180
- </code>
181
- </b>
182
- </small>
183
- functions.expression.shape.constant
184
- </div>
229
+ functions.expression.constant.true
230
+ </span>
185
231
  </div>
186
232
  <div
187
233
  aria-checked="false"
@@ -190,65 +236,11 @@ exports[`<Expression /> shape constant expression 1`] = `
190
236
  role="option"
191
237
  style="pointer-events: all;"
192
238
  >
193
- <div
194
- class="text flex-center"
195
- >
196
- <small
197
- style="margin-right: 5px;"
198
- >
199
- <b>
200
- <code>
201
- f(x)
202
- </code>
203
- </b>
204
- </small>
205
- functions.expression.shape.function
206
- </div>
207
- </div>
208
- </div>
209
- </div>
210
- <div
211
- class="field"
212
- >
213
- <div
214
- aria-expanded="false"
215
- class="ui fluid selection dropdown"
216
- role="listbox"
217
- tabindex="0"
218
- >
219
- <i
220
- aria-hidden="true"
221
- class="dropdown icon"
222
- />
223
- <div
224
- class="menu transition"
225
- >
226
- <div
227
- aria-checked="false"
228
- aria-selected="true"
229
- class="selected item"
230
- role="option"
231
- style="pointer-events: all;"
232
- >
233
- <span
234
- class="text"
235
- >
236
- functions.expression.constant.true
237
- </span>
238
- </div>
239
- <div
240
- aria-checked="false"
241
- aria-selected="false"
242
- class="item"
243
- role="option"
244
- style="pointer-events: all;"
239
+ <span
240
+ class="text"
245
241
  >
246
- <span
247
- class="text"
248
- >
249
- functions.expression.constant.false
250
- </span>
251
- </div>
242
+ functions.expression.constant.false
243
+ </span>
252
244
  </div>
253
245
  </div>
254
246
  </div>
@@ -261,569 +253,557 @@ exports[`<Expression /> shape constant expression 1`] = `
261
253
  exports[`<Expression /> shape function expression 1`] = `
262
254
  <div>
263
255
  <div
264
- class="ui grid"
256
+ class="expression-container"
265
257
  style=""
266
258
  >
267
259
  <div
268
- class="sixteen wide column"
260
+ class="expression-content"
269
261
  >
270
262
  <div
271
- class="expression-container"
263
+ aria-expanded="false"
264
+ class="ui top left pointing dropdown"
265
+ role="listbox"
266
+ tabindex="0"
272
267
  >
273
268
  <div
274
- aria-expanded="false"
275
- class="ui top left pointing dropdown"
276
- role="listbox"
277
- tabindex="0"
269
+ class="shape-selector-trigger"
270
+ >
271
+ f(x)
272
+ </div>
273
+ <div
274
+ class="menu transition"
278
275
  >
279
276
  <div
280
- class="shape-selector-trigger"
281
- >
282
- f(x)
283
- </div>
284
- <div
285
- class="menu transition"
277
+ aria-checked="true"
278
+ aria-selected="true"
279
+ class="active selected item"
280
+ role="option"
281
+ style="pointer-events: all;"
286
282
  >
287
283
  <div
288
- aria-checked="false"
289
- aria-selected="false"
290
- class="item"
291
- role="option"
292
- style="pointer-events: all;"
284
+ class="text flex-center"
293
285
  >
294
- <div
295
- class="text flex-center"
286
+ <small
287
+ style="margin-right: 5px;"
296
288
  >
297
- <small
298
- style="margin-right: 5px;"
299
- >
300
- <b>
301
- <code>
302
- [π]
303
- </code>
304
- </b>
305
- </small>
306
- functions.expression.shape.constant
307
- </div>
289
+ <b>
290
+ <code>
291
+ f(x)
292
+ </code>
293
+ </b>
294
+ </small>
295
+ functions.expression.shape.function
308
296
  </div>
297
+ </div>
298
+ <div
299
+ aria-checked="false"
300
+ aria-selected="false"
301
+ class="item"
302
+ role="option"
303
+ style="pointer-events: all;"
304
+ >
309
305
  <div
310
- aria-checked="true"
311
- aria-selected="true"
312
- class="active selected item"
313
- role="option"
314
- style="pointer-events: all;"
306
+ class="text flex-center"
315
307
  >
316
- <div
317
- class="text flex-center"
308
+ <small
309
+ style="margin-right: 5px;"
318
310
  >
319
- <small
320
- style="margin-right: 5px;"
321
- >
322
- <b>
323
- <code>
324
- f(x)
325
- </code>
326
- </b>
327
- </small>
328
- functions.expression.shape.function
329
- </div>
311
+ <b>
312
+ <code>
313
+ [π]
314
+ </code>
315
+ </b>
316
+ </small>
317
+ functions.expression.shape.constant
330
318
  </div>
331
319
  </div>
332
320
  </div>
321
+ </div>
322
+ <div
323
+ class="accordion ui fluid no-margin"
324
+ >
333
325
  <div
334
- class="accordion ui fluid no-margin"
326
+ class="active title no-padding"
335
327
  >
336
328
  <div
337
- class="active title no-padding"
329
+ class="flex-center"
338
330
  >
331
+ <i
332
+ aria-hidden="true"
333
+ class="dropdown icon"
334
+ />
339
335
  <div
340
- class="flex-center"
336
+ class="sixteen wide field"
341
337
  >
342
- <i
343
- aria-hidden="true"
344
- class="dropdown icon"
345
- />
346
338
  <div
347
- class="sixteen wide field"
339
+ aria-expanded="false"
340
+ class="ui fluid search selection dropdown"
341
+ role="combobox"
348
342
  >
343
+ <input
344
+ aria-autocomplete="list"
345
+ autocomplete="off"
346
+ class="search"
347
+ tabindex="0"
348
+ type="text"
349
+ value=""
350
+ />
349
351
  <div
350
- aria-expanded="false"
351
- class="ui fluid search selection dropdown"
352
- role="combobox"
352
+ aria-atomic="true"
353
+ aria-live="polite"
354
+ class="divider text"
355
+ role="alert"
356
+ >
357
+ eq
358
+ </div>
359
+ <i
360
+ aria-hidden="true"
361
+ class="dropdown icon"
362
+ />
363
+ <div
364
+ class="menu transition"
365
+ role="listbox"
353
366
  >
354
- <input
355
- aria-autocomplete="list"
356
- autocomplete="off"
357
- class="search"
358
- tabindex="0"
359
- type="text"
360
- value=""
361
- />
362
- <div
363
- aria-atomic="true"
364
- aria-live="polite"
365
- class="divider text"
366
- role="alert"
367
- >
368
- eq:boolean
369
- </div>
370
- <i
371
- aria-hidden="true"
372
- class="dropdown icon"
373
- />
374
367
  <div
375
- class="menu transition"
376
- role="listbox"
368
+ aria-checked="true"
369
+ aria-selected="true"
370
+ class="active selected item"
371
+ role="option"
372
+ style="pointer-events: all;"
377
373
  >
378
374
  <div
379
- aria-checked="true"
380
- aria-selected="true"
381
- class="active selected item"
382
- role="option"
383
- style="pointer-events: all;"
375
+ class="ui header"
384
376
  >
385
377
  <div
386
- class="ui header"
378
+ class="flex-center"
387
379
  >
380
+ <div>
381
+ eq
382
+ </div>
388
383
  <div
389
- class="flex-center"
384
+ class="function-params-label"
390
385
  >
391
- <div>
392
- eq
386
+ <div
387
+ class="ui grey label"
388
+ >
389
+ <i
390
+ aria-hidden="true"
391
+ class="question circle outline icon"
392
+ />
393
+ arg1
393
394
  </div>
394
395
  <div
395
- class="function-params-label"
396
+ class="ui grey label"
396
397
  >
397
- <div
398
- class="ui grey label"
399
- >
400
- <i
401
- aria-hidden="true"
402
- class="question circle outline icon"
403
- />
404
- arg1
405
- </div>
406
- <div
407
- class="ui grey label"
408
- >
409
- <i
410
- aria-hidden="true"
411
- class="question circle outline icon"
412
- />
413
- arg2
414
- </div>
398
+ <i
399
+ aria-hidden="true"
400
+ class="question circle outline icon"
401
+ />
402
+ arg2
415
403
  </div>
416
404
  </div>
417
405
  </div>
418
- <div
419
- class="sub header"
420
- />
421
406
  </div>
407
+ <div
408
+ class="sub header"
409
+ />
422
410
  </div>
423
411
  </div>
424
412
  </div>
425
413
  </div>
426
414
  </div>
427
- <div
428
- class="content active no-padding"
415
+ </div>
416
+ <div
417
+ class="content active no-padding"
418
+ >
419
+ <ul
420
+ class="function-tree"
429
421
  >
430
- <ul
431
- class="function-tree"
432
- >
433
- <li>
422
+ <li>
423
+ <div
424
+ class="flex-column"
425
+ >
434
426
  <div
435
- class="flex-column"
427
+ class="param-label-header"
436
428
  >
437
429
  <div
438
- class="param-label-header"
430
+ class="ui large image label"
439
431
  >
432
+ <i
433
+ aria-hidden="true"
434
+ class="grey question circle outline fitted icon"
435
+ />
440
436
  <div
441
- class="ui large image label"
437
+ class="detail"
442
438
  >
443
- <i
444
- aria-hidden="true"
445
- class="grey question circle outline fitted icon"
446
- />
447
- <div
448
- class="detail"
449
- >
450
- arg1
451
- </div>
439
+ arg1
452
440
  </div>
453
- <div
454
- class="param-label-description"
455
- />
456
441
  </div>
457
442
  <div
458
- class="ui grid"
443
+ class="param-label-description"
444
+ />
445
+ </div>
446
+ <div
447
+ class="expression-container"
448
+ >
449
+ <div
450
+ class="expression-content"
459
451
  >
460
452
  <div
461
- class="sixteen wide column"
453
+ aria-expanded="false"
454
+ class="ui top left pointing dropdown"
455
+ role="listbox"
456
+ tabindex="0"
462
457
  >
463
458
  <div
464
- class="expression-container"
459
+ class="shape-selector-trigger"
460
+ >
461
+ f(x)
462
+ </div>
463
+ <div
464
+ class="menu transition"
465
465
  >
466
466
  <div
467
- aria-expanded="false"
468
- class="ui top left pointing dropdown"
469
- role="listbox"
470
- tabindex="0"
467
+ aria-checked="true"
468
+ aria-selected="true"
469
+ class="active selected item"
470
+ role="option"
471
+ style="pointer-events: all;"
471
472
  >
472
473
  <div
473
- class="shape-selector-trigger"
474
+ class="text flex-center"
474
475
  >
475
- f(x)
476
+ <small
477
+ style="margin-right: 5px;"
478
+ >
479
+ <b>
480
+ <code>
481
+ f(x)
482
+ </code>
483
+ </b>
484
+ </small>
485
+ functions.expression.shape.function
476
486
  </div>
487
+ </div>
488
+ <div
489
+ aria-checked="false"
490
+ aria-selected="false"
491
+ class="item"
492
+ role="option"
493
+ style="pointer-events: all;"
494
+ >
477
495
  <div
478
- class="menu transition"
496
+ class="text flex-center"
479
497
  >
480
- <div
481
- aria-checked="false"
482
- aria-selected="false"
483
- class="item"
484
- role="option"
485
- style="pointer-events: all;"
486
- >
487
- <div
488
- class="text flex-center"
489
- >
490
- <small
491
- style="margin-right: 5px;"
492
- >
493
- <b>
494
- <code>
495
- [π]
496
- </code>
497
- </b>
498
- </small>
499
- functions.expression.shape.constant
500
- </div>
501
- </div>
502
- <div
503
- aria-checked="true"
504
- aria-selected="true"
505
- class="active selected item"
506
- role="option"
507
- style="pointer-events: all;"
498
+ <small
499
+ style="margin-right: 5px;"
508
500
  >
509
- <div
510
- class="text flex-center"
511
- >
512
- <small
513
- style="margin-right: 5px;"
514
- >
515
- <b>
516
- <code>
517
- f(x)
518
- </code>
519
- </b>
520
- </small>
521
- functions.expression.shape.function
522
- </div>
523
- </div>
501
+ <b>
502
+ <code>
503
+ [π]
504
+ </code>
505
+ </b>
506
+ </small>
507
+ functions.expression.shape.constant
524
508
  </div>
525
509
  </div>
510
+ </div>
511
+ </div>
512
+ <div
513
+ class="accordion ui fluid no-margin"
514
+ >
515
+ <div
516
+ class="active title no-padding"
517
+ >
526
518
  <div
527
- class="accordion ui fluid no-margin"
519
+ class="flex-center"
528
520
  >
521
+ <i
522
+ aria-hidden="true"
523
+ class="dropdown icon"
524
+ />
529
525
  <div
530
- class="active title no-padding"
526
+ class="sixteen wide field"
531
527
  >
532
528
  <div
533
- class="flex-center"
529
+ aria-expanded="false"
530
+ class="ui fluid search selection dropdown"
531
+ role="combobox"
534
532
  >
533
+ <input
534
+ aria-autocomplete="list"
535
+ autocomplete="off"
536
+ class="search"
537
+ tabindex="0"
538
+ type="text"
539
+ value=""
540
+ />
541
+ <div
542
+ aria-atomic="true"
543
+ aria-live="polite"
544
+ class="divider text"
545
+ role="alert"
546
+ >
547
+ functions.form.expression.function.placeholder
548
+ </div>
535
549
  <i
536
550
  aria-hidden="true"
537
551
  class="dropdown icon"
538
552
  />
539
553
  <div
540
- class="sixteen wide field"
554
+ class="menu transition"
555
+ role="listbox"
541
556
  >
542
557
  <div
543
- aria-expanded="false"
544
- class="ui fluid search selection dropdown"
545
- role="combobox"
558
+ aria-checked="false"
559
+ aria-selected="true"
560
+ class="selected item"
561
+ role="option"
562
+ style="pointer-events: all;"
546
563
  >
547
- <input
548
- aria-autocomplete="list"
549
- autocomplete="off"
550
- class="search"
551
- tabindex="0"
552
- type="text"
553
- value=""
554
- />
555
- <div
556
- aria-atomic="true"
557
- aria-live="polite"
558
- class="divider text"
559
- role="alert"
560
- >
561
- functions.form.expression.function.placeholder
562
- </div>
563
- <i
564
- aria-hidden="true"
565
- class="dropdown icon"
566
- />
567
564
  <div
568
- class="menu transition"
569
- role="listbox"
565
+ class="ui header"
570
566
  >
571
567
  <div
572
- aria-checked="false"
573
- aria-selected="true"
574
- class="selected item"
575
- role="option"
576
- style="pointer-events: all;"
568
+ class="flex-center"
577
569
  >
570
+ <div>
571
+ eq
572
+ </div>
578
573
  <div
579
- class="ui header"
574
+ class="function-params-label"
580
575
  >
581
576
  <div
582
- class="flex-center"
577
+ class="ui grey label"
578
+ >
579
+ <i
580
+ aria-hidden="true"
581
+ class="question circle outline icon"
582
+ />
583
+ arg1
584
+ </div>
585
+ <div
586
+ class="ui grey label"
583
587
  >
584
- <div>
585
- eq
586
- </div>
587
- <div
588
- class="function-params-label"
589
- >
590
- <div
591
- class="ui grey label"
592
- >
593
- <i
594
- aria-hidden="true"
595
- class="question circle outline icon"
596
- />
597
- arg1
598
- </div>
599
- <div
600
- class="ui grey label"
601
- >
602
- <i
603
- aria-hidden="true"
604
- class="question circle outline icon"
605
- />
606
- arg2
607
- </div>
608
- </div>
588
+ <i
589
+ aria-hidden="true"
590
+ class="question circle outline icon"
591
+ />
592
+ arg2
609
593
  </div>
610
594
  </div>
611
- <div
612
- class="sub header"
613
- />
614
595
  </div>
615
596
  </div>
597
+ <div
598
+ class="sub header"
599
+ />
616
600
  </div>
617
601
  </div>
618
602
  </div>
619
603
  </div>
620
- <div
621
- class="content active no-padding"
622
- />
623
604
  </div>
624
605
  </div>
606
+ <div
607
+ class="content active no-padding"
608
+ />
625
609
  </div>
626
610
  </div>
627
611
  </div>
628
- </li>
629
- <li>
612
+ </div>
613
+ </li>
614
+ <li>
615
+ <div
616
+ class="flex-column"
617
+ >
630
618
  <div
631
- class="flex-column"
619
+ class="param-label-header"
632
620
  >
633
621
  <div
634
- class="param-label-header"
622
+ class="ui large image label"
635
623
  >
624
+ <i
625
+ aria-hidden="true"
626
+ class="grey question circle outline fitted icon"
627
+ />
636
628
  <div
637
- class="ui large image label"
629
+ class="detail"
638
630
  >
639
- <i
640
- aria-hidden="true"
641
- class="grey question circle outline fitted icon"
642
- />
643
- <div
644
- class="detail"
645
- >
646
- arg2
647
- </div>
631
+ arg2
648
632
  </div>
649
- <div
650
- class="param-label-description"
651
- />
652
633
  </div>
653
634
  <div
654
- class="ui grid"
635
+ class="param-label-description"
636
+ />
637
+ </div>
638
+ <div
639
+ class="expression-container"
640
+ >
641
+ <div
642
+ class="expression-content"
655
643
  >
656
644
  <div
657
- class="sixteen wide column"
645
+ aria-expanded="false"
646
+ class="ui top left pointing dropdown"
647
+ role="listbox"
648
+ tabindex="0"
658
649
  >
659
650
  <div
660
- class="expression-container"
651
+ class="shape-selector-trigger"
652
+ >
653
+ f(x)
654
+ </div>
655
+ <div
656
+ class="menu transition"
661
657
  >
662
658
  <div
663
- aria-expanded="false"
664
- class="ui top left pointing dropdown"
665
- role="listbox"
666
- tabindex="0"
659
+ aria-checked="true"
660
+ aria-selected="true"
661
+ class="active selected item"
662
+ role="option"
663
+ style="pointer-events: all;"
667
664
  >
668
665
  <div
669
- class="shape-selector-trigger"
666
+ class="text flex-center"
670
667
  >
671
- f(x)
668
+ <small
669
+ style="margin-right: 5px;"
670
+ >
671
+ <b>
672
+ <code>
673
+ f(x)
674
+ </code>
675
+ </b>
676
+ </small>
677
+ functions.expression.shape.function
672
678
  </div>
679
+ </div>
680
+ <div
681
+ aria-checked="false"
682
+ aria-selected="false"
683
+ class="item"
684
+ role="option"
685
+ style="pointer-events: all;"
686
+ >
673
687
  <div
674
- class="menu transition"
688
+ class="text flex-center"
675
689
  >
676
- <div
677
- aria-checked="false"
678
- aria-selected="false"
679
- class="item"
680
- role="option"
681
- style="pointer-events: all;"
690
+ <small
691
+ style="margin-right: 5px;"
682
692
  >
683
- <div
684
- class="text flex-center"
685
- >
686
- <small
687
- style="margin-right: 5px;"
688
- >
689
- <b>
690
- <code>
691
- [π]
692
- </code>
693
- </b>
694
- </small>
695
- functions.expression.shape.constant
696
- </div>
697
- </div>
698
- <div
699
- aria-checked="true"
700
- aria-selected="true"
701
- class="active selected item"
702
- role="option"
703
- style="pointer-events: all;"
704
- >
705
- <div
706
- class="text flex-center"
707
- >
708
- <small
709
- style="margin-right: 5px;"
710
- >
711
- <b>
712
- <code>
713
- f(x)
714
- </code>
715
- </b>
716
- </small>
717
- functions.expression.shape.function
718
- </div>
719
- </div>
693
+ <b>
694
+ <code>
695
+ [π]
696
+ </code>
697
+ </b>
698
+ </small>
699
+ functions.expression.shape.constant
720
700
  </div>
721
701
  </div>
702
+ </div>
703
+ </div>
704
+ <div
705
+ class="accordion ui fluid no-margin"
706
+ >
707
+ <div
708
+ class="active title no-padding"
709
+ >
722
710
  <div
723
- class="accordion ui fluid no-margin"
711
+ class="flex-center"
724
712
  >
713
+ <i
714
+ aria-hidden="true"
715
+ class="dropdown icon"
716
+ />
725
717
  <div
726
- class="active title no-padding"
718
+ class="sixteen wide field"
727
719
  >
728
720
  <div
729
- class="flex-center"
721
+ aria-expanded="false"
722
+ class="ui fluid search selection dropdown"
723
+ role="combobox"
730
724
  >
725
+ <input
726
+ aria-autocomplete="list"
727
+ autocomplete="off"
728
+ class="search"
729
+ tabindex="0"
730
+ type="text"
731
+ value=""
732
+ />
733
+ <div
734
+ aria-atomic="true"
735
+ aria-live="polite"
736
+ class="divider text"
737
+ role="alert"
738
+ >
739
+ functions.form.expression.function.placeholder
740
+ </div>
731
741
  <i
732
742
  aria-hidden="true"
733
743
  class="dropdown icon"
734
744
  />
735
745
  <div
736
- class="sixteen wide field"
746
+ class="menu transition"
747
+ role="listbox"
737
748
  >
738
749
  <div
739
- aria-expanded="false"
740
- class="ui fluid search selection dropdown"
741
- role="combobox"
750
+ aria-checked="false"
751
+ aria-selected="true"
752
+ class="selected item"
753
+ role="option"
754
+ style="pointer-events: all;"
742
755
  >
743
- <input
744
- aria-autocomplete="list"
745
- autocomplete="off"
746
- class="search"
747
- tabindex="0"
748
- type="text"
749
- value=""
750
- />
751
- <div
752
- aria-atomic="true"
753
- aria-live="polite"
754
- class="divider text"
755
- role="alert"
756
- >
757
- functions.form.expression.function.placeholder
758
- </div>
759
- <i
760
- aria-hidden="true"
761
- class="dropdown icon"
762
- />
763
756
  <div
764
- class="menu transition"
765
- role="listbox"
757
+ class="ui header"
766
758
  >
767
759
  <div
768
- aria-checked="false"
769
- aria-selected="true"
770
- class="selected item"
771
- role="option"
772
- style="pointer-events: all;"
760
+ class="flex-center"
773
761
  >
762
+ <div>
763
+ eq
764
+ </div>
774
765
  <div
775
- class="ui header"
766
+ class="function-params-label"
776
767
  >
777
768
  <div
778
- class="flex-center"
769
+ class="ui grey label"
779
770
  >
780
- <div>
781
- eq
782
- </div>
783
- <div
784
- class="function-params-label"
785
- >
786
- <div
787
- class="ui grey label"
788
- >
789
- <i
790
- aria-hidden="true"
791
- class="question circle outline icon"
792
- />
793
- arg1
794
- </div>
795
- <div
796
- class="ui grey label"
797
- >
798
- <i
799
- aria-hidden="true"
800
- class="question circle outline icon"
801
- />
802
- arg2
803
- </div>
804
- </div>
771
+ <i
772
+ aria-hidden="true"
773
+ class="question circle outline icon"
774
+ />
775
+ arg1
776
+ </div>
777
+ <div
778
+ class="ui grey label"
779
+ >
780
+ <i
781
+ aria-hidden="true"
782
+ class="question circle outline icon"
783
+ />
784
+ arg2
805
785
  </div>
806
786
  </div>
807
- <div
808
- class="sub header"
809
- />
810
787
  </div>
811
788
  </div>
789
+ <div
790
+ class="sub header"
791
+ />
812
792
  </div>
813
793
  </div>
814
794
  </div>
815
795
  </div>
816
- <div
817
- class="content active no-padding"
818
- />
819
796
  </div>
820
797
  </div>
798
+ <div
799
+ class="content active no-padding"
800
+ />
821
801
  </div>
822
802
  </div>
823
803
  </div>
824
- </li>
825
- </ul>
826
- </div>
804
+ </div>
805
+ </li>
806
+ </ul>
827
807
  </div>
828
808
  </div>
829
809
  </div>
@@ -834,122 +814,118 @@ exports[`<Expression /> shape function expression 1`] = `
834
814
  exports[`<Expression /> shape param expression 1`] = `
835
815
  <div>
836
816
  <div
837
- class="ui grid"
817
+ class="expression-container"
838
818
  >
839
819
  <div
840
- class="sixteen wide column"
820
+ class="expression-content"
841
821
  >
842
822
  <div
843
- class="expression-container"
823
+ aria-expanded="false"
824
+ class="ui top left pointing dropdown"
825
+ role="listbox"
826
+ tabindex="0"
844
827
  >
845
828
  <div
846
- aria-expanded="false"
847
- class="ui top left pointing dropdown"
848
- role="listbox"
849
- tabindex="0"
829
+ class="shape-selector-trigger"
830
+ >
831
+ [P]
832
+ </div>
833
+ <div
834
+ class="menu transition"
850
835
  >
851
836
  <div
852
- class="shape-selector-trigger"
853
- >
854
- [P]
855
- </div>
856
- <div
857
- class="menu transition"
837
+ aria-checked="false"
838
+ aria-selected="false"
839
+ class="item"
840
+ role="option"
841
+ style="pointer-events: all;"
858
842
  >
859
843
  <div
860
- aria-checked="false"
861
- aria-selected="false"
862
- class="item"
863
- role="option"
864
- style="pointer-events: all;"
844
+ class="text flex-center"
865
845
  >
866
- <div
867
- class="text flex-center"
846
+ <small
847
+ style="margin-right: 5px;"
868
848
  >
869
- <small
870
- style="margin-right: 5px;"
871
- >
872
- <b>
873
- <code>
874
- [π]
875
- </code>
876
- </b>
877
- </small>
878
- functions.expression.shape.constant
879
- </div>
849
+ <b>
850
+ <code>
851
+ f(x)
852
+ </code>
853
+ </b>
854
+ </small>
855
+ functions.expression.shape.function
880
856
  </div>
857
+ </div>
858
+ <div
859
+ aria-checked="false"
860
+ aria-selected="false"
861
+ class="item"
862
+ role="option"
863
+ style="pointer-events: all;"
864
+ >
881
865
  <div
882
- aria-checked="false"
883
- aria-selected="false"
884
- class="item"
885
- role="option"
886
- style="pointer-events: all;"
866
+ class="text flex-center"
887
867
  >
888
- <div
889
- class="text flex-center"
868
+ <small
869
+ style="margin-right: 5px;"
890
870
  >
891
- <small
892
- style="margin-right: 5px;"
893
- >
894
- <b>
895
- <code>
896
- f(x)
897
- </code>
898
- </b>
899
- </small>
900
- functions.expression.shape.function
901
- </div>
871
+ <b>
872
+ <code>
873
+ [π]
874
+ </code>
875
+ </b>
876
+ </small>
877
+ functions.expression.shape.constant
902
878
  </div>
879
+ </div>
880
+ <div
881
+ aria-checked="true"
882
+ aria-selected="true"
883
+ class="active selected item"
884
+ role="option"
885
+ style="pointer-events: all;"
886
+ >
903
887
  <div
904
- aria-checked="true"
905
- aria-selected="true"
906
- class="active selected item"
907
- role="option"
908
- style="pointer-events: all;"
888
+ class="text flex-center"
909
889
  >
910
- <div
911
- class="text flex-center"
890
+ <small
891
+ style="margin-right: 5px;"
912
892
  >
913
- <small
914
- style="margin-right: 5px;"
915
- >
916
- <b>
917
- <code>
918
- [P]
919
- </code>
920
- </b>
921
- </small>
922
- functions.expression.shape.param
923
- </div>
893
+ <b>
894
+ <code>
895
+ [P]
896
+ </code>
897
+ </b>
898
+ </small>
899
+ functions.expression.shape.param
924
900
  </div>
925
901
  </div>
926
902
  </div>
903
+ </div>
904
+ <div
905
+ aria-expanded="false"
906
+ class="ui fluid selection dropdown"
907
+ role="listbox"
908
+ tabindex="0"
909
+ >
910
+ <i
911
+ aria-hidden="true"
912
+ class="dropdown icon"
913
+ />
927
914
  <div
928
- aria-expanded="false"
929
- class="ui fluid selection dropdown"
930
- role="listbox"
931
- tabindex="0"
915
+ class="menu transition"
932
916
  >
933
- <i
934
- aria-hidden="true"
935
- class="dropdown icon"
936
- />
937
917
  <div
938
- class="menu transition"
918
+ aria-checked="false"
919
+ aria-selected="true"
920
+ class="selected item"
921
+ role="option"
922
+ style="pointer-events: all;"
939
923
  >
940
- <div
941
- aria-checked="false"
942
- aria-selected="true"
943
- class="selected item"
944
- role="option"
945
- style="pointer-events: all;"
924
+ <span
925
+ class="text"
946
926
  >
947
- <span
948
- class="text"
949
- >
950
- param1
951
- </span>
952
- </div>
927
+ param1
928
+ </span>
953
929
  </div>
954
930
  </div>
955
931
  </div>