datajunction-ui 0.0.1-a1

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 (154) hide show
  1. package/.babel-plugin-macrosrc.js +5 -0
  2. package/.env +3 -0
  3. package/.eslintrc.js +20 -0
  4. package/.gitattributes +201 -0
  5. package/.husky/pre-commit +6 -0
  6. package/.nvmrc +1 -0
  7. package/.prettierignore +6 -0
  8. package/.prettierrc +9 -0
  9. package/.stylelintrc +7 -0
  10. package/LICENSE +22 -0
  11. package/Makefile +3 -0
  12. package/README.md +10 -0
  13. package/dj-logo.svg +10 -0
  14. package/internals/testing/loadable.mock.tsx +6 -0
  15. package/package.json +189 -0
  16. package/public/favicon.ico +0 -0
  17. package/public/index.html +26 -0
  18. package/public/manifest.json +15 -0
  19. package/public/robots.txt +3 -0
  20. package/src/__tests__/reportWebVitals.test.jsx +44 -0
  21. package/src/app/__tests__/__snapshots__/index.test.tsx.snap +9 -0
  22. package/src/app/__tests__/index.test.tsx +14 -0
  23. package/src/app/components/DeleteNode.jsx +55 -0
  24. package/src/app/components/ListGroupItem.jsx +24 -0
  25. package/src/app/components/NamespaceHeader.jsx +31 -0
  26. package/src/app/components/QueryInfo.jsx +77 -0
  27. package/src/app/components/Tab.jsx +25 -0
  28. package/src/app/components/ToggleSwitch.jsx +20 -0
  29. package/src/app/components/__tests__/DeleteNode.test.jsx +53 -0
  30. package/src/app/components/__tests__/ListGroupItem.test.tsx +16 -0
  31. package/src/app/components/__tests__/NamespaceHeader.test.jsx +14 -0
  32. package/src/app/components/__tests__/QueryInfo.test.jsx +55 -0
  33. package/src/app/components/__tests__/Tab.test.jsx +27 -0
  34. package/src/app/components/__tests__/ToggleSwitch.test.jsx +43 -0
  35. package/src/app/components/__tests__/__snapshots__/ListGroupItem.test.tsx.snap +29 -0
  36. package/src/app/components/__tests__/__snapshots__/NamespaceHeader.test.jsx.snap +47 -0
  37. package/src/app/components/djgraph/Collapse.jsx +46 -0
  38. package/src/app/components/djgraph/DJNode.jsx +89 -0
  39. package/src/app/components/djgraph/DJNodeColumns.jsx +71 -0
  40. package/src/app/components/djgraph/DJNodeDimensions.jsx +75 -0
  41. package/src/app/components/djgraph/LayoutFlow.jsx +104 -0
  42. package/src/app/components/djgraph/__tests__/Collapse.test.jsx +51 -0
  43. package/src/app/components/djgraph/__tests__/DJNode.test.tsx +24 -0
  44. package/src/app/components/djgraph/__tests__/DJNodeColumns.test.jsx +83 -0
  45. package/src/app/components/djgraph/__tests__/DJNodeDimensions.test.jsx +118 -0
  46. package/src/app/components/djgraph/__tests__/__snapshots__/DJNode.test.tsx.snap +117 -0
  47. package/src/app/constants.js +2 -0
  48. package/src/app/icons/AlertIcon.jsx +32 -0
  49. package/src/app/icons/CollapsedIcon.jsx +15 -0
  50. package/src/app/icons/DJLogo.jsx +36 -0
  51. package/src/app/icons/DeleteIcon.jsx +21 -0
  52. package/src/app/icons/EditIcon.jsx +18 -0
  53. package/src/app/icons/ExpandedIcon.jsx +15 -0
  54. package/src/app/icons/HorizontalHierarchyIcon.jsx +15 -0
  55. package/src/app/icons/InvalidIcon.jsx +14 -0
  56. package/src/app/icons/LoadingIcon.jsx +14 -0
  57. package/src/app/icons/PythonIcon.jsx +52 -0
  58. package/src/app/icons/TableIcon.jsx +14 -0
  59. package/src/app/icons/ValidIcon.jsx +14 -0
  60. package/src/app/index.tsx +108 -0
  61. package/src/app/pages/AddEditNodePage/FormikSelect.jsx +46 -0
  62. package/src/app/pages/AddEditNodePage/FullNameField.jsx +37 -0
  63. package/src/app/pages/AddEditNodePage/Loadable.jsx +16 -0
  64. package/src/app/pages/AddEditNodePage/NodeQueryField.jsx +89 -0
  65. package/src/app/pages/AddEditNodePage/__tests__/AddEditNodePageFormFailed.test.jsx +103 -0
  66. package/src/app/pages/AddEditNodePage/__tests__/AddEditNodePageFormSuccess.test.jsx +132 -0
  67. package/src/app/pages/AddEditNodePage/__tests__/FormikSelect.test.jsx +75 -0
  68. package/src/app/pages/AddEditNodePage/__tests__/FullNameField.test.jsx +31 -0
  69. package/src/app/pages/AddEditNodePage/__tests__/NodeQueryField.test.jsx +30 -0
  70. package/src/app/pages/AddEditNodePage/__tests__/__snapshots__/AddEditNodePageFormFailed.test.jsx.snap +54 -0
  71. package/src/app/pages/AddEditNodePage/__tests__/__snapshots__/AddEditNodePageFormSuccess.test.jsx.snap +3 -0
  72. package/src/app/pages/AddEditNodePage/__tests__/__snapshots__/index.test.jsx.snap +3 -0
  73. package/src/app/pages/AddEditNodePage/__tests__/index.test.jsx +180 -0
  74. package/src/app/pages/AddEditNodePage/index.jsx +396 -0
  75. package/src/app/pages/AddEditTagPage/Loadable.jsx +16 -0
  76. package/src/app/pages/AddEditTagPage/__tests__/AddEditTagPage.test.jsx +107 -0
  77. package/src/app/pages/AddEditTagPage/index.jsx +132 -0
  78. package/src/app/pages/LoginPage/LoginForm.jsx +124 -0
  79. package/src/app/pages/LoginPage/SignupForm.jsx +156 -0
  80. package/src/app/pages/LoginPage/__tests__/index.test.jsx +97 -0
  81. package/src/app/pages/LoginPage/assets/sign-in-with-github.png +0 -0
  82. package/src/app/pages/LoginPage/assets/sign-in-with-google.png +0 -0
  83. package/src/app/pages/LoginPage/index.jsx +17 -0
  84. package/src/app/pages/NamespacePage/AddNamespacePopover.jsx +85 -0
  85. package/src/app/pages/NamespacePage/Explorer.jsx +57 -0
  86. package/src/app/pages/NamespacePage/Loadable.jsx +16 -0
  87. package/src/app/pages/NamespacePage/__tests__/index.test.jsx +217 -0
  88. package/src/app/pages/NamespacePage/index.jsx +199 -0
  89. package/src/app/pages/NodePage/AddBackfillPopover.jsx +166 -0
  90. package/src/app/pages/NodePage/AddMaterializationPopover.jsx +161 -0
  91. package/src/app/pages/NodePage/ClientCodePopover.jsx +46 -0
  92. package/src/app/pages/NodePage/EditColumnPopover.jsx +116 -0
  93. package/src/app/pages/NodePage/LinkDimensionPopover.jsx +149 -0
  94. package/src/app/pages/NodePage/Loadable.jsx +16 -0
  95. package/src/app/pages/NodePage/NodeColumnTab.jsx +200 -0
  96. package/src/app/pages/NodePage/NodeGraphTab.jsx +112 -0
  97. package/src/app/pages/NodePage/NodeHistory.jsx +212 -0
  98. package/src/app/pages/NodePage/NodeInfoTab.jsx +212 -0
  99. package/src/app/pages/NodePage/NodeLineageTab.jsx +84 -0
  100. package/src/app/pages/NodePage/NodeMaterializationTab.jsx +233 -0
  101. package/src/app/pages/NodePage/NodeSQLTab.jsx +82 -0
  102. package/src/app/pages/NodePage/NodeStatus.jsx +28 -0
  103. package/src/app/pages/NodePage/NodesWithDimension.jsx +42 -0
  104. package/src/app/pages/NodePage/PartitionColumnPopover.jsx +153 -0
  105. package/src/app/pages/NodePage/__tests__/AddBackfillPopover.test.jsx +47 -0
  106. package/src/app/pages/NodePage/__tests__/ClientCodePopover.test.jsx +49 -0
  107. package/src/app/pages/NodePage/__tests__/EditColumnPopover.test.jsx +148 -0
  108. package/src/app/pages/NodePage/__tests__/LinkDimensionPopover.test.jsx +165 -0
  109. package/src/app/pages/NodePage/__tests__/NodeGraphTab.test.jsx +591 -0
  110. package/src/app/pages/NodePage/__tests__/NodeLineageTab.test.jsx +57 -0
  111. package/src/app/pages/NodePage/__tests__/NodePage.test.jsx +757 -0
  112. package/src/app/pages/NodePage/__tests__/NodeWithDimension.test.jsx +175 -0
  113. package/src/app/pages/NodePage/__tests__/__snapshots__/NodePage.test.jsx.snap +403 -0
  114. package/src/app/pages/NodePage/index.jsx +210 -0
  115. package/src/app/pages/NotFoundPage/Loadable.tsx +14 -0
  116. package/src/app/pages/NotFoundPage/__tests__/index.test.jsx +16 -0
  117. package/src/app/pages/NotFoundPage/index.tsx +23 -0
  118. package/src/app/pages/RegisterTablePage/Loadable.jsx +16 -0
  119. package/src/app/pages/RegisterTablePage/__tests__/RegisterTablePage.test.jsx +110 -0
  120. package/src/app/pages/RegisterTablePage/__tests__/__snapshots__/RegisterTablePage.test.jsx.snap +37 -0
  121. package/src/app/pages/RegisterTablePage/index.jsx +142 -0
  122. package/src/app/pages/Root/Loadable.tsx +14 -0
  123. package/src/app/pages/Root/__tests__/index.test.jsx +77 -0
  124. package/src/app/pages/Root/assets/dj-logo.png +0 -0
  125. package/src/app/pages/Root/index.tsx +70 -0
  126. package/src/app/pages/SQLBuilderPage/Loadable.jsx +16 -0
  127. package/src/app/pages/SQLBuilderPage/__tests__/index.test.jsx +173 -0
  128. package/src/app/pages/SQLBuilderPage/index.jsx +390 -0
  129. package/src/app/pages/TagPage/Loadable.jsx +16 -0
  130. package/src/app/pages/TagPage/__tests__/TagPage.test.jsx +70 -0
  131. package/src/app/pages/TagPage/index.jsx +79 -0
  132. package/src/app/providers/djclient.jsx +5 -0
  133. package/src/app/services/DJService.js +665 -0
  134. package/src/app/services/__tests__/DJService.test.jsx +804 -0
  135. package/src/index.tsx +48 -0
  136. package/src/mocks/mockNodes.jsx +1430 -0
  137. package/src/react-app-env.d.ts +4 -0
  138. package/src/reportWebVitals.ts +15 -0
  139. package/src/setupTests.ts +36 -0
  140. package/src/styles/dag.css +228 -0
  141. package/src/styles/index.css +1083 -0
  142. package/src/styles/loading.css +34 -0
  143. package/src/styles/login.css +81 -0
  144. package/src/styles/node-creation.scss +197 -0
  145. package/src/styles/styles.scss +44 -0
  146. package/src/styles/styles.scss.d.ts +9 -0
  147. package/src/utils/__tests__/__snapshots__/loadable.test.tsx.snap +17 -0
  148. package/src/utils/__tests__/loadable.test.tsx +53 -0
  149. package/src/utils/__tests__/request.test.ts +82 -0
  150. package/src/utils/form.jsx +23 -0
  151. package/src/utils/loadable.tsx +30 -0
  152. package/src/utils/request.ts +54 -0
  153. package/tsconfig.json +34 -0
  154. package/webpack.config.js +118 -0
package/src/react-app-env.d.ts ADDED
@@ -0,0 +1,4 @@
1
+ /// <reference types="react-scripts" />
2
+
3
+ // To solve the issue: https://github.com/DefinitelyTyped/DefinitelyTyped/issues/31245
4
+ /// <reference types="styled-components/cssprop" />
package/src/reportWebVitals.ts ADDED
@@ -0,0 +1,15 @@
1
+ import { ReportHandler } from 'web-vitals';
2
+
3
+ const reportWebVitals = (onPerfEntry?: ReportHandler) => {
4
+ if (onPerfEntry && onPerfEntry instanceof Function) {
5
+ import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
6
+ getCLS(onPerfEntry);
7
+ getFID(onPerfEntry);
8
+ getFCP(onPerfEntry);
9
+ getLCP(onPerfEntry);
10
+ getTTFB(onPerfEntry);
11
+ });
12
+ }
13
+ };
14
+
15
+ export default reportWebVitals;
package/src/setupTests.ts ADDED
@@ -0,0 +1,36 @@
1
+ // react-testing-library renders your components to document.body,
2
+ // this adds jest-dom's custom assertions
3
+ import '@testing-library/jest-dom';
4
+
5
+ import 'react-app-polyfill/ie11';
6
+ import 'react-app-polyfill/stable';
7
+ import { JSDOM } from 'jsdom';
8
+ import { render as originalRender } from '@testing-library/react';
9
+
10
+ global.ResizeObserver = require('resize-observer-polyfill');
11
+ global.fetch = require('jest-fetch-mock');
12
+
13
+ const setDom = () => {
14
+ const dom = new JSDOM('<!doctype html><html><body></body></html>', {});
15
+
16
+ global.window = dom.window;
17
+ global.document = dom.window.document;
18
+ document.createRange = () => {
19
+ const range = new Range();
20
+ range.getBoundingClientRect = jest.fn();
21
+ range.getClientRects = () => {
22
+ return {
23
+ item: () => null,
24
+ length: 0,
25
+ [Symbol.iterator]: jest.fn(),
26
+ };
27
+ };
28
+
29
+ return range;
30
+ };
31
+ };
32
+
33
+ export const render = ui => {
34
+ setDom();
35
+ return originalRender(ui);
36
+ };
package/src/styles/dag.css ADDED
@@ -0,0 +1,228 @@
1
+ .react-flow__node-custom {
2
+ font-size: 1.2em;
3
+ width: 180px;
4
+ background: #f5f5f6;
5
+ color: #222;
6
+ box-shadow: 0 4px 6px -1px rgb(0 0 0 / 15%), 0 2px 4px -1px rgb(0 0 0 / 8%);
7
+ border-radius: 2px;
8
+ }
9
+ .react-flow {
10
+ width: 100%;
11
+ height: 800px;
12
+ overflow: hidden;
13
+ position: relative;
14
+ z-index: 0;
15
+ }
16
+ .react-flow__node-custom .react-flow__handle {
17
+ top: 24px;
18
+ right: -15px;
19
+ width: 6px;
20
+ height: 10px;
21
+ border-radius: 2px;
22
+ background-color: #778899;
23
+ }
24
+
25
+ .react-flow__node.circle {
26
+ border-radius: 50%;
27
+ width: 60px;
28
+ height: 60px;
29
+ display: flex;
30
+ justify-content: center;
31
+ align-items: center;
32
+ font-weight: 700;
33
+ }
34
+
35
+ .react-flow__node.annotation {
36
+ border-radius: 0;
37
+ text-align: left;
38
+ background: white;
39
+ border: none;
40
+ line-height: 1.4;
41
+ width: 225px;
42
+ box-shadow: 0 4px 6px -1px rgb(0 0 0 / 15%), 0 2px 4px -1px rgb(0 0 0 / 8%);
43
+ }
44
+
45
+ .react-flow__node.annotation .react-flow__handle {
46
+ display: none;
47
+ }
48
+
49
+ .dj-node__header,
50
+ .partition__header,
51
+ .table__header {
52
+ font-weight: 400;
53
+ text-transform: uppercase;
54
+ font-family: 'jetbrains-mono', monospace;
55
+ font-size: 1.5em;
56
+ padding-inline-start: 0.5rem;
57
+ padding-inline-end: 0.5rem;
58
+ padding-left: 0.75em;
59
+ padding-top: 0.35rem;
60
+ padding-bottom: 0.35rem;
61
+ border-bottom-width: 1px;
62
+ border-bottom-style: solid;
63
+ border-color: #c4cbd1;
64
+ }
65
+
66
+ .dj-node__body,
67
+ .partition__body,
68
+ .table__body {
69
+ background-color: rgb(254, 254, 254);
70
+ padding: 0.5em 0.7em 0.9em 0.7em;
71
+ font-family: 'nt-dapper', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
72
+ Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
73
+ font-size: 1.7em;
74
+ border-radius: 0 0 8px 8px;
75
+ }
76
+
77
+ .dj-node_highlight {
78
+ border: 10px solid #cccccc !important;
79
+ }
80
+
81
+ .react-flow__node {
82
+ z-index: -1 !important;
83
+ }
84
+
85
+ .react-flow__node-DJNode,
86
+ .dj-node__full,
87
+ .partition__full,
88
+ .table__full {
89
+ display: flex;
90
+ flex-direction: column;
91
+ border-width: 1px;
92
+ border-style: solid;
93
+ border-image: initial;
94
+ border-color: #b0b9c2;
95
+ border-radius: 8px;
96
+ box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px,
97
+ rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
98
+ }
99
+
100
+ .partition__full:hover {
101
+ border: solid #195039 0.025em;
102
+ }
103
+
104
+ .partition__header,
105
+ .partition__body,
106
+ .partition__full,
107
+ .table__body,
108
+ .table__header {
109
+ font-size: 1em;
110
+ font-family: 'nt-dapper', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
111
+ Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
112
+ }
113
+
114
+ .partition__full,
115
+ .table__full {
116
+ margin-bottom: 1rem;
117
+ border-color: #e0e0e0;
118
+ }
119
+
120
+ .partition__header,
121
+ .table__header {
122
+ background-color: #ccefff50;
123
+ color: #6daaa7;
124
+ text-transform: none;
125
+ border-bottom-style: none;
126
+ }
127
+
128
+ .partition_value {
129
+ background-color: #ccefff50;
130
+ color: #6daaa7;
131
+ border: 1px solid #6daaa750;
132
+ }
133
+
134
+ .table__header {
135
+ background-color: rgba(227, 255, 204, 0.31);
136
+ color: #0aa400;
137
+ }
138
+
139
+ .table__body {
140
+ padding: 16px;
141
+ }
142
+
143
+ .table__full {
144
+ /*border-radius: 0.2em;*/
145
+ /*border: none;*/
146
+ }
147
+
148
+ .dj-node__metadata {
149
+ padding: 1em;
150
+ font-family: 'nt-dapper', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
151
+ Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
152
+ font-size: 1em;
153
+ }
154
+
155
+ .collapse-button {
156
+ display: block;
157
+ width: 100%;
158
+ font: 0.8em 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
159
+ text-transform: uppercase;
160
+ border: none;
161
+ margin-top: 0.2em;
162
+ padding: 0.35em;
163
+ }
164
+ .collapse {
165
+ padding-top: 10px;
166
+ }
167
+ .collapse-content.collapsed {
168
+ display: none;
169
+ }
170
+ .collapsed-content.expanded {
171
+ display: block;
172
+ }
173
+ .collapse tr td {
174
+ padding-left: 5px;
175
+ padding-bottom: 5px;
176
+ }
177
+ .serif {
178
+ font-family: 'jetbrains-mono', monospace;
179
+ text-transform: lowercase;
180
+ }
181
+
182
+ .react-flow__handle-left {
183
+ transform: translate(-180%, -50%);
184
+ }
185
+
186
+ .custom-node-subheader {
187
+ --bs-badge-padding-x: 0.4em;
188
+ --bs-badge-padding-y: 0.3em;
189
+ --bs-badge-font-size: 18px;
190
+ --bs-badge-font-weight: 400;
191
+ --bs-badge-color: #fff;
192
+ --bs-badge-border-radius: 0.375rem;
193
+ display: flex;
194
+ flex-direction: column;
195
+ flex-grow: 1;
196
+ padding: var(--bs-badge-padding-y) var(--bs-badge-padding-x);
197
+ margin: 0.55rem;
198
+ font-size: var(--bs-badge-font-size);
199
+ font-weight: var(--bs-badge-font-weight);
200
+ line-height: 1;
201
+ color: var(--bs-badge-color);
202
+ text-align: center;
203
+ white-space: nowrap;
204
+ vertical-align: baseline;
205
+ border-radius: var(--bs-badge-border-radius);
206
+ position: relative;
207
+ justify-content: flex-start;
208
+ }
209
+ .custom-node-port {
210
+ color: #636776;
211
+ font-size: 20px;
212
+ text-align: center;
213
+ }
214
+
215
+ .white_badge {
216
+ background-color: #ffffff !important;
217
+ display: inline-block;
218
+ margin: 0.3rem 0.3rem 0.3rem 0.3rem;
219
+ margin-top: 0.7rem;
220
+ color: #636776;
221
+ }
222
+
223
+ .dimension_attributes {
224
+ max-width: 500px;
225
+ display: inline-flex;
226
+ flex-wrap: wrap;
227
+ justify-content: center;
228
+ }