datajunction-ui 0.0.1-a40.dev → 0.0.1-a42

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "datajunction-ui",
-  "version": "0.0.1-a40.dev",
+  "version": "0.0.1a42",
   "description": "DataJunction Metrics Platform UI",
   "module": "src/index.tsx",
   "repository": {

package/src/app/components/djgraph/Collapse.jsx

@@ -5,6 +5,7 @@ import { DJNodeColumns } from './DJNodeColumns';
 export default function Collapse({ collapsed, text, data }) {
   const [isCollapsed, setIsCollapsed] = React.useState(collapsed);
 
+  const limit = 5;
   return (
     <>
       <div className="collapse">
@@ -26,11 +27,11 @@ export default function Collapse({ collapsed, text, data }) {
         >
           {data.type !== 'metric'
             ? isCollapsed
-              ? DJNodeColumns({ data: data, limit: 10 })
+              ? DJNodeColumns({ data: data, limit: limit })
               : DJNodeColumns({ data: data, limit: 100 })
             : DJNodeDimensions(data)}
         </div>
-        {data.type !== 'metric' && data.column_names.length > 10 ? (
+        {data.type !== 'metric' && data.column_names.length > limit ? (
           <button
             className="collapse-button"
             onClick={() => setIsCollapsed(!isCollapsed)}

package/src/app/components/djgraph/DJNodeColumns.jsx

@@ -33,7 +33,11 @@ export function DJNodeColumns({ data, limit }) {
   };
   return data.column_names.slice(0, limit).map(col => (
     <div
-      className={'custom-node-subheader node_type__' + data.type}
+      className={
+        'custom-node-subheader node_type__' +
+        data.type +
+        (col.order <= 0 ? ' custom-node-emphasis' : '')
+      }
       key={`${data.name}.${col.name}`}
     >
       <div style={handleWrapperStyle}>

package/src/app/components/djgraph/LayoutFlow.jsx

@@ -32,8 +32,10 @@ const getLayoutedElements = (
   const nodeHeightTracker = {};
 
   nodes.forEach(node => {
-    nodeHeightTracker[node.id] =
-      Math.min(node.data.column_names.length, 10) * 40 + 250;
+    const minColumnsLength = node.data.column_names.filter(
+      col => col.order > 0,
+    ).length;
+    nodeHeightTracker[node.id] = Math.min(minColumnsLength, 5) * 40 + 250;
     dagreGraph.setNode(node.id, {
       width: nodeWidth,
       height: nodeHeightTracker[node.id],
@@ -52,7 +54,7 @@ const getLayoutedElements = (
     node.sourcePosition = isHorizontal ? 'right' : 'bottom';
     node.position = {
       x: nodeWithPosition.x - nodeWidth / 2,
-      y: nodeWithPosition.y - nodeHeightTracker[node.id] / 2,
+      y: nodeWithPosition.y - nodeHeightTracker[node.id] / 3,
     };
     node.width = nodeWidth;
     node.height = nodeHeightTracker[node.id];

package/src/app/pages/AddEditNodePage/__tests__/AddEditNodePageFormFailed.test.jsx

@@ -93,7 +93,7 @@ describe('AddEditNodePage submission failed', () => {
       expect(mockDjClient.DataJunctionAPI.tagsNode).toBeCalled();
       expect(mockDjClient.DataJunctionAPI.tagsNode).toBeCalledWith(
         'default.num_repair_orders',
-        [{ display_name: 'Purpose', name: 'purpose' }],
+        ['purpose'],
       );
       expect(mockDjClient.DataJunctionAPI.tagsNode).toReturnWith({
         json: { message: 'Some tags were not found' },

package/src/app/pages/AddEditNodePage/__tests__/AddEditNodePageFormSuccess.test.jsx

@@ -120,7 +120,7 @@ describe('AddEditNodePage submission succeeded', () => {
       expect(mockDjClient.DataJunctionAPI.tagsNode).toBeCalledTimes(1);
       expect(mockDjClient.DataJunctionAPI.tagsNode).toBeCalledWith(
         'default.num_repair_orders',
-        [{ display_name: 'Purpose', name: 'purpose' }],
+        ['purpose'],
       );
 
       expect(mockDjClient.DataJunctionAPI.listMetricMetadata).toBeCalledTimes(

package/src/app/pages/AddEditNodePage/index.jsx

@@ -214,6 +214,11 @@ export function AddEditNodePage() {
     fields.forEach(field => {
       if (field === 'primary_key') {
         setFieldValue(field, primaryKey.join(', '));
+      } else if (field === 'tags') {
+        setFieldValue(
+          field,
+          data[field].map(tag => tag.name),
+        );
       } else {
         setFieldValue(field, data[field] || '', false);
       }

package/src/app/pages/NodePage/NodeGraphTab.jsx

@@ -15,9 +15,20 @@ const NodeLineage = djNode => {
         col.attributes.some(attr => attr.attribute_type.name === 'primary_key'),
       )
       .map(col => col.name);
-    const column_names = node.columns.map(col => {
-      return { name: col.name, type: col.type };
-    });
+    const column_names = node.columns
+      .map(col => {
+        return {
+          name: col.name,
+          type: col.type,
+          dimension: col.dimension !== null ? col.dimension.name : null,
+          order: primary_key.includes(col.name)
+            ? -1
+            : col.dimension !== null
+            ? 0
+            : 1,
+        };
+      })
+      .sort((a, b) => a.order - b.order);
     return {
       id: String(node.name),
       type: 'DJNode',

package/src/app/pages/NodePage/index.jsx

@@ -15,7 +15,7 @@ import NodesWithDimension from './NodesWithDimension';
 import NodeColumnLineage from './NodeLineageTab';
 import EditIcon from '../../icons/EditIcon';
 import AlertIcon from '../../icons/AlertIcon';
-import NodeDimensionsTab from "./NodeDimensionsTab";
+import NodeDimensionsTab from './NodeDimensionsTab';
 
 export function NodePage() {
   const djClient = useContext(DJClientContext).DataJunctionAPI;

package/src/styles/dag.css

@@ -208,10 +208,12 @@
 }
 .custom-node-port {
   color: #636776;
-  font-size: 20px;
+  font-size: 23px;
   text-align: center;
 }
-
+.custom-node-emphasis {
+  border: 2px dashed #636776;
+}
 .white_badge {
   background-color: #ffffff !important;
   display: inline-block;

package/src/styles/index.css

@@ -1093,7 +1093,6 @@ pre {
   text-decoration: none;
 }
 
-
 .dimensionsList {
   padding: 12px;
   opacity: 1;