datajunction-ui 0.0.75 → 0.0.76

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

@@ -0,0 +1,190 @@
+import * as React from 'react';
+import { Link } from 'react-router-dom';
+import DashboardCard from '../../components/DashboardCard';
+import { NodeDisplay } from '../../components/NodeComponents';
+
+// Materializations Section
+export function MaterializationsSection({ nodes, loading }) {
+  // Ensure nodes is always an array
+  const sortedNodes = (nodes || []).slice().sort((a, b) => {
+    const aTs = a.current?.availability?.validThroughTs;
+    const bTs = b.current?.availability?.validThroughTs;
+    if (!aTs && !bTs) return 0;
+    if (!aTs) return 1;
+    if (!bTs) return -1;
+    return bTs - aTs;
+  });
+
+  const getAvailabilityStatus = availability => {
+    if (!availability) {
+      return { icon: '⏳', text: 'Pending', color: '#6c757d' };
+    }
+    const validThrough = availability.validThroughTs
+      ? new Date(availability.validThroughTs)
+      : null;
+    const now = new Date();
+    const hoursSinceUpdate = validThrough
+      ? (now - validThrough) / (1000 * 60 * 60)
+      : null;
+    if (!validThrough) {
+      return { icon: '⏳', text: 'Pending', color: '#6c757d' };
+    } else if (hoursSinceUpdate <= 24) {
+      return {
+        icon: '🟢',
+        text: formatTimeAgo(validThrough),
+        color: '#28a745',
+      };
+    } else if (hoursSinceUpdate <= 72) {
+      return {
+        icon: '🟡',
+        text: formatTimeAgo(validThrough),
+        color: '#ffc107',
+      };
+    } else {
+      return {
+        icon: '🔴',
+        text: formatTimeAgo(validThrough),
+        color: '#dc3545',
+      };
+    }
+  };
+
+  const formatTimeAgo = date => {
+    const now = new Date();
+    const diffMs = now - date;
+    const diffHours = Math.floor(diffMs / (1000 * 60 * 60));
+    const diffDays = Math.floor(diffHours / 24);
+    if (diffHours < 1) return 'just now';
+    if (diffHours < 24) return `${diffHours}h ago`;
+    if (diffDays === 1) return 'yesterday';
+    return `${diffDays}d ago`;
+  };
+
+  const maxDisplay = 5;
+
+  const materializationsList = sortedNodes.slice(0, maxDisplay).map(node => {
+    const status = getAvailabilityStatus(node.current?.availability);
+    return (
+      <div
+        key={node.name}
+        style={{
+          padding: '0.5rem',
+          border: '1px solid var(--border-color, #e0e0e0)',
+          borderRadius: '4px',
+          backgroundColor: 'var(--card-bg, #fff)',
+        }}
+      >
+        <div
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            marginBottom: '4px',
+          }}
+        >
+          <NodeDisplay node={node} size="medium" />
+          <span style={{ fontSize: '10px', color: status.color }}>
+            {status.icon} {status.text}
+          </span>
+        </div>
+        <div style={{ fontSize: '10px', color: '#666' }}>
+          {node.current?.materializations?.map(mat => (
+            <span key={mat.name} style={{ marginRight: '8px' }}>
+              🕐 {mat.schedule || 'No schedule'}
+            </span>
+          ))}
+          {node.current?.availability?.table && (
+            <span style={{ color: '#888' }}>
+              → {node.current.availability.table}
+            </span>
+          )}
+        </div>
+      </div>
+    );
+  });
+
+  return (
+    <DashboardCard
+      title="Materializations"
+      actionLink="/?hasMaterialization=true"
+      loading={loading}
+      cardStyle={{
+        padding: '0.75rem 1rem',
+        maxHeight: '300px',
+        overflowY: 'auto',
+      }}
+      emptyState={
+        <div style={{ padding: '0' }}>
+          <p
+            style={{ fontSize: '12px', color: '#666', marginBottom: '0.75rem' }}
+          >
+            No materializations configured.
+          </p>
+          <div
+            style={{
+              padding: '0.75rem',
+              backgroundColor: 'var(--card-bg, #f8f9fa)',
+              border: '1px dashed var(--border-color, #dee2e6)',
+              borderRadius: '6px',
+              textAlign: 'center',
+            }}
+          >
+            <div style={{ fontSize: '16px', marginBottom: '0.25rem' }}>📦</div>
+            <div
+              style={{
+                fontSize: '11px',
+                fontWeight: '500',
+                marginBottom: '0.25rem',
+              }}
+            >
+              Materialize a node
+            </div>
+            <p
+              style={{
+                fontSize: '10px',
+                color: '#666',
+                marginBottom: '0.5rem',
+              }}
+            >
+              Speed up queries with cached data
+            </p>
+            <Link
+              to="/"
+              style={{
+                display: 'inline-block',
+                padding: '3px 8px',
+                fontSize: '10px',
+                backgroundColor: 'var(--primary-color, #4a90d9)',
+                color: '#fff',
+                borderRadius: '4px',
+                textDecoration: 'none',
+              }}
+            >
+              Browse nodes →
+            </Link>
+          </div>
+        </div>
+      }
+    >
+      {sortedNodes.length > 0 && (
+        <div
+          style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}
+        >
+          {materializationsList}
+          {sortedNodes.length > maxDisplay && (
+            <div
+              style={{
+                textAlign: 'center',
+                padding: '0.5rem',
+                fontSize: '12px',
+                color: '#666',
+              }}
+            >
+              +{sortedNodes.length - maxDisplay} more
+            </div>
+          )}
+        </div>
+      )}
+    </DashboardCard>
+  );
+}

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

@@ -0,0 +1,342 @@
+import * as React from 'react';
+import { Link } from 'react-router-dom';
+import DashboardCard from '../../components/DashboardCard';
+import { NodeList } from './NodeList';
+import { TypeGroupGrid } from './TypeGroupGrid';
+
+// Node type display order
+const NODE_TYPE_ORDER = ['metric', 'cube', 'dimension', 'transform', 'source'];
+
+// Helper to group nodes by type
+function groupNodesByType(nodes) {
+  const groups = {};
+  nodes.forEach(node => {
+    const type = (node.type || 'unknown').toLowerCase();
+    if (!groups[type]) groups[type] = [];
+    groups[type].push(node);
+  });
+
+  // Return types in defined order, only including types with nodes
+  return NODE_TYPE_ORDER.filter(type => groups[type]?.length > 0).map(type => ({
+    type,
+    nodes: groups[type],
+    count: groups[type].length,
+  }));
+}
+
+// My Nodes Section (owned + watched, with tabs)
+export function MyNodesSection({
+  ownedNodes,
+  watchedNodes,
+  recentlyEdited,
+  username,
+  loading,
+}) {
+  const [activeTab, setActiveTab] = React.useState('owned');
+  const [groupByType, setGroupByType] = React.useState(() => {
+    return localStorage.getItem('workspace_groupByType') === 'true';
+  });
+
+  const ownedNames = new Set(ownedNodes.map(n => n.name));
+  const watchedOnly = watchedNodes.filter(n => !ownedNames.has(n.name));
+
+  const allMyNodeNames = new Set([
+    ...ownedNames,
+    ...watchedNodes.map(n => n.name),
+  ]);
+  const editedOnly = recentlyEdited.filter(n => !allMyNodeNames.has(n.name));
+
+  const getDisplayNodes = () => {
+    switch (activeTab) {
+      case 'owned':
+        return ownedNodes;
+      case 'watched':
+        return watchedOnly;
+      case 'edited':
+        return recentlyEdited;
+      default:
+        return ownedNodes;
+    }
+  };
+  const displayNodes = getDisplayNodes();
+
+  const hasAnyContent =
+    ownedNodes.length > 0 ||
+    watchedOnly.length > 0 ||
+    recentlyEdited.length > 0;
+  const maxDisplay = 8;
+
+  // Handle group by type toggle
+  const handleGroupByTypeChange = e => {
+    const checked = e.target.checked;
+    setGroupByType(checked);
+    localStorage.setItem('workspace_groupByType', checked.toString());
+  };
+
+  // Group nodes by type if enabled
+  const groupedData = groupByType ? groupNodesByType(displayNodes) : null;
+
+  return (
+    <DashboardCard
+      title="My Nodes"
+      actionLink={`/?ownedBy=${username}`}
+      loading={loading}
+      cardStyle={{
+        padding: '0.25rem 0.75rem',
+      }}
+      emptyState={
+        <div style={{ padding: '0.75rem 0' }}>
+          <p
+            style={{ fontSize: '12px', color: '#666', marginBottom: '0.75rem' }}
+          >
+            No nodes yet.
+          </p>
+          <div style={{ display: 'flex', gap: '0.75rem' }}>
+            <div
+              style={{
+                flex: 1,
+                padding: '0.75rem',
+                backgroundColor: 'var(--card-bg, #f8f9fa)',
+                border: '1px dashed var(--border-color, #dee2e6)',
+                borderRadius: '6px',
+                textAlign: 'center',
+              }}
+            >
+              <div style={{ fontSize: '16px', marginBottom: '0.25rem' }}>
+                ➕
+              </div>
+              <div
+                style={{
+                  fontSize: '11px',
+                  fontWeight: '500',
+                  marginBottom: '0.25rem',
+                }}
+              >
+                Create a node
+              </div>
+              <p
+                style={{
+                  fontSize: '10px',
+                  color: '#666',
+                  marginBottom: '0.5rem',
+                }}
+              >
+                Build your data model
+              </p>
+              <Link
+                to="/create/source"
+                style={{
+                  display: 'inline-block',
+                  padding: '3px 8px',
+                  fontSize: '10px',
+                  backgroundColor: 'var(--primary-color, #4a90d9)',
+                  color: '#fff',
+                  borderRadius: '4px',
+                  textDecoration: 'none',
+                }}
+              >
+                Create →
+              </Link>
+            </div>
+            <div
+              style={{
+                flex: 1,
+                padding: '0.75rem',
+                backgroundColor: 'var(--card-bg, #f8f9fa)',
+                border: '1px dashed var(--border-color, #dee2e6)',
+                borderRadius: '6px',
+                textAlign: 'center',
+              }}
+            >
+              <div style={{ fontSize: '16px', marginBottom: '0.25rem' }}>
+                👤
+              </div>
+              <div
+                style={{
+                  fontSize: '11px',
+                  fontWeight: '500',
+                  marginBottom: '0.25rem',
+                }}
+              >
+                Claim ownership
+              </div>
+              <p
+                style={{
+                  fontSize: '10px',
+                  color: '#666',
+                  marginBottom: '0.5rem',
+                }}
+              >
+                Add yourself as owner
+              </p>
+              <Link
+                to="/"
+                style={{
+                  display: 'inline-block',
+                  padding: '3px 8px',
+                  fontSize: '10px',
+                  backgroundColor: '#6c757d',
+                  color: '#fff',
+                  borderRadius: '4px',
+                  textDecoration: 'none',
+                }}
+              >
+                Browse →
+              </Link>
+            </div>
+          </div>
+        </div>
+      }
+    >
+      {hasAnyContent && (
+        <>
+          {/* Tabs and Group by Type Toggle */}
+          <div
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'space-between',
+              gap: '0.5rem',
+              marginBottom: '0.5rem',
+              paddingTop: '0.5rem',
+              paddingBottom: displayNodes.length > 0 ? '0.5rem' : '0',
+              borderBottom:
+                displayNodes.length > 0
+                  ? '1px solid var(--border-color, #eee)'
+                  : 'none',
+            }}
+          >
+            <div style={{ display: 'flex', gap: '0.5rem' }}>
+              <button
+                onClick={() => setActiveTab('owned')}
+                style={{
+                  padding: '4px 10px',
+                  fontSize: '11px',
+                  border: 'none',
+                  borderRadius: '4px',
+                  cursor: 'pointer',
+                  backgroundColor:
+                    activeTab === 'owned'
+                      ? 'var(--primary-color, #4a90d9)'
+                      : '#e9ecef',
+                  color: activeTab === 'owned' ? '#fff' : '#495057',
+                }}
+              >
+                Owned ({ownedNodes.length})
+              </button>
+              <button
+                onClick={() => setActiveTab('watched')}
+                style={{
+                  padding: '4px 10px',
+                  fontSize: '11px',
+                  border: 'none',
+                  borderRadius: '4px',
+                  cursor: 'pointer',
+                  backgroundColor:
+                    activeTab === 'watched'
+                      ? 'var(--primary-color, #4a90d9)'
+                      : '#e9ecef',
+                  color: activeTab === 'watched' ? '#fff' : '#495057',
+                }}
+              >
+                Watched ({watchedOnly.length})
+              </button>
+              <button
+                onClick={() => setActiveTab('edited')}
+                style={{
+                  padding: '4px 10px',
+                  fontSize: '11px',
+                  border: 'none',
+                  borderRadius: '4px',
+                  cursor: 'pointer',
+                  backgroundColor:
+                    activeTab === 'edited'
+                      ? 'var(--primary-color, #4a90d9)'
+                      : '#e9ecef',
+                  color: activeTab === 'edited' ? '#fff' : '#495057',
+                }}
+              >
+                Recent Edits ({recentlyEdited.length})
+              </button>
+            </div>
+
+            {/* Group by Type Toggle */}
+            {displayNodes.length > 0 && (
+              <div
+                style={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  gap: '0.5rem',
+                }}
+              >
+                <input
+                  type="checkbox"
+                  id="groupByType"
+                  checked={groupByType}
+                  onChange={handleGroupByTypeChange}
+                  style={{ cursor: 'pointer' }}
+                />
+                <label
+                  htmlFor="groupByType"
+                  style={{
+                    fontSize: '11px',
+                    cursor: 'pointer',
+                    userSelect: 'none',
+                    color: '#495057',
+                    fontWeight: '500',
+                  }}
+                >
+                  Group by Type
+                </label>
+              </div>
+            )}
+          </div>
+
+          {displayNodes.length > 0 ? (
+            <>
+              {groupByType ? (
+                <TypeGroupGrid
+                  groupedData={groupedData}
+                  username={username}
+                  activeTab={activeTab}
+                />
+              ) : (
+                <>
+                  <NodeList
+                    nodes={displayNodes.slice(0, maxDisplay)}
+                    showUpdatedAt={true}
+                  />
+                  {displayNodes.length > maxDisplay && (
+                    <div
+                      style={{
+                        textAlign: 'center',
+                        padding: '0.5rem',
+                        fontSize: '12px',
+                        color: '#666',
+                      }}
+                    >
+                      +{displayNodes.length - maxDisplay} more
+                    </div>
+                  )}
+                </>
+              )}
+            </>
+          ) : (
+            <div
+              style={{
+                padding: '1rem',
+                textAlign: 'center',
+                color: '#666',
+                fontSize: '12px',
+              }}
+            >
+              {activeTab === 'owned' && 'No owned nodes'}
+              {activeTab === 'watched' && 'No watched nodes'}
+              {activeTab === 'edited' && 'No recent edits'}
+            </div>
+          )}
+        </>
+      )}
+    </DashboardCard>
+  );
+}