datajunction-ui 0.0.1-rc.0 → 0.0.1-rc.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 (35) hide show
  1. package/.babel-plugin-macrosrc.js +5 -0
  2. package/.babelrc +4 -0
  3. package/.github/workflows/ci.yml +3 -3
  4. package/.vscode/extensions.json +0 -1
  5. package/Dockerfile +2 -1
  6. package/dist/5fa71a03d45dc2e3d61447f3013a303d.png +0 -0
  7. package/dist/index.html +26 -0
  8. package/dist/main.js +23303 -0
  9. package/dist/vendor.js +281 -0
  10. package/package.json +16 -9
  11. package/public/index.html +5 -8
  12. package/src/app/__tests__/__snapshots__/index.test.tsx.snap +5 -7
  13. package/src/app/components/Tab.jsx +2 -3
  14. package/src/app/components/djgraph/DJNode.jsx +6 -6
  15. package/src/app/index.tsx +3 -11
  16. package/src/app/pages/ListNamespacesPage/Loadable.jsx +2 -11
  17. package/src/app/pages/ListNamespacesPage/index.jsx +2 -3
  18. package/src/app/pages/NamespacePage/Loadable.jsx +2 -11
  19. package/src/app/pages/NodePage/Loadable.jsx +2 -11
  20. package/src/app/pages/NodePage/NodeGraphTab.jsx +46 -40
  21. package/src/app/pages/NotFoundPage/Loadable.tsx +1 -1
  22. package/src/app/pages/NotFoundPage/index.tsx +5 -27
  23. package/src/app/pages/Root/Loadable.tsx +2 -11
  24. package/src/index.tsx +3 -2
  25. package/src/setupTests.ts +0 -2
  26. package/src/styles/dag.css +118 -0
  27. package/src/styles/index.css +13 -0
  28. package/src/utils/__tests__/loadable.test.tsx +1 -1
  29. package/tsconfig.json +7 -4
  30. package/webpack.config.js +91 -0
  31. package/src/app/pages/NotFoundPage/P.ts +0 -8
  32. package/src/app/pages/NotFoundPage/__tests__/__snapshots__/index.test.tsx.snap +0 -61
  33. package/src/app/pages/NotFoundPage/__tests__/index.test.tsx +0 -21
  34. package/src/styles/dag-styles.ts +0 -117
  35. package/src/styles/global-styles.ts +0 -588
@@ -1,588 +0,0 @@
1
- import { createGlobalStyle } from 'styled-components';
2
-
3
- /* istanbul ignore next */
4
- export const GlobalStyle = createGlobalStyle`
5
- body {
6
- margin: 0;
7
- font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
8
- -webkit-font-smoothing: antialiased;
9
- -moz-osx-font-smoothing: grayscale;
10
- }
11
-
12
- *, ::after, ::before {
13
- box-sizing: border-box;
14
- }
15
-
16
- div {
17
- display: block;
18
- }
19
-
20
- p {
21
- display: block;
22
- margin-block-start: 1em;
23
- margin-block-end: 1em;
24
- margin-inline-start: 0px;
25
- margin-inline-end: 0px;
26
- width: 100%;
27
- }
28
-
29
- a, a:hover {
30
- text-decoration: none;
31
- font-family: "Cerebri Sans", sans-serif;
32
- color: #00477d;
33
- }
34
-
35
- td a:hover {
36
- color: #000;
37
- text-decoration: underline;
38
- }
39
-
40
- code {
41
- font-family: Consolas, source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
42
- monospace;
43
-
44
- }
45
-
46
- .link-body-emphasis {
47
- font-weight: normal;
48
- color: #5e5e5e;
49
- text-decoration: none;
50
- }
51
-
52
- .link-body-emphasis:hover {
53
- color: #3F4254;
54
- }
55
-
56
- .link-table {
57
- color: #3b506c;
58
- font-weight: normal;
59
- text-decoration: none;
60
- }
61
-
62
- .breadcrumb-chevron {
63
- --bs-breadcrumb-divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%236c757d'%3E%3Cpath fill-rule='evenodd' d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
64
- gap: .5rem;
65
- }
66
-
67
- .breadcrumb-item + .breadcrumb-item::before {
68
- float: left;
69
- padding-right: var(--bs-breadcrumb-item-padding-x);
70
- color: var(--bs-breadcrumb-divider-color);
71
- content: var(--bs-breadcrumb-divider, "/");
72
- }
73
-
74
- .rounded-3 {
75
- border-radius: 0.5rem !important;
76
- }
77
-
78
- .bg-body-tertiary {
79
- --bs-bg-opacity: 1;
80
- background-color: rgba(248, 249, 250, 1) !important;
81
- }
82
-
83
- .p-3 {
84
- padding: 1rem !important;
85
- }
86
-
87
- .fw-semibold {
88
- font-weight: 600 !important;
89
- }
90
-
91
- .breadcrumb {
92
- --bs-breadcrumb-padding-x: 0;
93
- --bs-breadcrumb-padding-y: 0;
94
- --bs-breadcrumb-margin-bottom: 1rem;
95
- --bs-breadcrumb-bg: #ffffff;
96
- --bs-breadcrumb-border-radius: 0.5rem;
97
- --bs-breadcrumb-divider-color: rgba(33, 37, 41, 0.75);
98
- --bs-breadcrumb-item-padding-x: 0.5rem;
99
- --bs-breadcrumb-item-active-color: rgba(33, 37, 41, 0.75);
100
- display: flex;
101
- flex-wrap: wrap;
102
- padding: var(--bs-breadcrumb-padding-y) var(--bs-breadcrumb-padding-x);
103
- margin-bottom: var(--bs-breadcrumb-margin-bottom);
104
- line-height: 0.9em;
105
- list-style: none;
106
- background-color: var(--bs-breadcrumb-bg);
107
- border-radius: var(--bs-breadcrumb-border-radius);
108
- }
109
-
110
- dl, ol, ul {
111
- margin-top: 0;
112
- margin-bottom: 1rem;
113
- }
114
-
115
- .list-group {
116
- width: 100%;
117
- max-width: fit-content;
118
- border-radius: 0.375rem;
119
- }
120
-
121
- .list-group-item {
122
- position: relative;
123
- display: block;
124
- padding: 0.5rem 1rem;
125
- color: #212529;
126
- text-decoration: none;
127
- background-color: #ffffff;
128
- min-width: fit-content;
129
- }
130
-
131
- .list-group-item + .list-group-item {
132
- border-top-width: 0;
133
- }
134
-
135
- .list-group-item:first-child {
136
- border-top-left-radius: inherit;
137
- border-top-right-radius: inherit;
138
- }
139
-
140
- .d-flex {
141
- display: flex !important;
142
- }
143
-
144
- .gap-2 {
145
- gap: .5rem !important;
146
- }
147
-
148
- .justify-content-between {
149
- justify-content: space-between !important;
150
- }
151
-
152
- .w-100 {
153
- width: 100% !important;
154
- }
155
-
156
- .mb-0 {
157
- margin-bottom: 0 !important;
158
- }
159
- .fs-6 {
160
- font-size: 0.95rem !important;
161
- }
162
- .mt-3 {
163
- margin-top: 0.75rem !important;
164
- }
165
- .h6, h6 {
166
- margin: 0;
167
- text-transform: uppercase;
168
- font-size: .8125rem;
169
- font-weight: 600;
170
- letter-spacing: .08em;
171
- color: #95aac9;
172
- }
173
-
174
- .py-3 {
175
- padding-top: 1rem !important;
176
- padding-bottom: 1rem !important;
177
- }
178
-
179
- .align-items-center {
180
- align-items: center !important;
181
- }
182
-
183
- .p-4 {
184
- padding: 1.5rem !important;
185
- }
186
-
187
- .flex-md-row {
188
- flex-direction: row !important;
189
- }
190
-
191
- .py-md-5 {
192
- padding-top: 3rem !important;
193
- padding-bottom: 3rem !important;
194
- }
195
-
196
- .badge {
197
- vertical-align: middle;
198
- }
199
-
200
- .badge.bg-secondary-soft {
201
- color: #6e84a3;
202
- }
203
-
204
- .badge.rounded-pill {
205
- padding-right: .6em;
206
- padding-left: .6em;
207
- }
208
-
209
- .bg-secondary-soft {
210
- background-color: #e2e6ed !important;
211
- }
212
-
213
- .rounded-pill {
214
- border-radius: 50rem !important;
215
- }
216
-
217
- .badge {
218
- --bs-badge-padding-x: 0.5em;
219
- --bs-badge-padding-y: 0.33em;
220
- --bs-badge-font-size: 76%;
221
- --bs-badge-font-weight: 400;
222
- --bs-badge-color: #fff;
223
- --bs-badge-border-radius: 0.375rem;
224
- display: inline-block;
225
- padding: var(--bs-badge-padding-y) var(--bs-badge-padding-x);
226
- font-size: var(--bs-badge-font-size);
227
- font-weight: var(--bs-badge-font-weight);
228
- line-height: 1;
229
- color: var(--bs-badge-color);
230
- text-align: center;
231
- white-space: nowrap;
232
- vertical-align: baseline;
233
- border-radius: var(--bs-badge-border-radius);
234
- }
235
-
236
- table {
237
- display: table;
238
- border-collapse: collapse;
239
- box-sizing: border-box;
240
- text-indent: initial;
241
- border-spacing: 2px;
242
- border-color: gray;
243
- caption-side: bottom;
244
- }
245
-
246
- tr {
247
- display: table-row;
248
- vertical-align: inherit;
249
- border-color: inherit;
250
- }
251
-
252
- .card-table {
253
- margin-bottom: 0;
254
- width: 100%;
255
- font-size: .8125rem;
256
- color: #12263f;
257
- vertical-align: top;
258
- border-color: #12263f;
259
- }
260
-
261
- .card {
262
- box-shadow: 0 0.75rem 1.5rem rgba(18, 38, 63, .03);
263
- position: relative;
264
- display: flex;
265
- flex-direction: column;
266
- min-width: 0;
267
- word-wrap: break-word;
268
- background-color: #fff;
269
- background-clip: border-box;
270
- border-radius: 1rem;
271
- margin: 4rem;
272
- }
273
-
274
- .table-responsive {
275
- overflow-x: auto;
276
- -webkit-overflow-scrolling: touch;
277
- }
278
-
279
- .table > thead {
280
- vertical-align: bottom;
281
- }
282
-
283
- tbody, td, tfoot, th, thead, tr {
284
- border: 0 solid;
285
- border-color: inherit;
286
- }
287
-
288
- thead {
289
- display: table-header-group;
290
- vertical-align: middle;
291
- border-color: inherit;
292
- }
293
-
294
- tr {
295
- display: table-row;
296
- vertical-align: inherit;
297
- border-color: inherit;
298
- }
299
-
300
- .card-table tbody td:first-child, .card-table thead th:first-child {
301
- padding-left: 1.5rem !important;
302
- }
303
-
304
- .table thead th {
305
- background-color: #f9fbfd;
306
- text-transform: uppercase;
307
- font-size: .8125rem;
308
- font-weight: 600;
309
- letter-spacing: .08em;
310
- color: #95aac9;
311
- }
312
-
313
- .card-table thead th {
314
- border-top-width: 0;
315
- }
316
-
317
- .table thead th {
318
- font-size: .625rem;
319
- }
320
-
321
- .table thead th, td, tbody th {
322
- vertical-align: middle;
323
- text-align: center;
324
- }
325
-
326
- .table [data-sort], .table-nowrap td, .table-nowrap th {
327
- white-space: nowrap;
328
- }
329
-
330
- .table thead th {
331
- background-color: #f9fbfd;
332
- text-transform: uppercase;
333
- font-size: .8125rem;
334
- font-weight: 600;
335
- letter-spacing: .08em;
336
- color: #95aac9;
337
- padding: 1rem;
338
- }
339
-
340
- .text-start {
341
- text-align: left !important;
342
- }
343
-
344
- .card-inner-table {
345
- margin-top: 2rem;
346
- }
347
-
348
- .card-inner-table thead th {
349
- background-color: #fff;
350
- }
351
-
352
- .table td, .table th {
353
- border-top: 1px solid #edf2f9;
354
- border-bottom: 0;
355
- padding: 1rem;
356
- }
357
-
358
- .card-inner-table td, .card-inner-table th {
359
- border-top: 1px dashed #edf2f9;
360
- }
361
-
362
- .mid {
363
- flex: 0 0 auto;
364
- width: 100%;
365
- }
366
-
367
- .table > :not(caption) > * > * {
368
- background-color: transparent;
369
- border-bottom-width: 1px;
370
- box-shadow: inset 0 0 0 9999px transparent;
371
- }
372
-
373
- /* Nodes */
374
- .node_type {
375
- background-color: #fad7dd !important;
376
- color: #e63757;
377
- text-transform: uppercase;
378
- vertical-align: middle;
379
- padding: 0.44rem;
380
- border-radius: 0.375rem;
381
- cursor: crosshair;
382
- }
383
-
384
- /* Nodes */
385
- .node_type__source {
386
- background-color: #ccf7e5 !important;
387
- color: #00b368;
388
- }
389
-
390
- .node_type__transform {
391
- background-color: #ccefff !important;
392
- color: #0063b4;
393
- }
394
-
395
- .node_type__metric {
396
- background-color: #fad7dd !important;
397
- color: #a2283e;
398
- }
399
-
400
- .node_type__dimension {
401
- background-color: #ffefd0 !important;
402
- color: #a96621;
403
- }
404
-
405
- .node_type__cube {
406
- background-color: #ffe5c4 !important;
407
- color: #C21807;
408
- }
409
-
410
- .status__valid {
411
- color: #00b368;
412
- }
413
-
414
- .status {
415
- text-transform: capitalize;
416
- vertical-align: middle;
417
- text-align: center;
418
- }
419
-
420
- .align-items-center {
421
- align-items: center !important;
422
- }
423
-
424
- .col {
425
- flex: 0 1;
426
- padding: 1.5rem;
427
- }
428
-
429
- .col.active {
430
- padding-bottom: 1.315rem;
431
- color: #2c7be5;
432
- border-bottom: solid 0.2em #2c7be5;
433
- text-align: center;
434
- }
435
- .col.active a {
436
- color: #2c7be5;
437
- }
438
- .col a:hover {
439
- color: #2c7be5;
440
- }
441
-
442
- .row > * {
443
- flex-shrink: 0;
444
- width: 100%;
445
- max-width: 100%;
446
- padding-right: calc(var(--bs-gutter-x) * .5);
447
- padding-left: calc(var(--bs-gutter-x) * .5);
448
- margin-top: var(--bs-gutter-y);
449
- }
450
-
451
- .row {
452
- --bs-gutter-x: 1.5rem;
453
- --bs-gutter-y: 0;
454
- display: flex;
455
- flex-wrap: wrap;
456
- }
457
-
458
- .header {
459
- --bs-header-margin-bottom: 1.5rem;
460
- --bs-header-spacing-y: 1.5rem;
461
- --bs-header-body-border-width: 1px;
462
- --bs-header-body-border-color: #e3ebf6;
463
- --bs-header-body-border-color-dark: rgba(227, 235, 246, .1);
464
- height: 90px;
465
- transition: none;
466
- display: flex;
467
- align-items: center;
468
- background-color: transparent;
469
- }
470
-
471
- *, :after, :before {
472
- box-sizing: border-box;
473
- }
474
-
475
- .header-tabs {
476
- margin-bottom: calc(var(--bs-header-spacing-y) * -1);
477
- border-bottom-width: 0;
478
- }
479
-
480
- .nav-tabs .nav-item:first-child {
481
- margin-left: 0;
482
- }
483
-
484
- .nav-tabs .nav-item {
485
- margin-left: .75rem;
486
- //margin-right: .75rem;
487
- }
488
-
489
- .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
490
- color: #12263f;
491
- background-color: transparent;
492
- border-color: #2c7be5;
493
- }
494
-
495
- .nav-link {
496
- display: block;
497
- color: #A1A5B7;
498
- transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
499
- }
500
-
501
- .nav-overflow {
502
- display: flex;
503
- flex-wrap: nowrap;
504
- overflow-x: auto;
505
- padding-bottom: 1px;
506
- }
507
-
508
- pre {
509
- border-radius: 1rem;
510
- padding: 2rem;
511
- }
512
-
513
- .container {
514
- max-width: 1320px;
515
- width: 100%;
516
- padding-left: 30px !important;
517
- padding-right: 30px !important;
518
- }
519
-
520
- .logo {
521
- margin-right: 3.75rem !important;
522
- flex-grow: 0 !important;
523
- }
524
-
525
- .logo img {
526
- padding: 10px;
527
- }
528
-
529
- .menu-lg-row > .menu-item {
530
- display: flex;
531
- align-items: center;
532
- }
533
-
534
- .menu-item {
535
- display: block;
536
- padding: 0.15rem 0;
537
- }
538
-
539
- .me-lg-2 {
540
- margin-right: 0.5rem !important;
541
- }
542
-
543
- .menu, .menu-wrapper {
544
- display: flex;
545
- padding: 0;
546
- margin: 0;
547
- list-style: none;
548
- }
549
-
550
- .menu-item .menu-link {
551
- cursor: pointer;
552
- align-items: center;
553
- flex: 0 0 100%;
554
- padding: 0.65rem 1rem;
555
- transition: none;
556
- outline: none !important;
557
- font-family: Inter, Helvetica, sans-serif;
558
- }
559
-
560
- .menu-title a {
561
- color: #7E8299;
562
- }
563
-
564
- .menu-title a:hover {
565
- color: #3F4254;
566
- }
567
-
568
- .node__header, .mid {
569
- background-color: #F4F4F4;
570
- padding-bottom: 2rem;
571
- }
572
-
573
- .rounded-box {
574
- border-radius: 1rem !important;
575
- background-color: #ffffff;
576
- max-width: fit-content;
577
- }
578
-
579
- .card-header {
580
- align-items: center;
581
- margin: 0.5rem 0.5rem 0.5rem 0;
582
- padding: 0 2.25rem 0 2.25rem;
583
- }
584
-
585
- .text-gray-400 {
586
- color: #B5B5C3 !important;
587
- }
588
- `;