datajunction-ui 0.0.1-a111 → 0.0.1-a113

package/package.json

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

package/src/app/components/NodeMaterializationDelete.jsx

@@ -8,6 +8,7 @@ import { displayMessageAfterSubmit } from '../../utils/form';
 export default function NodeMaterializationDelete({
   nodeName,
   materializationName,
+  nodeVersion = null,
 }) {
   const [deleteButton, setDeleteButton] = React.useState(<DeleteIcon />);
 
@@ -17,6 +18,8 @@ export default function NodeMaterializationDelete({
       !window.confirm(
         'Deleting materialization job ' +
           values.materializationName +
+          ' for node version ' +
+          values.nodeVersion +
           '. Are you sure?',
       )
     ) {
@@ -25,6 +28,7 @@ export default function NodeMaterializationDelete({
     const { status, json } = await djClient.deleteMaterialization(
       values.nodeName,
       values.materializationName,
+      values.nodeVersion,
     );
     if (status === 200 || status === 201 || status === 204) {
       window.location.reload();
@@ -47,11 +51,17 @@ export default function NodeMaterializationDelete({
   const initialValues = {
     nodeName: nodeName,
     materializationName: materializationName,
+    nodeVersion: nodeVersion,
   };
 
   return (
     <div>
-      <Formik initialValues={initialValues} onSubmit={deleteNode}>
+      <Formik
+        key={`${nodeName}-${materializationName}-${nodeVersion}`}
+        initialValues={initialValues}
+        enableReinitialize={true}
+        onSubmit={deleteNode}
+      >
         {function Render({ status, setFieldValue }) {
           return (
             <Form className="deleteNode">

package/src/app/components/Search.jsx

@@ -72,7 +72,7 @@ export default function Search() {
         />
       </form>
       <div className="search-results">
-        {searchResults.map(item => {
+        {searchResults.slice(0, 20).map(item => {
           const itemUrl =
             item.type !== 'tag' ? `/nodes/${item.name}` : `/tags/${item.name}`;
           return (

package/src/app/pages/NamespacePage/__tests__/index.test.jsx

@@ -146,59 +146,60 @@ describe('NamespacePage', () => {
       </MemoryRouter>,
     );
 
-    await waitFor(
-      () => {
-        expect(mockDjClient.listNodesForLanding).toHaveBeenCalled();
-        expect(screen.getByText('Namespaces')).toBeInTheDocument();
+    // Wait for initial nodes to load
+    await waitFor(() => {
+      expect(mockDjClient.listNodesForLanding).toHaveBeenCalled();
+      expect(screen.getByText('Namespaces')).toBeInTheDocument();
+    });
+
+    // Check that it displays namespaces
+    expect(screen.getByText('common')).toBeInTheDocument();
+    expect(screen.getByText('one')).toBeInTheDocument();
+    expect(screen.getByText('fruits')).toBeInTheDocument();
+    expect(screen.getByText('vegetables')).toBeInTheDocument();
+
+    // Check that it renders nodes
+    expect(screen.getByText('Test Node')).toBeInTheDocument();
 
-        // check that it displays namespaces
-        expect(screen.getByText('common')).toBeInTheDocument();
-        expect(screen.getByText('one')).toBeInTheDocument();
-        expect(screen.getByText('fruits')).toBeInTheDocument();
-        expect(screen.getByText('vegetables')).toBeInTheDocument();
+    // --- Sorting ---
+
+    // sort by 'name'
+    fireEvent.click(screen.getByText('name'));
+    await waitFor(() => {
+      expect(mockDjClient.listNodesForLanding).toHaveBeenCalledTimes(2);
+    });
 
-        // check that it renders nodes
-        expect(screen.getByText('Test Node')).toBeInTheDocument();
+    // flip direction
+    fireEvent.click(screen.getByText('name'));
+    await waitFor(() => {
+      expect(mockDjClient.listNodesForLanding).toHaveBeenCalledTimes(3);
+    });
 
-        // check that it sorts nodes
-        fireEvent.click(screen.getByText('name'));
-        fireEvent.click(screen.getByText('name'));
-        fireEvent.click(screen.getByText('display Name'));
+    // sort by 'displayName'
+    fireEvent.click(screen.getByText('display Name'));
+    await waitFor(() => {
+      expect(mockDjClient.listNodesForLanding).toHaveBeenCalledTimes(4);
+    });
 
-        // paginate
-        const previousButton = screen.getByText('← Previous');
-        expect(previousButton).toBeDefined();
-        fireEvent.click(previousButton);
-        const nextButton = screen.getByText('Next →');
-        expect(nextButton).toBeDefined();
-        fireEvent.click(nextButton);
+    // --- Filters ---
 
-        // check that we can filter by node type
-        const selectNodeType = screen.getAllByTestId('select-node-type')[0];
-        expect(selectNodeType).toBeDefined();
-        expect(selectNodeType).not.toBeNull();
-        fireEvent.keyDown(selectNodeType.firstChild, { key: 'ArrowDown' });
-        fireEvent.click(screen.getByText('Source'));
+    // Node type
+    const selectNodeType = screen.getAllByTestId('select-node-type')[0];
+    fireEvent.keyDown(selectNodeType.firstChild, { key: 'ArrowDown' });
+    fireEvent.click(screen.getByText('Source'));
 
-        // check that we can filter by tag
-        const selectTag = screen.getAllByTestId('select-tag')[0];
-        expect(selectTag).toBeDefined();
-        expect(selectTag).not.toBeNull();
-        fireEvent.keyDown(selectTag.firstChild, { key: 'ArrowDown' });
+    // Tag filter
+    const selectTag = screen.getAllByTestId('select-tag')[0];
+    fireEvent.keyDown(selectTag.firstChild, { key: 'ArrowDown' });
 
-        // check that we can filter by user
-        const selectUser = screen.getAllByTestId('select-user')[0];
-        expect(selectUser).toBeDefined();
-        expect(selectUser).not.toBeNull();
-        fireEvent.keyDown(selectUser.firstChild, { key: 'ArrowDown' });
+    // User filter
+    const selectUser = screen.getAllByTestId('select-user')[0];
+    fireEvent.keyDown(selectUser.firstChild, { key: 'ArrowDown' });
 
-        // click to open and close tab
-        fireEvent.click(screen.getByText('common'));
-        fireEvent.click(screen.getByText('common'));
-      },
-      { timeout: 3000 },
-    );
-  }, 60000);
+    // --- Expand/Collapse Namespace ---
+    fireEvent.click(screen.getByText('common'));
+    fireEvent.click(screen.getByText('common'));
+  });
 
   it('can add new namespace via add namespace popover', async () => {
     mockDjClient.addNamespace.mockReturnValue({

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

@@ -53,34 +53,14 @@ export function NamespacePage() {
   const [hasNextPage, setHasNextPage] = useState(true);
   const [hasPrevPage, setHasPrevPage] = useState(true);
 
-  const sortedNodes = React.useMemo(() => {
-    let sortableData = [...Object.values(state.nodes)];
-    if (sortConfig !== null) {
-      sortableData.sort((a, b) => {
-        if (
-          a[sortConfig.key] < b[sortConfig.key] ||
-          a.current[sortConfig.key] < b.current[sortConfig.key]
-        ) {
-          return sortConfig.direction === ASC ? -1 : 1;
-        }
-        if (
-          a[sortConfig.key] > b[sortConfig.key] ||
-          a.current[sortConfig.key] > b.current[sortConfig.key]
-        ) {
-          return sortConfig.direction === ASC ? 1 : -1;
-        }
-        return 0;
-      });
-    }
-    return sortableData;
-  }, [state.nodes, filters, sortConfig]);
-
   const requestSort = key => {
     let direction = ASC;
     if (sortConfig.key === key && sortConfig.direction === ASC) {
       direction = DESC;
     }
-    setSortConfig({ key, direction });
+    if (sortConfig.key !== key || sortConfig.direction !== direction) {
+      setSortConfig({ key, direction });
+    }
   };
 
   const getClassNamesFor = name => {
@@ -141,6 +121,7 @@ export function NamespacePage() {
         before,
         after,
         50,
+        sortConfig,
       );
 
       setState({
@@ -170,7 +151,8 @@ export function NamespacePage() {
       setRetrieved(true);
     };
     fetchData().catch(console.error);
-  }, [djClient, filters, before, after]);
+  }, [djClient, filters, before, after, sortConfig.key, sortConfig.direction]);
+
   const loadNext = () => {
     if (nextCursor) {
       setAfter(nextCursor);
@@ -185,8 +167,8 @@ export function NamespacePage() {
   };
 
   const nodesList = retrieved ? (
-    sortedNodes.length > 0 ? (
-      sortedNodes.map(node => (
+    state.nodes.length > 0 ? (
+      state.nodes.map(node => (
         <tr key={node.name}>
           <td>
             <a href={'/nodes/' + node.name} className="link-table">

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

@@ -124,7 +124,7 @@ export default function AddMaterializationPopover({ node, onSubmit }) {
           {function Render({ isSubmitting, status, setFieldValue }) {
             return (
               <Form>
-                <h2>Configure Materialization</h2>
+                <h2>Configure Materialization for the Latest Node Version</h2>
                 {displayMessageAfterSubmit(status)}
                 {node.type === 'cube' ? (
                   <span data-testid="job-type">
@@ -195,15 +195,23 @@ export default function AddMaterializationPopover({ node, onSubmit }) {
                     'spark.memory.fraction': '0.3',
                   }}
                 />
-                <button
-                  className="add_node"
-                  type="submit"
-                  aria-label="SaveEditColumn"
-                  aria-hidden="false"
-                  disabled={isSubmitting}
+                <div
+                  style={{
+                    display: 'flex',
+                    justifyContent: 'flex-end',
+                    marginTop: '20px',
+                  }}
                 >
-                  {isSubmitting ? <LoadingIcon /> : 'Save'}
-                </button>
+                  <button
+                    className="add_node"
+                    type="submit"
+                    aria-label="SaveEditColumn"
+                    aria-hidden="false"
+                    disabled={isSubmitting}
+                  >
+                    {isSubmitting ? <LoadingIcon /> : 'Save'}
+                  </button>
+                </div>
               </Form>
             );
           }}

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

@@ -0,0 +1,67 @@
+import TableIcon from '../../icons/TableIcon';
+
+export default function AvailabilityStateBlock({ availability }) {
+  return (
+    <table
+      className="card-inner-table table"
+      aria-label="Availability"
+      aria-hidden="false"
+      style={{ marginBottom: '20px' }}
+    >
+      <thead className="fs-7 fw-bold text-gray-400 border-bottom-0">
+        <tr>
+          <th className="text-start">Output Dataset</th>
+          <th>Valid Through</th>
+          <th>Partitions</th>
+          <th>Links</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>
+            <div className={`table__full`} key={availability.table}>
+              <div className="table__header">
+                <TableIcon />{' '}
+                <span className={`entity-info`}>
+                  {availability.catalog + '.' + availability.schema_}
+                </span>
+              </div>
+              <div className={`table__body upstream_tables`}>
+                <a href={availability.url}>{availability.table}</a>
+              </div>
+            </div>
+          </td>
+          <td>{new Date(availability.valid_through_ts).toISOString()}</td>
+          <td>
+            <span
+              className={`badge partition_value`}
+              style={{ fontSize: '100%' }}
+            >
+              <span className={`badge partition_value_highlight`}>
+                {availability.min_temporal_partition?.join(', ') || 'N/A'}
+              </span>
+              to
+              <span className={`badge partition_value_highlight`}>
+                {availability.max_temporal_partition?.join(', ') || 'N/A'}
+              </span>
+            </span>
+          </td>
+          <td>
+            {availability.links &&
+            Object.keys(availability.links).length > 0 ? (
+              Object.entries(availability.links).map(([key, value]) => (
+                <div key={key}>
+                  <a href={value} target="_blank" rel="noreferrer">
+                    {key}
+                  </a>
+                </div>
+              ))
+            ) : (
+              <></>
+            )}
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  );
+}

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

@@ -1,25 +1,100 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useState, useMemo } from 'react';
 import TableIcon from '../../icons/TableIcon';
 import AddMaterializationPopover from './AddMaterializationPopover';
 import * as React from 'react';
 import AddBackfillPopover from './AddBackfillPopover';
 import { labelize } from '../../../utils/form';
 import NodeMaterializationDelete from '../../components/NodeMaterializationDelete';
+import Tab from '../../components/Tab';
+import NodeRevisionMaterializationTab from './NodeRevisionMaterializationTab';
+import AvailabilityStateBlock from './AvailabilityStateBlock';
 
 const cronstrue = require('cronstrue');
 
 export default function NodeMaterializationTab({ node, djClient }) {
-  const [materializations, setMaterializations] = useState([]);
+  const [rawMaterializations, setRawMaterializations] = useState([]);
+  const [selectedRevisionTab, setSelectedRevisionTab] = useState(null);
+  const [showInactive, setShowInactive] = useState(false);
+  const [availabilityStates, setAvailabilityStates] = useState([]);
+  const [availabilityStatesByRevision, setAvailabilityStatesByRevision] =
+    useState({});
+  const [isRebuilding, setIsRebuilding] = useState(() => {
+    // Check if we're in the middle of a rebuild operation
+    return localStorage.getItem(`rebuilding-${node?.name}`) === 'true';
+  });
+
+  const filteredMaterializations = useMemo(() => {
+    return showInactive
+      ? rawMaterializations
+      : rawMaterializations.filter(mat => !mat.deactivated_at);
+  }, [rawMaterializations, showInactive]);
+
+  const materializationsByRevision = useMemo(() => {
+    return filteredMaterializations.reduce((acc, mat) => {
+      // Extract version from materialization config
+      const matVersion = mat.config?.cube?.version || node?.version;
+
+      if (!acc[matVersion]) {
+        acc[matVersion] = [];
+      }
+      acc[matVersion].push(mat);
+      return acc;
+    }, {});
+  }, [filteredMaterializations, node?.version]);
+
   useEffect(() => {
     const fetchData = async () => {
       if (node) {
         const data = await djClient.materializations(node.name);
-        setMaterializations(data);
+
+        // Store raw data
+        setRawMaterializations(data);
+
+        // Fetch availability states
+        const availabilityData = await djClient.availabilityStates(node.name);
+        setAvailabilityStates(availabilityData);
+
+        // Group availability states by version
+        const availabilityGrouped = availabilityData.reduce((acc, avail) => {
+          const version = avail.node_version || node.version;
+          if (!acc[version]) {
+            acc[version] = [];
+          }
+          acc[version].push(avail);
+          return acc;
+        }, {});
+
+        setAvailabilityStatesByRevision(availabilityGrouped);
+
+        // Clear rebuilding state once data is loaded after a page reload
+        if (localStorage.getItem(`rebuilding-${node.name}`) === 'true') {
+          localStorage.removeItem(`rebuilding-${node.name}`);
+          setIsRebuilding(false);
+        }
       }
     };
     fetchData().catch(console.error);
   }, [djClient, node]);
 
+  // Separate useEffect to set default selected tab
+  useEffect(() => {
+    if (
+      !selectedRevisionTab &&
+      Object.keys(materializationsByRevision).length > 0
+    ) {
+      // First try to find current node version
+      if (materializationsByRevision[node?.version]) {
+        setSelectedRevisionTab(node.version);
+      } else {
+        // Otherwise, select the most recent version (sort by version string)
+        const sortedVersions = Object.keys(materializationsByRevision).sort(
+          (a, b) => b.localeCompare(a),
+        );
+        setSelectedRevisionTab(sortedVersions[0]);
+      }
+    }
+  }, [materializationsByRevision, selectedRevisionTab, node?.version]);
+
   const partitionColumnsMap = node
     ? Object.fromEntries(
         node?.columns
@@ -35,9 +110,198 @@ export default function NodeMaterializationTab({ node, djClient }) {
     return parsedCron;
   };
 
+  const onClickRevisionTab = revisionId => () => {
+    setSelectedRevisionTab(revisionId);
+  };
+
+  const buildRevisionTabs = () => {
+    const versions = Object.keys(materializationsByRevision);
+
+    // Check if there are any materializations at all (including inactive ones)
+    const hasAnyMaterializations = rawMaterializations.length > 0;
+
+    // Determine which versions have only inactive materializations
+    const versionHasOnlyInactive = {};
+    rawMaterializations.forEach(mat => {
+      const matVersion = mat.config?.cube?.version || node.version;
+      if (!versionHasOnlyInactive[matVersion]) {
+        versionHasOnlyInactive[matVersion] = {
+          hasActive: false,
+          hasInactive: false,
+        };
+      }
+      if (mat.deactivated_at) {
+        versionHasOnlyInactive[matVersion].hasInactive = true;
+      } else {
+        versionHasOnlyInactive[matVersion].hasActive = true;
+      }
+    });
+
+    // If no active versions but there are inactive materializations, show checkbox and button
+    if (versions.length === 0) {
+      return (
+        <div
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'flex-end',
+            marginBottom: '20px',
+          }}
+        >
+          <div style={{ display: 'flex', alignItems: 'center', gap: '15px' }}>
+            {hasAnyMaterializations && (
+              <label
+                style={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  gap: '5px',
+                  fontSize: '14px',
+                  color: '#333',
+                  padding: '4px 8px',
+                  borderRadius: '12px',
+                  backgroundColor: '#f5f5f5',
+                  border: '1px solid #ddd',
+                }}
+                title="Shows inactive materializations for the latest cube."
+              >
+                <input
+                  type="checkbox"
+                  checked={showInactive}
+                  onChange={e => setShowInactive(e.target.checked)}
+                />
+                Show Inactive
+              </label>
+            )}
+            {node && <AddMaterializationPopover node={node} />}
+          </div>
+        </div>
+      );
+    }
+
+    // Sort versions: current version first, then by version string (most recent first)
+    const sortedVersions = versions.sort((a, b) => {
+      // Current node version always comes first
+      if (a === node?.version) return -1;
+      if (b === node?.version) return 1;
+
+      // Then sort by version string (descending)
+      return b.localeCompare(a);
+    });
+
+    // Check if latest version has active materializations
+    const hasLatestVersionMaterialization =
+      materializationsByRevision[node?.version] &&
+      materializationsByRevision[node?.version].length > 0;
+
+    // Refresh latest materialization function
+    const refreshLatestMaterialization = async () => {
+      if (
+        !window.confirm(
+          'This will create a new version of the cube and build new materialization workflows. The previous version of the cube and its materialization will be accessible using a specific version label. Would you like to continue?',
+        )
+      ) {
+        return;
+      }
+
+      // Set loading state in both React state and localStorage
+      setIsRebuilding(true);
+      localStorage.setItem(`rebuilding-${node.name}`, 'true');
+
+      try {
+        const { status, json } = await djClient.refreshLatestMaterialization(
+          node.name,
+        );
+
+        if (status === 200 || status === 201) {
+          // Keep the loading state during page reload
+          window.location.reload(); // Reload to show the updated materialization
+        } else {
+          alert(`Failed to rebuild materialization: ${json.message}`);
+          // Clear loading state on error
+          localStorage.removeItem(`rebuilding-${node.name}`);
+          setIsRebuilding(false);
+        }
+      } catch (error) {
+        alert(`Error rebuilding materialization: ${error.message}`);
+        // Clear loading state on error
+        localStorage.removeItem(`rebuilding-${node.name}`);
+        setIsRebuilding(false);
+      }
+    };
+
+    return (
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          marginBottom: '20px',
+        }}
+      >
+        <div className="align-items-center row">
+          {sortedVersions.map(version => (
+            <NodeRevisionMaterializationTab
+              key={version}
+              version={version}
+              node={node}
+              selectedRevisionTab={selectedRevisionTab}
+              onClickRevisionTab={onClickRevisionTab}
+              showInactive={showInactive}
+              versionHasOnlyInactive={versionHasOnlyInactive}
+            />
+          ))}
+        </div>
+        <div style={{ display: 'flex', alignItems: 'center', gap: '15px' }}>
+          <label
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: '5px',
+              fontSize: '14px',
+              color: '#333',
+              padding: '4px 8px',
+              borderRadius: '12px',
+              backgroundColor: '#f5f5f5',
+              border: '1px solid #ddd',
+            }}
+            title="Shows inactive materializations for the latest cube."
+          >
+            <input
+              type="checkbox"
+              checked={showInactive}
+              onChange={e => setShowInactive(e.target.checked)}
+            />
+            Show Inactive
+          </label>
+          {node &&
+            (hasLatestVersionMaterialization ? (
+              <button
+                className="edit_button"
+                aria-label="RefreshLatestMaterialization"
+                tabIndex="0"
+                onClick={refreshLatestMaterialization}
+                disabled={isRebuilding}
+                title="Create a new version of the cube and re-create its materialization workflows."
+                style={{
+                  opacity: isRebuilding ? 0.7 : 1,
+                  cursor: isRebuilding ? 'not-allowed' : 'pointer',
+                }}
+              >
+                <span className="add_node">
+                  Rebuild (latest) Materialization
+                </span>
+              </button>
+            ) : (
+              <AddMaterializationPopover node={node} />
+            ))}
+        </div>
+      </div>
+    );
+  };
+
   const materializationRows = materializations => {
-    return materializations.map(materialization => (
-      <>
+    return materializations.map((materialization, index) => (
+      <div key={`${materialization.name}-${index}`}>
         <div className="tr">
           <div key={materialization.name} style={{ fontSize: 'large' }}>
             <div
@@ -53,6 +317,7 @@ export default function NodeMaterializationTab({ node, djClient }) {
               <NodeMaterializationDelete
                 nodeName={node.name}
                 materializationName={materialization.name}
+                nodeVersion={selectedRevisionTab}
               />
             </div>
             <div className="td">
@@ -191,7 +456,7 @@ export default function NodeMaterializationTab({ node, djClient }) {
                     .filter(col => col.partition !== null)
                     .map(column => {
                       return (
-                        <li>
+                        <li key={column.name}>
                           <div className="partitionLink">
                             {column.display_name}
                             <span className="badge partition_value">
@@ -206,20 +471,86 @@ export default function NodeMaterializationTab({ node, djClient }) {
             </ul>
           </div>
         </div>
-      </>
+      </div>
     ));
   };
+  const currentRevisionMaterializations = selectedRevisionTab
+    ? materializationsByRevision[selectedRevisionTab] || []
+    : filteredMaterializations;
+
+  const currentRevisionAvailability = selectedRevisionTab
+    ? availabilityStatesByRevision[selectedRevisionTab] || []
+    : availabilityStates;
+
+  const renderMaterializedDatasets = availabilityStates => {
+    if (!availabilityStates || availabilityStates.length === 0) {
+      return (
+        <div className="message alert" style={{ marginTop: '10px' }}>
+          No materialized datasets available for this revision.
+        </div>
+      );
+    }
+
+    return availabilityStates.map((availability, index) => (
+      <AvailabilityStateBlock
+        key={`availability-${index}`}
+        availability={availability}
+      />
+    ));
+  };
+
   return (
     <>
       <div
         className="table-vertical"
         role="table"
         aria-label="Materializations"
+        style={{ position: 'relative' }}
       >
+        {/* Loading overlay */}
+        {isRebuilding && (
+          <div
+            style={{
+              position: 'absolute',
+              top: 0,
+              left: 0,
+              right: 0,
+              bottom: 0,
+              backgroundColor: 'rgba(255, 255, 255, 0.8)',
+              display: 'flex',
+              flexDirection: 'column',
+              justifyContent: 'center',
+              alignItems: 'center',
+              zIndex: 1000,
+              minHeight: '200px',
+            }}
+          >
+            <div
+              style={{
+                width: '40px',
+                height: '40px',
+                border: '4px solid #f3f3f3',
+                borderTop: '4px solid #3498db',
+                borderRadius: '50%',
+                animation: 'spin 1s linear infinite',
+                marginBottom: '16px',
+              }}
+            />
+            <div
+              style={{ fontSize: '16px', color: '#666', textAlign: 'center' }}
+            >
+              Rebuilding materialization...
+              <br />
+              <small style={{ fontSize: '14px' }}>
+                This may take a few moments
+              </small>
+            </div>
+          </div>
+        )}
+
         <div>
-          <h2>Materializations</h2>
-          {node ? <AddMaterializationPopover node={node} /> : <></>}
-          {materializations.length > 0 ? (
+          {buildRevisionTabs()}
+          {currentRevisionMaterializations.length > 0 ? (
             <div
               className="card-inner-table table"
               aria-label="Materializations"
@@ -227,7 +558,7 @@ export default function NodeMaterializationTab({ node, djClient }) {
             >
               <div style={{ display: 'table' }}>
                 {materializationRows(
-                  materializations.filter(
+                  currentRevisionMaterializations.filter(
                     materialization =>
                       !(
                         materialization.name === 'default' &&
@@ -239,88 +570,12 @@ export default function NodeMaterializationTab({ node, djClient }) {
             </div>
           ) : (
             <div className="message alert" style={{ marginTop: '10px' }}>
-              No materialization workflows configured for this node.
+              No materialization workflows configured for this revision.
             </div>
           )}
-        </div>
-        <div>
-          <h2>Materialized Datasets</h2>
-          {node && node.availability !== null ? (
-            <table
-              className="card-inner-table table"
-              aria-label="Availability"
-              aria-hidden="false"
-            >
-              <thead className="fs-7 fw-bold text-gray-400 border-bottom-0">
-                <tr>
-                  <th className="text-start">Output Dataset</th>
-                  <th>Valid Through</th>
-                  <th>Partitions</th>
-                  <th>Links</th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr>
-                  <td>
-                    {
-                      <div
-                        className={`table__full`}
-                        key={node.availability.table}
-                      >
-                        <div className="table__header">
-                          <TableIcon />{' '}
-                          <span className={`entity-info`}>
-                            {node.availability.catalog +
-                              '.' +
-                              node.availability.schema_}
-                          </span>
-                        </div>
-                        <div className={`table__body upstream_tables`}>
-                          <a href={node.availability.url}>
-                            {node.availability.table}
-                          </a>
-                        </div>
-                      </div>
-                    }
-                  </td>
-                  <td>
-                    {new Date(node.availability.valid_through_ts).toISOString()}
-                  </td>
-                  <td>
-                    <span
-                      className={`badge partition_value`}
-                      style={{ fontSize: '100%' }}
-                    >
-                      <span className={`badge partition_value_highlight`}>
-                        {node.availability.min_temporal_partition}
-                      </span>
-                      to
-                      <span className={`badge partition_value_highlight`}>
-                        {node.availability.max_temporal_partition}
-                      </span>
-                    </span>
-                  </td>
-                  <td>
-                    {node.availability.links !== null ? (
-                      Object.entries(node.availability.links).map(
-                        ([key, value]) => (
-                          <div key={key}>
-                            <a href={value} target="_blank" rel="noreferrer">
-                              {key}
-                            </a>
-                          </div>
-                        ),
-                      )
-                    ) : (
-                      <></>
-                    )}
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-          ) : (
-            <div className="message alert" style={{ marginTop: '10px' }}>
-              No materialized datasets available for this node.
+          {Object.keys(materializationsByRevision).length > 0 && (
+            <div style={{ marginTop: '30px' }}>
+              {renderMaterializedDatasets(currentRevisionAvailability)}
             </div>
           )}
         </div>

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

@@ -0,0 +1,58 @@
+import Tab from '../../components/Tab';
+
+export default function NodeRevisionMaterializationTab({
+  version,
+  node,
+  selectedRevisionTab,
+  onClickRevisionTab,
+  showInactive,
+  versionHasOnlyInactive,
+}) {
+  const isCurrentVersion = version === node?.version;
+  const tabName = isCurrentVersion ? `${version} (latest)` : version;
+  const versionInfo = versionHasOnlyInactive[version];
+  const isOnlyInactive =
+    versionInfo && !versionInfo.hasActive && versionInfo.hasInactive;
+
+  // For inactive-only versions, render with oval styling
+  if (isOnlyInactive && showInactive) {
+    return (
+      <div
+        key={version}
+        className={selectedRevisionTab === version ? 'col active' : 'col'}
+      >
+        <div className="header-tabs nav-overflow nav nav-tabs">
+          <div className="nav-item">
+            <button
+              id={version}
+              className="nav-link"
+              tabIndex="0"
+              onClick={onClickRevisionTab(version)}
+              aria-label={tabName}
+              aria-hidden="false"
+              style={{
+                padding: '4px 8px',
+                borderRadius: '12px',
+                backgroundColor: '#f5f5f5',
+                border: '1px solid #ddd',
+                margin: '0 2px',
+              }}
+            >
+              {tabName}
+            </button>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <Tab
+      key={version}
+      id={version}
+      name={tabName}
+      onClick={onClickRevisionTab(version)}
+      selectedTab={selectedRevisionTab}
+    />
+  );
+}

package/src/app/pages/NodePage/__tests__/NodeMaterializationTab.test.jsx

@@ -6,12 +6,19 @@ describe('<NodeMaterializationTab />', () => {
   const mockDjClient = {
     node: jest.fn(),
     materializations: jest.fn(),
+    availabilityStates: jest.fn(),
+    materializationInfo: jest.fn(),
+    refreshLatestMaterialization: jest.fn(),
   };
 
   const mockMaterializations = [
     {
       name: 'mat_one',
-      config: {},
+      config: {
+        cube: {
+          version: 'v1.0',
+        },
+      },
       schedule: '@daily',
       job: 'SparkSqlMaterializationJob',
       backfills: [
@@ -29,6 +36,27 @@ describe('<NodeMaterializationTab />', () => {
       strategy: 'full',
       output_tables: ['table1'],
       urls: ['https://example.com/'],
+      deactivated_at: null,
+    },
+  ];
+
+  const mockAvailabilityStates = [
+    {
+      id: 1,
+      catalog: 'default',
+      schema_: 'foo',
+      table: 'bar',
+      valid_through_ts: 1729667463,
+      url: 'https://www.table.com',
+      links: { dashboard: 'https://www.foobar.com/dashboard' },
+      categorical_partitions: [],
+      temporal_partitions: [],
+      min_temporal_partition: ['2022', '01', '01'],
+      max_temporal_partition: ['2023', '01', '25'],
+      partitions: [],
+      updated_at: '2023-08-21T16:48:52.880498+00:00',
+      node_revision_id: 1,
+      node_version: 'v1.0',
     },
   ];
 
@@ -134,13 +162,27 @@ describe('<NodeMaterializationTab />', () => {
 
   beforeEach(() => {
     mockDjClient.materializations.mockReset();
+    mockDjClient.availabilityStates.mockReset();
+    mockDjClient.materializationInfo.mockReset();
   });
 
   it('renders NodeMaterializationTab tab correctly', async () => {
     mockDjClient.materializations.mockReturnValue(mockMaterializations);
+    mockDjClient.availabilityStates.mockReturnValue(mockAvailabilityStates);
+    mockDjClient.materializationInfo.mockReturnValue({
+      job_types: [],
+      strategies: [],
+    });
 
     render(<NodeMaterializationTab node={mockNode} djClient={mockDjClient} />);
     await waitFor(() => {
+      // Check that the version tab is rendered
+      expect(screen.getByText('v1.0 (latest)')).toBeInTheDocument();
+
+      // Check that the materialization is rendered
+      expect(screen.getByText('Spark Sql')).toBeInTheDocument();
+
+      // Check that the dashboard link is rendered in the availability section
       const link = screen.getByText('dashboard').closest('a');
       expect(link).toHaveAttribute('href', `https://www.foobar.com/dashboard`);
     });

package/src/app/pages/NodePage/__tests__/NodePage.test.jsx

@@ -31,6 +31,8 @@ describe('<NodePage />', () => {
         history: jest.fn(),
         revisions: jest.fn(),
         materializations: jest.fn(),
+        availabilityStates: jest.fn(),
+        refreshLatestMaterialization: jest.fn(),
         materializationInfo: jest.fn(),
         sql: jest.fn(),
         cube: jest.fn(),
@@ -43,6 +45,11 @@ describe('<NodePage />', () => {
         engines: jest.fn(),
         streamNodeData: jest.fn(),
         nodeDimensions: jest.fn(),
+        getNotificationPreferences: jest.fn().mockResolvedValue([]),
+        subscribeToNotifications: jest.fn().mockResolvedValue({ status: 200 }),
+        unsubscribeFromNotifications: jest
+          .fn()
+          .mockResolvedValue({ status: 200 }),
       },
     };
   };
@@ -588,6 +595,7 @@ describe('<NodePage />', () => {
     );
     djClient.DataJunctionAPI.columns.mockReturnValue(mocks.metricNodeColumns);
     djClient.DataJunctionAPI.materializations.mockReturnValue([]);
+    djClient.DataJunctionAPI.availabilityStates.mockReturnValue([]);
 
     const element = (
       <DJClientContext.Provider value={djClient}>
@@ -603,16 +611,20 @@ describe('<NodePage />', () => {
         </Routes>
       </MemoryRouter>,
     );
-    await waitFor(() => {
-      fireEvent.click(screen.getByRole('button', { name: 'Materializations' }));
-      expect(djClient.DataJunctionAPI.materializations).toHaveBeenCalledWith(
-        mocks.mockMetricNode.name,
-      );
-      screen.getByText(
-        'No materialization workflows configured for this node.',
-      );
-      screen.getByText('No materialized datasets available for this node.');
-    });
+    await waitFor(
+      () => {
+        fireEvent.click(
+          screen.getByRole('button', { name: 'Materializations' }),
+        );
+        expect(djClient.DataJunctionAPI.materializations).toHaveBeenCalledWith(
+          mocks.mockMetricNode.name,
+        );
+        screen.getByText(
+          'No materialization workflows configured for this revision.',
+        );
+      },
+      { timeout: 5000 },
+    );
   });
 
   it('renders the NodeMaterialization tab with materializations correctly', async () => {
@@ -625,6 +637,7 @@ describe('<NodePage />', () => {
     djClient.DataJunctionAPI.materializations.mockReturnValue(
       mocks.nodeMaterializations,
     );
+    djClient.DataJunctionAPI.availabilityStates.mockReturnValue([]);
 
     djClient.DataJunctionAPI.materializationInfo.mockReturnValue(
       mocks.materializationInfo,

package/src/app/services/DJService.js

@@ -17,9 +17,10 @@ export const DataJunctionAPI = {
     before,
     after,
     limit,
+    sortConfig,
   ) {
     const query = `
-      query ListNodes($namespace: String, $nodeTypes: [NodeType!], $tags: [String!], $editedBy: String, $before: String, $after: String, $limit: Int) {
+      query ListNodes($namespace: String, $nodeTypes: [NodeType!], $tags: [String!], $editedBy: String, $before: String, $after: String, $limit: Int, $orderBy: NodeSortField, $ascending: Boolean) {
         findNodesPaginated(
           namespace: $namespace
           nodeTypes: $nodeTypes
@@ -28,6 +29,8 @@ export const DataJunctionAPI = {
           limit: $limit
           before: $before
           after: $after
+          orderBy: $orderBy,
+          ascending: $ascending
         ) {
           pageInfo {
             hasNextPage
@@ -58,6 +61,13 @@ export const DataJunctionAPI = {
         }
       }
     `;
+    const sortOrderMapping = {
+      name: 'NAME',
+      displayName: 'DISPLAY_NAME',
+      type: 'TYPE',
+      status: 'STATUS',
+      updatedAt: 'UPDATED_AT',
+    };
 
     return await (
       await fetch(DJ_GQL, {
@@ -76,6 +86,8 @@ export const DataJunctionAPI = {
             before: before,
             after: after,
             limit: limit,
+            orderBy: sortOrderMapping[sortConfig.key],
+            ascending: sortConfig.direction === 'ascending',
           },
         }),
       })
@@ -571,7 +583,8 @@ export const DataJunctionAPI = {
     filters,
     owners,
   ) {
-    const response = await fetch(`${DJ_URL}/nodes/${name}`, {
+    const url = `${DJ_URL}/nodes/${name}`;
+    const response = await fetch(url, {
       method: 'PATCH',
       headers: {
         'Content-Type': 'application/json',
@@ -590,6 +603,19 @@ export const DataJunctionAPI = {
     return { status: response.status, json: await response.json() };
   },
 
+  refreshLatestMaterialization: async function (name) {
+    const url = `${DJ_URL}/nodes/${name}?refresh_materialization=true`;
+    const response = await fetch(url, {
+      method: 'PATCH',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({}),
+      credentials: 'include',
+    });
+    return { status: response.status, json: await response.json() };
+  },
+
   registerTable: async function (catalog, schema, table) {
     const response = await fetch(
       `${DJ_URL}/register/table/${catalog}/${schema}/${table}`,
@@ -743,7 +769,20 @@ export const DataJunctionAPI = {
 
   materializations: async function (node) {
     const data = await (
-      await fetch(`${DJ_URL}/nodes/${node}/materializations/`, {
+      await fetch(
+        `${DJ_URL}/nodes/${node}/materializations?show_inactive=true&include_all_revisions=true`,
+        {
+          credentials: 'include',
+        },
+      )
+    ).json();
+
+    return data;
+  },
+
+  availabilityStates: async function (node) {
+    const data = await (
+      await fetch(`${DJ_URL}/nodes/${node}/availability/`, {
         credentials: 'include',
       })
     ).json();
@@ -1276,17 +1315,22 @@ export const DataJunctionAPI = {
     );
     return { status: response.status, json: await response.json() };
   },
-  deleteMaterialization: async function (nodeName, materializationName) {
-    const response = await fetch(
-      `${DJ_URL}/nodes/${nodeName}/materializations?materialization_name=${materializationName}`,
-      {
-        method: 'DELETE',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        credentials: 'include',
+  deleteMaterialization: async function (
+    nodeName,
+    materializationName,
+    nodeVersion = null,
+  ) {
+    let url = `${DJ_URL}/nodes/${nodeName}/materializations?materialization_name=${materializationName}`;
+    if (nodeVersion) {
+      url += `&node_version=${nodeVersion}`;
+    }
+    const response = await fetch(url, {
+      method: 'DELETE',
+      headers: {
+        'Content-Type': 'application/json',
       },
-    );
+      credentials: 'include',
+    });
     return { status: response.status, json: await response.json() };
   },
   listMetricMetadata: async function () {

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

@@ -479,7 +479,7 @@ describe('DataJunctionAPI', () => {
 
     // Check the first fetch call
     expect(fetch).toHaveBeenCalledWith(
-      `${DJ_URL}/nodes/${nodeName}/materializations/`,
+      `${DJ_URL}/nodes/${nodeName}/materializations?show_inactive=true&include_all_revisions=true`,
       {
         credentials: 'include',
       },
@@ -1085,6 +1085,10 @@ describe('DataJunctionAPI', () => {
       null,
       null,
       100,
+      {
+        key: 'updatedAt',
+        direction: 'descending',
+      },
     );
     expect(fetch).toHaveBeenCalledWith(
       `${DJ_URL}/graphql`,
@@ -1502,4 +1506,54 @@ describe('DataJunctionAPI', () => {
       credentials: 'include',
     });
   });
+
+  it('calls availabilityStates correctly', async () => {
+    const nodeName = 'default.sample_node';
+    const mockAvailabilityStates = [
+      {
+        id: 1,
+        catalog: 'test_catalog',
+        schema_: 'test_schema',
+        table: 'test_table',
+        valid_through_ts: 1640995200,
+        url: 'http://example.com/table',
+        node_revision_id: 123,
+        node_version: '1.0.0',
+      },
+    ];
+
+    fetch.mockResponseOnce(JSON.stringify(mockAvailabilityStates));
+
+    const result = await DataJunctionAPI.availabilityStates(nodeName);
+
+    expect(fetch).toHaveBeenCalledWith(
+      `${DJ_URL}/nodes/${nodeName}/availability/`,
+      {
+        credentials: 'include',
+      },
+    );
+    expect(result).toEqual(mockAvailabilityStates);
+  });
+
+  it('calls refreshLatestMaterialization correctly', async () => {
+    const nodeName = 'default.sample_cube';
+    const mockResponse = { message: 'Materialization refreshed successfully' };
+
+    fetch.mockResponseOnce(JSON.stringify(mockResponse));
+
+    const result = await DataJunctionAPI.refreshLatestMaterialization(nodeName);
+
+    expect(fetch).toHaveBeenCalledWith(
+      `${DJ_URL}/nodes/${nodeName}?refresh_materialization=true`,
+      {
+        method: 'PATCH',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({}),
+        credentials: 'include',
+      },
+    );
+    expect(result).toEqual({ status: 200, json: mockResponse });
+  });
 });

package/src/styles/index.css

@@ -1545,3 +1545,12 @@ table {
 .dropdown:hover .dropdown-menu {
   display: block;
 }
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}