datajunction-ui 0.0.1-rc.24 → 0.0.1-rc.26

package/src/app/services/__tests__/DJService.test.jsx

@@ -28,7 +28,7 @@ describe('DataJunctionAPI', () => {
   it('calls logout correctly', async () => {
     fetch.mockResponseOnce(JSON.stringify({}));
     await DataJunctionAPI.logout();
-    expect(fetch).toHaveBeenCalledWith(`${DJ_URL}/basic/logout/`, {
+    expect(fetch).toHaveBeenCalledWith(`${DJ_URL}/logout/`, {
       credentials: 'include',
       method: 'POST',
     });
@@ -606,4 +606,199 @@ describe('DataJunctionAPI', () => {
       },
     );
   });
+
+  it('calls addNamespace correctly', async () => {
+    fetch.mockResponseOnce(JSON.stringify({}));
+    await DataJunctionAPI.addNamespace('test');
+    expect(fetch).toHaveBeenCalledWith(`${DJ_URL}/namespaces/test`, {
+      credentials: 'include',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      method: 'POST',
+    });
+  });
+
+  it('calls listTags correctly', async () => {
+    fetch.mockResponseOnce(JSON.stringify(mocks.tags));
+    const res = await DataJunctionAPI.listTags();
+    expect(fetch).toHaveBeenCalledWith(`${DJ_URL}/tags`, {
+      credentials: 'include',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      method: 'GET',
+    });
+    expect(res).toEqual(mocks.tags);
+  });
+
+  it('calls getTag correctly', async () => {
+    fetch.mockResponseOnce(JSON.stringify(mocks.tags[0]));
+    const res = await DataJunctionAPI.getTag('report.financials');
+    expect(fetch).toHaveBeenCalledWith(`${DJ_URL}/tags/report.financials`, {
+      credentials: 'include',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      method: 'GET',
+    });
+    expect(res).toEqual(mocks.tags[0]);
+  });
+
+  it('calls listNodesForTag correctly', async () => {
+    fetch.mockResponseOnce(JSON.stringify(mocks.mockLinkedNodes));
+    const res = await DataJunctionAPI.listNodesForTag('report.financials');
+    expect(fetch).toHaveBeenCalledWith(
+      `${DJ_URL}/tags/report.financials/nodes`,
+      {
+        credentials: 'include',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        method: 'GET',
+      },
+    );
+    expect(res).toEqual(mocks.mockLinkedNodes);
+  });
+
+  it('calls tagsNode correctly', async () => {
+    fetch.mockResponseOnce(JSON.stringify(mocks.mockLinkedNodes));
+    await DataJunctionAPI.tagsNode('default.num_repair_orders', [
+      'report.financials',
+      'report.forecasts',
+    ]);
+    expect(fetch).toHaveBeenCalledWith(
+      `${DJ_URL}/nodes/default.num_repair_orders/tags?tag_names=report.financials&tag_names=report.forecasts`,
+      {
+        credentials: 'include',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        method: 'POST',
+      },
+    );
+  });
+
+  it('calls addTag correctly', async () => {
+    fetch.mockResponseOnce(JSON.stringify(mocks.mockLinkedNodes));
+    await DataJunctionAPI.addTag(
+      'report.financials',
+      'Financial Reports',
+      'report',
+      'financial reports',
+    );
+    expect(fetch).toHaveBeenCalledWith(`${DJ_URL}/tags`, {
+      credentials: 'include',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        name: 'report.financials',
+        display_name: 'Financial Reports',
+        tag_type: 'report',
+        description: 'financial reports',
+      }),
+      method: 'POST',
+    });
+  });
+
+  it('calls editTag correctly', async () => {
+    fetch.mockResponseOnce(JSON.stringify({}));
+    await DataJunctionAPI.editTag(
+      'report.financials',
+      'Financial reports',
+      'Financial Reports',
+    );
+    expect(fetch).toHaveBeenCalledWith(`${DJ_URL}/tags/report.financials`, {
+      credentials: 'include',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        description: 'Financial reports',
+        display_name: 'Financial Reports',
+      }),
+      method: 'PATCH',
+    });
+  });
+
+  it('calls setPartition correctly', async () => {
+    fetch.mockResponseOnce(JSON.stringify({}));
+    await DataJunctionAPI.setPartition(
+      'default.hard_hat',
+      'hire_date',
+      'temporal',
+      'yyyyMMdd',
+      'day',
+    );
+    expect(fetch).toHaveBeenCalledWith(
+      `${DJ_URL}/nodes/default.hard_hat/columns/hire_date/partition`,
+      {
+        credentials: 'include',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          type_: 'temporal',
+          format: 'yyyyMMdd',
+          granularity: 'day',
+        }),
+        method: 'POST',
+      },
+    );
+  });
+
+  it('calls materialize correctly', async () => {
+    fetch.mockResponseOnce(JSON.stringify({}));
+    await DataJunctionAPI.materialize(
+      'default.hard_hat',
+      'spark',
+      '3.3',
+      '@daily',
+      '{}',
+    );
+    expect(fetch).toHaveBeenCalledWith(
+      `${DJ_URL}/nodes/default.hard_hat/materialization`,
+      {
+        credentials: 'include',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          engine: {
+            name: 'spark',
+            version: '3.3',
+          },
+          schedule: '@daily',
+          config: {},
+        }),
+        method: 'POST',
+      },
+    );
+  });
+
+  it('calls runBackfill correctly', async () => {
+    fetch.mockResponseOnce(JSON.stringify({}));
+    await DataJunctionAPI.runBackfill(
+      'default.hard_hat',
+      'spark',
+      'hire_date',
+      '20230101',
+      '20230202',
+    );
+    expect(fetch).toHaveBeenCalledWith(
+      `${DJ_URL}/nodes/default.hard_hat/materializations/spark/backfill`,
+      {
+        credentials: 'include',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          column_name: 'hire_date',
+          range: ['20230101', '20230202'],
+        }),
+        method: 'POST',
+      },
+    );
+  });
 });

package/src/mocks/mockNodes.jsx

@@ -27,8 +27,10 @@ export const mocks = {
       {
         name: 'default_DOT_num_repair_orders',
         type: 'bigint',
+        display_name: 'Default DOT num repair orders',
         attributes: [],
         dimension: null,
+        partition: null,
       },
     ],
     primary_key: ['repair_order_id', 'country'],
@@ -40,7 +42,7 @@ export const mocks = {
       },
     ],
     created_at: '2023-08-21T16:48:56.841631+00:00',
-    tags: [],
+    tags: [{ name: 'purpose', display_name: 'Purpose' }],
     dimensions: [
       {
         value: 'default.date_dim.dateint',
@@ -243,8 +245,10 @@ export const mocks = {
     {
       name: 'default_DOT_avg_repair_price',
       type: 'double',
+      display_name: 'Default DOT avg repair price',
       attributes: [],
       dimension: null,
+      partition: null,
     },
   ],
   metricNodeHistory: [
@@ -336,32 +340,19 @@ export const mocks = {
   ],
   nodeMaterializations: [
     {
+      backfills: [
+        {
+          spec: {
+            column_name: 'default_DOT_hard_hat_DOT_hire_date',
+            values: null,
+            range: ['20230101', '20230102'],
+          },
+          urls: [],
+        },
+      ],
       name: 'country_birth_date_contractor_id_379232101',
       engine: { name: 'spark', version: '2.4.4', uri: null, dialect: 'spark' },
       config: {
-        partitions: [
-          {
-            name: 'country',
-            values: ['DE', 'MY'],
-            range: null,
-            expression: null,
-            type_: 'categorical',
-          },
-          {
-            name: 'birth_date',
-            values: null,
-            range: [20010101, 20020101],
-            expression: null,
-            type_: 'temporal',
-          },
-          {
-            name: 'contractor_id',
-            values: null,
-            range: [1, 10],
-            expression: null,
-            type_: 'categorical',
-          },
-        ],
         spark: {},
         query:
           "SELECT  default_DOT_hard_hats.address,\n\tdefault_DOT_hard_hats.birth_date,\n\tdefault_DOT_hard_hats.city,\n\tdefault_DOT_hard_hats.contractor_id,\n\tdefault_DOT_hard_hats.country,\n\tdefault_DOT_hard_hats.first_name,\n\tdefault_DOT_hard_hats.hard_hat_id,\n\tdefault_DOT_hard_hats.hire_date,\n\tdefault_DOT_hard_hats.last_name,\n\tdefault_DOT_hard_hats.manager,\n\tdefault_DOT_hard_hats.postal_code,\n\tdefault_DOT_hard_hats.state,\n\tdefault_DOT_hard_hats.title \n FROM roads.hard_hats AS default_DOT_hard_hats \n WHERE  default_DOT_hard_hats.country IN ('DE', 'MY') AND default_DOT_hard_hats.contractor_id BETWEEN 1 AND 10\n\n",
@@ -402,6 +393,7 @@ export const mocks = {
         {
           name: 'default_DOT_avg_repair_price',
           type: 'double',
+          display_name: 'Default DOT avg repair price',
           attributes: [],
           dimension: null,
         },
@@ -442,30 +434,35 @@ export const mocks = {
       {
         name: 'default_DOT_num_repair_orders',
         type: 'bigint',
+        display_name: 'Default DOT num repair orders',
         attributes: [],
         dimension: null,
       },
       {
         name: 'default_DOT_avg_repair_price',
         type: 'double',
+        display_name: 'Default DOT avg repair price',
         attributes: [],
         dimension: null,
       },
       {
         name: 'default_DOT_total_repair_cost',
         type: 'double',
+        display_name: 'Default DOT total repair cost',
         attributes: [],
         dimension: null,
       },
       {
         name: 'default_DOT_total_repair_order_discounts',
         type: 'double',
+        display_name: 'Default DOT total repair order discounts',
         attributes: [],
         dimension: null,
       },
       {
         name: 'company_name',
         type: 'string',
+        display_name: 'Company Name',
         attributes: [
           {
             attribute_type: {
@@ -821,6 +818,7 @@ export const mocks = {
       {
         name: 'default_DOT_avg_repair_price',
         type: 'double',
+        display_name: 'Default DOT avg repair price',
         attributes: [],
         dimension: null,
       },
@@ -1044,6 +1042,7 @@ export const mocks = {
         {
           name: 'repair_order_id',
           type: 'int',
+          display_name: 'Repair Order Id',
           attributes: [],
           dimension: {
             name: 'default.repair_order',
@@ -1052,24 +1051,28 @@ export const mocks = {
         {
           name: 'repair_type_id',
           type: 'int',
+          display_name: 'Repair Type Id',
           attributes: [],
           dimension: null,
         },
         {
           name: 'price',
           type: 'float',
+          display_name: 'Price',
           attributes: [],
           dimension: null,
         },
         {
           name: 'quantity',
           type: 'int',
+          display_name: 'Quantity',
           attributes: [],
           dimension: null,
         },
         {
           name: 'discount',
           type: 'float',
+          display_name: 'Discount',
           attributes: [],
           dimension: null,
         },
@@ -1108,6 +1111,7 @@ export const mocks = {
         {
           name: 'dateint',
           type: 'timestamp',
+          display_name: 'Dateint',
           attributes: [
             {
               attribute_type: {
@@ -1121,18 +1125,21 @@ export const mocks = {
         {
           name: 'month',
           type: 'int',
+          display_name: 'Month',
           attributes: [],
           dimension: null,
         },
         {
           name: 'year',
           type: 'int',
+          display_name: 'Year',
           attributes: [],
           dimension: null,
         },
         {
           name: 'day',
           type: 'int',
+          display_name: 'Day',
           attributes: [],
           dimension: null,
         },
@@ -1175,6 +1182,7 @@ export const mocks = {
         {
           name: 'hard_hat_id',
           type: 'int',
+          display_name: 'Hard Hat Id',
           attributes: [
             {
               attribute_type: {
@@ -1188,24 +1196,28 @@ export const mocks = {
         {
           name: 'last_name',
           type: 'string',
+          display_name: 'Last Name',
           attributes: [],
           dimension: null,
         },
         {
           name: 'first_name',
           type: 'string',
+          display_name: 'First Name',
           attributes: [],
           dimension: null,
         },
         {
           name: 'title',
           type: 'string',
+          display_name: 'Title',
           attributes: [],
           dimension: null,
         },
         {
           name: 'birth_date',
           type: 'date',
+          display_name: 'Birth Date',
           attributes: [],
           dimension: {
             name: 'default.date_dim',
@@ -1218,18 +1230,21 @@ export const mocks = {
           dimension: {
             name: 'default.date_dim',
           },
+          display_name: 'Hire Date',
         },
         {
           name: 'address',
           type: 'string',
           attributes: [],
           dimension: null,
+          display_name: 'Address',
         },
         {
           name: 'city',
           type: 'string',
           attributes: [],
           dimension: null,
+          display_name: 'City',
         },
         {
           name: 'state',
@@ -1238,37 +1253,35 @@ export const mocks = {
           dimension: {
             name: 'default.us_state',
           },
+          display_name: 'State',
         },
         {
           name: 'postal_code',
           type: 'string',
           attributes: [],
           dimension: null,
+          display_name: 'Postal Code',
         },
         {
           name: 'country',
           type: 'string',
           attributes: [],
           dimension: null,
+          display_name: 'Country',
         },
         {
           name: 'manager',
           type: 'int',
           attributes: [],
           dimension: null,
+          display_name: 'Manager',
         },
         {
           name: 'contractor_id',
           type: 'int',
           attributes: [],
           dimension: null,
-        },
-      ],
-      updated_at: '2023-08-21T16:48:55.594603+00:00',
-      materializations: [],
-      parents: [
-        {
-          name: 'default.hard_hats',
+          display_name: 'Contractor Id',
         },
       ],
       created_at: '2023-08-21T16:48:55.594537+00:00',
@@ -1302,6 +1315,7 @@ export const mocks = {
         {
           name: 'default_DOT_avg_repair_price',
           type: 'double',
+          display_name: 'Default DOT avg repair price',
           attributes: [],
           dimension: null,
         },
@@ -1345,6 +1359,7 @@ export const mocks = {
       {
         name: 'dispatcher_id',
         type: 'int',
+        display_name: 'Dispatcher Id',
         attributes: [
           {
             attribute_type: {
@@ -1358,12 +1373,14 @@ export const mocks = {
       {
         name: 'company_name',
         type: 'string',
+        display_name: 'Company Name',
         attributes: [],
         dimension: null,
       },
       {
         name: 'phone',
         type: 'string',
+        display_name: 'Phone',
         attributes: [],
         dimension: null,
       },
@@ -1394,4 +1411,20 @@ export const mocks = {
       display_name: 'Default: Num Repair Orders',
     },
   ],
+  tags: [
+    {
+      description: 'Financial-related reports',
+      display_name: 'Financial Reports',
+      tag_metadata: {},
+      name: 'report.financials',
+      tag_type: 'reports',
+    },
+    {
+      description: 'Forecasting reports',
+      display_name: 'Forecasting Reports',
+      tag_metadata: {},
+      name: 'reports.forecasts',
+      tag_type: 'reports',
+    },
+  ],
 };

package/src/styles/dag.css

@@ -97,6 +97,10 @@
     rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
 }
 
+.partition__full:hover {
+  border: solid #195039 0.025em;
+}
+
 .partition__header,
 .partition__body,
 .partition__full,

package/src/styles/index.css

@@ -369,6 +369,7 @@ tbody th {
   border-top: 1px solid #edf2f9;
   border-bottom: 0;
   padding: 1rem;
+  max-width: 25rem;
 }
 .card-inner-table td,
 .card-inner-table th {
@@ -451,6 +452,17 @@ tbody th {
   background-color: #dbafff !important;
   color: #580076;
 }
+
+.node_type__blank {
+  font-family: 'Jost';
+  background-color: #ffffff !important;
+  color: #a96621;
+}
+.entity__tag {
+  font-family: 'Jost';
+  background-color: #afd4ff !important;
+  color: #002176;
+}
 .react-flow__node .node_type__cube {
   background-color: #c2180750 !important;
   color: #c2180750;
@@ -710,9 +722,11 @@ pre {
 }
 .menu-title a {
   color: #7e8299;
+  cursor: pointer;
 }
 .menu-title a:hover {
   color: #3f4254;
+  cursor: pointer;
 }
 
 .node__header,
@@ -892,7 +906,33 @@ pre {
   position: absolute;
   min-width: 210px;
   max-width: 100%;
-  z-index: 1;
+  z-index: 100000;
+}
+
+.centerPopover {
+  position: absolute !important;
+  top: 1%;
+  left: 25%;
+
+  padding: 1rem 1rem 0.6rem 1rem !important;
+  margin-top: 1rem;
+  border-radius: 10px;
+  text-align: left;
+  position: absolute;
+  min-width: 210px;
+  max-width: 100%;
+  z-index: 100000;
+  background-color: #fff;
+  background-clip: padding-box;
+  border: 1px solid rgba(0, 0, 0, 0.2);
+  -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
+  box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
+  outline: 0;
+}
+
+.centerPopover h2 {
+  margin-top: 0;
+  margin-bottom: 1rem;
 }
 
 .select-name {
@@ -993,3 +1033,51 @@ pre {
 .deleteNode {
   display: inline-block;
 }
+
+.tag_value {
+  color: #5c3b8f;
+  background-color: #5c3b8f25;
+  margin: 0.25rem;
+  font-size: 100%;
+}
+
+.tag_value:hover {
+  background-color: #5c3b8f50;
+}
+
+.modal-backdrop.in {
+  filter: alpha(opacity=50);
+  opacity: 0.5;
+}
+.modal-backdrop.fade {
+  filter: alpha(opacity=0);
+  opacity: 0;
+}
+.fade.in {
+  opacity: 1;
+}
+.modal-backdrop {
+  z-index: 1 !important;
+}
+.modal-backdrop {
+  z-index: 1;
+}
+.modal-backdrop {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 1;
+  background-color: #00000075;
+}
+.fade {
+  opacity: 0;
+  -webkit-transition: opacity 0.15s linear;
+  -o-transition: opacity 0.15s linear;
+  transition: opacity 0.15s linear;
+}
+
+.partitionLink:hover {
+  text-decoration: none;
+}

package/src/styles/loading.css

@@ -0,0 +1,34 @@
+.lds-ring {
+  display: inline-block;
+  position: relative;
+  width: 25px;
+  height: 25px;
+}
+.lds-ring div {
+  box-sizing: border-box;
+  display: block;
+  position: absolute;
+  width: 25px;
+  height: 25px;
+  border: 8px solid #fff;
+  border-radius: 50%;
+  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+  border-color: #fff transparent transparent transparent;
+}
+.lds-ring div:nth-child(1) {
+  animation-delay: -0.45s;
+}
+.lds-ring div:nth-child(2) {
+  animation-delay: -0.3s;
+}
+.lds-ring div:nth-child(3) {
+  animation-delay: -0.15s;
+}
+@keyframes lds-ring {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}