datajunction-ui 0.0.92 → 0.0.94

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "datajunction-ui",
-  "version": "0.0.92",
+  "version": "0.0.94",
   "description": "DataJunction UI",
   "module": "src/index.tsx",
   "repository": {

package/src/app/components/NodeComponents.jsx

@@ -72,6 +72,9 @@ export function NodeLink({
 
   const ellipsisStyles = ellipsis
     ? {
+        display: 'block',
+        flex: 1,
+        minWidth: 0,
         overflow: 'hidden',
         textOverflow: 'ellipsis',
         whiteSpace: 'nowrap',
@@ -122,6 +125,7 @@ export function NodeDisplay({
         display: 'flex',
         alignItems: 'center',
         gap,
+        ...(ellipsis ? { minWidth: 0, overflow: 'hidden' } : {}),
         ...containerStyle,
       }}
     >

package/src/app/components/Tab.jsx

@@ -3,23 +3,18 @@ import { Component } from 'react';
 export default class Tab extends Component {
   render() {
     const { id, onClick, selectedTab } = this.props;
+    const isActive = selectedTab === id;
     return (
-      <div className={selectedTab === id ? 'col active' : 'col'}>
-        <div className="header-tabs nav-overflow nav nav-tabs">
-          <div className="nav-item">
-            <button
-              id={id}
-              className="nav-link"
-              tabIndex="0"
-              onClick={onClick}
-              aria-label={this.props.name}
-              aria-hidden="false"
-            >
-              {this.props.name}
-            </button>
-          </div>
-        </div>
-      </div>
+      <button
+        id={id}
+        className={isActive ? 'dj-tab dj-tab--active' : 'dj-tab'}
+        tabIndex="0"
+        onClick={onClick}
+        aria-label={this.props.name}
+        aria-hidden="false"
+      >
+        {this.props.name}
+      </button>
     );
   }
 }

package/src/app/components/__tests__/Tab.test.jsx

@@ -10,12 +10,14 @@ describe('<Tab />', () => {
 
   it('has the active class when selectedTab matches id', () => {
     const { container } = render(<Tab id="1" selectedTab="1" />);
-    expect(container.querySelector('.col')).toHaveClass('active');
+    expect(container.querySelector('.dj-tab')).toHaveClass('dj-tab--active');
   });
 
   it('does not have the active class when selectedTab does not match id', () => {
     const { container } = render(<Tab id="1" selectedTab="2" />);
-    expect(container.querySelector('.col')).not.toHaveClass('active');
+    expect(container.querySelector('.dj-tab')).not.toHaveClass(
+      'dj-tab--active',
+    );
   });
 
   it('calls onClick when the button is clicked', () => {

package/src/app/hooks/useWorkspaceData.js

@@ -318,6 +318,232 @@ export function useWorkspaceNeedsAttention(username) {
   return { data, loading, error };
 }
 
+const toNodes = r => r?.data?.findNodesPaginated?.edges?.map(e => e.node) || [];
+
+/**
+ * Fetches all workspace dashboard data in independent parallel groups so that
+ * fast sections (My Nodes, Collections) render immediately while slower ones
+ * (Needs Attention, namespace check) finish in the background.
+ */
+export function useWorkspaceDashboardData(username) {
+  const djClient = useContext(DJClientContext).DataJunctionAPI;
+
+  const [data, setData] = useState({
+    ownedNodes: [],
+    ownedHasMore: {},
+    recentlyEdited: [],
+    editedHasMore: {},
+    watchedNodes: [],
+    collections: [],
+    notifications: [],
+    materializedNodes: [],
+    needsAttention: {
+      nodesMissingDescription: [],
+      invalidNodes: [],
+      staleDrafts: [],
+      orphanedDimensions: [],
+    },
+    hasPersonalNamespace: null,
+  });
+
+  const [loadingStates, setLoadingStates] = useState({
+    myNodes: true,
+    collections: true,
+    notifications: true,
+    materializations: true,
+    needsAttention: true,
+    namespace: true,
+  });
+
+  useEffect(() => {
+    if (!username) {
+      setLoadingStates({
+        myNodes: false,
+        collections: false,
+        notifications: false,
+        materializations: false,
+        needsAttention: false,
+        namespace: false,
+      });
+      return;
+    }
+
+    // Reset all loading flags whenever the username changes (e.g. after initial login)
+    setLoadingStates({
+      myNodes: true,
+      collections: true,
+      notifications: true,
+      materializations: true,
+      needsAttention: true,
+      namespace: true,
+    });
+
+    // Group 1: Owned nodes + recently edited + collections
+    // Each type is queried independently with limit=11 so hasNextPage tells us if there are more.
+    const NODE_TYPES = ['METRIC', 'TRANSFORM', 'DIMENSION', 'CUBE'];
+    const hasNextPage = r =>
+      r?.data?.findNodesPaginated?.pageInfo?.hasNextPage ?? false;
+
+    const fetchMyNodesAndCollections = async () => {
+      try {
+        const [ownedByType, editedByType, collectionsResult] =
+          await Promise.all([
+            Promise.all(
+              NODE_TYPES.map(t =>
+                djClient.getWorkspaceOwnedNodes(username, 11, t),
+              ),
+            ),
+            Promise.all(
+              NODE_TYPES.map(t =>
+                djClient.getWorkspaceRecentlyEdited(username, 11, t),
+              ),
+            ),
+            djClient.getWorkspaceCollections(username),
+          ]);
+
+        const ownedHasMore = Object.fromEntries(
+          NODE_TYPES.map((t, i) => [
+            t.toLowerCase(),
+            hasNextPage(ownedByType[i]),
+          ]),
+        );
+        const editedHasMore = Object.fromEntries(
+          NODE_TYPES.map((t, i) => [
+            t.toLowerCase(),
+            hasNextPage(editedByType[i]),
+          ]),
+        );
+
+        setData(prev => ({
+          ...prev,
+          ownedNodes: ownedByType.flatMap(r => toNodes(r)),
+          ownedHasMore,
+          recentlyEdited: editedByType.flatMap(r => toNodes(r)),
+          editedHasMore,
+          collections: collectionsResult?.data?.listCollections || [],
+        }));
+      } catch (err) {
+        console.error('Error fetching nodes/collections:', err);
+      }
+      setLoadingStates(prev => ({
+        ...prev,
+        myNodes: false,
+        collections: false,
+      }));
+    };
+
+    // Group 2: Watched nodes + notifications (2 round-trips each, run in parallel)
+    const fetchWatchedAndNotifications = async () => {
+      try {
+        const [subscriptions, historyResult] = await Promise.all([
+          djClient.getNotificationPreferences({ entity_type: 'node' }),
+          djClient.getSubscribedHistory(50),
+        ]);
+
+        const watchedNodeNames = (subscriptions || []).map(s => s.entity_name);
+        const historyEntries = historyResult || [];
+        const notifNodeNames = Array.from(
+          new Set(historyEntries.map(h => h.entity_name)),
+        );
+
+        const [watchedNodes, notifNodes] = await Promise.all([
+          watchedNodeNames.length > 0
+            ? djClient.getNodesByNames(watchedNodeNames)
+            : Promise.resolve([]),
+          notifNodeNames.length > 0
+            ? djClient.getNodesByNames(notifNodeNames)
+            : Promise.resolve([]),
+        ]);
+
+        const notifNodeMap = Object.fromEntries(
+          (notifNodes || []).map(n => [n.name, n]),
+        );
+        const notifications = historyEntries.map(entry => ({
+          ...entry,
+          node_type: notifNodeMap[entry.entity_name]?.type,
+          display_name: notifNodeMap[entry.entity_name]?.current?.displayName,
+        }));
+
+        setData(prev => ({
+          ...prev,
+          watchedNodes: watchedNodes || [],
+          notifications,
+        }));
+      } catch (err) {
+        console.error('Error fetching watched/notifications:', err);
+      }
+      setLoadingStates(prev => ({ ...prev, notifications: false }));
+    };
+
+    // Group 3: Materializations (small limit — we only display 5)
+    const fetchMaterializations = async () => {
+      try {
+        const result = await djClient.getWorkspaceMaterializations(username, 6);
+        setData(prev => ({ ...prev, materializedNodes: toNodes(result) }));
+      } catch (err) {
+        console.error('Error fetching materializations:', err);
+      }
+      setLoadingStates(prev => ({ ...prev, materializations: false }));
+    };
+
+    // Group 4: Needs Attention + personal namespace check (slower, loads last)
+    const fetchNeedsAttentionAndNamespace = async () => {
+      try {
+        const usernameForNamespace = username.split('@')[0];
+        const personalNamespace = `users.${usernameForNamespace}`;
+
+        const [
+          missingDescResult,
+          invalidResult,
+          draftResult,
+          orphanedResult,
+          namespacesList,
+        ] = await Promise.all([
+          djClient.getWorkspaceNodesMissingDescription(username, 100),
+          djClient.getWorkspaceInvalidNodes(username, 100),
+          djClient.getWorkspaceDraftNodes(username, 100),
+          djClient.getWorkspaceOrphanedDimensions(username, 100),
+          djClient.namespaces(),
+        ]);
+
+        const sevenDaysAgo = new Date();
+        sevenDaysAgo.setDate(sevenDaysAgo.getDate() - 7);
+        const allDrafts = toNodes(draftResult);
+
+        setData(prev => ({
+          ...prev,
+          needsAttention: {
+            nodesMissingDescription: toNodes(missingDescResult),
+            invalidNodes: toNodes(invalidResult),
+            staleDrafts: allDrafts.filter(
+              n => new Date(n.current?.updatedAt) < sevenDaysAgo,
+            ),
+            orphanedDimensions: toNodes(orphanedResult),
+          },
+          hasPersonalNamespace: (namespacesList || []).some(
+            ns => ns.namespace === personalNamespace,
+          ),
+        }));
+      } catch (err) {
+        console.error('Error fetching needs attention:', err);
+      }
+      setLoadingStates(prev => ({
+        ...prev,
+        needsAttention: false,
+        namespace: false,
+      }));
+    };
+
+    // All four groups fire independently — each resolves its own loading flag
+    fetchMyNodesAndCollections();
+    fetchWatchedAndNotifications();
+    fetchMaterializations();
+    fetchNeedsAttentionAndNamespace();
+  }, [djClient, username]);
+
+  return { data, loadingStates };
+}
+
 /**
  * Hook to check if personal namespace exists
  */

package/src/app/index.tsx

@@ -30,6 +30,22 @@ import { DataJunctionAPI } from './services/DJService';
 import { CookiesProvider, useCookies } from 'react-cookie';
 import * as Constants from './constants';
 
+// ReactFlow triggers "ResizeObserver loop completed with undelivered notifications"
+// which webpack-dev-server treats as an uncaught error and shows an overlay that
+// blocks navigation. Suppress it at the window level — it's a harmless browser warning.
+window.addEventListener('error', e => {
+  if (
+    e.message ===
+    'ResizeObserver loop completed with undelivered notifications.'
+  ) {
+    e.stopImmediatePropagation();
+  }
+});
+
+// Stable context value — DataJunctionAPI is a module-level singleton that
+// never changes, so this object only needs to be created once.
+const DJ_CONTEXT_VALUE = { DataJunctionAPI };
+
 export function App() {
   const [cookies] = useCookies([Constants.LOGGED_IN_FLAG_COOKIE]);
   return (
@@ -46,7 +62,7 @@ export function App() {
                 content="DataJunction serves as a semantic layer to help manage metrics"
               />
             </Helmet>
-            <DJClientContext.Provider value={{ DataJunctionAPI }}>
+            <DJClientContext.Provider value={DJ_CONTEXT_VALUE}>
               <UserProvider>
                 <Routes>
                   <Route

package/src/app/pages/MyWorkspacePage/ActiveBranchesSection.jsx

@@ -1,15 +1,9 @@
 import * as React from 'react';
-import { useContext, useEffect, useState } from 'react';
-import DJClientContext from '../../providers/djclient';
 import DashboardCard from '../../components/DashboardCard';
 import { formatRelativeTime } from '../../utils/date';
 
 // Git Namespaces Section - shows git-managed namespaces with their branches
 export function ActiveBranchesSection({ ownedNodes, recentlyEdited, loading }) {
-  const djClient = useContext(DJClientContext).DataJunctionAPI;
-  const [branchCounts, setBranchCounts] = useState({});
-  const [countsLoading, setCountsLoading] = useState(true);
-
   // Combine owned and edited nodes to get all user's nodes
   const allNodes = [...ownedNodes, ...recentlyEdited];
 
@@ -28,8 +22,9 @@ export function ActiveBranchesSection({ ownedNodes, recentlyEdited, loading }) {
       } else {
         // Fallback: remove the branch part from fullNamespace
         // fullNamespace is like "myproject.main", we want "myproject"
-        const parts = fullNamespace.split('.');
-        baseNamespace = parts.slice(0, -1).join('.');
+        const dotIdx = fullNamespace.lastIndexOf('.');
+        baseNamespace =
+          dotIdx > 0 ? fullNamespace.slice(0, dotIdx) : fullNamespace;
       }
 
       if (!gitNamespaceMap.has(baseNamespace)) {
@@ -112,56 +107,6 @@ export function ActiveBranchesSection({ ownedNodes, recentlyEdited, loading }) {
 
   const maxDisplay = 3; // Show top 3 git namespaces
 
-  // Fetch total node counts for each branch
-  useEffect(() => {
-    if (loading) return;
-
-    if (gitNamespaces.length === 0) {
-      setCountsLoading(false);
-      return;
-    }
-
-    const fetchCounts = async () => {
-      const counts = {};
-
-      // Collect all branch namespaces to query
-      const branchNamespaces = [];
-      gitNamespaces.forEach(gitNs => {
-        gitNs.branches.forEach(branch => {
-          branchNamespaces.push(branch.namespace);
-        });
-      });
-
-      // Fetch counts for all branches in parallel
-      const countPromises = branchNamespaces.map(async namespace => {
-        try {
-          const result = await djClient.listNodesForLanding(
-            namespace,
-            ['TRANSFORM', 'METRIC', 'DIMENSION', 'CUBE'], // Exclude SOURCE nodes
-            null, // tags
-            null, // editedBy
-            null, // before
-            null, // after
-            5000, // high limit to get accurate count
-            { key: 'name', direction: 'ascending' }, // sortConfig (required, but doesn't matter for counting)
-            null, // mode
-          );
-          const count = result?.data?.findNodesPaginated?.edges?.length || 0;
-          counts[namespace] = count;
-        } catch (error) {
-          console.error(`Error fetching count for ${namespace}:`, error);
-          counts[namespace] = 0;
-        }
-      });
-
-      await Promise.all(countPromises);
-      setBranchCounts(counts);
-      setCountsLoading(false);
-    };
-
-    fetchCounts();
-  }, [djClient, loading, gitNamespaces.length]);
-
   const gitNamespacesList = gitNamespaces
     .slice(0, maxDisplay)
     .map((gitNs, gitNsIdx) => {
@@ -204,68 +149,54 @@ export function ActiveBranchesSection({ ownedNodes, recentlyEdited, loading }) {
           </div>
 
           {/* Branch list */}
-          {gitNs.branches.map(branchInfo => {
-            const totalNodes = branchCounts[branchInfo.namespace] ?? 0;
-            return (
+          {gitNs.branches.map(branchInfo => (
+            <div
+              key={branchInfo.branch}
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'space-between',
+                padding: '0px 1em 0.4em 1em',
+              }}
+            >
               <div
-                key={branchInfo.branch}
                 style={{
                   display: 'flex',
                   alignItems: 'center',
-                  justifyContent: 'space-between',
-                  padding: '0px 1em 0.4em 1em',
+                  gap: '6px',
+                  minWidth: 0,
+                  flex: 1,
                 }}
               >
-                <div
+                <a
+                  href={`/namespaces/${branchInfo.namespace}`}
                   style={{
-                    display: 'flex',
-                    alignItems: 'center',
-                    gap: '6px',
-                    minWidth: 0,
-                    flex: 1,
+                    fontSize: '12px',
+                    fontWeight: '500',
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                    whiteSpace: 'nowrap',
                   }}
                 >
-                  <a
-                    href={`/namespaces/${branchInfo.namespace}`}
-                    style={{
-                      fontSize: '12px',
-                      fontWeight: '500',
-                      overflow: 'hidden',
-                      textOverflow: 'ellipsis',
-                      whiteSpace: 'nowrap',
-                    }}
-                  >
-                    {branchInfo.branch}
-                  </a>
-                  {branchInfo.isDefault && (
-                    <span style={{ fontSize: '10px' }}>⭐</span>
-                  )}
-                </div>
-                <div
+                  {branchInfo.branch}
+                </a>
+                {branchInfo.isDefault && (
+                  <span style={{ fontSize: '10px' }}>⭐</span>
+                )}
+              </div>
+              {branchInfo.lastActivity && (
+                <span
                   style={{
-                    display: 'flex',
-                    alignItems: 'center',
-                    gap: '6px',
                     fontSize: '10px',
-                    color: '#666',
+                    color: '#888',
                     whiteSpace: 'nowrap',
                   }}
                 >
-                  <span>
-                    {totalNodes} node{totalNodes !== 1 ? 's' : ''}
-                  </span>
-                  {branchInfo.lastActivity && (
-                    <>
-                      <span>•</span>
-                      <span style={{ color: '#888' }}>
-                        updated {formatRelativeTime(branchInfo.lastActivity)}
-                      </span>
-                    </>
-                  )}
-                </div>
-              </div>
-            );
-          })}
+                  updated {formatRelativeTime(branchInfo.lastActivity)}
+                </span>
+              )}
+            </div>
+          ))}
 
           {/* Horizontal line between namespaces */}
           {!isLastGitNs && (
@@ -283,7 +214,7 @@ export function ActiveBranchesSection({ ownedNodes, recentlyEdited, loading }) {
   return (
     <DashboardCard
       title="Git Namespaces"
-      loading={loading || countsLoading}
+      loading={loading}
       cardStyle={{
         padding: '0.25rem 0.25rem 0.5em 0.75rem',
         maxHeight: '300px',

package/src/app/pages/MyWorkspacePage/MyNodesSection.jsx

@@ -8,7 +8,7 @@ import { TypeGroupGrid } from './TypeGroupGrid';
 const NODE_TYPE_ORDER = ['metric', 'cube', 'dimension', 'transform', 'source'];
 
 // Helper to group nodes by type
-function groupNodesByType(nodes) {
+function groupNodesByType(nodes, hasMoreMap = {}) {
   const groups = {};
   nodes.forEach(node => {
     const type = (node.type || 'unknown').toLowerCase();
@@ -20,21 +20,36 @@ function groupNodesByType(nodes) {
   return NODE_TYPE_ORDER.filter(type => groups[type]?.length > 0).map(type => ({
     type,
     nodes: groups[type],
-    count: groups[type].length,
+    hasMore: hasMoreMap[type] ?? false,
   }));
 }
 
 // My Nodes Section (owned + watched, with tabs)
 export function MyNodesSection({
   ownedNodes,
+  ownedHasMore = {},
   watchedNodes,
   recentlyEdited,
+  editedHasMore = {},
   username,
   loading,
 }) {
   const [activeTab, setActiveTab] = React.useState('owned');
+  const hasAutoSwitchedTab = React.useRef(false);
+
+  // Once data loads, auto-switch to "edited" if user has no owned nodes but has edits
+  React.useEffect(() => {
+    if (hasAutoSwitchedTab.current) return;
+    if (ownedNodes.length === 0 && recentlyEdited.length > 0) {
+      setActiveTab('edited');
+      hasAutoSwitchedTab.current = true;
+    } else if (ownedNodes.length > 0) {
+      hasAutoSwitchedTab.current = true; // owned nodes exist, stick with default
+    }
+  }, [ownedNodes.length, recentlyEdited.length]);
   const [groupByType, setGroupByType] = React.useState(() => {
-    return localStorage.getItem('workspace_groupByType') === 'true';
+    const stored = localStorage.getItem('workspace_groupByType');
+    return stored === null ? true : stored === 'true';
   });
 
   const ownedNames = new Set(ownedNodes.map(n => n.name));
@@ -73,8 +88,18 @@ export function MyNodesSection({
     localStorage.setItem('workspace_groupByType', checked.toString());
   };
 
+  // Pick the right hasMore map for the active tab
+  const activeHasMore =
+    activeTab === 'owned'
+      ? ownedHasMore
+      : activeTab === 'edited'
+      ? editedHasMore
+      : {};
+
   // Group nodes by type if enabled
-  const groupedData = groupByType ? groupNodesByType(displayNodes) : null;
+  const groupedData = groupByType
+    ? groupNodesByType(displayNodes, activeHasMore)
+    : null;
 
   return (
     <DashboardCard
@@ -222,7 +247,7 @@ export function MyNodesSection({
                   color: activeTab === 'owned' ? '#fff' : '#495057',
                 }}
               >
-                Owned ({ownedNodes.length})
+                Owned
               </button>
               <button
                 onClick={() => setActiveTab('watched')}
@@ -256,7 +281,7 @@ export function MyNodesSection({
                   color: activeTab === 'edited' ? '#fff' : '#495057',
                 }}
               >
-                Recent Edits ({recentlyEdited.length})
+                Recent Edits
               </button>
             </div>
 

package/src/app/pages/MyWorkspacePage/MyWorkspacePage.css

@@ -485,6 +485,7 @@
   grid-template-columns: repeat(2, 1fr);
   gap: 0.75rem;
   padding: 0.5rem 0;
+  width: 100%;
 }
 
 .type-group-card {
@@ -495,6 +496,8 @@
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
+  min-width: 0;
+  overflow: hidden;
 }
 
 .type-group-header {
@@ -602,6 +605,8 @@
 
 .node-list-item-display {
   margin-bottom: 0.25rem;
+  min-width: 0;
+  overflow: hidden;
 }
 
 .node-list-item-name {