From 3693aaf0c417493dda67ab0bce10c4abaeaf2800 Mon Sep 17 00:00:00 2001
From: Wesley B <62723358+wesleyboar@users.noreply.github.com>
Date: Tue, 17 Jun 2025 17:46:15 -0500
Subject: [PATCH 01/79] feat: WC-219 isolate external styles for component

---
 .../components/DataFiles/DataFilesTest.jsx    | 27 +++++++
 client/src/components/DataFiles/index.js      |  2 +-
 client/src/hooks/datafiles/index.js           |  1 +
 .../src/hooks/datafiles/useExternalStyles.jsx | 71 +++++++++++++++++++
 4 files changed, 100 insertions(+), 1 deletion(-)
 create mode 100644 client/src/components/DataFiles/DataFilesTest.jsx
 create mode 100644 client/src/hooks/datafiles/useExternalStyles.jsx

diff --git a/client/src/components/DataFiles/DataFilesTest.jsx b/client/src/components/DataFiles/DataFilesTest.jsx
new file mode 100644
index 0000000000..419452b053
--- /dev/null
+++ b/client/src/components/DataFiles/DataFilesTest.jsx
@@ -0,0 +1,27 @@
+import { React, useEffect } from 'react';
+
+import LoadingSpinner from '_common/LoadingSpinner';
+import { useExternalStyles } from 'hooks/datafiles';
+
+function DataTable() {
+  const { hostRef, areStylesLoaded, renderWithStyles } = useExternalStyles();
+
+  useEffect(() => {
+    if (areStylesLoaded) {
+      renderWithStyles(
+        <div>
+          <h2>Browse Datasets</h2>
+          <p>Sample content.</p>
+        </div>
+      );
+    }
+  }, [areStylesLoaded, renderWithStyles]);
+
+  if (!areStylesLoaded) {
+    return <LoadingSpinner />;
+  }
+
+  return <div ref={hostRef}></div>;
+}
+
+export default DataTable;
diff --git a/client/src/components/DataFiles/index.js b/client/src/components/DataFiles/index.js
index 86018e2c3c..d0cddb2995 100644
--- a/client/src/components/DataFiles/index.js
+++ b/client/src/components/DataFiles/index.js
@@ -1 +1 @@
-export { default } from './DataFiles';
+export { default } from './DataFilesTest';
diff --git a/client/src/hooks/datafiles/index.js b/client/src/hooks/datafiles/index.js
index d238f754bf..92a9494d73 100644
--- a/client/src/hooks/datafiles/index.js
+++ b/client/src/hooks/datafiles/index.js
@@ -1,5 +1,6 @@
 export { default as useSystemDisplayName } from './useSystemDisplayName';
 export { default as useSelectedFiles } from './useSelectedFiles';
+export { default as useExternalStyles } from './useExternalStyles';
 export { default as useFileListing } from './useFileListing';
 export { default as useSystems } from './useSystems';
 export { default as useModal } from './useModal';
diff --git a/client/src/hooks/datafiles/useExternalStyles.jsx b/client/src/hooks/datafiles/useExternalStyles.jsx
new file mode 100644
index 0000000000..bc0260aed1
--- /dev/null
+++ b/client/src/hooks/datafiles/useExternalStyles.jsx
@@ -0,0 +1,71 @@
+import { useEffect, useRef, useState } from 'react';
+import { createRoot } from 'react-dom/client';
+
+// The shared set of external stylesheets for your components
+const EXTERNAL_STYLESHEETS = [
+  'https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600',
+  'https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css',
+  // Add your actual stylesheet URLs here
+];
+
+function useExternalStyles() {
+  const hostRef = useRef();
+  const shadowRootRef = useRef();
+  const reactRootRef = useRef();
+  const [areStylesLoaded, setAreStylesLoaded] = useState(false);
+
+  useEffect(() => {
+    if (!hostRef.current) return;
+
+    // To isolate styles to only apply to what we render
+    shadowRootRef.current = hostRef.current.attachShadow({ mode: 'open' });
+
+    let loadedStylesheetsCount = 0;
+    const totalStylesheets = EXTERNAL_STYLESHEETS.length;
+    const checkAllLoaded = () => {
+      loadedStylesheetsCount++;
+      if (loadedStylesheetsCount === totalStylesheets) {
+        setAreStylesLoaded(true);
+      }
+    };
+
+    EXTERNAL_STYLESHEETS.forEach(url => {
+      const link = document.createElement('link');
+      link.rel = 'stylesheet';
+      link.href = url;
+      link.onload = checkAllLoaded;
+      link.onerror = checkAllLoaded; // Still proceed even if one fails
+      shadowRootRef.current.appendChild(link);
+    });
+
+    if (totalStylesheets === 0) {
+      setStylesLoaded(true);
+    }
+
+    return () => {
+      if (reactRootRef.current) {
+        reactRootRef.current.unmount();
+      }
+    };
+  }, []);
+
+  const renderWithStyles = (children) => {
+    if (!areStylesLoaded || !shadowRootRef.current) return;
+
+    if (!reactRootRef.current) {
+      const container = document.createElement('div');
+      shadowRootRef.current.appendChild(container);
+      reactRootRef.current = createRoot(container);
+    }
+
+    reactRootRef.current.render(children);
+  };
+
+  return {
+    hostRef,
+    areStylesLoaded,
+    renderWithStyles,
+  };
+}
+
+export default useExternalStyles;
\ No newline at end of file

From 77c204e8840884491e2e4cbb8e83d6891622842b Mon Sep 17 00:00:00 2001
From: Wesley B <62723358+wesleyboar@users.noreply.github.com>
Date: Wed, 18 Jun 2025 10:01:59 -0500
Subject: [PATCH 02/79] fix: WC-219 change hook ext from jsx to js

---
 .../datafiles/{useExternalStyles.jsx => useExternalStyles.js}     | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename client/src/hooks/datafiles/{useExternalStyles.jsx => useExternalStyles.js} (100%)

diff --git a/client/src/hooks/datafiles/useExternalStyles.jsx b/client/src/hooks/datafiles/useExternalStyles.js
similarity index 100%
rename from client/src/hooks/datafiles/useExternalStyles.jsx
rename to client/src/hooks/datafiles/useExternalStyles.js

From c0050ad82d896c36e218c209703e27cc5098ca72 Mon Sep 17 00:00:00 2001
From: Wesley B <62723358+wesleyboar@users.noreply.github.com>
Date: Wed, 18 Jun 2025 10:58:49 -0500
Subject: [PATCH 03/79] fix: WC-219 fix hot reload error, add test

The testing might be overkill. It passed before the fix was added.
---
 .../components/DataFiles/DataFilesTest.jsx    |  19 +-
 .../src/hooks/datafiles/useExternalStyles.js  | 109 +++++++---
 .../datafiles/useExternalStyles.test.jsx      | 194 ++++++++++++++++++
 3 files changed, 292 insertions(+), 30 deletions(-)
 create mode 100644 client/src/hooks/datafiles/useExternalStyles.test.jsx

diff --git a/client/src/components/DataFiles/DataFilesTest.jsx b/client/src/components/DataFiles/DataFilesTest.jsx
index 419452b053..ffda0591dd 100644
--- a/client/src/components/DataFiles/DataFilesTest.jsx
+++ b/client/src/components/DataFiles/DataFilesTest.jsx
@@ -1,24 +1,31 @@
 import { React, useEffect } from 'react';
 
-import LoadingSpinner from '_common/LoadingSpinner';
+import { LoadingSpinner, InlineMessage } from '_common';
 import { useExternalStyles } from 'hooks/datafiles';
 
 function DataTable() {
-  const { hostRef, areStylesLoaded, renderWithStyles } = useExternalStyles();
+  const { hostRef, styleStatus, renderWithStyles } = useExternalStyles();
 
   useEffect(() => {
-    if (areStylesLoaded) {
+    // IDEA: How about change these to single value like `isReadyToRenderWithStyles`?
+    if (hostRef.current && styleStatus.completed) {
       renderWithStyles(
         <div>
           <h2>Browse Datasets</h2>
+          {styleStatus.failed.length > 0 && (
+            <InlineMessage type="warn">
+              Some styles failed to load. UI may look incorrect.
+            </InlineMessage>
+          )}
           <p>Sample content.</p>
         </div>
       );
     }
-  }, [areStylesLoaded, renderWithStyles]);
+  }, [hostRef.current, styleStatus, renderWithStyles]);
 
-  if (!areStylesLoaded) {
-    return <LoadingSpinner />;
+
+  if (!styleStatus.completed) {
+    return <div ref={hostRef}><LoadingSpinner /></div>;
   }
 
   return <div ref={hostRef}></div>;
diff --git a/client/src/hooks/datafiles/useExternalStyles.js b/client/src/hooks/datafiles/useExternalStyles.js
index bc0260aed1..6d29054d6e 100644
--- a/client/src/hooks/datafiles/useExternalStyles.js
+++ b/client/src/hooks/datafiles/useExternalStyles.js
@@ -1,69 +1,130 @@
 import { useEffect, useRef, useState } from 'react';
 import { createRoot } from 'react-dom/client';
 
-// The shared set of external stylesheets for your components
-const EXTERNAL_STYLESHEETS = [
+const DEFAULT_STYLESHEETS = [
   'https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600',
   'https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css',
-  // Add your actual stylesheet URLs here
 ];
 
-function useExternalStyles() {
+function useExternalStyles(externalStylesheets = DEFAULT_STYLESHEETS) {
   const hostRef = useRef();
   const shadowRootRef = useRef();
   const reactRootRef = useRef();
-  const [areStylesLoaded, setAreStylesLoaded] = useState(false);
+  const [styleStatus, setStyleStatus] = useState({
+    loaded: [],
+    failed: [],
+    completed: false
+  });
 
   useEffect(() => {
-    if (!hostRef.current) return;
+    if (!hostRef.current) {
+      console.warn('No hostRef.current found');
+      return;
+    }
 
-    // To isolate styles to only apply to what we render
-    shadowRootRef.current = hostRef.current.attachShadow({ mode: 'open' });
+    if (!shadowRootRef.current) {
+      try {
+        shadowRootRef.current = hostRef.current.shadowRoot || 
+          hostRef.current.attachShadow({ mode: 'open' });
+      } catch (error) {
+        console.error('Failed to create shadow root:', error);
+        return;
+      }
+    }
 
-    let loadedStylesheetsCount = 0;
-    const totalStylesheets = EXTERNAL_STYLESHEETS.length;
-    const checkAllLoaded = () => {
-      loadedStylesheetsCount++;
-      if (loadedStylesheetsCount === totalStylesheets) {
-        setAreStylesLoaded(true);
+    const totalStylesheets = externalStylesheets.length;
+    
+    const checkAllComplete = (loaded, failed) => {
+      if (loaded.length + failed.length === totalStylesheets) {
+        console.log('Style loading complete:', {
+          succeeded: loaded,
+          failed: failed
+        });
+        setStyleStatus({
+          loaded,
+          failed,
+          completed: true
+        });
       }
     };
 
-    EXTERNAL_STYLESHEETS.forEach(url => {
+    if (totalStylesheets === 0) {
+      setStyleStatus({ loaded: [], failed: [], completed: true });
+      return;
+    }
+
+    // Remove any existing stylesheets before adding new ones
+    const existingLinks = shadowRootRef.current.querySelectorAll('link');
+    existingLinks.forEach(link => link.remove());
+
+    const loaded = [];
+    const failed = [];
+
+    externalStylesheets.forEach(url => {
       const link = document.createElement('link');
       link.rel = 'stylesheet';
       link.href = url;
-      link.onload = checkAllLoaded;
-      link.onerror = checkAllLoaded; // Still proceed even if one fails
+      link.onload = () => {
+        loaded.push(url);
+        checkAllComplete(loaded, failed);
+      };
+      link.onerror = (error) => {
+        console.error(`Failed to load stylesheet: ${url}`, error);
+        failed.push(url);
+        checkAllComplete(loaded, failed);
+      };
       shadowRootRef.current.appendChild(link);
     });
 
-    if (totalStylesheets === 0) {
-      setStylesLoaded(true);
-    }
-
     return () => {
       if (reactRootRef.current) {
+        // Unmount the React root first
         reactRootRef.current.unmount();
+        reactRootRef.current = null;
       }
+
+      // Clean up stylesheets
+      const links = shadowRootRef.current?.querySelectorAll('link');
+      links?.forEach(link => link.remove());
+
+      // Reset the status
+      setStyleStatus({
+        loaded: [],
+        failed: [],
+        completed: false
+      });
     };
-  }, []);
+  }, [externalStylesheets]);
 
   const renderWithStyles = (children) => {
-    if (!areStylesLoaded || !shadowRootRef.current) return;
+    if (!shadowRootRef.current) {
+      console.warn('Cannot render: no shadow root');
+      return;
+    }
 
     if (!reactRootRef.current) {
+      // Clean up any existing container
+      const existingContainer = shadowRootRef.current.querySelector('div');
+      if (existingContainer) {
+        existingContainer.remove();
+      }
+
       const container = document.createElement('div');
       shadowRootRef.current.appendChild(container);
       reactRootRef.current = createRoot(container);
     }
 
+    if (styleStatus.failed.length > 0) {
+      console.warn('Rendering with missing styles:', styleStatus.failed);
+    }
+
     reactRootRef.current.render(children);
   };
 
   return {
     hostRef,
-    areStylesLoaded,
+    areStylesLoaded: styleStatus.completed,
+    styleStatus,
     renderWithStyles,
   };
 }
diff --git a/client/src/hooks/datafiles/useExternalStyles.test.jsx b/client/src/hooks/datafiles/useExternalStyles.test.jsx
new file mode 100644
index 0000000000..98cda5c831
--- /dev/null
+++ b/client/src/hooks/datafiles/useExternalStyles.test.jsx
@@ -0,0 +1,194 @@
+import React from 'react';
+import { render, act, cleanup } from '@testing-library/react';
+import { vi } from 'vitest';
+import useExternalStyles from './useExternalStyles';
+
+const TEST_STYLESHEETS = [
+  'test://style1.css',
+  'test://style2.css'
+];
+
+describe('useExternalStyles', () => {
+  beforeEach(() => {
+    // Mock the link.onload event to fire immediately
+    const originalCreateElement = document.createElement;
+    vi.spyOn(document, 'createElement').mockImplementation((tagName) => {
+      const element = originalCreateElement.call(document, tagName);
+      if (tagName === 'link') {
+        // Simulate successful load immediately
+        setTimeout(() => element.onload(), 0);
+      }
+      return element;
+    });
+  });
+
+  afterEach(() => {
+    cleanup();
+    vi.clearAllMocks();
+    vi.restoreAllMocks();
+  });
+
+  test('useExternalStyles hook initializes correctly', () => {
+    let hookResult;
+    const TestComponent = () => {
+      hookResult = useExternalStyles(TEST_STYLESHEETS);
+      return <div ref={hookResult.hostRef}>Test Content</div>;
+    };
+
+    act(() => {
+      render(<TestComponent />);
+    });
+
+    expect(hookResult).toBeDefined();
+    expect(hookResult.hostRef).toBeDefined();
+    expect(hookResult.areStylesLoaded).toBeDefined();
+    expect(hookResult.styleStatus).toBeDefined();
+    expect(hookResult.renderWithStyles).toBeDefined();
+  });
+
+  test('handles rapid unmount and remount during hot reload', async () => {
+    let hookResult;
+    const TestComponent = () => {
+      hookResult = useExternalStyles(TEST_STYLESHEETS);
+      return <div ref={hookResult.hostRef}>Test Content</div>;
+    };
+
+    // Initial render
+    const { unmount } = render(<TestComponent />);
+
+    // Wait for initial style loading
+    await act(async () => {
+      await new Promise(resolve => setTimeout(resolve, 0));
+    });
+
+    // Unmount
+    act(() => {
+      unmount();
+    });
+
+    // Remount immediately
+    act(() => {
+      render(<TestComponent />);
+    });
+
+    // Wait for style loading after remount
+    await act(async () => {
+      await new Promise(resolve => setTimeout(resolve, 0));
+    });
+
+    expect(hookResult.styleStatus.completed).toBe(true);
+    expect(hookResult.styleStatus.loaded).toEqual(TEST_STYLESHEETS);
+  });
+
+  test('cleanup happens properly during unmount', () => {
+    let hookResult;
+    const unmountSpy = vi.fn();
+    
+    const TestComponent = () => {
+      hookResult = useExternalStyles(TEST_STYLESHEETS);
+      React.useEffect(() => {
+        return () => unmountSpy();
+      }, []);
+      return <div ref={hookResult.hostRef}>Test Content</div>;
+    };
+
+    const { unmount } = render(<TestComponent />);
+    
+    act(() => {
+      hookResult.renderWithStyles(<div>Test</div>);
+    });
+
+    act(() => {
+      unmount();
+    });
+
+    expect(unmountSpy).toHaveBeenCalled();
+  });
+
+  test('handles style loading errors gracefully', async () => {
+    // Mock createElement to simulate a failed load
+    const originalCreateElement = document.createElement;
+    vi.spyOn(document, 'createElement').mockImplementation((tagName) => {
+      const element = originalCreateElement.call(document, tagName);
+      if (tagName === 'link') {
+        // Simulate failed load immediately
+        setTimeout(() => element.onerror(new Error('Failed to load')), 0);
+      }
+      return element;
+    });
+
+    let hookResult;
+    const errorSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
+    
+    const TestComponent = () => {
+      hookResult = useExternalStyles(TEST_STYLESHEETS);
+      return <div ref={hookResult.hostRef}>Test Content</div>;
+    };
+
+    render(<TestComponent />);
+
+    // Wait for error handling
+    await act(async () => {
+      await new Promise(resolve => setTimeout(resolve, 0));
+    });
+
+    expect(hookResult.styleStatus.completed).toBe(true);
+    expect(hookResult.styleStatus.failed).toEqual(TEST_STYLESHEETS);
+    errorSpy.mockRestore();
+  });
+
+  test('handles concurrent renders during hot reload', async () => {
+    let hookResult;
+    const TestComponent = () => {
+      hookResult = useExternalStyles(TEST_STYLESHEETS);
+      return <div ref={hookResult.hostRef}>Test Content</div>;
+    };
+
+    const { rerender } = render(<TestComponent />);
+
+    // Wait for initial style loading
+    await act(async () => {
+      await new Promise(resolve => setTimeout(resolve, 0));
+    });
+
+    // Trigger multiple rerenders
+    for (let i = 0; i < 3; i++) {
+      act(() => {
+        rerender(<TestComponent key={i} />);
+      });
+    }
+
+    // Wait for final style loading
+    await act(async () => {
+      await new Promise(resolve => setTimeout(resolve, 0));
+    });
+
+    expect(hookResult.styleStatus.completed).toBe(true);
+    expect(hookResult.styleStatus.loaded).toEqual(TEST_STYLESHEETS);
+  });
+
+  test('handles unmount during style loading', async () => {
+    let hookResult;
+    const TestComponent = () => {
+      hookResult = useExternalStyles(TEST_STYLESHEETS);
+      return <div ref={hookResult.hostRef}>Test Content</div>;
+    };
+
+    const { unmount } = render(<TestComponent />);
+
+    // Start style loading
+    act(() => {
+      hookResult.renderWithStyles(<div>Test</div>);
+    });
+
+    // Unmount during loading
+    act(() => {
+      unmount();
+    });
+
+    // Should be able to remount without errors
+    act(() => {
+      render(<TestComponent />);
+    });
+  });
+});
\ No newline at end of file

From d4950a4db2bcce53c01baf42e4208354165bc19d Mon Sep 17 00:00:00 2001
From: Wesley B <62723358+wesleyboar@users.noreply.github.com>
Date: Wed, 18 Jun 2025 12:16:15 -0500
Subject: [PATCH 04/79] refactor: WC-219 organize code more cleanly

to help in debugging solution to hot reload error in dev
---
 .../src/hooks/datafiles/useExternalStyles.js  | 126 ++++++++++--------
 1 file changed, 67 insertions(+), 59 deletions(-)

diff --git a/client/src/hooks/datafiles/useExternalStyles.js b/client/src/hooks/datafiles/useExternalStyles.js
index 6d29054d6e..4015509afd 100644
--- a/client/src/hooks/datafiles/useExternalStyles.js
+++ b/client/src/hooks/datafiles/useExternalStyles.js
@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useRef, useState, useLayoutEffect } from 'react';
 import { createRoot } from 'react-dom/client';
 
 const DEFAULT_STYLESHEETS = [
@@ -16,10 +16,10 @@ function useExternalStyles(externalStylesheets = DEFAULT_STYLESHEETS) {
     completed: false
   });
 
-  useEffect(() => {
+  function initializeShadowRoot() {
     if (!hostRef.current) {
       console.warn('No hostRef.current found');
-      return;
+      return null;
     }
 
     if (!shadowRootRef.current) {
@@ -28,98 +28,106 @@ function useExternalStyles(externalStylesheets = DEFAULT_STYLESHEETS) {
           hostRef.current.attachShadow({ mode: 'open' });
       } catch (error) {
         console.error('Failed to create shadow root:', error);
-        return;
+        return null;
       }
     }
 
-    const totalStylesheets = externalStylesheets.length;
+    return shadowRootRef.current;
+  }
+
+  function cleanupDOM() {
+    if (shadowRootRef.current) {
+      const container = shadowRootRef.current.querySelector('div');
+      if (container) container.remove();
+      const links = shadowRootRef.current.querySelectorAll('link');
+      links.forEach(link => link.remove());
+    }
+  }
+
+  function cleanupReact() {
+    if (reactRootRef.current) {
+      reactRootRef.current.unmount();
+      reactRootRef.current = null;
+    }
     
-    const checkAllComplete = (loaded, failed) => {
-      if (loaded.length + failed.length === totalStylesheets) {
-        console.log('Style loading complete:', {
-          succeeded: loaded,
-          failed: failed
-        });
-        setStyleStatus({
-          loaded,
-          failed,
-          completed: true
-        });
-      }
-    };
+    setStyleStatus({
+      loaded: [],
+      failed: [],
+      completed: false
+    });
+  }
+
+  useLayoutEffect(() => {
+    return cleanupDOM;
+  }, []);
+
+  useEffect(() => {
+    const shadowRoot = initializeShadowRoot();
+    if (!shadowRoot) return;
+
+    loadStylesheets(shadowRoot);
+
+    return cleanupReact;
+  }, [externalStylesheets]);
 
+  function loadStylesheets(shadowRoot) {
+    const totalStylesheets = externalStylesheets.length;
     if (totalStylesheets === 0) {
       setStyleStatus({ loaded: [], failed: [], completed: true });
       return;
     }
 
-    // Remove any existing stylesheets before adding new ones
-    const existingLinks = shadowRootRef.current.querySelectorAll('link');
+    const existingLinks = shadowRoot.querySelectorAll('link');
     existingLinks.forEach(link => link.remove());
 
     const loaded = [];
     const failed = [];
 
+    function checkAllComplete() {
+      if (loaded.length + failed.length === totalStylesheets) {
+        setStyleStatus({
+          loaded,
+          failed,
+          completed: true
+        });
+        if (failed.length > 0) {
+          console.warn('Some stylesheets failed to load:', failed);
+        }
+      }
+    }
+
     externalStylesheets.forEach(url => {
       const link = document.createElement('link');
       link.rel = 'stylesheet';
       link.href = url;
       link.onload = () => {
         loaded.push(url);
-        checkAllComplete(loaded, failed);
+        checkAllComplete();
       };
-      link.onerror = (error) => {
-        console.error(`Failed to load stylesheet: ${url}`, error);
+      link.onerror = () => {
         failed.push(url);
-        checkAllComplete(loaded, failed);
+        checkAllComplete();
       };
-      shadowRootRef.current.appendChild(link);
+      shadowRoot.appendChild(link);
     });
+  }
 
-    return () => {
-      if (reactRootRef.current) {
-        // Unmount the React root first
-        reactRootRef.current.unmount();
-        reactRootRef.current = null;
-      }
-
-      // Clean up stylesheets
-      const links = shadowRootRef.current?.querySelectorAll('link');
-      links?.forEach(link => link.remove());
-
-      // Reset the status
-      setStyleStatus({
-        loaded: [],
-        failed: [],
-        completed: false
-      });
-    };
-  }, [externalStylesheets]);
-
-  const renderWithStyles = (children) => {
-    if (!shadowRootRef.current) {
+  function renderWithStyles(children) {
+    const shadowRoot = shadowRootRef.current;
+    if (!shadowRoot) {
       console.warn('Cannot render: no shadow root');
       return;
     }
 
     if (!reactRootRef.current) {
-      // Clean up any existing container
-      const existingContainer = shadowRootRef.current.querySelector('div');
-      if (existingContainer) {
-        existingContainer.remove();
-      }
-
       const container = document.createElement('div');
-      shadowRootRef.current.appendChild(container);
+      shadowRoot.appendChild(container);
       reactRootRef.current = createRoot(container);
     }
 
-    if (styleStatus.failed.length > 0) {
-      console.warn('Rendering with missing styles:', styleStatus.failed);
-    }
-
     reactRootRef.current.render(children);
-  };
+  }
+
 
   return {
     hostRef,

From b1dfb850ea686b283fca447669cb0847ca3bfbcb Mon Sep 17 00:00:00 2001
From: Wesley B <62723358+wesleyboar@users.noreply.github.com>
Date: Wed, 18 Jun 2025 17:53:55 -0500
Subject: [PATCH 05/79] refactor: WC-219 change solution from DOM to CSS

KNOWN ISSUES: Does not make CMS content look exactly correct.
---
 ...esTest.jsx => DataFilesTestShadowRoot.jsx} |   4 +-
 .../DataFiles/DataFilesTestStyleConflict.jsx  | 322 ++++++++++++++++++
 client/src/components/DataFiles/index.js      |   2 +-
 client/src/index.css                          |   6 +-
 server/portal/templates/base.html             |  11 +-
 5 files changed, 336 insertions(+), 9 deletions(-)
 rename client/src/components/DataFiles/{DataFilesTest.jsx => DataFilesTestShadowRoot.jsx} (94%)
 create mode 100644 client/src/components/DataFiles/DataFilesTestStyleConflict.jsx

diff --git a/client/src/components/DataFiles/DataFilesTest.jsx b/client/src/components/DataFiles/DataFilesTestShadowRoot.jsx
similarity index 94%
rename from client/src/components/DataFiles/DataFilesTest.jsx
rename to client/src/components/DataFiles/DataFilesTestShadowRoot.jsx
index ffda0591dd..edc089cdcf 100644
--- a/client/src/components/DataFiles/DataFilesTest.jsx
+++ b/client/src/components/DataFiles/DataFilesTestShadowRoot.jsx
@@ -3,7 +3,7 @@ import { React, useEffect } from 'react';
 import { LoadingSpinner, InlineMessage } from '_common';
 import { useExternalStyles } from 'hooks/datafiles';
 
-function DataTable() {
+function DataGallery() {
   const { hostRef, styleStatus, renderWithStyles } = useExternalStyles();
 
   useEffect(() => {
@@ -31,4 +31,4 @@ function DataTable() {
   return <div ref={hostRef}></div>;
 }
 
-export default DataTable;
+export default DataGallery;
diff --git a/client/src/components/DataFiles/DataFilesTestStyleConflict.jsx b/client/src/components/DataFiles/DataFilesTestStyleConflict.jsx
new file mode 100644
index 0000000000..18b81e949c
--- /dev/null
+++ b/client/src/components/DataFiles/DataFilesTestStyleConflict.jsx
@@ -0,0 +1,322 @@
+import { React, useEffect } from 'react';
+
+import { LoadingSpinner, InlineMessage } from '_common';
+import { useExternalStyles } from 'hooks/datafiles';
+
+const externalCSS = `
+  @layer mimic-cms.base, mimic-cms.project, mimic-cms.revert;
+
+  @import url(/static/site_cms/css/build/core-styles.base.css) layer(mimic-cms.base);
+  @import url(/static/site_cms/css/build/core-styles.cms.css) layer(mimic-cms.base);
+  @import url(/static/site_cms/css/build/core-cms.css) layer(mimic-cms.project);
+
+  @import url(https://cdn.jsdelivr.net/gh/TACC/Core-CMS-Custom@5717c8d/digitalrocks_assets/css/cms.css) layer(mimic-cms);
+  @import url(https://cdn.jsdelivr.net/gh/TACC/Core-CMS-Custom@5717c8d/digitalrocks_assets/css/for-core-styles.css) layer(mimic-cms);
+`;
+
+const revertCSS = `
+  /* To preserve .nav-sidebar appearance */
+  /* WARNING: Does not make CMS content look exactly correct */
+  /* WARNING: Makes CMS content looks incorrect in a different way */
+  @layer mimic-cms.revert {
+    html,
+    body {
+      all: revert;
+    }
+    body {
+      /* NOTE: Effect is only noticeable if nav-sidebar link text wraps */
+      line-height: var(--bs-body-line-height);
+    }
+
+    .nav-sidebar,
+    .nav-sidebar * {
+      all: revert-layer;
+    }
+  }
+`;
+
+function DataGallery() {
+  return (<>
+    <style dangerouslySetInnerHTML={{ __html: externalCSS }} />
+    <style dangerouslySetInnerHTML={{ __html: revertCSS }} />
+    <div id="mimic-cms">
+      <div className="o-section">
+        <h1>Browse Datasets</h1>
+        <div className="c-card-list">
+          <li
+            className="c-card--image-top c-card--plain"
+            data-tag-change-from="article"
+          >
+            <h3>11 Sandstones: raw, filtered and segmented data</h3>
+            <p>
+              <strong>Rodrigo Neumann</strong>
+              <br /> IBM Research
+            </p>
+            <p>
+              <a href="/datasets/317/" className="c-button c-button--primary">
+                Dataset #317
+              </a>
+            </p>
+            <img
+              src="https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/65/10/6510c85e-4f00-4bde-b560-31614fb30ce0/dr-proj-317.png__800.0x764.0_subsampling-2.png"
+              alt=""
+              srcSet="
+                  https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/65/10/6510c85e-4f00-4bde-b560-31614fb30ce0/dr-proj-317.png__576x576_subsampling-2.png 576w,
+                  https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/65/10/6510c85e-4f00-4bde-b560-31614fb30ce0/dr-proj-317.png__768x768_subsampling-2.png 768w,
+                  https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/65/10/6510c85e-4f00-4bde-b560-31614fb30ce0/dr-proj-317.png__800.0x764.0_subsampling-2.png 800.0w
+              "
+              sizes="
+                  (max-width: 576px) 576px,
+                  (max-width: 768px) 768px,
+                  800.0px
+              "
+              className="img-fluid"
+            />
+          </li>
+          <li
+            className="c-card--image-top c-card--plain"
+            data-tag-change-from="article"
+          >
+            <h3>
+              Bentheimer and Nugget Residual Saturation Micro-Computed Tomography Data
+            </h3>
+            <p>
+              <strong>Laura Dalton</strong>
+              <br /> Duke University
+            </p>
+            <p>
+              <a href="/datasets/218/" className="c-button c-button--primary">
+                Dataset #218
+              </a>
+            </p>
+            <img
+              src="https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/a7/be/a7be0632-6120-4dba-8b2d-b02c1727acac/dr-project-218.png__1104.0x1104.0_q85_subject_location-552%2C552_subsampling-2.jpg"
+              alt=""
+              srcSet="
+                  https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/a7/be/a7be0632-6120-4dba-8b2d-b02c1727acac/dr-project-218.png__576x576_q85_subsampling-2.jpg 576w,
+                  https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/a7/be/a7be0632-6120-4dba-8b2d-b02c1727acac/dr-project-218.png__768x768_q85_subsampling-2.jpg 768w,
+                  https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/a7/be/a7be0632-6120-4dba-8b2d-b02c1727acac/dr-project-218.png__992x992_q85_subsampling-2.jpg 992w,
+                  https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/a7/be/a7be0632-6120-4dba-8b2d-b02c1727acac/dr-project-218.png__1104.0x1104.0_q85_subject_location-552%2C552_subsampling-2.jpg 1104.0w
+              "
+              sizes="
+                  (max-width: 576px) 576px,
+                  (max-width: 768px) 768px,
+                  (max-width: 992px) 992px,
+                  1104.0px
+              "
+              className="img-fluid"
+            />
+          </li>
+          <li
+            className="c-card--image-top c-card--plain"
+            data-tag-change-from="article"
+          >
+            <h3>11 Sandstones: raw, filtered and segmented data</h3>
+            <p>
+              <strong>Rodrigo Neumann</strong>
+              <br /> IBM Research
+            </p>
+            <p>
+              <a href="/datasets/317/" className="c-button c-button--primary">
+                Dataset #317
+              </a>
+            </p>
+            <img
+              src="https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/65/10/6510c85e-4f00-4bde-b560-31614fb30ce0/dr-proj-317.png__800.0x764.0_subsampling-2.png"
+              alt=""
+              srcSet="
+                  https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/65/10/6510c85e-4f00-4bde-b560-31614fb30ce0/dr-proj-317.png__576x576_subsampling-2.png 576w,
+                  https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/65/10/6510c85e-4f00-4bde-b560-31614fb30ce0/dr-proj-317.png__768x768_subsampling-2.png 768w,
+                  https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/65/10/6510c85e-4f00-4bde-b560-31614fb30ce0/dr-proj-317.png__800.0x764.0_subsampling-2.png 800.0w
+              "
+              sizes="
+                  (max-width: 576px) 576px,
+                  (max-width: 768px) 768px,
+                  800.0px
+              "
+              className="img-fluid"
+            />
+          </li>
+          <li
+            className="c-card--image-top c-card--plain"
+            data-tag-change-from="article"
+          >
+            <h3>
+              Bentheimer and Nugget Residual Saturation Micro-Computed Tomography Data
+            </h3>
+            <p>
+              <strong>Laura Dalton</strong>
+              <br /> Duke University
+            </p>
+            <p>
+              <a href="/datasets/218/" className="c-button c-button--primary">
+                Dataset #218
+              </a>
+            </p>
+            <img
+              src="https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/a7/be/a7be0632-6120-4dba-8b2d-b02c1727acac/dr-project-218.png__1104.0x1104.0_q85_subject_location-552%2C552_subsampling-2.jpg"
+              alt=""
+              srcSet="
+                  https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/a7/be/a7be0632-6120-4dba-8b2d-b02c1727acac/dr-project-218.png__576x576_q85_subsampling-2.jpg 576w,
+                  https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/a7/be/a7be0632-6120-4dba-8b2d-b02c1727acac/dr-project-218.png__768x768_q85_subsampling-2.jpg 768w,
+                  https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/a7/be/a7be0632-6120-4dba-8b2d-b02c1727acac/dr-project-218.png__992x992_q85_subsampling-2.jpg 992w,
+                  https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/a7/be/a7be0632-6120-4dba-8b2d-b02c1727acac/dr-project-218.png__1104.0x1104.0_q85_subject_location-552%2C552_subsampling-2.jpg 1104.0w
+              "
+              sizes="
+                  (max-width: 576px) 576px,
+                  (max-width: 768px) 768px,
+                  (max-width: 992px) 992px,
+                  1104.0px
+              "
+              className="img-fluid"
+            />
+          </li>
+          <li
+            className="c-card--image-top c-card--plain"
+            data-tag-change-from="article"
+          >
+            <h3>11 Sandstones: raw, filtered and segmented data</h3>
+            <p>
+              <strong>Rodrigo Neumann</strong>
+              <br /> IBM Research
+            </p>
+            <p>
+              <a href="/datasets/317/" className="c-button c-button--primary">
+                Dataset #317
+              </a>
+            </p>
+            <img
+              src="https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/65/10/6510c85e-4f00-4bde-b560-31614fb30ce0/dr-proj-317.png__800.0x764.0_subsampling-2.png"
+              alt=""
+              srcSet="
+                  https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/65/10/6510c85e-4f00-4bde-b560-31614fb30ce0/dr-proj-317.png__576x576_subsampling-2.png 576w,
+                  https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/65/10/6510c85e-4f00-4bde-b560-31614fb30ce0/dr-proj-317.png__768x768_subsampling-2.png 768w,
+                  https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/65/10/6510c85e-4f00-4bde-b560-31614fb30ce0/dr-proj-317.png__800.0x764.0_subsampling-2.png 800.0w
+              "
+              sizes="
+                  (max-width: 576px) 576px,
+                  (max-width: 768px) 768px,
+                  800.0px
+              "
+              className="img-fluid"
+            />
+          </li>
+          <li
+            className="c-card--image-top c-card--plain"
+            data-tag-change-from="article"
+          >
+            <h3>
+              Bentheimer and Nugget Residual Saturation Micro-Computed Tomography Data
+            </h3>
+            <p>
+              <strong>Laura Dalton</strong>
+              <br /> Duke University
+            </p>
+            <p>
+              <a href="/datasets/218/" className="c-button c-button--primary">
+                Dataset #218
+              </a>
+            </p>
+            <img
+              src="https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/a7/be/a7be0632-6120-4dba-8b2d-b02c1727acac/dr-project-218.png__1104.0x1104.0_q85_subject_location-552%2C552_subsampling-2.jpg"
+              alt=""
+              srcSet="
+                  https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/a7/be/a7be0632-6120-4dba-8b2d-b02c1727acac/dr-project-218.png__576x576_q85_subsampling-2.jpg 576w,
+                  https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/a7/be/a7be0632-6120-4dba-8b2d-b02c1727acac/dr-project-218.png__768x768_q85_subsampling-2.jpg 768w,
+                  https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/a7/be/a7be0632-6120-4dba-8b2d-b02c1727acac/dr-project-218.png__992x992_q85_subsampling-2.jpg 992w,
+                  https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/a7/be/a7be0632-6120-4dba-8b2d-b02c1727acac/dr-project-218.png__1104.0x1104.0_q85_subject_location-552%2C552_subsampling-2.jpg 1104.0w
+              "
+              sizes="
+                  (max-width: 576px) 576px,
+                  (max-width: 768px) 768px,
+                  (max-width: 992px) 992px,
+                  1104.0px
+              "
+              className="img-fluid"
+            />
+          </li>
+          <li
+            className="c-card--image-top c-card--plain"
+            data-tag-change-from="article"
+          >
+            <h3>11 Sandstones: raw, filtered and segmented data</h3>
+            <p>
+              <strong>Rodrigo Neumann</strong>
+              <br /> IBM Research
+            </p>
+            <p>
+              <a href="/datasets/317/" className="c-button c-button--primary">
+                Dataset #317
+              </a>
+            </p>
+            <img
+              src="https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/65/10/6510c85e-4f00-4bde-b560-31614fb30ce0/dr-proj-317.png__800.0x764.0_subsampling-2.png"
+              alt=""
+              srcSet="
+                  https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/65/10/6510c85e-4f00-4bde-b560-31614fb30ce0/dr-proj-317.png__576x576_subsampling-2.png 576w,
+                  https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/65/10/6510c85e-4f00-4bde-b560-31614fb30ce0/dr-proj-317.png__768x768_subsampling-2.png 768w,
+                  https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/65/10/6510c85e-4f00-4bde-b560-31614fb30ce0/dr-proj-317.png__800.0x764.0_subsampling-2.png 800.0w
+              "
+              sizes="
+                  (max-width: 576px) 576px,
+                  (max-width: 768px) 768px,
+                  800.0px
+              "
+              className="img-fluid"
+            />
+          </li>
+          <li
+            className="c-card--image-top c-card--plain"
+            data-tag-change-from="article"
+          >
+            <h3>
+              Bentheimer and Nugget Residual Saturation Micro-Computed Tomography Data
+            </h3>
+            <p>
+              <strong>Laura Dalton</strong>
+              <br /> Duke University
+            </p>
+            <p>
+              <a href="/datasets/218/" className="c-button c-button--primary">
+                Dataset #218
+              </a>
+            </p>
+            <img
+              src="https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/a7/be/a7be0632-6120-4dba-8b2d-b02c1727acac/dr-project-218.png__1104.0x1104.0_q85_subject_location-552%2C552_subsampling-2.jpg"
+              alt=""
+              srcSet="
+                  https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/a7/be/a7be0632-6120-4dba-8b2d-b02c1727acac/dr-project-218.png__576x576_q85_subsampling-2.jpg 576w,
+                  https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/a7/be/a7be0632-6120-4dba-8b2d-b02c1727acac/dr-project-218.png__768x768_q85_subsampling-2.jpg 768w,
+                  https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/a7/be/a7be0632-6120-4dba-8b2d-b02c1727acac/dr-project-218.png__992x992_q85_subsampling-2.jpg 992w,
+                  https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/a7/be/a7be0632-6120-4dba-8b2d-b02c1727acac/dr-project-218.png__1104.0x1104.0_q85_subject_location-552%2C552_subsampling-2.jpg 1104.0w
+              "
+              sizes="
+                  (max-width: 576px) 576px,
+                  (max-width: 768px) 768px,
+                  (max-width: 992px) 992px,
+                  1104.0px
+              "
+              className="img-fluid"
+            />
+          </li>
+        </div>
+        <div className="o-section">
+          {/* <!-- FAQ: Bootstrap 4's Pagination pattern --> */}
+          <ul className="pagination">
+            <li className="page-item disabled">
+              <span className="page-link">&lt; Previous</span>
+            </li>
+            <li className="page-item active">
+              <span className="page-link">1</span>
+            </li>
+            <li className="page-item disabled">
+              <span className="page-link">Next &gt;</span>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </>);
+}
+
+export default DataGallery;
diff --git a/client/src/components/DataFiles/index.js b/client/src/components/DataFiles/index.js
index d0cddb2995..5373df8413 100644
--- a/client/src/components/DataFiles/index.js
+++ b/client/src/components/DataFiles/index.js
@@ -1 +1 @@
-export { default } from './DataFilesTest';
+export { default } from './DataFilesTestStyleConflict';
diff --git a/client/src/index.css b/client/src/index.css
index 537de87b26..151967fb0f 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -1,4 +1,6 @@
-@import url('./styles/global.css');
+@import url('./styles/global.css') layer(project);
+
+@layer project {
 
 /*
   Sectioning Root
@@ -103,3 +105,5 @@ body > .content {
   top: 0;
   bottom: 0;
 }
+
+}
diff --git a/server/portal/templates/base.html b/server/portal/templates/base.html
index 5aeba9db4d..cd737fc81e 100644
--- a/server/portal/templates/base.html
+++ b/server/portal/templates/base.html
@@ -16,17 +16,18 @@
     <link rel="canonical" href="{{request.get_full_path}}">
     <base href="/">
     {% block head_extra %}{% endblock %}
+    <style>
+      @layer portal, mimic-cms;
+      @import url("https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css") layer(portal);
+      @import url("/static/site_cms/css/build/core-styles.theme.default.css") layer(portal);
+      @import url("/static/site_cms/css/build/core-styles.header.css") layer(portal);
+    </style>
     {% if settings.PORTAL_CSS_FILENAMES|length %}
     <!-- Project CSS -->
       {% for stylesheet in settings.PORTAL_CSS_FILENAMES %}
       <link rel="stylesheet" href="{{ stylesheet }}">
       {% endfor %}
     {% endif %}
-    <!-- Vendor CSS -->
-    <link id="css-bootstrap" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
-    <!-- Header CSS -->
-    <link rel="stylesheet" href="/static/site_cms/css/build/core-styles.theme.default.css">
-    <link rel="stylesheet" href="/static/site_cms/css/build/core-styles.header.css">
 
     {% block styles %}{% endblock %}
   </head>

From 84c0c7bb46f983ace4819deab7f28c8be2eaf253 Mon Sep 17 00:00:00 2001
From: Wesley B <62723358+wesleyboar@users.noreply.github.com>
Date: Wed, 18 Jun 2025 17:54:46 -0500
Subject: [PATCH 06/79] chore: WC-219 remove cruft

---
 .../src/components/DataFiles/DataFilesTestStyleConflict.jsx  | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/client/src/components/DataFiles/DataFilesTestStyleConflict.jsx b/client/src/components/DataFiles/DataFilesTestStyleConflict.jsx
index 18b81e949c..91e89999c8 100644
--- a/client/src/components/DataFiles/DataFilesTestStyleConflict.jsx
+++ b/client/src/components/DataFiles/DataFilesTestStyleConflict.jsx
@@ -1,7 +1,4 @@
-import { React, useEffect } from 'react';
-
-import { LoadingSpinner, InlineMessage } from '_common';
-import { useExternalStyles } from 'hooks/datafiles';
+import { React } from 'react';
 
 const externalCSS = `
   @layer mimic-cms.base, mimic-cms.project, mimic-cms.revert;

From 30cff34dc5dab671bf6bf90b62b2e8f6084da2e5 Mon Sep 17 00:00:00 2001
From: Wesley B <62723358+wesleyboar@users.noreply.github.com>
Date: Wed, 18 Jun 2025 18:01:03 -0500
Subject: [PATCH 07/79] feat: WC-219 hide navbar, simplify cms content CSS

KNOWN ISSUE: CMS content still does not render perfect.
---
 .../DataFiles/DataFilesTestStyleConflict.jsx  | 24 +++++++++----------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/client/src/components/DataFiles/DataFilesTestStyleConflict.jsx b/client/src/components/DataFiles/DataFilesTestStyleConflict.jsx
index 91e89999c8..22210b9c59 100644
--- a/client/src/components/DataFiles/DataFilesTestStyleConflict.jsx
+++ b/client/src/components/DataFiles/DataFilesTestStyleConflict.jsx
@@ -1,5 +1,11 @@
 import { React } from 'react';
 
+const temporaryCSS = `
+  .nav-sidebar {
+    display: none;
+  }
+`;
+
 const externalCSS = `
   @layer mimic-cms.base, mimic-cms.project, mimic-cms.revert;
 
@@ -12,21 +18,14 @@ const externalCSS = `
 `;
 
 const revertCSS = `
-  /* To preserve .nav-sidebar appearance */
-  /* WARNING: Does not make CMS content look exactly correct */
-  /* WARNING: Makes CMS content looks incorrect in a different way */
-  @layer mimic-cms.revert {
-    html,
-    body {
+  @layer mimic-cms {
+    /* To revert Portal styles */
+    #react-root, #react-root * {
       all: revert;
     }
-    body {
-      /* NOTE: Effect is only noticeable if nav-sidebar link text wraps */
-      line-height: var(--bs-body-line-height);
-    }
 
-    .nav-sidebar,
-    .nav-sidebar * {
+    /* To re-apply CMS styles */
+    #mimic-cms, #mimic-cms * {
       all: revert-layer;
     }
   }
@@ -34,6 +33,7 @@ const revertCSS = `
 
 function DataGallery() {
   return (<>
+    <style dangerouslySetInnerHTML={{ __html: temporaryCSS }} />
     <style dangerouslySetInnerHTML={{ __html: externalCSS }} />
     <style dangerouslySetInnerHTML={{ __html: revertCSS }} />
     <div id="mimic-cms">

From 23cfe961db0d13bb6dc82d45397629b31f546f47 Mon Sep 17 00:00:00 2001
From: Wesley B <62723358+wesleyboar@users.noreply.github.com>
Date: Wed, 18 Jun 2025 19:33:21 -0500
Subject: [PATCH 08/79] feat: WC-219 match test CMS content perfectly

---
 .../DataFilesTestStyleConflict.global.css     |  4 +
 .../DataFiles/DataFilesTestStyleConflict.jsx  | 79 ++++++++++++++-----
 client/src/index.css                          |  4 +-
 client/src/styles/global.css                  |  3 +-
 client/src/styles/settings/font.css           | 12 ---
 .../portal/apps/workbench/index.html          |  2 +-
 .../templates/portal/apps/workbench/index.j2  |  2 +-
 7 files changed, 68 insertions(+), 38 deletions(-)
 create mode 100644 client/src/components/DataFiles/DataFilesTestStyleConflict.global.css
 delete mode 100644 client/src/styles/settings/font.css

diff --git a/client/src/components/DataFiles/DataFilesTestStyleConflict.global.css b/client/src/components/DataFiles/DataFilesTestStyleConflict.global.css
new file mode 100644
index 0000000000..f15f598417
--- /dev/null
+++ b/client/src/components/DataFiles/DataFilesTestStyleConflict.global.css
@@ -0,0 +1,4 @@
+/* HACK: Should use routes to not render sidebar */
+#react-root:has(#mimic-cms) .nav-sidebar {
+  display: none;
+}
diff --git a/client/src/components/DataFiles/DataFilesTestStyleConflict.jsx b/client/src/components/DataFiles/DataFilesTestStyleConflict.jsx
index 22210b9c59..2c4b29fa14 100644
--- a/client/src/components/DataFiles/DataFilesTestStyleConflict.jsx
+++ b/client/src/components/DataFiles/DataFilesTestStyleConflict.jsx
@@ -1,13 +1,10 @@
 import { React } from 'react';
 
-const temporaryCSS = `
-  .nav-sidebar {
-    display: none;
-  }
-`;
+/* HACK: Temporary; see stylesheet for notes */
+import './DataFilesTestStyleConflict.global.css';
 
 const externalCSS = `
-  @layer mimic-cms.base, mimic-cms.project, mimic-cms.revert;
+  @layer mimic-cms.base, mimic-cms.project;
 
   @import url(/static/site_cms/css/build/core-styles.base.css) layer(mimic-cms.base);
   @import url(/static/site_cms/css/build/core-styles.cms.css) layer(mimic-cms.base);
@@ -18,25 +15,65 @@ const externalCSS = `
 `;
 
 const revertCSS = `
-  @layer mimic-cms {
-    /* To revert Portal styles */
-    #react-root, #react-root * {
-      all: revert;
-    }
+  /* To restore relevant behavior of Bootstrap grid */
+  .workbench-content .container {
+    /* To use padding from Bootstrap 4 (which CMS still uses) */
+    --bs-gutter-x: 15px;
+
+    /* To undo Workbench.scss */
+    margin-left: revert-layer;
+    max-width: revert-layer;
+  }
 
-    /* To re-apply CMS styles */
-    #mimic-cms, #mimic-cms * {
-      all: revert-layer;
-    }
+  /* To undo generic Portal styles that do not match CMS */
+  body {
+    -webkit-font-smoothing: revert;
+  }
+
+  /* To adjust Portal styles that mimic old Core Styles */
+  .c-button {
+    --max-width: auto;
+  }
+`;
+
+const breadcrumbCSS = `
+  .s-breadcrumbs a:not([href]) {
+    opacity: 1;
+    color: unset;
   }
 `;
 
 function DataGallery() {
-  return (<>
-    <style dangerouslySetInnerHTML={{ __html: temporaryCSS }} />
-    <style dangerouslySetInnerHTML={{ __html: externalCSS }} />
-    <style dangerouslySetInnerHTML={{ __html: revertCSS }} />
-    <div id="mimic-cms">
+  return (
+    <div id="mimic-cms" class="container">
+      <style dangerouslySetInnerHTML={{ __html: breadcrumbCSS }} />
+      <nav class="s-breadcrumbs" id="cms-breadcrumbs">
+        <ol itemscope itemtype="https://schema.org/BreadcrumbList">
+          <li itemscope
+              itemprop="itemListElement"
+              itemtype="https://schema.org/ListItem"
+          >
+            <a href="/" itemprop="item">
+              <span itemprop="name">Index</span>
+            </a>
+            <meta itemprop="position" content="1" />
+          </li>
+          <li itemscope
+              itemprop="itemListElement"
+              itemtype="https://schema.org/ListItem"
+          >
+            <span itemprop="name">Browse Datasets</span>
+            <meta itemprop="position" content="2" />
+          </li>
+        </ol>
+      </nav>
+      <script>
+        const crumbs = document.getElementById('cms-breadcrumbs');
+        const secondLink = crumbs && crumbs.querySelector('li:nth-of-type(2) > a');
+        if (secondLink) secondLink.removeAttribute('href');
+      </script>
+      <style dangerouslySetInnerHTML={{ __html: externalCSS }} />
+      <style dangerouslySetInnerHTML={{ __html: revertCSS }} />
       <div className="o-section">
         <h1>Browse Datasets</h1>
         <div className="c-card-list">
@@ -313,7 +350,7 @@ function DataGallery() {
         </div>
       </div>
     </div>
-  </>);
+  );
 }
 
 export default DataGallery;
diff --git a/client/src/index.css b/client/src/index.css
index 151967fb0f..4902d17c03 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -1,6 +1,6 @@
-@import url('./styles/global.css') layer(project);
+@import url('./styles/global.css') layer(portal);
 
-@layer project {
+@layer portal {
 
 /*
   Sectioning Root
diff --git a/client/src/styles/global.css b/client/src/styles/global.css
index ed2296938b..98f19ba8a2 100644
--- a/client/src/styles/global.css
+++ b/client/src/styles/global.css
@@ -4,7 +4,8 @@
 /* SETTINGS */
 @import url('@tacc/core-styles/src/lib/_imports/settings/border.css');
 @import url('./settings/color.css');
-@import url('./settings/font.css');
+@import url('@tacc/core-styles/dist/settings/font.css');
+@import url('@tacc/core-styles/dist/settings/font--portal.css');
 @import url('./settings/space.css');
 
 /* TOOLS */
diff --git a/client/src/styles/settings/font.css b/client/src/styles/settings/font.css
deleted file mode 100644
index ec3f60ae2b..0000000000
--- a/client/src/styles/settings/font.css
+++ /dev/null
@@ -1,12 +0,0 @@
-@import url('@tacc/core-styles/src/lib/_imports/settings/font.css');
-
-:root {
-  /* stylelint-disable value-keyword-case */
-  --global-font-family--sans: 'Roboto', sans-serif;
-  --global-font-family--serif: Times, sans-serif;
-  --global-font-family--mono: source-code-pro, Menlo, Monaco, Consolas,
-    'Courier New', monospace;
-  /* stylelint-enable value-keyword-case */
-
-  --global-line-height: 1.4; /* From Bootstrap */
-}
diff --git a/server/portal/apps/workbench/templates/portal/apps/workbench/index.html b/server/portal/apps/workbench/templates/portal/apps/workbench/index.html
index 4e81c34bf4..bf599ca24f 100644
--- a/server/portal/apps/workbench/templates/portal/apps/workbench/index.html
+++ b/server/portal/apps/workbench/templates/portal/apps/workbench/index.html
@@ -9,7 +9,7 @@
   <link rel="stylesheet" href="">
 {% endblock %}
 {% block content %}
-  <div id="react-root"></div>
+  <main id="react-root"></main>
 {% endblock %}
 {% block scripts %}
   <script> window.__INITIAL_SETUP_COMPLETE__ = {{ setup_complete|yesno:"true,false" }}; </script>
diff --git a/server/portal/apps/workbench/templates/portal/apps/workbench/index.j2 b/server/portal/apps/workbench/templates/portal/apps/workbench/index.j2
index df67ff2acc..c325fdd851 100644
--- a/server/portal/apps/workbench/templates/portal/apps/workbench/index.j2
+++ b/server/portal/apps/workbench/templates/portal/apps/workbench/index.j2
@@ -9,7 +9,7 @@
   <link rel="stylesheet" href="<%= htmlWebpackPlugin.files.css[1] %>">
 {% endblock %}
 {% block content %}
-  <div id="react-root"></div>
+  <main id="react-root"></main>
 {% endblock %}
 {% block scripts %}
   <script> window.__INITIAL_SETUP_COMPLETE__ = {{ setup_complete|yesno:"true,false" }}; </script>

From 2c9c90bf454827999a203cb626da1586107cffa0 Mon Sep 17 00:00:00 2001
From: Wesley B <62723358+wesleyboar@users.noreply.github.com>
Date: Wed, 18 Jun 2025 19:51:51 -0500
Subject: [PATCH 09/79] chore: WC-219 delete shadow dom attempt

---
 .../DataFiles/DataFilesTestShadowRoot.jsx     |  34 ---
 .../src/hooks/datafiles/useExternalStyles.js  | 140 -------------
 .../datafiles/useExternalStyles.test.jsx      | 194 ------------------
 3 files changed, 368 deletions(-)
 delete mode 100644 client/src/components/DataFiles/DataFilesTestShadowRoot.jsx
 delete mode 100644 client/src/hooks/datafiles/useExternalStyles.js
 delete mode 100644 client/src/hooks/datafiles/useExternalStyles.test.jsx

diff --git a/client/src/components/DataFiles/DataFilesTestShadowRoot.jsx b/client/src/components/DataFiles/DataFilesTestShadowRoot.jsx
deleted file mode 100644
index edc089cdcf..0000000000
--- a/client/src/components/DataFiles/DataFilesTestShadowRoot.jsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import { React, useEffect } from 'react';
-
-import { LoadingSpinner, InlineMessage } from '_common';
-import { useExternalStyles } from 'hooks/datafiles';
-
-function DataGallery() {
-  const { hostRef, styleStatus, renderWithStyles } = useExternalStyles();
-
-  useEffect(() => {
-    // IDEA: How about change these to single value like `isReadyToRenderWithStyles`?
-    if (hostRef.current && styleStatus.completed) {
-      renderWithStyles(
-        <div>
-          <h2>Browse Datasets</h2>
-          {styleStatus.failed.length > 0 && (
-            <InlineMessage type="warn">
-              Some styles failed to load. UI may look incorrect.
-            </InlineMessage>
-          )}
-          <p>Sample content.</p>
-        </div>
-      );
-    }
-  }, [hostRef.current, styleStatus, renderWithStyles]);
-
-
-  if (!styleStatus.completed) {
-    return <div ref={hostRef}><LoadingSpinner /></div>;
-  }
-
-  return <div ref={hostRef}></div>;
-}
-
-export default DataGallery;
diff --git a/client/src/hooks/datafiles/useExternalStyles.js b/client/src/hooks/datafiles/useExternalStyles.js
deleted file mode 100644
index 4015509afd..0000000000
--- a/client/src/hooks/datafiles/useExternalStyles.js
+++ /dev/null
@@ -1,140 +0,0 @@
-import { useEffect, useRef, useState, useLayoutEffect } from 'react';
-import { createRoot } from 'react-dom/client';
-
-const DEFAULT_STYLESHEETS = [
-  'https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600',
-  'https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css',
-];
-
-function useExternalStyles(externalStylesheets = DEFAULT_STYLESHEETS) {
-  const hostRef = useRef();
-  const shadowRootRef = useRef();
-  const reactRootRef = useRef();
-  const [styleStatus, setStyleStatus] = useState({
-    loaded: [],
-    failed: [],
-    completed: false
-  });
-
-  function initializeShadowRoot() {
-    if (!hostRef.current) {
-      console.warn('No hostRef.current found');
-      return null;
-    }
-
-    if (!shadowRootRef.current) {
-      try {
-        shadowRootRef.current = hostRef.current.shadowRoot || 
-          hostRef.current.attachShadow({ mode: 'open' });
-      } catch (error) {
-        console.error('Failed to create shadow root:', error);
-        return null;
-      }
-    }
-
-    return shadowRootRef.current;
-  }
-
-  function cleanupDOM() {
-    if (shadowRootRef.current) {
-      const container = shadowRootRef.current.querySelector('div');
-      if (container) container.remove();
-      const links = shadowRootRef.current.querySelectorAll('link');
-      links.forEach(link => link.remove());
-    }
-  }
-
-  function cleanupReact() {
-    if (reactRootRef.current) {
-      reactRootRef.current.unmount();
-      reactRootRef.current = null;
-    }
-    
-    setStyleStatus({
-      loaded: [],
-      failed: [],
-      completed: false
-    });
-  }
-
-  useLayoutEffect(() => {
-    return cleanupDOM;
-  }, []);
-
-  useEffect(() => {
-    const shadowRoot = initializeShadowRoot();
-    if (!shadowRoot) return;
-
-    loadStylesheets(shadowRoot);
-
-    return cleanupReact;
-  }, [externalStylesheets]);
-
-  function loadStylesheets(shadowRoot) {
-    const totalStylesheets = externalStylesheets.length;
-    if (totalStylesheets === 0) {
-      setStyleStatus({ loaded: [], failed: [], completed: true });
-      return;
-    }
-
-    const existingLinks = shadowRoot.querySelectorAll('link');
-    existingLinks.forEach(link => link.remove());
-
-    const loaded = [];
-    const failed = [];
-
-    function checkAllComplete() {
-      if (loaded.length + failed.length === totalStylesheets) {
-        setStyleStatus({
-          loaded,
-          failed,
-          completed: true
-        });
-        if (failed.length > 0) {
-          console.warn('Some stylesheets failed to load:', failed);
-        }
-      }
-    }
-
-    externalStylesheets.forEach(url => {
-      const link = document.createElement('link');
-      link.rel = 'stylesheet';
-      link.href = url;
-      link.onload = () => {
-        loaded.push(url);
-        checkAllComplete();
-      };
-      link.onerror = () => {
-        failed.push(url);
-        checkAllComplete();
-      };
-      shadowRoot.appendChild(link);
-    });
-  }
-
-  function renderWithStyles(children) {
-    const shadowRoot = shadowRootRef.current;
-    if (!shadowRoot) {
-      console.warn('Cannot render: no shadow root');
-      return;
-    }
-
-    if (!reactRootRef.current) {
-      const container = document.createElement('div');
-      shadowRoot.appendChild(container);
-      reactRootRef.current = createRoot(container);
-    }
-
-    reactRootRef.current.render(children);
-  }
-
-
-  return {
-    hostRef,
-    areStylesLoaded: styleStatus.completed,
-    styleStatus,
-    renderWithStyles,
-  };
-}
-
-export default useExternalStyles;
\ No newline at end of file
diff --git a/client/src/hooks/datafiles/useExternalStyles.test.jsx b/client/src/hooks/datafiles/useExternalStyles.test.jsx
deleted file mode 100644
index 98cda5c831..0000000000
--- a/client/src/hooks/datafiles/useExternalStyles.test.jsx
+++ /dev/null
@@ -1,194 +0,0 @@
-import React from 'react';
-import { render, act, cleanup } from '@testing-library/react';
-import { vi } from 'vitest';
-import useExternalStyles from './useExternalStyles';
-
-const TEST_STYLESHEETS = [
-  'test://style1.css',
-  'test://style2.css'
-];
-
-describe('useExternalStyles', () => {
-  beforeEach(() => {
-    // Mock the link.onload event to fire immediately
-    const originalCreateElement = document.createElement;
-    vi.spyOn(document, 'createElement').mockImplementation((tagName) => {
-      const element = originalCreateElement.call(document, tagName);
-      if (tagName === 'link') {
-        // Simulate successful load immediately
-        setTimeout(() => element.onload(), 0);
-      }
-      return element;
-    });
-  });
-
-  afterEach(() => {
-    cleanup();
-    vi.clearAllMocks();
-    vi.restoreAllMocks();
-  });
-
-  test('useExternalStyles hook initializes correctly', () => {
-    let hookResult;
-    const TestComponent = () => {
-      hookResult = useExternalStyles(TEST_STYLESHEETS);
-      return <div ref={hookResult.hostRef}>Test Content</div>;
-    };
-
-    act(() => {
-      render(<TestComponent />);
-    });
-
-    expect(hookResult).toBeDefined();
-    expect(hookResult.hostRef).toBeDefined();
-    expect(hookResult.areStylesLoaded).toBeDefined();
-    expect(hookResult.styleStatus).toBeDefined();
-    expect(hookResult.renderWithStyles).toBeDefined();
-  });
-
-  test('handles rapid unmount and remount during hot reload', async () => {
-    let hookResult;
-    const TestComponent = () => {
-      hookResult = useExternalStyles(TEST_STYLESHEETS);
-      return <div ref={hookResult.hostRef}>Test Content</div>;
-    };
-
-    // Initial render
-    const { unmount } = render(<TestComponent />);
-
-    // Wait for initial style loading
-    await act(async () => {
-      await new Promise(resolve => setTimeout(resolve, 0));
-    });
-
-    // Unmount
-    act(() => {
-      unmount();
-    });
-
-    // Remount immediately
-    act(() => {
-      render(<TestComponent />);
-    });
-
-    // Wait for style loading after remount
-    await act(async () => {
-      await new Promise(resolve => setTimeout(resolve, 0));
-    });
-
-    expect(hookResult.styleStatus.completed).toBe(true);
-    expect(hookResult.styleStatus.loaded).toEqual(TEST_STYLESHEETS);
-  });
-
-  test('cleanup happens properly during unmount', () => {
-    let hookResult;
-    const unmountSpy = vi.fn();
-    
-    const TestComponent = () => {
-      hookResult = useExternalStyles(TEST_STYLESHEETS);
-      React.useEffect(() => {
-        return () => unmountSpy();
-      }, []);
-      return <div ref={hookResult.hostRef}>Test Content</div>;
-    };
-
-    const { unmount } = render(<TestComponent />);
-    
-    act(() => {
-      hookResult.renderWithStyles(<div>Test</div>);
-    });
-
-    act(() => {
-      unmount();
-    });
-
-    expect(unmountSpy).toHaveBeenCalled();
-  });
-
-  test('handles style loading errors gracefully', async () => {
-    // Mock createElement to simulate a failed load
-    const originalCreateElement = document.createElement;
-    vi.spyOn(document, 'createElement').mockImplementation((tagName) => {
-      const element = originalCreateElement.call(document, tagName);
-      if (tagName === 'link') {
-        // Simulate failed load immediately
-        setTimeout(() => element.onerror(new Error('Failed to load')), 0);
-      }
-      return element;
-    });
-
-    let hookResult;
-    const errorSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
-    
-    const TestComponent = () => {
-      hookResult = useExternalStyles(TEST_STYLESHEETS);
-      return <div ref={hookResult.hostRef}>Test Content</div>;
-    };
-
-    render(<TestComponent />);
-
-    // Wait for error handling
-    await act(async () => {
-      await new Promise(resolve => setTimeout(resolve, 0));
-    });
-
-    expect(hookResult.styleStatus.completed).toBe(true);
-    expect(hookResult.styleStatus.failed).toEqual(TEST_STYLESHEETS);
-    errorSpy.mockRestore();
-  });
-
-  test('handles concurrent renders during hot reload', async () => {
-    let hookResult;
-    const TestComponent = () => {
-      hookResult = useExternalStyles(TEST_STYLESHEETS);
-      return <div ref={hookResult.hostRef}>Test Content</div>;
-    };
-
-    const { rerender } = render(<TestComponent />);
-
-    // Wait for initial style loading
-    await act(async () => {
-      await new Promise(resolve => setTimeout(resolve, 0));
-    });
-
-    // Trigger multiple rerenders
-    for (let i = 0; i < 3; i++) {
-      act(() => {
-        rerender(<TestComponent key={i} />);
-      });
-    }
-
-    // Wait for final style loading
-    await act(async () => {
-      await new Promise(resolve => setTimeout(resolve, 0));
-    });
-
-    expect(hookResult.styleStatus.completed).toBe(true);
-    expect(hookResult.styleStatus.loaded).toEqual(TEST_STYLESHEETS);
-  });
-
-  test('handles unmount during style loading', async () => {
-    let hookResult;
-    const TestComponent = () => {
-      hookResult = useExternalStyles(TEST_STYLESHEETS);
-      return <div ref={hookResult.hostRef}>Test Content</div>;
-    };
-
-    const { unmount } = render(<TestComponent />);
-
-    // Start style loading
-    act(() => {
-      hookResult.renderWithStyles(<div>Test</div>);
-    });
-
-    // Unmount during loading
-    act(() => {
-      unmount();
-    });
-
-    // Should be able to remount without errors
-    act(() => {
-      render(<TestComponent />);
-    });
-  });
-});
\ No newline at end of file

From 83b0cbd1065b12193f0119cac2bcdd5e3647d782 Mon Sep 17 00:00:00 2001
From: Wesley B <62723358+wesleyboar@users.noreply.github.com>
Date: Wed, 18 Jun 2025 19:52:52 -0500
Subject: [PATCH 10/79] refactor: WC-219 rename files

---
 ...flict.global.css => DataFilesForDPMWithCMSStyles.global.css} | 0
 ...esTestStyleConflict.jsx => DataFilesForDPMWithCMSStyles.jsx} | 2 +-
 2 files changed, 1 insertion(+), 1 deletion(-)
 rename client/src/components/DataFiles/{DataFilesTestStyleConflict.global.css => DataFilesForDPMWithCMSStyles.global.css} (100%)
 rename client/src/components/DataFiles/{DataFilesTestStyleConflict.jsx => DataFilesForDPMWithCMSStyles.jsx} (99%)

diff --git a/client/src/components/DataFiles/DataFilesTestStyleConflict.global.css b/client/src/components/DataFiles/DataFilesForDPMWithCMSStyles.global.css
similarity index 100%
rename from client/src/components/DataFiles/DataFilesTestStyleConflict.global.css
rename to client/src/components/DataFiles/DataFilesForDPMWithCMSStyles.global.css
diff --git a/client/src/components/DataFiles/DataFilesTestStyleConflict.jsx b/client/src/components/DataFiles/DataFilesForDPMWithCMSStyles.jsx
similarity index 99%
rename from client/src/components/DataFiles/DataFilesTestStyleConflict.jsx
rename to client/src/components/DataFiles/DataFilesForDPMWithCMSStyles.jsx
index 2c4b29fa14..4c33ece158 100644
--- a/client/src/components/DataFiles/DataFilesTestStyleConflict.jsx
+++ b/client/src/components/DataFiles/DataFilesForDPMWithCMSStyles.jsx
@@ -1,7 +1,7 @@
 import { React } from 'react';
 
 /* HACK: Temporary; see stylesheet for notes */
-import './DataFilesTestStyleConflict.global.css';
+import './DataFilesForDPMWithCMSStyles.global.css';
 
 const externalCSS = `
   @layer mimic-cms.base, mimic-cms.project;

From 097032b3bce3c29cedd65bd00dd3a5f28eed0749 Mon Sep 17 00:00:00 2001
From: Wesley B <62723358+wesleyboar@users.noreply.github.com>
Date: Fri, 20 Jun 2025 11:03:47 -0500
Subject: [PATCH 11/79] fix: WC-219 missing part of "rename files" commit

---
 client/src/components/DataFiles/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/components/DataFiles/index.js b/client/src/components/DataFiles/index.js
index 5373df8413..00b733dff6 100644
--- a/client/src/components/DataFiles/index.js
+++ b/client/src/components/DataFiles/index.js
@@ -1 +1 @@
-export { default } from './DataFilesTestStyleConflict';
+export { default } from './DataFilesForDPMWithCMSStyles';

From 0d8f5276ab2dc7eba628c5aaa9a87a88531af7c8 Mon Sep 17 00:00:00 2001
From: Wesley B <62723358+wesleyboar@users.noreply.github.com>
Date: Fri, 20 Jun 2025 11:04:17 -0500
Subject: [PATCH 12/79] chore: WC-219 delete outdated import

---
 client/src/hooks/datafiles/index.js | 6 ------
 1 file changed, 6 deletions(-)
 delete mode 100644 client/src/hooks/datafiles/index.js

diff --git a/client/src/hooks/datafiles/index.js b/client/src/hooks/datafiles/index.js
deleted file mode 100644
index 92a9494d73..0000000000
--- a/client/src/hooks/datafiles/index.js
+++ /dev/null
@@ -1,6 +0,0 @@
-export { default as useSystemDisplayName } from './useSystemDisplayName';
-export { default as useSelectedFiles } from './useSelectedFiles';
-export { default as useExternalStyles } from './useExternalStyles';
-export { default as useFileListing } from './useFileListing';
-export { default as useSystems } from './useSystems';
-export { default as useModal } from './useModal';

From 5acc2621df09fe2bacc1e5130d34b81aeb0d5dc7 Mon Sep 17 00:00:00 2001
From: Wesley B <62723358+wesleyboar@users.noreply.github.com>
Date: Fri, 20 Jun 2025 11:13:20 -0500
Subject: [PATCH 13/79] fix: WC-219 attrname vs attrName in JSX

---
 .../DataFilesForDPMWithCMSStyles.jsx          | 28 +++++++++----------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/client/src/components/DataFiles/DataFilesForDPMWithCMSStyles.jsx b/client/src/components/DataFiles/DataFilesForDPMWithCMSStyles.jsx
index 4c33ece158..ee72357a40 100644
--- a/client/src/components/DataFiles/DataFilesForDPMWithCMSStyles.jsx
+++ b/client/src/components/DataFiles/DataFilesForDPMWithCMSStyles.jsx
@@ -45,25 +45,25 @@ const breadcrumbCSS = `
 
 function DataGallery() {
   return (
-    <div id="mimic-cms" class="container">
+    <div id="mimic-cms" className="container">
       <style dangerouslySetInnerHTML={{ __html: breadcrumbCSS }} />
-      <nav class="s-breadcrumbs" id="cms-breadcrumbs">
-        <ol itemscope itemtype="https://schema.org/BreadcrumbList">
-          <li itemscope
-              itemprop="itemListElement"
-              itemtype="https://schema.org/ListItem"
+      <nav className="s-breadcrumbs" id="cms-breadcrumbs">
+        <ol itemScope itemType="https://schema.org/BreadcrumbList">
+          <li itemScope
+              itemProp="itemListElement"
+              itemType="https://schema.org/ListItem"
           >
-            <a href="/" itemprop="item">
-              <span itemprop="name">Index</span>
+            <a href="/" itemProp="item">
+              <span itemProp="name">Index</span>
             </a>
-            <meta itemprop="position" content="1" />
+            <meta itemProp="position" content="1" />
           </li>
-          <li itemscope
-              itemprop="itemListElement"
-              itemtype="https://schema.org/ListItem"
+          <li itemScope
+              itemProp="itemListElement"
+              itemType="https://schema.org/ListItem"
           >
-            <span itemprop="name">Browse Datasets</span>
-            <meta itemprop="position" content="2" />
+            <span itemProp="name">Browse Datasets</span>
+            <meta itemProp="position" content="2" />
           </li>
         </ol>
       </nav>

From 7743de98011587bdf06b922c9f9bffd34221aa2e Mon Sep 17 00:00:00 2001
From: Wesley B <62723358+wesleyboar@users.noreply.github.com>
Date: Fri, 20 Jun 2025 12:17:54 -0500
Subject: [PATCH 14/79] fix: WC-219 file accidentally deleted

---
 client/src/hooks/datafiles/index.js | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 client/src/hooks/datafiles/index.js

diff --git a/client/src/hooks/datafiles/index.js b/client/src/hooks/datafiles/index.js
new file mode 100644
index 0000000000..397a86b69c
--- /dev/null
+++ b/client/src/hooks/datafiles/index.js
@@ -0,0 +1,5 @@
+export { default as useSystemDisplayName } from './useSystemDisplayName';
+export { default as useSelectedFiles } from './useSelectedFiles';
+export { default as useFileListing } from './useFileListing';
+export { default as useSystems } from './useSystems';
+export { default as useModal } from './useModal';
\ No newline at end of file

From 14e0846bc87b738d75c3572c175e4c481619c6fd Mon Sep 17 00:00:00 2001
From: Wesley B <62723358+wesleyboar@users.noreply.github.com>
Date: Fri, 20 Jun 2025 12:18:21 -0500
Subject: [PATCH 15/79] refactor: WC-219 extract breadcrumbs

---
 .../DataFilesForDPMWithCMSStyles.jsx          | 36 ++-----------
 ...ataFilesForDPMWithCMSStylesBreadcrumbs.jsx | 52 +++++++++++++++++++
 2 files changed, 55 insertions(+), 33 deletions(-)
 create mode 100644 client/src/components/DataFiles/DataFilesForDPMWithCMSStylesBreadcrumbs.jsx

diff --git a/client/src/components/DataFiles/DataFilesForDPMWithCMSStyles.jsx b/client/src/components/DataFiles/DataFilesForDPMWithCMSStyles.jsx
index ee72357a40..6fdb65ca1d 100644
--- a/client/src/components/DataFiles/DataFilesForDPMWithCMSStyles.jsx
+++ b/client/src/components/DataFiles/DataFilesForDPMWithCMSStyles.jsx
@@ -1,5 +1,7 @@
 import { React } from 'react';
 
+import DataFilesForDPMWithCMSStylesBreadcrumbs from './DataFilesForDPMWithCMSStylesBreadcrumbs';
+
 /* HACK: Temporary; see stylesheet for notes */
 import './DataFilesForDPMWithCMSStyles.global.css';
 
@@ -36,42 +38,10 @@ const revertCSS = `
   }
 `;
 
-const breadcrumbCSS = `
-  .s-breadcrumbs a:not([href]) {
-    opacity: 1;
-    color: unset;
-  }
-`;
-
 function DataGallery() {
   return (
     <div id="mimic-cms" className="container">
-      <style dangerouslySetInnerHTML={{ __html: breadcrumbCSS }} />
-      <nav className="s-breadcrumbs" id="cms-breadcrumbs">
-        <ol itemScope itemType="https://schema.org/BreadcrumbList">
-          <li itemScope
-              itemProp="itemListElement"
-              itemType="https://schema.org/ListItem"
-          >
-            <a href="/" itemProp="item">
-              <span itemProp="name">Index</span>
-            </a>
-            <meta itemProp="position" content="1" />
-          </li>
-          <li itemScope
-              itemProp="itemListElement"
-              itemType="https://schema.org/ListItem"
-          >
-            <span itemProp="name">Browse Datasets</span>
-            <meta itemProp="position" content="2" />
-          </li>
-        </ol>
-      </nav>
-      <script>
-        const crumbs = document.getElementById('cms-breadcrumbs');
-        const secondLink = crumbs && crumbs.querySelector('li:nth-of-type(2) > a');
-        if (secondLink) secondLink.removeAttribute('href');
-      </script>
+      <DataFilesForDPMWithCMSStylesBreadcrumbs />
       <style dangerouslySetInnerHTML={{ __html: externalCSS }} />
       <style dangerouslySetInnerHTML={{ __html: revertCSS }} />
       <div className="o-section">
diff --git a/client/src/components/DataFiles/DataFilesForDPMWithCMSStylesBreadcrumbs.jsx b/client/src/components/DataFiles/DataFilesForDPMWithCMSStylesBreadcrumbs.jsx
new file mode 100644
index 0000000000..923552af16
--- /dev/null
+++ b/client/src/components/DataFiles/DataFilesForDPMWithCMSStylesBreadcrumbs.jsx
@@ -0,0 +1,52 @@
+import React from 'react';
+
+/**
+ * Display CMS-styled breadcrumbs for the Digital Rocks Portal
+ * XXX: This is static content specific to the Digital Rocks Portal interface.
+ * @see https://pprd.digitalrocks.tacc.utexas.edu/datasets/
+ * @see https://github.com/TACC/Core-CMS/blob/v4.30.0/taccsite_cms/templates/nav_cms_breadcrumbs.html
+ * @returns {JSX.Element} - breadcrumbs
+ */
+const DataFilesForDPMWithCMSStylesBreadcrumbs = () => {
+  const breadcrumbCSS = `
+    .s-breadcrumbs a:not([href]) {
+      opacity: 1;
+      color: unset;
+    }
+  `;
+
+  React.useEffect(() => {
+    // Disable href for the current page breadcrumb
+    const crumbs = document.getElementById('cms-breadcrumbs');
+    const secondLink = crumbs && crumbs.querySelector('li:nth-of-type(2) > a');
+    if (secondLink) secondLink.removeAttribute('href');
+  }, []);
+
+  return (
+    <>
+      <style dangerouslySetInnerHTML={{ __html: breadcrumbCSS }} />
+      <nav className="s-breadcrumbs" id="cms-breadcrumbs">
+        <ol itemScope itemType="https://schema.org/BreadcrumbList">
+          <li itemScope
+              itemProp="itemListElement"
+              itemType="https://schema.org/ListItem"
+          >
+            <a href="/" itemProp="item">
+              <span itemProp="name">Index</span>
+            </a>
+            <meta itemProp="position" content="1" />
+          </li>
+          <li itemScope
+              itemProp="itemListElement"
+              itemType="https://schema.org/ListItem"
+          >
+            <span itemProp="name">Browse Datasets</span>
+            <meta itemProp="position" content="2" />
+          </li>
+        </ol>
+      </nav>
+    </>
+  );
+};
+
+export default DataFilesForDPMWithCMSStylesBreadcrumbs;

From 149a2eaa18dbf8523fe4b5b33fe1d53dc8dd9f9e Mon Sep 17 00:00:00 2001
From: Wesley B <62723358+wesleyboar@users.noreply.github.com>
Date: Fri, 20 Jun 2025 17:04:32 -0500
Subject: [PATCH 16/79] fix: header styles overwritten by mimic-cms styles

---
 server/portal/templates/base.html | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/server/portal/templates/base.html b/server/portal/templates/base.html
index cd737fc81e..674b8c36f1 100644
--- a/server/portal/templates/base.html
+++ b/server/portal/templates/base.html
@@ -17,10 +17,10 @@
     <base href="/">
     {% block head_extra %}{% endblock %}
     <style>
-      @layer portal, mimic-cms;
+      @layer portal, mimic-cms, header;
       @import url("https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css") layer(portal);
-      @import url("/static/site_cms/css/build/core-styles.theme.default.css") layer(portal);
-      @import url("/static/site_cms/css/build/core-styles.header.css") layer(portal);
+      @import url("/static/site_cms/css/build/core-styles.theme.default.css") layer(header);
+      @import url("/static/site_cms/css/build/core-styles.header.css") layer(header);
     </style>
     {% if settings.PORTAL_CSS_FILENAMES|length %}
     <!-- Project CSS -->

From 4d035eae97afed273d229e659130f2e5c9ecb4be Mon Sep 17 00:00:00 2001
From: Wesley B <62723358+wesleyboar@users.noreply.github.com>
Date: Fri, 20 Jun 2025 17:07:42 -0500
Subject: [PATCH 17/79] fix: basic text color too dark

cuz it is using portal basic text color instead of cms basic text color
---
 .../components/DataFiles/DataFilesForDPMWithCMSStyles.jsx    | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/client/src/components/DataFiles/DataFilesForDPMWithCMSStyles.jsx b/client/src/components/DataFiles/DataFilesForDPMWithCMSStyles.jsx
index 6fdb65ca1d..81ebcd5a03 100644
--- a/client/src/components/DataFiles/DataFilesForDPMWithCMSStyles.jsx
+++ b/client/src/components/DataFiles/DataFilesForDPMWithCMSStyles.jsx
@@ -17,6 +17,11 @@ const externalCSS = `
 `;
 
 const revertCSS = `
+  /* To restore CMS body color */
+  .workbench-wrapper {
+    color: var(--global-color-primary--x-dark);
+  }
+
   /* To restore relevant behavior of Bootstrap grid */
   .workbench-content .container {
     /* To use padding from Bootstrap 4 (which CMS still uses) */

From 54c6376d04f7c61b5f4ded1dcd28efc1611f00fa Mon Sep 17 00:00:00 2001
From: Wesley B <62723358+wesleyboar@users.noreply.github.com>
Date: Fri, 20 Jun 2025 18:02:47 -0500
Subject: [PATCH 18/79] feat!: footer from CMS

TO DO:
- Make footer conditional.
- Fix footer position.

BREAKING CHANGE: Footer always shown. Footer position is wrong.
---
 .../DataFiles/DataFilesForDPMWithCMSStyles.module.css  |  1 +
 server/conf/docker/docker-compose-dev.all.debug.yml    |  2 +-
 server/portal/templates/includes/footer.html           | 10 +++++++++-
 3 files changed, 11 insertions(+), 2 deletions(-)
 create mode 100644 client/src/components/DataFiles/DataFilesForDPMWithCMSStyles.module.css

diff --git a/client/src/components/DataFiles/DataFilesForDPMWithCMSStyles.module.css b/client/src/components/DataFiles/DataFilesForDPMWithCMSStyles.module.css
new file mode 100644
index 0000000000..d7c678f672
--- /dev/null
+++ b/client/src/components/DataFiles/DataFilesForDPMWithCMSStyles.module.css
@@ -0,0 +1 @@
+@import ('@tacc/core-styles/dist/trumps/s-footer.css') layer(mimic-cms.project);
diff --git a/server/conf/docker/docker-compose-dev.all.debug.yml b/server/conf/docker/docker-compose-dev.all.debug.yml
index fc239ce4ac..2f7c8339e1 100644
--- a/server/conf/docker/docker-compose-dev.all.debug.yml
+++ b/server/conf/docker/docker-compose-dev.all.debug.yml
@@ -3,7 +3,7 @@
 ---
 services:
   cms:
-    image: taccwma/core-cms:latest
+    image: taccwma/core-cms:feat-WC-274-serve-footer-markup # e46d45d5
     volumes:
       - ../cms/secrets.py:/code/taccsite_cms/secrets.py
       - ../cms/uwsgi/uwsgi.ini:/code/uwsgi.ini
diff --git a/server/portal/templates/includes/footer.html b/server/portal/templates/includes/footer.html
index 479c01109c..30f3107eb2 100644
--- a/server/portal/templates/includes/footer.html
+++ b/server/portal/templates/includes/footer.html
@@ -1,3 +1,11 @@
 {% load static %}
-<footer class="container-fluid">
+<footer class="container-fluid" id="cms-footer">
 </footer>
+
+<script type="module">
+    import { replaceFromURL } from '/static/site_cms/js/modules/importHTML.js';
+
+    const placeholder = document.getElementById('cms-footer');
+
+    replaceFromURL('/cms/markup/footer', placeholder);
+</script>

From bf6515b73ecc9122b13c4e42445da93838f73ffd Mon Sep 17 00:00:00 2001
From: Wesley B <62723358+wesleyboar@users.noreply.github.com>
Date: Fri, 20 Jun 2025 18:14:06 -0500
Subject: [PATCH 19/79] refactor: cms-footer ID changed to just footer

---
 server/portal/templates/includes/footer.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/server/portal/templates/includes/footer.html b/server/portal/templates/includes/footer.html
index 30f3107eb2..bd2a0cd76f 100644
--- a/server/portal/templates/includes/footer.html
+++ b/server/portal/templates/includes/footer.html
@@ -1,11 +1,11 @@
 {% load static %}
-<footer class="container-fluid" id="cms-footer">
+<footer class="container-fluid" id="footer">
 </footer>
 
 <script type="module">
     import { replaceFromURL } from '/static/site_cms/js/modules/importHTML.js';
 
-    const placeholder = document.getElementById('cms-footer');
+    const placeholder = document.getElementById('footer');
 
     replaceFromURL('/cms/markup/footer', placeholder);
 </script>

From 24271c34fa15888c261c1626920c26f40acdb561 Mon Sep 17 00:00:00 2001
From: Wesley B <62723358+wesleyboar@users.noreply.github.com>
Date: Fri, 20 Jun 2025 18:15:00 -0500
Subject: [PATCH 20/79] chore: remove unused class

---
 server/portal/templates/includes/footer.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/server/portal/templates/includes/footer.html b/server/portal/templates/includes/footer.html
index bd2a0cd76f..514a5ccebe 100644
--- a/server/portal/templates/includes/footer.html
+++ b/server/portal/templates/includes/footer.html
@@ -1,5 +1,5 @@
 {% load static %}
-<footer class="container-fluid" id="footer">
+<footer id="footer">
 </footer>
 
 <script type="module">

From 5f5050a01ccb3b0fb8c9c3d0eb2cd03cc0a5576d Mon Sep 17 00:00:00 2001
From: Wesley B <62723358+wesleyboar@users.noreply.github.com>
Date: Fri, 20 Jun 2025 18:54:09 -0500
Subject: [PATCH 21/79] feat: only load CMS footer when necessary

---
 .../DataFiles/DataFilesForDPMWithCMSStyles.jsx | 18 +++++++++++++++++-
 server/portal/templates/includes/footer.html   | 13 ++++++++-----
 2 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/client/src/components/DataFiles/DataFilesForDPMWithCMSStyles.jsx b/client/src/components/DataFiles/DataFilesForDPMWithCMSStyles.jsx
index 81ebcd5a03..2f15d479da 100644
--- a/client/src/components/DataFiles/DataFilesForDPMWithCMSStyles.jsx
+++ b/client/src/components/DataFiles/DataFilesForDPMWithCMSStyles.jsx
@@ -1,4 +1,4 @@
-import { React } from 'react';
+import { React, useEffect } from 'react';
 
 import DataFilesForDPMWithCMSStylesBreadcrumbs from './DataFilesForDPMWithCMSStylesBreadcrumbs';
 
@@ -44,6 +44,22 @@ const revertCSS = `
 `;
 
 function DataGallery() {
+  useEffect(() => {
+    // When component mounts, activate CMS styles and footer
+    window.dispatchEvent(new CustomEvent('cms-styles-activated', { 
+      detail: { 
+        source: 'DataFilesForDPMWithCMSStyles',
+        includeFooter: true,
+        includeStyles: true
+      } 
+    }));
+
+    // When component unmounts, deactivate CMS styles
+    return () => {
+      window.dispatchEvent(new CustomEvent('cms-styles-deactivated'));
+    };
+  }, []);
+
   return (
     <div id="mimic-cms" className="container">
       <DataFilesForDPMWithCMSStylesBreadcrumbs />
diff --git a/server/portal/templates/includes/footer.html b/server/portal/templates/includes/footer.html
index 514a5ccebe..db28289b78 100644
--- a/server/portal/templates/includes/footer.html
+++ b/server/portal/templates/includes/footer.html
@@ -3,9 +3,12 @@
 </footer>
 
 <script type="module">
-    import { replaceFromURL } from '/static/site_cms/js/modules/importHTML.js';
-
-    const placeholder = document.getElementById('footer');
-
-    replaceFromURL('/cms/markup/footer', placeholder);
+    // Listen for custom event for CMS styles activation
+    window.addEventListener('cms-styles-activated', async (event) => {
+        if (event.detail && event.detail.includeFooter !== false) {
+            const { replaceFromURL } = await import('/static/site_cms/js/modules/importHTML.js');
+            const placeholder = document.getElementById('footer');
+            replaceFromURL('/cms/markup/footer', placeholder);
+        }
+    });
 </script>

From e3d0b2d2d308bf8e0f6a90e3ea3da0674669b0a9 Mon Sep 17 00:00:00 2001
From: Wesley B <62723358+wesleyboar@users.noreply.github.com>
Date: Mon, 23 Jun 2025 11:02:57 -0500
Subject: [PATCH 22/79] =?UTF-8?q?docs:=20"make=20CMS=20styles=20conditiona?=
 =?UTF-8?q?l=20like=20=E2=80=A6=20footer"?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/cms-styles-centralization-prompt.md | 30 ++++++++++++++++++++++++
 1 file changed, 30 insertions(+)
 create mode 100644 docs/cms-styles-centralization-prompt.md

diff --git a/docs/cms-styles-centralization-prompt.md b/docs/cms-styles-centralization-prompt.md
new file mode 100644
index 0000000000..441810b678
--- /dev/null
+++ b/docs/cms-styles-centralization-prompt.md
@@ -0,0 +1,30 @@
+# Prompt for Next Session: Centralizing CMS Styles in Core-Portal Base Template
+
+I need to centralize the CMS styles in our Core-Portal application by moving them from individual React components to the base.html template. Currently, the `DataFilesForDPMWithCMSStyles.jsx` component injects styles directly using inline `<style>` tags, but we've already implemented a custom event system (`cms-styles-activated` and `cms-styles-deactivated`) to conditionally load the CMS footer.
+
+## Current Implementation:
+- React components dispatch `cms-styles-activated` events when mounted
+- The footer template listens for this event to load CMS footer content
+- CSS is still injected directly by components using inline `<style>` tags
+
+## What I Need:
+1. Move the following CSS content from `DataFilesForDPMWithCMSStyles.jsx` to be dynamically loaded in base.html:
+   - `externalCSS` which includes layer definitions and imports for CMS styles
+   - `revertCSS` which includes fixes to align Portal styling with CMS
+
+2. Add JavaScript to base.html that:
+   - Listens for the `cms-styles-activated` event
+   - Dynamically injects CSS when the event is triggered with `includeStyles: true`
+   - Removes the CSS when `cms-styles-deactivated` is triggered
+   - Avoids duplicate style injection if triggered multiple times
+
+3. Update the React component to:
+   - Remove inline `<style>` tags
+   - Keep dispatching the custom events
+   - Pass the appropriate parameters (`includeStyles: true`) in the event
+
+## Code References:
+- The existing styles are in `externalCSS` and `revertCSS` variables in `DataFilesForDPMWithCMSStyles.jsx`
+- The custom event format is `cms-styles-activated` with detail containing `source`, `includeFooter`, and `includeStyles` parameters
+
+Please help me implement this approach to make our application more maintainable and performant while preserving the current functionality.

From 8dff220e2d226f71f04a7713931ba53dd01722d7 Mon Sep 17 00:00:00 2001
From: Wesley B <62723358+wesleyboar@users.noreply.github.com>
Date: Mon, 23 Jun 2025 18:07:40 -0500
Subject: [PATCH 23/79] =?UTF-8?q?feat:=20"make=20CMS=20styles=20conditiona?=
 =?UTF-8?q?l=20like=20=E2=80=A6=20footer"?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

TODO:
- reduce redundant code
---
 .../DataFilesForDPMWithCMSStyles.global.css   |   4 -
 .../DataFilesForDPMWithCMSStyles.jsx          |  55 +--------
 .../DataFilesForDPMWithCMSStyles.module.css   |   1 -
 server/portal/templates/base.html             |   1 +
 .../portal/templates/includes/cms_styles.html | 109 ++++++++++++++++++
 server/portal/templates/includes/footer.html  |  11 --
 6 files changed, 112 insertions(+), 69 deletions(-)
 delete mode 100644 client/src/components/DataFiles/DataFilesForDPMWithCMSStyles.global.css
 delete mode 100644 client/src/components/DataFiles/DataFilesForDPMWithCMSStyles.module.css
 create mode 100644 server/portal/templates/includes/cms_styles.html

diff --git a/client/src/components/DataFiles/DataFilesForDPMWithCMSStyles.global.css b/client/src/components/DataFiles/DataFilesForDPMWithCMSStyles.global.css
deleted file mode 100644
index f15f598417..0000000000
--- a/client/src/components/DataFiles/DataFilesForDPMWithCMSStyles.global.css
+++ /dev/null
@@ -1,4 +0,0 @@
-/* HACK: Should use routes to not render sidebar */
-#react-root:has(#mimic-cms) .nav-sidebar {
-  display: none;
-}
diff --git a/client/src/components/DataFiles/DataFilesForDPMWithCMSStyles.jsx b/client/src/components/DataFiles/DataFilesForDPMWithCMSStyles.jsx
index 2f15d479da..03a143de9d 100644
--- a/client/src/components/DataFiles/DataFilesForDPMWithCMSStyles.jsx
+++ b/client/src/components/DataFiles/DataFilesForDPMWithCMSStyles.jsx
@@ -2,59 +2,10 @@ import { React, useEffect } from 'react';
 
 import DataFilesForDPMWithCMSStylesBreadcrumbs from './DataFilesForDPMWithCMSStylesBreadcrumbs';
 
-/* HACK: Temporary; see stylesheet for notes */
-import './DataFilesForDPMWithCMSStyles.global.css';
-
-const externalCSS = `
-  @layer mimic-cms.base, mimic-cms.project;
-
-  @import url(/static/site_cms/css/build/core-styles.base.css) layer(mimic-cms.base);
-  @import url(/static/site_cms/css/build/core-styles.cms.css) layer(mimic-cms.base);
-  @import url(/static/site_cms/css/build/core-cms.css) layer(mimic-cms.project);
-
-  @import url(https://cdn.jsdelivr.net/gh/TACC/Core-CMS-Custom@5717c8d/digitalrocks_assets/css/cms.css) layer(mimic-cms);
-  @import url(https://cdn.jsdelivr.net/gh/TACC/Core-CMS-Custom@5717c8d/digitalrocks_assets/css/for-core-styles.css) layer(mimic-cms);
-`;
-
-const revertCSS = `
-  /* To restore CMS body color */
-  .workbench-wrapper {
-    color: var(--global-color-primary--x-dark);
-  }
-
-  /* To restore relevant behavior of Bootstrap grid */
-  .workbench-content .container {
-    /* To use padding from Bootstrap 4 (which CMS still uses) */
-    --bs-gutter-x: 15px;
-
-    /* To undo Workbench.scss */
-    margin-left: revert-layer;
-    max-width: revert-layer;
-  }
-
-  /* To undo generic Portal styles that do not match CMS */
-  body {
-    -webkit-font-smoothing: revert;
-  }
-
-  /* To adjust Portal styles that mimic old Core Styles */
-  .c-button {
-    --max-width: auto;
-  }
-`;
-
 function DataGallery() {
   useEffect(() => {
-    // When component mounts, activate CMS styles and footer
-    window.dispatchEvent(new CustomEvent('cms-styles-activated', { 
-      detail: { 
-        source: 'DataFilesForDPMWithCMSStyles',
-        includeFooter: true,
-        includeStyles: true
-      } 
-    }));
-
-    // When component unmounts, deactivate CMS styles
+    // To (de)activate CMS styles on (un)mount
+    window.dispatchEvent(new CustomEvent('cms-styles-activated'));
     return () => {
       window.dispatchEvent(new CustomEvent('cms-styles-deactivated'));
     };
@@ -63,8 +14,6 @@ function DataGallery() {
   return (
     <div id="mimic-cms" className="container">
       <DataFilesForDPMWithCMSStylesBreadcrumbs />
-      <style dangerouslySetInnerHTML={{ __html: externalCSS }} />
-      <style dangerouslySetInnerHTML={{ __html: revertCSS }} />
       <div className="o-section">
         <h1>Browse Datasets</h1>
         <div className="c-card-list">
diff --git a/client/src/components/DataFiles/DataFilesForDPMWithCMSStyles.module.css b/client/src/components/DataFiles/DataFilesForDPMWithCMSStyles.module.css
deleted file mode 100644
index d7c678f672..0000000000
--- a/client/src/components/DataFiles/DataFilesForDPMWithCMSStyles.module.css
+++ /dev/null
@@ -1 +0,0 @@
-@import ('@tacc/core-styles/dist/trumps/s-footer.css') layer(mimic-cms.project);
diff --git a/server/portal/templates/base.html b/server/portal/templates/base.html
index 674b8c36f1..2c4c1d1619 100644
--- a/server/portal/templates/base.html
+++ b/server/portal/templates/base.html
@@ -28,6 +28,7 @@
       <link rel="stylesheet" href="{{ stylesheet }}">
       {% endfor %}
     {% endif %}
+    {% include 'includes/cms_styles.html' %}
 
     {% block styles %}{% endblock %}
   </head>
diff --git a/server/portal/templates/includes/cms_styles.html b/server/portal/templates/includes/cms_styles.html
new file mode 100644
index 0000000000..6f4bc2629e
--- /dev/null
+++ b/server/portal/templates/includes/cms_styles.html
@@ -0,0 +1,109 @@
+<!-- To (un)load CMS styles on demand -->
+<script>
+  (function() {
+    const externalCSS = `
+      @layer mimic-cms.base, mimic-cms.project;
+
+      @import url(/static/site_cms/css/build/core-styles.base.css) layer(mimic-cms.base);
+      @import url(/static/site_cms/css/build/core-styles.cms.css) layer(mimic-cms.base);
+      @import url(/static/site_cms/css/build/core-cms.css) layer(mimic-cms.project);
+      @import ('@tacc/core-styles/dist/trumps/s-footer.css') layer(mimic-cms.project);
+
+      @import url(https://cdn.jsdelivr.net/gh/TACC/Core-CMS-Custom@5717c8d/digitalrocks_assets/css/cms.css) layer(mimic-cms);
+      @import url(https://cdn.jsdelivr.net/gh/TACC/Core-CMS-Custom@5717c8d/digitalrocks_assets/css/for-core-styles.css) layer(mimic-cms);
+    `;
+    const revertCSS = `
+      /* To restore CMS body color */
+      .workbench-wrapper {
+        color: var(--global-color-primary--x-dark);
+      }
+
+      /* To restore relevant behavior of Bootstrap grid */
+      .workbench-content .container {
+        /* To use padding from Bootstrap 4 (which CMS still uses) */
+        --bs-gutter-x: 15px;
+
+        /* To undo Workbench.scss */
+        margin-left: revert-layer;
+        max-width: revert-layer;
+      }
+
+      /* To undo generic Portal styles that do not match CMS */
+      body {
+        -webkit-font-smoothing: revert;
+      }
+
+      /* To adjust Portal styles that mimic old Core Styles */
+      .c-button {
+        --max-width: auto;
+      }
+    `;
+    const temporaryCSS = `
+        /* HACK: Should use routes to not render sidebar */
+        #react-root:has(#mimic-cms) .nav-sidebar {
+            display: none;
+        }
+    `;
+
+    let externalStyleEl = null;
+    let revertStyleEl = null;
+    let temporaryStyleEl = null;
+    let footerEl = null;
+    let footerOriginalContent = null;
+
+    window.addEventListener('cms-styles-activated', async (event) => {
+      console.info(event.name);
+
+      if (!externalStyleEl) {
+        externalStyleEl = document.createElement('style');
+        externalStyleEl.setAttribute('id', 'cms-external-styles');
+        externalStyleEl.textContent = externalCSS;
+        document.head.appendChild(externalStyleEl);
+      }
+      if (!revertStyleEl) {
+        revertStyleEl = document.createElement('style');
+        revertStyleEl.setAttribute('id', 'cms-revert-styles');
+        revertStyleEl.textContent = revertCSS;
+        document.head.appendChild(revertStyleEl);
+      }
+      if (!temporaryStyleEl) {
+        temporaryStyleEl = document.createElement('style');
+        temporaryStyleEl.setAttribute('id', 'cms-temporary-styles');
+        temporaryStyleEl.textContent = temporaryCSS;
+        document.head.appendChild(temporaryStyleEl);
+      }
+
+      footerEl = document.getElementById('footer');
+      if (footerEl) {
+        if (footerEl.childNodes.length) {
+          footerOriginalContent = footerEl.innerHTML;
+        }
+
+        import('/static/site_cms/js/modules/importHTML.js').then(module => {
+          const { replaceFromURL } = module;
+          return replaceFromURL('/cms/markup/footer', footerEl);
+        });
+      }
+    });
+    window.addEventListener('cms-styles-deactivated', (event) => {
+      console.info(event.name);
+
+      if (externalStyleEl) {
+        document.head.removeChild(externalStyleEl);
+        externalStyleEl = null;
+      }
+      if (revertStyleEl) {
+        document.head.removeChild(revertStyleEl);
+        revertStyleEl = null;
+      }
+      if (temporaryStyleEl) {
+        document.head.removeChild(temporaryStyleEl);
+        temporaryStyleEl = null;
+      }
+
+      if (footerEl && footerOriginalContent) {
+        footerEl.innerHTML = footerOriginalContent;
+      }
+    });
+  })();
+</script>
diff --git a/server/portal/templates/includes/footer.html b/server/portal/templates/includes/footer.html
index db28289b78..37c5c09653 100644
--- a/server/portal/templates/includes/footer.html
+++ b/server/portal/templates/includes/footer.html
@@ -1,14 +1,3 @@
 {% load static %}
 <footer id="footer">
 </footer>
-
-<script type="module">
-    // Listen for custom event for CMS styles activation
-    window.addEventListener('cms-styles-activated', async (event) => {
-        if (event.detail && event.detail.includeFooter !== false) {
-            const { replaceFromURL } = await import('/static/site_cms/js/modules/importHTML.js');
-            const placeholder = document.getElementById('footer');
-            replaceFromURL('/cms/markup/footer', placeholder);
-        }
-    });
-</script>

From 8f109e26feec88103319a24c57c311c73fc25f62 Mon Sep 17 00:00:00 2001
From: Wesley B <62723358+wesleyboar@users.noreply.github.com>
Date: Mon, 23 Jun 2025 18:08:37 -0500
Subject: [PATCH 24/79] =?UTF-8?q?docs:=20delete=20"make=20CMS=20styles=20c?=
 =?UTF-8?q?onditional=20=E2=80=A6"?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/cms-styles-centralization-prompt.md | 30 ------------------------
 1 file changed, 30 deletions(-)
 delete mode 100644 docs/cms-styles-centralization-prompt.md

diff --git a/docs/cms-styles-centralization-prompt.md b/docs/cms-styles-centralization-prompt.md
deleted file mode 100644
index 441810b678..0000000000
--- a/docs/cms-styles-centralization-prompt.md
+++ /dev/null
@@ -1,30 +0,0 @@
-# Prompt for Next Session: Centralizing CMS Styles in Core-Portal Base Template
-
-I need to centralize the CMS styles in our Core-Portal application by moving them from individual React components to the base.html template. Currently, the `DataFilesForDPMWithCMSStyles.jsx` component injects styles directly using inline `<style>` tags, but we've already implemented a custom event system (`cms-styles-activated` and `cms-styles-deactivated`) to conditionally load the CMS footer.
-
-## Current Implementation:
-- React components dispatch `cms-styles-activated` events when mounted
-- The footer template listens for this event to load CMS footer content
-- CSS is still injected directly by components using inline `<style>` tags
-
-## What I Need:
-1. Move the following CSS content from `DataFilesForDPMWithCMSStyles.jsx` to be dynamically loaded in base.html:
-   - `externalCSS` which includes layer definitions and imports for CMS styles
-   - `revertCSS` which includes fixes to align Portal styling with CMS
-
-2. Add JavaScript to base.html that:
-   - Listens for the `cms-styles-activated` event
-   - Dynamically injects CSS when the event is triggered with `includeStyles: true`
-   - Removes the CSS when `cms-styles-deactivated` is triggered
-   - Avoids duplicate style injection if triggered multiple times
-
-3. Update the React component to:
-   - Remove inline `<style>` tags
-   - Keep dispatching the custom events
-   - Pass the appropriate parameters (`includeStyles: true`) in the event
-
-## Code References:
-- The existing styles are in `externalCSS` and `revertCSS` variables in `DataFilesForDPMWithCMSStyles.jsx`
-- The custom event format is `cms-styles-activated` with detail containing `source`, `includeFooter`, and `includeStyles` parameters
-
-Please help me implement this approach to make our application more maintainable and performant while preserving the current functionality.

From f696000f82ad647c38e5e245af03e5d4966ef708 Mon Sep 17 00:00:00 2001
From: Wesley B <62723358+wesleyboar@users.noreply.github.com>
Date: Mon, 23 Jun 2025 18:52:56 -0500
Subject: [PATCH 25/79] fix: move DataFiles CSS back to DataFiles

---
 .../DataFiles/DataFilesForDPMWithCMSStyles.global.css           | 2 ++
 .../src/components/DataFiles/DataFilesForDPMWithCMSStyles.jsx   | 2 ++
 2 files changed, 4 insertions(+)
 create mode 100644 client/src/components/DataFiles/DataFilesForDPMWithCMSStyles.global.css

diff --git a/client/src/components/DataFiles/DataFilesForDPMWithCMSStyles.global.css b/client/src/components/DataFiles/DataFilesForDPMWithCMSStyles.global.css
new file mode 100644
index 0000000000..0d9df5d7e9
--- /dev/null
+++ b/client/src/components/DataFiles/DataFilesForDPMWithCMSStyles.global.css
@@ -0,0 +1,2 @@
+@import url(https://cdn.jsdelivr.net/gh/TACC/Core-CMS-Custom@5717c8d/digitalrocks_assets/css/cms.css) layer(mimic-cms);
+@import url(https://cdn.jsdelivr.net/gh/TACC/Core-CMS-Custom@5717c8d/digitalrocks_assets/css/for-core-styles.css) layer(mimic-cms);
diff --git a/client/src/components/DataFiles/DataFilesForDPMWithCMSStyles.jsx b/client/src/components/DataFiles/DataFilesForDPMWithCMSStyles.jsx
index 03a143de9d..41ea253f47 100644
--- a/client/src/components/DataFiles/DataFilesForDPMWithCMSStyles.jsx
+++ b/client/src/components/DataFiles/DataFilesForDPMWithCMSStyles.jsx
@@ -2,6 +2,8 @@ import { React, useEffect } from 'react';
 
 import DataFilesForDPMWithCMSStylesBreadcrumbs from './DataFilesForDPMWithCMSStylesBreadcrumbs';
 
+import './DataFilesForDPMWithCMSStyles.global.css';
+
 function DataGallery() {
   useEffect(() => {
     // To (de)activate CMS styles on (un)mount

From 74612f2f2ca1b9ae0135812a4bf193536ddc1ec8 Mon Sep 17 00:00:00 2001
From: Wesley B <62723358+wesleyboar@users.noreply.github.com>
Date: Mon, 23 Jun 2025 18:53:09 -0500
Subject: [PATCH 26/79] refactor: simplify cms_styles.html

---
 .../portal/templates/includes/cms_styles.html | 164 ++++++------------
 1 file changed, 56 insertions(+), 108 deletions(-)

diff --git a/server/portal/templates/includes/cms_styles.html b/server/portal/templates/includes/cms_styles.html
index 6f4bc2629e..55518dc38a 100644
--- a/server/portal/templates/includes/cms_styles.html
+++ b/server/portal/templates/includes/cms_styles.html
@@ -1,109 +1,57 @@
-<!-- To (un)load CMS styles on demand -->
-<script>
-  (function() {
-    const externalCSS = `
-      @layer mimic-cms.base, mimic-cms.project;
-
-      @import url(/static/site_cms/css/build/core-styles.base.css) layer(mimic-cms.base);
-      @import url(/static/site_cms/css/build/core-styles.cms.css) layer(mimic-cms.base);
-      @import url(/static/site_cms/css/build/core-cms.css) layer(mimic-cms.project);
-      @import ('@tacc/core-styles/dist/trumps/s-footer.css') layer(mimic-cms.project);
-
-      @import url(https://cdn.jsdelivr.net/gh/TACC/Core-CMS-Custom@5717c8d/digitalrocks_assets/css/cms.css) layer(mimic-cms);
-      @import url(https://cdn.jsdelivr.net/gh/TACC/Core-CMS-Custom@5717c8d/digitalrocks_assets/css/for-core-styles.css) layer(mimic-cms);
-    `;
-    const revertCSS = `
-      /* To restore CMS body color */
-      .workbench-wrapper {
-        color: var(--global-color-primary--x-dark);
-      }
-
-      /* To restore relevant behavior of Bootstrap grid */
-      .workbench-content .container {
-        /* To use padding from Bootstrap 4 (which CMS still uses) */
-        --bs-gutter-x: 15px;
-
-        /* To undo Workbench.scss */
-        margin-left: revert-layer;
-        max-width: revert-layer;
-      }
-
-      /* To undo generic Portal styles that do not match CMS */
-      body {
-        -webkit-font-smoothing: revert;
-      }
-
-      /* To adjust Portal styles that mimic old Core Styles */
-      .c-button {
-        --max-width: auto;
-      }
-    `;
-    const temporaryCSS = `
-        /* HACK: Should use routes to not render sidebar */
-        #react-root:has(#mimic-cms) .nav-sidebar {
-            display: none;
-        }
-    `;
-
-    let externalStyleEl = null;
-    let revertStyleEl = null;
-    let temporaryStyleEl = null;
-    let footerEl = null;
-    let footerOriginalContent = null;
-
-    window.addEventListener('cms-styles-activated', async (event) => {
-      console.info(event.name);
-
-      if (!externalStyleEl) {
-        externalStyleEl = document.createElement('style');
-        externalStyleEl.setAttribute('id', 'cms-external-styles');
-        externalStyleEl.textContent = externalCSS;
-        document.head.appendChild(externalStyleEl);
-      }
-      if (!revertStyleEl) {
-        revertStyleEl = document.createElement('style');
-        revertStyleEl.setAttribute('id', 'cms-revert-styles');
-        revertStyleEl.textContent = revertCSS;
-        document.head.appendChild(revertStyleEl);
-      }
-      if (!temporaryStyleEl) {
-        temporaryStyleEl = document.createElement('style');
-        temporaryStyleEl.setAttribute('id', 'cms-temporary-styles');
-        temporaryStyleEl.textContent = temporaryCSS;
-        document.head.appendChild(temporaryStyleEl);
-      }
-
-      footerEl = document.getElementById('footer');
-      if (footerEl) {
-        if (footerEl.childNodes.length) {
-          footerOriginalContent = footerEl.innerHTML;
-        }
-
-        import('/static/site_cms/js/modules/importHTML.js').then(module => {
-          const { replaceFromURL } = module;
-          return replaceFromURL('/cms/markup/footer', footerEl);
-        });
-      }
-    });
-    window.addEventListener('cms-styles-deactivated', (event) => {
-      console.info(event.name);
-
-      if (externalStyleEl) {
-        document.head.removeChild(externalStyleEl);
-        externalStyleEl = null;
-      }
-      if (revertStyleEl) {
-        document.head.removeChild(revertStyleEl);
-        revertStyleEl = null;
-      }
-      if (temporaryStyleEl) {
-        document.head.removeChild(temporaryStyleEl);
-        temporaryStyleEl = null;
-      }
-
-      if (footerEl && footerOriginalContent) {
-        footerEl.innerHTML = footerOriginalContent;
-      }
-    });
-  })();
+<style id="cms-ui-styles" disabled>
+  @layer mimic-cms, mimic-cms.base, mimic-cms.project;
+
+  @import url(/static/site_cms/css/build/core-styles.base.css) layer(mimic-cms.base);
+  @import url(/static/site_cms/css/build/core-styles.cms.css) layer(mimic-cms.base);
+  @import url(/static/site_cms/css/build/core-cms.css) layer(mimic-cms.project);
+  @import url('@tacc/core-styles/dist/trumps/s-footer.css') layer(mimic-cms.project);
+
+  /* To change high-level styles to match CMS */
+  .workbench-wrapper { color: var(--global-color-primary--x-dark); }
+  .workbench-content .container {
+    --bs-gutter-x: 15px;
+    margin-left: revert-layer;
+    max-width: revert-layer;
+  }
+  body { -webkit-font-smoothing: revert; }
+  .c-button { --max-width: auto; }
+
+  /* To hide navbar */
+  /* TODO: Instead of this, component using CMS styles should not use navbar */
+  #react-root:has(#mimic-cms) .nav-sidebar {
+    display: none;
+  }
+</style>
+
+<script id="cms-ui-script" type="module">
+  let footerEl = null;
+  let footerOriginalContent = null;
+
+  const toggleStyles = (enabled) => {
+    document.getElementById('cms-ui-styles').disabled = !enabled;
+  };
+
+  const useCMSFooter = async () => {
+    footerEl = document.getElementById('footer');
+
+    if (footerEl?.childNodes.length) {
+      footerOriginalContent = footerEl.innerHTML;
+      const { replaceFromURL } = await import('/static/site_cms/js/modules/importHTML.js');
+      await replaceFromURL('/cms/markup/footer', footerEl);
+    }
+  };
+  const restorePortalFooter = async () => {
+    if (footerEl && footerOriginalContent) {
+      footerEl.innerHTML = footerOriginalContent;
+    }
+  };
+
+  window.addEventListener('cms-styles-activated', async () => {
+    toggleStyles(true);
+    await useCMSFooter();
+  });
+  window.addEventListener('cms-styles-deactivated', () => {
+    toggleStyles(false);
+    restorePortalFooter();
+  });
 </script>

From 67c9282c60a225fc53c3463ce6f3258ddf4600fe Mon Sep 17 00:00:00 2001
From: Wesley B <62723358+wesleyboar@users.noreply.github.com>
Date: Mon, 23 Jun 2025 19:10:42 -0500
Subject: [PATCH 27/79] fix: cms_styles not disabled

The style does not support disabled attribute.

AI suggested media attribute. Unexpected, but sensible.
---
 server/portal/templates/includes/cms_styles.html | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/server/portal/templates/includes/cms_styles.html b/server/portal/templates/includes/cms_styles.html
index 55518dc38a..1620ab5092 100644
--- a/server/portal/templates/includes/cms_styles.html
+++ b/server/portal/templates/includes/cms_styles.html
@@ -1,10 +1,10 @@
-<style id="cms-ui-styles" disabled>
+<style id="cms-ui-styles" media="not all">{# i.e. disabled #}
   @layer mimic-cms, mimic-cms.base, mimic-cms.project;
 
   @import url(/static/site_cms/css/build/core-styles.base.css) layer(mimic-cms.base);
   @import url(/static/site_cms/css/build/core-styles.cms.css) layer(mimic-cms.base);
   @import url(/static/site_cms/css/build/core-cms.css) layer(mimic-cms.project);
-  @import url('@tacc/core-styles/dist/trumps/s-footer.css') layer(mimic-cms.project);
+  @import url('https://cdn.jsdelivr.net/npm/@tacc/core-styles@v2/dist/trumps/s-footer.css') layer(mimic-cms.project);
 
   /* To change high-level styles to match CMS */
   .workbench-wrapper { color: var(--global-color-primary--x-dark); }
@@ -28,7 +28,8 @@
   let footerOriginalContent = null;
 
   const toggleStyles = (enabled) => {
-    document.getElementById('cms-ui-styles').disabled = !enabled;
+    const media = (enabled) ? 'all' : 'not all';
+    document.getElementById('cms-ui-styles').media = media;
   };
 
   const useCMSFooter = async () => {

From 21edb58dace4a390c813b2cf9e3a98a2bcd96d8c Mon Sep 17 00:00:00 2001
From: Wesley B <62723358+wesleyboar@users.noreply.github.com>
Date: Tue, 24 Jun 2025 10:47:49 -0500
Subject: [PATCH 28/79] chore: restore new line

---
 client/src/hooks/datafiles/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/hooks/datafiles/index.js b/client/src/hooks/datafiles/index.js
index 397a86b69c..d238f754bf 100644
--- a/client/src/hooks/datafiles/index.js
+++ b/client/src/hooks/datafiles/index.js
@@ -2,4 +2,4 @@ export { default as useSystemDisplayName } from './useSystemDisplayName';
 export { default as useSelectedFiles } from './useSelectedFiles';
 export { default as useFileListing } from './useFileListing';
 export { default as useSystems } from './useSystems';
-export { default as useModal } from './useModal';
\ No newline at end of file
+export { default as useModal } from './useModal';

From e74b1ca6732f1489e25570b8c6adde2cfedfa7ee Mon Sep 17 00:00:00 2001
From: Wesley B <62723358+wesleyboar@users.noreply.github.com>
Date: Tue, 24 Jun 2025 13:48:11 -0500
Subject: [PATCH 29/79] =?UTF-8?q?chore:=20simplify=20DataFiles=E2=80=A6Bre?=
 =?UTF-8?q?adcrumbs?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../DataFiles/DataFilesForDPMWithCMSStylesBreadcrumbs.jsx     | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/client/src/components/DataFiles/DataFilesForDPMWithCMSStylesBreadcrumbs.jsx b/client/src/components/DataFiles/DataFilesForDPMWithCMSStylesBreadcrumbs.jsx
index 923552af16..c94f431f73 100644
--- a/client/src/components/DataFiles/DataFilesForDPMWithCMSStylesBreadcrumbs.jsx
+++ b/client/src/components/DataFiles/DataFilesForDPMWithCMSStylesBreadcrumbs.jsx
@@ -7,7 +7,7 @@ import React from 'react';
  * @see https://github.com/TACC/Core-CMS/blob/v4.30.0/taccsite_cms/templates/nav_cms_breadcrumbs.html
  * @returns {JSX.Element} - breadcrumbs
  */
-const DataFilesForDPMWithCMSStylesBreadcrumbs = () => {
+export default function DataFilesForDPMWithCMSStylesBreadcrumbs() {
   const breadcrumbCSS = `
     .s-breadcrumbs a:not([href]) {
       opacity: 1;
@@ -48,5 +48,3 @@ const DataFilesForDPMWithCMSStylesBreadcrumbs = () => {
     </>
   );
 };
-
-export default DataFilesForDPMWithCMSStylesBreadcrumbs;

From fd71637bc5d03c20bc1c083b85860f05faaa96c9 Mon Sep 17 00:00:00 2001
From: Wesley B <62723358+wesleyboar@users.noreply.github.com>
Date: Tue, 24 Jun 2025 13:49:43 -0500
Subject: [PATCH 30/79] refactor: CMSWrapper

---
 .../DataFilesForDPMWithCMSStyles.jsx          | 282 +-----------------
 ...DataFilesForDPMWithCMSStylesSampleHTML.jsx | 281 +++++++++++++++++
 .../_common/CMSWrapper/CMSWrapper.jsx         |  25 ++
 .../components/_common/CMSWrapper/index.js    |   1 +
 client/src/components/_common/index.js        |   1 +
 5 files changed, 313 insertions(+), 277 deletions(-)
 create mode 100644 client/src/components/DataFiles/DataFilesForDPMWithCMSStylesSampleHTML.jsx
 create mode 100644 client/src/components/_common/CMSWrapper/CMSWrapper.jsx
 create mode 100644 client/src/components/_common/CMSWrapper/index.js

diff --git a/client/src/components/DataFiles/DataFilesForDPMWithCMSStyles.jsx b/client/src/components/DataFiles/DataFilesForDPMWithCMSStyles.jsx
index 41ea253f47..05555bc31a 100644
--- a/client/src/components/DataFiles/DataFilesForDPMWithCMSStyles.jsx
+++ b/client/src/components/DataFiles/DataFilesForDPMWithCMSStyles.jsx
@@ -1,6 +1,8 @@
 import { React, useEffect } from 'react';
+import CMSWrapper from '../_common/CMSWrapper';
 
 import DataFilesForDPMWithCMSStylesBreadcrumbs from './DataFilesForDPMWithCMSStylesBreadcrumbs';
+import DataFilesForDPMWithCMSStylesSampleHTML from './DataFilesForDPMWithCMSStylesSampleHTML';
 
 import './DataFilesForDPMWithCMSStyles.global.css';
 
@@ -14,284 +16,10 @@ function DataGallery() {
   }, []);
 
   return (
-    <div id="mimic-cms" className="container">
+    <CMSWrapper>
       <DataFilesForDPMWithCMSStylesBreadcrumbs />
-      <div className="o-section">
-        <h1>Browse Datasets</h1>
-        <div className="c-card-list">
-          <li
-            className="c-card--image-top c-card--plain"
-            data-tag-change-from="article"
-          >
-            <h3>11 Sandstones: raw, filtered and segmented data</h3>
-            <p>
-              <strong>Rodrigo Neumann</strong>
-              <br /> IBM Research
-            </p>
-            <p>
-              <a href="/datasets/317/" className="c-button c-button--primary">
-                Dataset #317
-              </a>
-            </p>
-            <img
-              src="https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/65/10/6510c85e-4f00-4bde-b560-31614fb30ce0/dr-proj-317.png__800.0x764.0_subsampling-2.png"
-              alt=""
-              srcSet="
-                  https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/65/10/6510c85e-4f00-4bde-b560-31614fb30ce0/dr-proj-317.png__576x576_subsampling-2.png 576w,
-                  https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/65/10/6510c85e-4f00-4bde-b560-31614fb30ce0/dr-proj-317.png__768x768_subsampling-2.png 768w,
-                  https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/65/10/6510c85e-4f00-4bde-b560-31614fb30ce0/dr-proj-317.png__800.0x764.0_subsampling-2.png 800.0w
-              "
-              sizes="
-                  (max-width: 576px) 576px,
-                  (max-width: 768px) 768px,
-                  800.0px
-              "
-              className="img-fluid"
-            />
-          </li>
-          <li
-            className="c-card--image-top c-card--plain"
-            data-tag-change-from="article"
-          >
-            <h3>
-              Bentheimer and Nugget Residual Saturation Micro-Computed Tomography Data
-            </h3>
-            <p>
-              <strong>Laura Dalton</strong>
-              <br /> Duke University
-            </p>
-            <p>
-              <a href="/datasets/218/" className="c-button c-button--primary">
-                Dataset #218
-              </a>
-            </p>
-            <img
-              src="https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/a7/be/a7be0632-6120-4dba-8b2d-b02c1727acac/dr-project-218.png__1104.0x1104.0_q85_subject_location-552%2C552_subsampling-2.jpg"
-              alt=""
-              srcSet="
-                  https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/a7/be/a7be0632-6120-4dba-8b2d-b02c1727acac/dr-project-218.png__576x576_q85_subsampling-2.jpg 576w,
-                  https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/a7/be/a7be0632-6120-4dba-8b2d-b02c1727acac/dr-project-218.png__768x768_q85_subsampling-2.jpg 768w,
-                  https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/a7/be/a7be0632-6120-4dba-8b2d-b02c1727acac/dr-project-218.png__992x992_q85_subsampling-2.jpg 992w,
-                  https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/a7/be/a7be0632-6120-4dba-8b2d-b02c1727acac/dr-project-218.png__1104.0x1104.0_q85_subject_location-552%2C552_subsampling-2.jpg 1104.0w
-              "
-              sizes="
-                  (max-width: 576px) 576px,
-                  (max-width: 768px) 768px,
-                  (max-width: 992px) 992px,
-                  1104.0px
-              "
-              className="img-fluid"
-            />
-          </li>
-          <li
-            className="c-card--image-top c-card--plain"
-            data-tag-change-from="article"
-          >
-            <h3>11 Sandstones: raw, filtered and segmented data</h3>
-            <p>
-              <strong>Rodrigo Neumann</strong>
-              <br /> IBM Research
-            </p>
-            <p>
-              <a href="/datasets/317/" className="c-button c-button--primary">
-                Dataset #317
-              </a>
-            </p>
-            <img
-              src="https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/65/10/6510c85e-4f00-4bde-b560-31614fb30ce0/dr-proj-317.png__800.0x764.0_subsampling-2.png"
-              alt=""
-              srcSet="
-                  https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/65/10/6510c85e-4f00-4bde-b560-31614fb30ce0/dr-proj-317.png__576x576_subsampling-2.png 576w,
-                  https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/65/10/6510c85e-4f00-4bde-b560-31614fb30ce0/dr-proj-317.png__768x768_subsampling-2.png 768w,
-                  https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/65/10/6510c85e-4f00-4bde-b560-31614fb30ce0/dr-proj-317.png__800.0x764.0_subsampling-2.png 800.0w
-              "
-              sizes="
-                  (max-width: 576px) 576px,
-                  (max-width: 768px) 768px,
-                  800.0px
-              "
-              className="img-fluid"
-            />
-          </li>
-          <li
-            className="c-card--image-top c-card--plain"
-            data-tag-change-from="article"
-          >
-            <h3>
-              Bentheimer and Nugget Residual Saturation Micro-Computed Tomography Data
-            </h3>
-            <p>
-              <strong>Laura Dalton</strong>
-              <br /> Duke University
-            </p>
-            <p>
-              <a href="/datasets/218/" className="c-button c-button--primary">
-                Dataset #218
-              </a>
-            </p>
-            <img
-              src="https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/a7/be/a7be0632-6120-4dba-8b2d-b02c1727acac/dr-project-218.png__1104.0x1104.0_q85_subject_location-552%2C552_subsampling-2.jpg"
-              alt=""
-              srcSet="
-                  https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/a7/be/a7be0632-6120-4dba-8b2d-b02c1727acac/dr-project-218.png__576x576_q85_subsampling-2.jpg 576w,
-                  https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/a7/be/a7be0632-6120-4dba-8b2d-b02c1727acac/dr-project-218.png__768x768_q85_subsampling-2.jpg 768w,
-                  https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/a7/be/a7be0632-6120-4dba-8b2d-b02c1727acac/dr-project-218.png__992x992_q85_subsampling-2.jpg 992w,
-                  https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/a7/be/a7be0632-6120-4dba-8b2d-b02c1727acac/dr-project-218.png__1104.0x1104.0_q85_subject_location-552%2C552_subsampling-2.jpg 1104.0w
-              "
-              sizes="
-                  (max-width: 576px) 576px,
-                  (max-width: 768px) 768px,
-                  (max-width: 992px) 992px,
-                  1104.0px
-              "
-              className="img-fluid"
-            />
-          </li>
-          <li
-            className="c-card--image-top c-card--plain"
-            data-tag-change-from="article"
-          >
-            <h3>11 Sandstones: raw, filtered and segmented data</h3>
-            <p>
-              <strong>Rodrigo Neumann</strong>
-              <br /> IBM Research
-            </p>
-            <p>
-              <a href="/datasets/317/" className="c-button c-button--primary">
-                Dataset #317
-              </a>
-            </p>
-            <img
-              src="https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/65/10/6510c85e-4f00-4bde-b560-31614fb30ce0/dr-proj-317.png__800.0x764.0_subsampling-2.png"
-              alt=""
-              srcSet="
-                  https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/65/10/6510c85e-4f00-4bde-b560-31614fb30ce0/dr-proj-317.png__576x576_subsampling-2.png 576w,
-                  https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/65/10/6510c85e-4f00-4bde-b560-31614fb30ce0/dr-proj-317.png__768x768_subsampling-2.png 768w,
-                  https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/65/10/6510c85e-4f00-4bde-b560-31614fb30ce0/dr-proj-317.png__800.0x764.0_subsampling-2.png 800.0w
-              "
-              sizes="
-                  (max-width: 576px) 576px,
-                  (max-width: 768px) 768px,
-                  800.0px
-              "
-              className="img-fluid"
-            />
-          </li>
-          <li
-            className="c-card--image-top c-card--plain"
-            data-tag-change-from="article"
-          >
-            <h3>
-              Bentheimer and Nugget Residual Saturation Micro-Computed Tomography Data
-            </h3>
-            <p>
-              <strong>Laura Dalton</strong>
-              <br /> Duke University
-            </p>
-            <p>
-              <a href="/datasets/218/" className="c-button c-button--primary">
-                Dataset #218
-              </a>
-            </p>
-            <img
-              src="https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/a7/be/a7be0632-6120-4dba-8b2d-b02c1727acac/dr-project-218.png__1104.0x1104.0_q85_subject_location-552%2C552_subsampling-2.jpg"
-              alt=""
-              srcSet="
-                  https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/a7/be/a7be0632-6120-4dba-8b2d-b02c1727acac/dr-project-218.png__576x576_q85_subsampling-2.jpg 576w,
-                  https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/a7/be/a7be0632-6120-4dba-8b2d-b02c1727acac/dr-project-218.png__768x768_q85_subsampling-2.jpg 768w,
-                  https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/a7/be/a7be0632-6120-4dba-8b2d-b02c1727acac/dr-project-218.png__992x992_q85_subsampling-2.jpg 992w,
-                  https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/a7/be/a7be0632-6120-4dba-8b2d-b02c1727acac/dr-project-218.png__1104.0x1104.0_q85_subject_location-552%2C552_subsampling-2.jpg 1104.0w
-              "
-              sizes="
-                  (max-width: 576px) 576px,
-                  (max-width: 768px) 768px,
-                  (max-width: 992px) 992px,
-                  1104.0px
-              "
-              className="img-fluid"
-            />
-          </li>
-          <li
-            className="c-card--image-top c-card--plain"
-            data-tag-change-from="article"
-          >
-            <h3>11 Sandstones: raw, filtered and segmented data</h3>
-            <p>
-              <strong>Rodrigo Neumann</strong>
-              <br /> IBM Research
-            </p>
-            <p>
-              <a href="/datasets/317/" className="c-button c-button--primary">
-                Dataset #317
-              </a>
-            </p>
-            <img
-              src="https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/65/10/6510c85e-4f00-4bde-b560-31614fb30ce0/dr-proj-317.png__800.0x764.0_subsampling-2.png"
-              alt=""
-              srcSet="
-                  https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/65/10/6510c85e-4f00-4bde-b560-31614fb30ce0/dr-proj-317.png__576x576_subsampling-2.png 576w,
-                  https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/65/10/6510c85e-4f00-4bde-b560-31614fb30ce0/dr-proj-317.png__768x768_subsampling-2.png 768w,
-                  https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/65/10/6510c85e-4f00-4bde-b560-31614fb30ce0/dr-proj-317.png__800.0x764.0_subsampling-2.png 800.0w
-              "
-              sizes="
-                  (max-width: 576px) 576px,
-                  (max-width: 768px) 768px,
-                  800.0px
-              "
-              className="img-fluid"
-            />
-          </li>
-          <li
-            className="c-card--image-top c-card--plain"
-            data-tag-change-from="article"
-          >
-            <h3>
-              Bentheimer and Nugget Residual Saturation Micro-Computed Tomography Data
-            </h3>
-            <p>
-              <strong>Laura Dalton</strong>
-              <br /> Duke University
-            </p>
-            <p>
-              <a href="/datasets/218/" className="c-button c-button--primary">
-                Dataset #218
-              </a>
-            </p>
-            <img
-              src="https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/a7/be/a7be0632-6120-4dba-8b2d-b02c1727acac/dr-project-218.png__1104.0x1104.0_q85_subject_location-552%2C552_subsampling-2.jpg"
-              alt=""
-              srcSet="
-                  https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/a7/be/a7be0632-6120-4dba-8b2d-b02c1727acac/dr-project-218.png__576x576_q85_subsampling-2.jpg 576w,
-                  https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/a7/be/a7be0632-6120-4dba-8b2d-b02c1727acac/dr-project-218.png__768x768_q85_subsampling-2.jpg 768w,
-                  https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/a7/be/a7be0632-6120-4dba-8b2d-b02c1727acac/dr-project-218.png__992x992_q85_subsampling-2.jpg 992w,
-                  https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/a7/be/a7be0632-6120-4dba-8b2d-b02c1727acac/dr-project-218.png__1104.0x1104.0_q85_subject_location-552%2C552_subsampling-2.jpg 1104.0w
-              "
-              sizes="
-                  (max-width: 576px) 576px,
-                  (max-width: 768px) 768px,
-                  (max-width: 992px) 992px,
-                  1104.0px
-              "
-              className="img-fluid"
-            />
-          </li>
-        </div>
-        <div className="o-section">
-          {/* <!-- FAQ: Bootstrap 4's Pagination pattern --> */}
-          <ul className="pagination">
-            <li className="page-item disabled">
-              <span className="page-link">&lt; Previous</span>
-            </li>
-            <li className="page-item active">
-              <span className="page-link">1</span>
-            </li>
-            <li className="page-item disabled">
-              <span className="page-link">Next &gt;</span>
-            </li>
-          </ul>
-        </div>
-      </div>
-    </div>
+      <DataFilesForDPMWithCMSStylesSampleHTML />
+    </CMSWrapper>
   );
 }
 
diff --git a/client/src/components/DataFiles/DataFilesForDPMWithCMSStylesSampleHTML.jsx b/client/src/components/DataFiles/DataFilesForDPMWithCMSStylesSampleHTML.jsx
new file mode 100644
index 0000000000..095d525751
--- /dev/null
+++ b/client/src/components/DataFiles/DataFilesForDPMWithCMSStylesSampleHTML.jsx
@@ -0,0 +1,281 @@
+import { React } from 'react';
+
+export default function SampleHTML() {
+  return (
+    <div className="o-section">
+        <h1>Browse Datasets</h1>
+        <div className="c-card-list">
+            <li
+            className="c-card--image-top c-card--plain"
+            data-tag-change-from="article"
+            >
+            <h3>11 Sandstones: raw, filtered and segmented data</h3>
+            <p>
+                <strong>Rodrigo Neumann</strong>
+                <br /> IBM Research
+            </p>
+            <p>
+                <a href="/datasets/317/" className="c-button c-button--primary">
+                Dataset #317
+                </a>
+            </p>
+            <img
+                src="https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/65/10/6510c85e-4f00-4bde-b560-31614fb30ce0/dr-proj-317.png__800.0x764.0_subsampling-2.png"
+                alt=""
+                srcSet="
+                    https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/65/10/6510c85e-4f00-4bde-b560-31614fb30ce0/dr-proj-317.png__576x576_subsampling-2.png 576w,
+                    https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/65/10/6510c85e-4f00-4bde-b560-31614fb30ce0/dr-proj-317.png__768x768_subsampling-2.png 768w,
+                    https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/65/10/6510c85e-4f00-4bde-b560-31614fb30ce0/dr-proj-317.png__800.0x764.0_subsampling-2.png 800.0w
+                "
+                sizes="
+                    (max-width: 576px) 576px,
+                    (max-width: 768px) 768px,
+                    800.0px
+                "
+                className="img-fluid"
+            />
+            </li>
+            <li
+            className="c-card--image-top c-card--plain"
+            data-tag-change-from="article"
+            >
+            <h3>
+                Bentheimer and Nugget Residual Saturation Micro-Computed Tomography Data
+            </h3>
+            <p>
+                <strong>Laura Dalton</strong>
+                <br /> Duke University
+            </p>
+            <p>
+                <a href="/datasets/218/" className="c-button c-button--primary">
+                Dataset #218
+                </a>
+            </p>
+            <img
+                src="https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/a7/be/a7be0632-6120-4dba-8b2d-b02c1727acac/dr-project-218.png__1104.0x1104.0_q85_subject_location-552%2C552_subsampling-2.jpg"
+                alt=""
+                srcSet="
+                    https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/a7/be/a7be0632-6120-4dba-8b2d-b02c1727acac/dr-project-218.png__576x576_q85_subsampling-2.jpg 576w,
+                    https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/a7/be/a7be0632-6120-4dba-8b2d-b02c1727acac/dr-project-218.png__768x768_q85_subsampling-2.jpg 768w,
+                    https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/a7/be/a7be0632-6120-4dba-8b2d-b02c1727acac/dr-project-218.png__992x992_q85_subsampling-2.jpg 992w,
+                    https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/a7/be/a7be0632-6120-4dba-8b2d-b02c1727acac/dr-project-218.png__1104.0x1104.0_q85_subject_location-552%2C552_subsampling-2.jpg 1104.0w
+                "
+                sizes="
+                    (max-width: 576px) 576px,
+                    (max-width: 768px) 768px,
+                    (max-width: 992px) 992px,
+                    1104.0px
+                "
+                className="img-fluid"
+            />
+            </li>
+            <li
+            className="c-card--image-top c-card--plain"
+            data-tag-change-from="article"
+            >
+            <h3>11 Sandstones: raw, filtered and segmented data</h3>
+            <p>
+                <strong>Rodrigo Neumann</strong>
+                <br /> IBM Research
+            </p>
+            <p>
+                <a href="/datasets/317/" className="c-button c-button--primary">
+                Dataset #317
+                </a>
+            </p>
+            <img
+                src="https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/65/10/6510c85e-4f00-4bde-b560-31614fb30ce0/dr-proj-317.png__800.0x764.0_subsampling-2.png"
+                alt=""
+                srcSet="
+                    https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/65/10/6510c85e-4f00-4bde-b560-31614fb30ce0/dr-proj-317.png__576x576_subsampling-2.png 576w,
+                    https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/65/10/6510c85e-4f00-4bde-b560-31614fb30ce0/dr-proj-317.png__768x768_subsampling-2.png 768w,
+                    https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/65/10/6510c85e-4f00-4bde-b560-31614fb30ce0/dr-proj-317.png__800.0x764.0_subsampling-2.png 800.0w
+                "
+                sizes="
+                    (max-width: 576px) 576px,
+                    (max-width: 768px) 768px,
+                    800.0px
+                "
+                className="img-fluid"
+            />
+            </li>
+            <li
+            className="c-card--image-top c-card--plain"
+            data-tag-change-from="article"
+            >
+            <h3>
+                Bentheimer and Nugget Residual Saturation Micro-Computed Tomography Data
+            </h3>
+            <p>
+                <strong>Laura Dalton</strong>
+                <br /> Duke University
+            </p>
+            <p>
+                <a href="/datasets/218/" className="c-button c-button--primary">
+                Dataset #218
+                </a>
+            </p>
+            <img
+                src="https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/a7/be/a7be0632-6120-4dba-8b2d-b02c1727acac/dr-project-218.png__1104.0x1104.0_q85_subject_location-552%2C552_subsampling-2.jpg"
+                alt=""
+                srcSet="
+                    https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/a7/be/a7be0632-6120-4dba-8b2d-b02c1727acac/dr-project-218.png__576x576_q85_subsampling-2.jpg 576w,
+                    https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/a7/be/a7be0632-6120-4dba-8b2d-b02c1727acac/dr-project-218.png__768x768_q85_subsampling-2.jpg 768w,
+                    https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/a7/be/a7be0632-6120-4dba-8b2d-b02c1727acac/dr-project-218.png__992x992_q85_subsampling-2.jpg 992w,
+                    https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/a7/be/a7be0632-6120-4dba-8b2d-b02c1727acac/dr-project-218.png__1104.0x1104.0_q85_subject_location-552%2C552_subsampling-2.jpg 1104.0w
+                "
+                sizes="
+                    (max-width: 576px) 576px,
+                    (max-width: 768px) 768px,
+                    (max-width: 992px) 992px,
+                    1104.0px
+                "
+                className="img-fluid"
+            />
+            </li>
+            <li
+            className="c-card--image-top c-card--plain"
+            data-tag-change-from="article"
+            >
+            <h3>11 Sandstones: raw, filtered and segmented data</h3>
+            <p>
+                <strong>Rodrigo Neumann</strong>
+                <br /> IBM Research
+            </p>
+            <p>
+                <a href="/datasets/317/" className="c-button c-button--primary">
+                Dataset #317
+                </a>
+            </p>
+            <img
+                src="https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/65/10/6510c85e-4f00-4bde-b560-31614fb30ce0/dr-proj-317.png__800.0x764.0_subsampling-2.png"
+                alt=""
+                srcSet="
+                    https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/65/10/6510c85e-4f00-4bde-b560-31614fb30ce0/dr-proj-317.png__576x576_subsampling-2.png 576w,
+                    https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/65/10/6510c85e-4f00-4bde-b560-31614fb30ce0/dr-proj-317.png__768x768_subsampling-2.png 768w,
+                    https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/65/10/6510c85e-4f00-4bde-b560-31614fb30ce0/dr-proj-317.png__800.0x764.0_subsampling-2.png 800.0w
+                "
+                sizes="
+                    (max-width: 576px) 576px,
+                    (max-width: 768px) 768px,
+                    800.0px
+                "
+                className="img-fluid"
+            />
+            </li>
+            <li
+            className="c-card--image-top c-card--plain"
+            data-tag-change-from="article"
+            >
+            <h3>
+                Bentheimer and Nugget Residual Saturation Micro-Computed Tomography Data
+            </h3>
+            <p>
+                <strong>Laura Dalton</strong>
+                <br /> Duke University
+            </p>
+            <p>
+                <a href="/datasets/218/" className="c-button c-button--primary">
+                Dataset #218
+                </a>
+            </p>
+            <img
+                src="https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/a7/be/a7be0632-6120-4dba-8b2d-b02c1727acac/dr-project-218.png__1104.0x1104.0_q85_subject_location-552%2C552_subsampling-2.jpg"
+                alt=""
+                srcSet="
+                    https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/a7/be/a7be0632-6120-4dba-8b2d-b02c1727acac/dr-project-218.png__576x576_q85_subsampling-2.jpg 576w,
+                    https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/a7/be/a7be0632-6120-4dba-8b2d-b02c1727acac/dr-project-218.png__768x768_q85_subsampling-2.jpg 768w,
+                    https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/a7/be/a7be0632-6120-4dba-8b2d-b02c1727acac/dr-project-218.png__992x992_q85_subsampling-2.jpg 992w,
+                    https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/a7/be/a7be0632-6120-4dba-8b2d-b02c1727acac/dr-project-218.png__1104.0x1104.0_q85_subject_location-552%2C552_subsampling-2.jpg 1104.0w
+                "
+                sizes="
+                    (max-width: 576px) 576px,
+                    (max-width: 768px) 768px,
+                    (max-width: 992px) 992px,
+                    1104.0px
+                "
+                className="img-fluid"
+            />
+            </li>
+            <li
+            className="c-card--image-top c-card--plain"
+            data-tag-change-from="article"
+            >
+            <h3>11 Sandstones: raw, filtered and segmented data</h3>
+            <p>
+                <strong>Rodrigo Neumann</strong>
+                <br /> IBM Research
+            </p>
+            <p>
+                <a href="/datasets/317/" className="c-button c-button--primary">
+                Dataset #317
+                </a>
+            </p>
+            <img
+                src="https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/65/10/6510c85e-4f00-4bde-b560-31614fb30ce0/dr-proj-317.png__800.0x764.0_subsampling-2.png"
+                alt=""
+                srcSet="
+                    https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/65/10/6510c85e-4f00-4bde-b560-31614fb30ce0/dr-proj-317.png__576x576_subsampling-2.png 576w,
+                    https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/65/10/6510c85e-4f00-4bde-b560-31614fb30ce0/dr-proj-317.png__768x768_subsampling-2.png 768w,
+                    https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/65/10/6510c85e-4f00-4bde-b560-31614fb30ce0/dr-proj-317.png__800.0x764.0_subsampling-2.png 800.0w
+                "
+                sizes="
+                    (max-width: 576px) 576px,
+                    (max-width: 768px) 768px,
+                    800.0px
+                "
+                className="img-fluid"
+            />
+            </li>
+            <li
+            className="c-card--image-top c-card--plain"
+            data-tag-change-from="article"
+            >
+            <h3>
+                Bentheimer and Nugget Residual Saturation Micro-Computed Tomography Data
+            </h3>
+            <p>
+                <strong>Laura Dalton</strong>
+                <br /> Duke University
+            </p>
+            <p>
+                <a href="/datasets/218/" className="c-button c-button--primary">
+                Dataset #218
+                </a>
+            </p>
+            <img
+                src="https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/a7/be/a7be0632-6120-4dba-8b2d-b02c1727acac/dr-project-218.png__1104.0x1104.0_q85_subject_location-552%2C552_subsampling-2.jpg"
+                alt=""
+                srcSet="
+                    https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/a7/be/a7be0632-6120-4dba-8b2d-b02c1727acac/dr-project-218.png__576x576_q85_subsampling-2.jpg 576w,
+                    https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/a7/be/a7be0632-6120-4dba-8b2d-b02c1727acac/dr-project-218.png__768x768_q85_subsampling-2.jpg 768w,
+                    https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/a7/be/a7be0632-6120-4dba-8b2d-b02c1727acac/dr-project-218.png__992x992_q85_subsampling-2.jpg 992w,
+                    https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/a7/be/a7be0632-6120-4dba-8b2d-b02c1727acac/dr-project-218.png__1104.0x1104.0_q85_subject_location-552%2C552_subsampling-2.jpg 1104.0w
+                "
+                sizes="
+                    (max-width: 576px) 576px,
+                    (max-width: 768px) 768px,
+                    (max-width: 992px) 992px,
+                    1104.0px
+                "
+                className="img-fluid"
+            />
+            </li>
+        </div>
+        <div className="o-section">
+            {/* <!-- FAQ: Bootstrap 4's Pagination pattern --> */}
+            <ul className="pagination">
+            <li className="page-item disabled">
+                <span className="page-link">&lt; Previous</span>
+            </li>
+            <li className="page-item active">
+                <span className="page-link">1</span>
+            </li>
+            <li className="page-item disabled">
+                <span className="page-link">Next &gt;</span>
+            </li>
+            </ul>
+        </div>
+    </div>
+  );
+}
diff --git a/client/src/components/_common/CMSWrapper/CMSWrapper.jsx b/client/src/components/_common/CMSWrapper/CMSWrapper.jsx
new file mode 100644
index 0000000000..e15f4c4488
--- /dev/null
+++ b/client/src/components/_common/CMSWrapper/CMSWrapper.jsx
@@ -0,0 +1,25 @@
+import React, { useEffect } from 'react';
+
+import PropTypes from 'prop-types';
+
+function CMSWrapper({ children }) {
+  useEffect(() => {
+    // To (de)activate CMS styles on (un)mount
+    window.dispatchEvent(new CustomEvent('cms-styles-activated'));
+    return () => {
+      window.dispatchEvent(new CustomEvent('cms-styles-deactivated'));
+    };
+  }, []);
+
+  return (
+    <div id="mimic-cms" className="container">
+      {children}
+    </div>
+  );
+}
+
+CMSWrapper.propTypes = {
+  children: PropTypes.node.isRequired,
+};
+
+export default CMSWrapper;
diff --git a/client/src/components/_common/CMSWrapper/index.js b/client/src/components/_common/CMSWrapper/index.js
new file mode 100644
index 0000000000..be1b52f772
--- /dev/null
+++ b/client/src/components/_common/CMSWrapper/index.js
@@ -0,0 +1 @@
+export { default } from './CMSWrapper';
diff --git a/client/src/components/_common/index.js b/client/src/components/_common/index.js
index ec663f8caf..1a2efcdc5e 100644
--- a/client/src/components/_common/index.js
+++ b/client/src/components/_common/index.js
@@ -25,6 +25,7 @@ export {
   default as IntroMessage,
   isKnownMessage as isKnownIntroMessage,
 } from './IntroMessage';
+export { default as CMSWrapper } from './CMSWrapper';
 export { default as CustomMessage } from './CustomMessage';
 export { default as Pill } from './Pill';
 export { default as TextCopyField } from './TextCopyField';

From fc391de6f3b9ab7bb45007426c64e16a16352959 Mon Sep 17 00:00:00 2001
From: Wesley B <62723358+wesleyboar@users.noreply.github.com>
Date: Tue, 24 Jun 2025 14:29:29 -0500
Subject: [PATCH 31/79] refactor: clean up so DPM usage is clearer

---
 .../DataFilesForDPM.global.css}                     |  1 +
 .../DataFilesForDPM.jsx}                            | 12 ++++++------
 .../DataFilesForDPM/DataFilesForDPMBreadcrumbs.jsx  |  8 ++++++++
 .../DataFilesForDPMBrowse.jsx}                      |  5 +++--
 client/src/components/DataFiles/index.js            |  2 +-
 .../CMSBreadcrumbs/CMSBreadcrumbs.jsx}              | 13 +++++--------
 .../src/components/_common/CMSBreadcrumbs/index.js  |  1 +
 client/src/components/_common/index.js              |  1 +
 8 files changed, 26 insertions(+), 17 deletions(-)
 rename client/src/components/DataFiles/{DataFilesForDPMWithCMSStyles.global.css => DataFilesForDPM/DataFilesForDPM.global.css} (66%)
 rename client/src/components/DataFiles/{DataFilesForDPMWithCMSStyles.jsx => DataFilesForDPM/DataFilesForDPM.jsx} (50%)
 create mode 100644 client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPMBreadcrumbs.jsx
 rename client/src/components/DataFiles/{DataFilesForDPMWithCMSStylesSampleHTML.jsx => DataFilesForDPM/DataFilesForDPMBrowse.jsx} (99%)
 rename client/src/components/{DataFiles/DataFilesForDPMWithCMSStylesBreadcrumbs.jsx => _common/CMSBreadcrumbs/CMSBreadcrumbs.jsx} (74%)
 create mode 100644 client/src/components/_common/CMSBreadcrumbs/index.js

diff --git a/client/src/components/DataFiles/DataFilesForDPMWithCMSStyles.global.css b/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPM.global.css
similarity index 66%
rename from client/src/components/DataFiles/DataFilesForDPMWithCMSStyles.global.css
rename to client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPM.global.css
index 0d9df5d7e9..dc7049efb7 100644
--- a/client/src/components/DataFiles/DataFilesForDPMWithCMSStyles.global.css
+++ b/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPM.global.css
@@ -1,2 +1,3 @@
+/* IDEA: Move these styles from CDN to here, though they would still need to be global, unless tediously converted to module */
 @import url(https://cdn.jsdelivr.net/gh/TACC/Core-CMS-Custom@5717c8d/digitalrocks_assets/css/cms.css) layer(mimic-cms);
 @import url(https://cdn.jsdelivr.net/gh/TACC/Core-CMS-Custom@5717c8d/digitalrocks_assets/css/for-core-styles.css) layer(mimic-cms);
diff --git a/client/src/components/DataFiles/DataFilesForDPMWithCMSStyles.jsx b/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPM.jsx
similarity index 50%
rename from client/src/components/DataFiles/DataFilesForDPMWithCMSStyles.jsx
rename to client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPM.jsx
index 05555bc31a..152cea2b25 100644
--- a/client/src/components/DataFiles/DataFilesForDPMWithCMSStyles.jsx
+++ b/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPM.jsx
@@ -1,10 +1,10 @@
 import { React, useEffect } from 'react';
-import CMSWrapper from '../_common/CMSWrapper';
+import CMSWrapper from '_common/CMSWrapper';
 
-import DataFilesForDPMWithCMSStylesBreadcrumbs from './DataFilesForDPMWithCMSStylesBreadcrumbs';
-import DataFilesForDPMWithCMSStylesSampleHTML from './DataFilesForDPMWithCMSStylesSampleHTML';
+import DataFilesForDPMBreadcrumbs from './DataFilesForDPMBreadcrumbs';
+import DataFilesForDPMBrowse from './DataFilesForDPMBrowse';
 
-import './DataFilesForDPMWithCMSStyles.global.css';
+import './DataFilesForDPM.global.css';
 
 function DataGallery() {
   useEffect(() => {
@@ -17,8 +17,8 @@ function DataGallery() {
 
   return (
     <CMSWrapper>
-      <DataFilesForDPMWithCMSStylesBreadcrumbs />
-      <DataFilesForDPMWithCMSStylesSampleHTML />
+      <DataFilesForDPMBreadcrumbs />
+      <DataFilesForDPMBrowse />
     </CMSWrapper>
   );
 }
diff --git a/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPMBreadcrumbs.jsx b/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPMBreadcrumbs.jsx
new file mode 100644
index 0000000000..7f969746ae
--- /dev/null
+++ b/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPMBreadcrumbs.jsx
@@ -0,0 +1,8 @@
+import React from 'react';
+
+import { CMSBreadcrumbs } from '_common';
+
+/** To load CMS breadcrumbs with Data Files data */
+export default function DataFilesForDPMBreadcrumbs() {
+  return <CMSBreadcrumbs />;
+}
diff --git a/client/src/components/DataFiles/DataFilesForDPMWithCMSStylesSampleHTML.jsx b/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPMBrowse.jsx
similarity index 99%
rename from client/src/components/DataFiles/DataFilesForDPMWithCMSStylesSampleHTML.jsx
rename to client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPMBrowse.jsx
index 095d525751..e23dae7ff6 100644
--- a/client/src/components/DataFiles/DataFilesForDPMWithCMSStylesSampleHTML.jsx
+++ b/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPMBrowse.jsx
@@ -1,6 +1,7 @@
-import { React } from 'react';
+import React from 'react';
 
-export default function SampleHTML() {
+/* TODO: Replace use of this with component(s) from WC-219 */
+export default function DataFilesForDPMBrowse() {
   return (
     <div className="o-section">
         <h1>Browse Datasets</h1>
diff --git a/client/src/components/DataFiles/index.js b/client/src/components/DataFiles/index.js
index 00b733dff6..c7204be3cf 100644
--- a/client/src/components/DataFiles/index.js
+++ b/client/src/components/DataFiles/index.js
@@ -1 +1 @@
-export { default } from './DataFilesForDPMWithCMSStyles';
+export { default } from './DataFilesForDPM/DataFilesForDPM';
diff --git a/client/src/components/DataFiles/DataFilesForDPMWithCMSStylesBreadcrumbs.jsx b/client/src/components/_common/CMSBreadcrumbs/CMSBreadcrumbs.jsx
similarity index 74%
rename from client/src/components/DataFiles/DataFilesForDPMWithCMSStylesBreadcrumbs.jsx
rename to client/src/components/_common/CMSBreadcrumbs/CMSBreadcrumbs.jsx
index c94f431f73..d71821b62d 100644
--- a/client/src/components/DataFiles/DataFilesForDPMWithCMSStylesBreadcrumbs.jsx
+++ b/client/src/components/_common/CMSBreadcrumbs/CMSBreadcrumbs.jsx
@@ -1,13 +1,8 @@
 import React from 'react';
 
-/**
- * Display CMS-styled breadcrumbs for the Digital Rocks Portal
- * XXX: This is static content specific to the Digital Rocks Portal interface.
- * @see https://pprd.digitalrocks.tacc.utexas.edu/datasets/
- * @see https://github.com/TACC/Core-CMS/blob/v4.30.0/taccsite_cms/templates/nav_cms_breadcrumbs.html
- * @returns {JSX.Element} - breadcrumbs
- */
-export default function DataFilesForDPMWithCMSStylesBreadcrumbs() {
+export default function CMSBreadcrumbs() {
+  /* TODO: Move to …module.css OR into Core-Styles */
+  /* https://github.com/TACC/Core-CMS/blob/v4.30.0/taccsite_cms/templates/nav_cms_breadcrumbs.html#L4-L11 */
   const breadcrumbCSS = `
     .s-breadcrumbs a:not([href]) {
       opacity: 1;
@@ -15,6 +10,7 @@ export default function DataFilesForDPMWithCMSStylesBreadcrumbs() {
     }
   `;
 
+  /* TODO: Migrate to JSX logic (when it exists) */
   React.useEffect(() => {
     // Disable href for the current page breadcrumb
     const crumbs = document.getElementById('cms-breadcrumbs');
@@ -22,6 +18,7 @@ export default function DataFilesForDPMWithCMSStylesBreadcrumbs() {
     if (secondLink) secondLink.removeAttribute('href');
   }, []);
 
+  /* TODO: Render based on data param, not as static content */
   return (
     <>
       <style dangerouslySetInnerHTML={{ __html: breadcrumbCSS }} />
diff --git a/client/src/components/_common/CMSBreadcrumbs/index.js b/client/src/components/_common/CMSBreadcrumbs/index.js
new file mode 100644
index 0000000000..e0345e5235
--- /dev/null
+++ b/client/src/components/_common/CMSBreadcrumbs/index.js
@@ -0,0 +1 @@
+export { default } from './CMSBreadcrumbs';
diff --git a/client/src/components/_common/index.js b/client/src/components/_common/index.js
index 1a2efcdc5e..e525466da5 100644
--- a/client/src/components/_common/index.js
+++ b/client/src/components/_common/index.js
@@ -25,6 +25,7 @@ export {
   default as IntroMessage,
   isKnownMessage as isKnownIntroMessage,
 } from './IntroMessage';
+export { default as CMSBreadcrumbs } from './CMSBreadcrumbs';
 export { default as CMSWrapper } from './CMSWrapper';
 export { default as CustomMessage } from './CustomMessage';
 export { default as Pill } from './Pill';

From 67ebe74603a0a9b09624cfab94f3a756cfd66dbe Mon Sep 17 00:00:00 2001
From: Wesley B <62723358+wesleyboar@users.noreply.github.com>
Date: Tue, 24 Jun 2025 17:29:38 -0500
Subject: [PATCH 32/79] chore: use `latest` cms image again

v4.31.0 (latest) includes the new feature
---
 server/conf/docker/docker-compose-dev.all.debug.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/server/conf/docker/docker-compose-dev.all.debug.yml b/server/conf/docker/docker-compose-dev.all.debug.yml
index 2f7c8339e1..fc239ce4ac 100644
--- a/server/conf/docker/docker-compose-dev.all.debug.yml
+++ b/server/conf/docker/docker-compose-dev.all.debug.yml
@@ -3,7 +3,7 @@
 ---
 services:
   cms:
-    image: taccwma/core-cms:feat-WC-274-serve-footer-markup # e46d45d5
+    image: taccwma/core-cms:latest
     volumes:
       - ../cms/secrets.py:/code/taccsite_cms/secrets.py
       - ../cms/uwsgi/uwsgi.ini:/code/uwsgi.ini

From 607d07c5e2fb8cf5c067b820aac7fa4114e5f428 Mon Sep 17 00:00:00 2001
From: Wesley B <62723358+wesleyboar@users.noreply.github.com>
Date: Tue, 24 Jun 2025 19:04:34 -0500
Subject: [PATCH 33/79] fix: does not match CMS UI exactly

Return CMS code to after <head>, which React/Vite appends with CSS that cms_styles must overwrite.
---
 server/portal/templates/base.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/server/portal/templates/base.html b/server/portal/templates/base.html
index 2c4c1d1619..e28fd724a8 100644
--- a/server/portal/templates/base.html
+++ b/server/portal/templates/base.html
@@ -28,7 +28,6 @@
       <link rel="stylesheet" href="{{ stylesheet }}">
       {% endfor %}
     {% endif %}
-    {% include 'includes/cms_styles.html' %}
 
     {% block styles %}{% endblock %}
   </head>
@@ -40,6 +39,7 @@
       {% block content %}{% endblock %}
     </div>
     {% include 'includes/footer.html' %}
+    {% include 'includes/cms_styles.html' %}
     {% block scripts %}{% endblock %}
     <!-- Bootstrap JS -->
     <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>

From 8874dee293b6664fa10aa0f211cc2f8530f52560 Mon Sep 17 00:00:00 2001
From: Wesley B <62723358+wesleyboar@users.noreply.github.com>
Date: Tue, 24 Jun 2025 19:05:15 -0500
Subject: [PATCH 34/79] =?UTF-8?q?refactor=20cms=5Fstyles=20=E2=86=92=20cms?=
 =?UTF-8?q?=5Fui?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 server/portal/templates/base.html                               | 2 +-
 .../portal/templates/includes/{cms_styles.html => cms_ui.html}  | 0
 2 files changed, 1 insertion(+), 1 deletion(-)
 rename server/portal/templates/includes/{cms_styles.html => cms_ui.html} (100%)

diff --git a/server/portal/templates/base.html b/server/portal/templates/base.html
index e28fd724a8..1bd775fa6d 100644
--- a/server/portal/templates/base.html
+++ b/server/portal/templates/base.html
@@ -39,7 +39,7 @@
       {% block content %}{% endblock %}
     </div>
     {% include 'includes/footer.html' %}
-    {% include 'includes/cms_styles.html' %}
+    {% include 'includes/cms_ui.html' %}
     {% block scripts %}{% endblock %}
     <!-- Bootstrap JS -->
     <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
diff --git a/server/portal/templates/includes/cms_styles.html b/server/portal/templates/includes/cms_ui.html
similarity index 100%
rename from server/portal/templates/includes/cms_styles.html
rename to server/portal/templates/includes/cms_ui.html

From 334dab09d4977afa5566b050f673ec6f30777747 Mon Sep 17 00:00:00 2001
From: Wesley B <62723358+wesleyboar@users.noreply.github.com>
Date: Tue, 24 Jun 2025 19:08:19 -0500
Subject: [PATCH 35/79] chore: npm prettier--write client

---
 .../DataFilesForDPM/DataFilesForDPMBrowse.jsx | 406 +++++++++---------
 .../_common/CMSBreadcrumbs/CMSBreadcrumbs.jsx |  16 +-
 2 files changed, 214 insertions(+), 208 deletions(-)

diff --git a/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPMBrowse.jsx b/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPMBrowse.jsx
index e23dae7ff6..47058931f9 100644
--- a/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPMBrowse.jsx
+++ b/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPMBrowse.jsx
@@ -4,279 +4,283 @@ import React from 'react';
 export default function DataFilesForDPMBrowse() {
   return (
     <div className="o-section">
-        <h1>Browse Datasets</h1>
-        <div className="c-card-list">
-            <li
-            className="c-card--image-top c-card--plain"
-            data-tag-change-from="article"
-            >
-            <h3>11 Sandstones: raw, filtered and segmented data</h3>
-            <p>
-                <strong>Rodrigo Neumann</strong>
-                <br /> IBM Research
-            </p>
-            <p>
-                <a href="/datasets/317/" className="c-button c-button--primary">
-                Dataset #317
-                </a>
-            </p>
-            <img
-                src="https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/65/10/6510c85e-4f00-4bde-b560-31614fb30ce0/dr-proj-317.png__800.0x764.0_subsampling-2.png"
-                alt=""
-                srcSet="
+      <h1>Browse Datasets</h1>
+      <div className="c-card-list">
+        <li
+          className="c-card--image-top c-card--plain"
+          data-tag-change-from="article"
+        >
+          <h3>11 Sandstones: raw, filtered and segmented data</h3>
+          <p>
+            <strong>Rodrigo Neumann</strong>
+            <br /> IBM Research
+          </p>
+          <p>
+            <a href="/datasets/317/" className="c-button c-button--primary">
+              Dataset #317
+            </a>
+          </p>
+          <img
+            src="https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/65/10/6510c85e-4f00-4bde-b560-31614fb30ce0/dr-proj-317.png__800.0x764.0_subsampling-2.png"
+            alt=""
+            srcSet="
                     https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/65/10/6510c85e-4f00-4bde-b560-31614fb30ce0/dr-proj-317.png__576x576_subsampling-2.png 576w,
                     https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/65/10/6510c85e-4f00-4bde-b560-31614fb30ce0/dr-proj-317.png__768x768_subsampling-2.png 768w,
                     https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/65/10/6510c85e-4f00-4bde-b560-31614fb30ce0/dr-proj-317.png__800.0x764.0_subsampling-2.png 800.0w
                 "
-                sizes="
+            sizes="
                     (max-width: 576px) 576px,
                     (max-width: 768px) 768px,
                     800.0px
                 "
-                className="img-fluid"
-            />
-            </li>
-            <li
-            className="c-card--image-top c-card--plain"
-            data-tag-change-from="article"
-            >
-            <h3>
-                Bentheimer and Nugget Residual Saturation Micro-Computed Tomography Data
-            </h3>
-            <p>
-                <strong>Laura Dalton</strong>
-                <br /> Duke University
-            </p>
-            <p>
-                <a href="/datasets/218/" className="c-button c-button--primary">
-                Dataset #218
-                </a>
-            </p>
-            <img
-                src="https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/a7/be/a7be0632-6120-4dba-8b2d-b02c1727acac/dr-project-218.png__1104.0x1104.0_q85_subject_location-552%2C552_subsampling-2.jpg"
-                alt=""
-                srcSet="
+            className="img-fluid"
+          />
+        </li>
+        <li
+          className="c-card--image-top c-card--plain"
+          data-tag-change-from="article"
+        >
+          <h3>
+            Bentheimer and Nugget Residual Saturation Micro-Computed Tomography
+            Data
+          </h3>
+          <p>
+            <strong>Laura Dalton</strong>
+            <br /> Duke University
+          </p>
+          <p>
+            <a href="/datasets/218/" className="c-button c-button--primary">
+              Dataset #218
+            </a>
+          </p>
+          <img
+            src="https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/a7/be/a7be0632-6120-4dba-8b2d-b02c1727acac/dr-project-218.png__1104.0x1104.0_q85_subject_location-552%2C552_subsampling-2.jpg"
+            alt=""
+            srcSet="
                     https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/a7/be/a7be0632-6120-4dba-8b2d-b02c1727acac/dr-project-218.png__576x576_q85_subsampling-2.jpg 576w,
                     https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/a7/be/a7be0632-6120-4dba-8b2d-b02c1727acac/dr-project-218.png__768x768_q85_subsampling-2.jpg 768w,
                     https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/a7/be/a7be0632-6120-4dba-8b2d-b02c1727acac/dr-project-218.png__992x992_q85_subsampling-2.jpg 992w,
                     https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/a7/be/a7be0632-6120-4dba-8b2d-b02c1727acac/dr-project-218.png__1104.0x1104.0_q85_subject_location-552%2C552_subsampling-2.jpg 1104.0w
                 "
-                sizes="
+            sizes="
                     (max-width: 576px) 576px,
                     (max-width: 768px) 768px,
                     (max-width: 992px) 992px,
                     1104.0px
                 "
-                className="img-fluid"
-            />
-            </li>
-            <li
-            className="c-card--image-top c-card--plain"
-            data-tag-change-from="article"
-            >
-            <h3>11 Sandstones: raw, filtered and segmented data</h3>
-            <p>
-                <strong>Rodrigo Neumann</strong>
-                <br /> IBM Research
-            </p>
-            <p>
-                <a href="/datasets/317/" className="c-button c-button--primary">
-                Dataset #317
-                </a>
-            </p>
-            <img
-                src="https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/65/10/6510c85e-4f00-4bde-b560-31614fb30ce0/dr-proj-317.png__800.0x764.0_subsampling-2.png"
-                alt=""
-                srcSet="
+            className="img-fluid"
+          />
+        </li>
+        <li
+          className="c-card--image-top c-card--plain"
+          data-tag-change-from="article"
+        >
+          <h3>11 Sandstones: raw, filtered and segmented data</h3>
+          <p>
+            <strong>Rodrigo Neumann</strong>
+            <br /> IBM Research
+          </p>
+          <p>
+            <a href="/datasets/317/" className="c-button c-button--primary">
+              Dataset #317
+            </a>
+          </p>
+          <img
+            src="https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/65/10/6510c85e-4f00-4bde-b560-31614fb30ce0/dr-proj-317.png__800.0x764.0_subsampling-2.png"
+            alt=""
+            srcSet="
                     https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/65/10/6510c85e-4f00-4bde-b560-31614fb30ce0/dr-proj-317.png__576x576_subsampling-2.png 576w,
                     https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/65/10/6510c85e-4f00-4bde-b560-31614fb30ce0/dr-proj-317.png__768x768_subsampling-2.png 768w,
                     https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/65/10/6510c85e-4f00-4bde-b560-31614fb30ce0/dr-proj-317.png__800.0x764.0_subsampling-2.png 800.0w
                 "
-                sizes="
+            sizes="
                     (max-width: 576px) 576px,
                     (max-width: 768px) 768px,
                     800.0px
                 "
-                className="img-fluid"
-            />
-            </li>
-            <li
-            className="c-card--image-top c-card--plain"
-            data-tag-change-from="article"
-            >
-            <h3>
-                Bentheimer and Nugget Residual Saturation Micro-Computed Tomography Data
-            </h3>
-            <p>
-                <strong>Laura Dalton</strong>
-                <br /> Duke University
-            </p>
-            <p>
-                <a href="/datasets/218/" className="c-button c-button--primary">
-                Dataset #218
-                </a>
-            </p>
-            <img
-                src="https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/a7/be/a7be0632-6120-4dba-8b2d-b02c1727acac/dr-project-218.png__1104.0x1104.0_q85_subject_location-552%2C552_subsampling-2.jpg"
-                alt=""
-                srcSet="
+            className="img-fluid"
+          />
+        </li>
+        <li
+          className="c-card--image-top c-card--plain"
+          data-tag-change-from="article"
+        >
+          <h3>
+            Bentheimer and Nugget Residual Saturation Micro-Computed Tomography
+            Data
+          </h3>
+          <p>
+            <strong>Laura Dalton</strong>
+            <br /> Duke University
+          </p>
+          <p>
+            <a href="/datasets/218/" className="c-button c-button--primary">
+              Dataset #218
+            </a>
+          </p>
+          <img
+            src="https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/a7/be/a7be0632-6120-4dba-8b2d-b02c1727acac/dr-project-218.png__1104.0x1104.0_q85_subject_location-552%2C552_subsampling-2.jpg"
+            alt=""
+            srcSet="
                     https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/a7/be/a7be0632-6120-4dba-8b2d-b02c1727acac/dr-project-218.png__576x576_q85_subsampling-2.jpg 576w,
                     https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/a7/be/a7be0632-6120-4dba-8b2d-b02c1727acac/dr-project-218.png__768x768_q85_subsampling-2.jpg 768w,
                     https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/a7/be/a7be0632-6120-4dba-8b2d-b02c1727acac/dr-project-218.png__992x992_q85_subsampling-2.jpg 992w,
                     https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/a7/be/a7be0632-6120-4dba-8b2d-b02c1727acac/dr-project-218.png__1104.0x1104.0_q85_subject_location-552%2C552_subsampling-2.jpg 1104.0w
                 "
-                sizes="
+            sizes="
                     (max-width: 576px) 576px,
                     (max-width: 768px) 768px,
                     (max-width: 992px) 992px,
                     1104.0px
                 "
-                className="img-fluid"
-            />
-            </li>
-            <li
-            className="c-card--image-top c-card--plain"
-            data-tag-change-from="article"
-            >
-            <h3>11 Sandstones: raw, filtered and segmented data</h3>
-            <p>
-                <strong>Rodrigo Neumann</strong>
-                <br /> IBM Research
-            </p>
-            <p>
-                <a href="/datasets/317/" className="c-button c-button--primary">
-                Dataset #317
-                </a>
-            </p>
-            <img
-                src="https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/65/10/6510c85e-4f00-4bde-b560-31614fb30ce0/dr-proj-317.png__800.0x764.0_subsampling-2.png"
-                alt=""
-                srcSet="
+            className="img-fluid"
+          />
+        </li>
+        <li
+          className="c-card--image-top c-card--plain"
+          data-tag-change-from="article"
+        >
+          <h3>11 Sandstones: raw, filtered and segmented data</h3>
+          <p>
+            <strong>Rodrigo Neumann</strong>
+            <br /> IBM Research
+          </p>
+          <p>
+            <a href="/datasets/317/" className="c-button c-button--primary">
+              Dataset #317
+            </a>
+          </p>
+          <img
+            src="https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/65/10/6510c85e-4f00-4bde-b560-31614fb30ce0/dr-proj-317.png__800.0x764.0_subsampling-2.png"
+            alt=""
+            srcSet="
                     https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/65/10/6510c85e-4f00-4bde-b560-31614fb30ce0/dr-proj-317.png__576x576_subsampling-2.png 576w,
                     https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/65/10/6510c85e-4f00-4bde-b560-31614fb30ce0/dr-proj-317.png__768x768_subsampling-2.png 768w,
                     https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/65/10/6510c85e-4f00-4bde-b560-31614fb30ce0/dr-proj-317.png__800.0x764.0_subsampling-2.png 800.0w
                 "
-                sizes="
+            sizes="
                     (max-width: 576px) 576px,
                     (max-width: 768px) 768px,
                     800.0px
                 "
-                className="img-fluid"
-            />
-            </li>
-            <li
-            className="c-card--image-top c-card--plain"
-            data-tag-change-from="article"
-            >
-            <h3>
-                Bentheimer and Nugget Residual Saturation Micro-Computed Tomography Data
-            </h3>
-            <p>
-                <strong>Laura Dalton</strong>
-                <br /> Duke University
-            </p>
-            <p>
-                <a href="/datasets/218/" className="c-button c-button--primary">
-                Dataset #218
-                </a>
-            </p>
-            <img
-                src="https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/a7/be/a7be0632-6120-4dba-8b2d-b02c1727acac/dr-project-218.png__1104.0x1104.0_q85_subject_location-552%2C552_subsampling-2.jpg"
-                alt=""
-                srcSet="
+            className="img-fluid"
+          />
+        </li>
+        <li
+          className="c-card--image-top c-card--plain"
+          data-tag-change-from="article"
+        >
+          <h3>
+            Bentheimer and Nugget Residual Saturation Micro-Computed Tomography
+            Data
+          </h3>
+          <p>
+            <strong>Laura Dalton</strong>
+            <br /> Duke University
+          </p>
+          <p>
+            <a href="/datasets/218/" className="c-button c-button--primary">
+              Dataset #218
+            </a>
+          </p>
+          <img
+            src="https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/a7/be/a7be0632-6120-4dba-8b2d-b02c1727acac/dr-project-218.png__1104.0x1104.0_q85_subject_location-552%2C552_subsampling-2.jpg"
+            alt=""
+            srcSet="
                     https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/a7/be/a7be0632-6120-4dba-8b2d-b02c1727acac/dr-project-218.png__576x576_q85_subsampling-2.jpg 576w,
                     https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/a7/be/a7be0632-6120-4dba-8b2d-b02c1727acac/dr-project-218.png__768x768_q85_subsampling-2.jpg 768w,
                     https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/a7/be/a7be0632-6120-4dba-8b2d-b02c1727acac/dr-project-218.png__992x992_q85_subsampling-2.jpg 992w,
                     https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/a7/be/a7be0632-6120-4dba-8b2d-b02c1727acac/dr-project-218.png__1104.0x1104.0_q85_subject_location-552%2C552_subsampling-2.jpg 1104.0w
                 "
-                sizes="
+            sizes="
                     (max-width: 576px) 576px,
                     (max-width: 768px) 768px,
                     (max-width: 992px) 992px,
                     1104.0px
                 "
-                className="img-fluid"
-            />
-            </li>
-            <li
-            className="c-card--image-top c-card--plain"
-            data-tag-change-from="article"
-            >
-            <h3>11 Sandstones: raw, filtered and segmented data</h3>
-            <p>
-                <strong>Rodrigo Neumann</strong>
-                <br /> IBM Research
-            </p>
-            <p>
-                <a href="/datasets/317/" className="c-button c-button--primary">
-                Dataset #317
-                </a>
-            </p>
-            <img
-                src="https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/65/10/6510c85e-4f00-4bde-b560-31614fb30ce0/dr-proj-317.png__800.0x764.0_subsampling-2.png"
-                alt=""
-                srcSet="
+            className="img-fluid"
+          />
+        </li>
+        <li
+          className="c-card--image-top c-card--plain"
+          data-tag-change-from="article"
+        >
+          <h3>11 Sandstones: raw, filtered and segmented data</h3>
+          <p>
+            <strong>Rodrigo Neumann</strong>
+            <br /> IBM Research
+          </p>
+          <p>
+            <a href="/datasets/317/" className="c-button c-button--primary">
+              Dataset #317
+            </a>
+          </p>
+          <img
+            src="https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/65/10/6510c85e-4f00-4bde-b560-31614fb30ce0/dr-proj-317.png__800.0x764.0_subsampling-2.png"
+            alt=""
+            srcSet="
                     https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/65/10/6510c85e-4f00-4bde-b560-31614fb30ce0/dr-proj-317.png__576x576_subsampling-2.png 576w,
                     https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/65/10/6510c85e-4f00-4bde-b560-31614fb30ce0/dr-proj-317.png__768x768_subsampling-2.png 768w,
                     https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/65/10/6510c85e-4f00-4bde-b560-31614fb30ce0/dr-proj-317.png__800.0x764.0_subsampling-2.png 800.0w
                 "
-                sizes="
+            sizes="
                     (max-width: 576px) 576px,
                     (max-width: 768px) 768px,
                     800.0px
                 "
-                className="img-fluid"
-            />
-            </li>
-            <li
-            className="c-card--image-top c-card--plain"
-            data-tag-change-from="article"
-            >
-            <h3>
-                Bentheimer and Nugget Residual Saturation Micro-Computed Tomography Data
-            </h3>
-            <p>
-                <strong>Laura Dalton</strong>
-                <br /> Duke University
-            </p>
-            <p>
-                <a href="/datasets/218/" className="c-button c-button--primary">
-                Dataset #218
-                </a>
-            </p>
-            <img
-                src="https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/a7/be/a7be0632-6120-4dba-8b2d-b02c1727acac/dr-project-218.png__1104.0x1104.0_q85_subject_location-552%2C552_subsampling-2.jpg"
-                alt=""
-                srcSet="
+            className="img-fluid"
+          />
+        </li>
+        <li
+          className="c-card--image-top c-card--plain"
+          data-tag-change-from="article"
+        >
+          <h3>
+            Bentheimer and Nugget Residual Saturation Micro-Computed Tomography
+            Data
+          </h3>
+          <p>
+            <strong>Laura Dalton</strong>
+            <br /> Duke University
+          </p>
+          <p>
+            <a href="/datasets/218/" className="c-button c-button--primary">
+              Dataset #218
+            </a>
+          </p>
+          <img
+            src="https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/a7/be/a7be0632-6120-4dba-8b2d-b02c1727acac/dr-project-218.png__1104.0x1104.0_q85_subject_location-552%2C552_subsampling-2.jpg"
+            alt=""
+            srcSet="
                     https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/a7/be/a7be0632-6120-4dba-8b2d-b02c1727acac/dr-project-218.png__576x576_q85_subsampling-2.jpg 576w,
                     https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/a7/be/a7be0632-6120-4dba-8b2d-b02c1727acac/dr-project-218.png__768x768_q85_subsampling-2.jpg 768w,
                     https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/a7/be/a7be0632-6120-4dba-8b2d-b02c1727acac/dr-project-218.png__992x992_q85_subsampling-2.jpg 992w,
                     https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/a7/be/a7be0632-6120-4dba-8b2d-b02c1727acac/dr-project-218.png__1104.0x1104.0_q85_subject_location-552%2C552_subsampling-2.jpg 1104.0w
                 "
-                sizes="
+            sizes="
                     (max-width: 576px) 576px,
                     (max-width: 768px) 768px,
                     (max-width: 992px) 992px,
                     1104.0px
                 "
-                className="img-fluid"
-            />
-            </li>
-        </div>
-        <div className="o-section">
-            {/* <!-- FAQ: Bootstrap 4's Pagination pattern --> */}
-            <ul className="pagination">
-            <li className="page-item disabled">
-                <span className="page-link">&lt; Previous</span>
-            </li>
-            <li className="page-item active">
-                <span className="page-link">1</span>
-            </li>
-            <li className="page-item disabled">
-                <span className="page-link">Next &gt;</span>
-            </li>
-            </ul>
-        </div>
+            className="img-fluid"
+          />
+        </li>
+      </div>
+      <div className="o-section">
+        {/* <!-- FAQ: Bootstrap 4's Pagination pattern --> */}
+        <ul className="pagination">
+          <li className="page-item disabled">
+            <span className="page-link">&lt; Previous</span>
+          </li>
+          <li className="page-item active">
+            <span className="page-link">1</span>
+          </li>
+          <li className="page-item disabled">
+            <span className="page-link">Next &gt;</span>
+          </li>
+        </ul>
+      </div>
     </div>
   );
 }
diff --git a/client/src/components/_common/CMSBreadcrumbs/CMSBreadcrumbs.jsx b/client/src/components/_common/CMSBreadcrumbs/CMSBreadcrumbs.jsx
index d71821b62d..0abe4d2a2f 100644
--- a/client/src/components/_common/CMSBreadcrumbs/CMSBreadcrumbs.jsx
+++ b/client/src/components/_common/CMSBreadcrumbs/CMSBreadcrumbs.jsx
@@ -24,18 +24,20 @@ export default function CMSBreadcrumbs() {
       <style dangerouslySetInnerHTML={{ __html: breadcrumbCSS }} />
       <nav className="s-breadcrumbs" id="cms-breadcrumbs">
         <ol itemScope itemType="https://schema.org/BreadcrumbList">
-          <li itemScope
-              itemProp="itemListElement"
-              itemType="https://schema.org/ListItem"
+          <li
+            itemScope
+            itemProp="itemListElement"
+            itemType="https://schema.org/ListItem"
           >
             <a href="/" itemProp="item">
               <span itemProp="name">Index</span>
             </a>
             <meta itemProp="position" content="1" />
           </li>
-          <li itemScope
-              itemProp="itemListElement"
-              itemType="https://schema.org/ListItem"
+          <li
+            itemScope
+            itemProp="itemListElement"
+            itemType="https://schema.org/ListItem"
           >
             <span itemProp="name">Browse Datasets</span>
             <meta itemProp="position" content="2" />
@@ -44,4 +46,4 @@ export default function CMSBreadcrumbs() {
       </nav>
     </>
   );
-};
+}

From 217d2286f8de40195464a6c35d1c48d744361423 Mon Sep 17 00:00:00 2001
From: Wesley B <62723358+wesleyboar@users.noreply.github.com>
Date: Tue, 24 Jun 2025 19:13:01 -0500
Subject: [PATCH 36/79] chore: npm run lint:css

---
 .../DataFiles/DataFilesForDPM/DataFilesForDPM.global.css      | 4 ++--
 client/src/index.css                                          | 1 +
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPM.global.css b/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPM.global.css
index dc7049efb7..5cdb99597e 100644
--- a/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPM.global.css
+++ b/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPM.global.css
@@ -1,3 +1,3 @@
 /* IDEA: Move these styles from CDN to here, though they would still need to be global, unless tediously converted to module */
-@import url(https://cdn.jsdelivr.net/gh/TACC/Core-CMS-Custom@5717c8d/digitalrocks_assets/css/cms.css) layer(mimic-cms);
-@import url(https://cdn.jsdelivr.net/gh/TACC/Core-CMS-Custom@5717c8d/digitalrocks_assets/css/for-core-styles.css) layer(mimic-cms);
+@import url('https://cdn.jsdelivr.net/gh/TACC/Core-CMS-Custom@5717c8d/digitalrocks_assets/css/cms.css') layer(mimic-cms);
+@import url('https://cdn.jsdelivr.net/gh/TACC/Core-CMS-Custom@5717c8d/digitalrocks_assets/css/for-core-styles.css') layer(mimic-cms);
diff --git a/client/src/index.css b/client/src/index.css
index 4902d17c03..1702163d39 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -106,4 +106,5 @@ body > .content {
   bottom: 0;
 }
 
+/* end @layer portal */
 }

From 054c3f988350c82db94e874c26fa4e70c66fc59f Mon Sep 17 00:00:00 2001
From: Wesley B <62723358+wesleyboar@users.noreply.github.com>
Date: Thu, 26 Jun 2025 11:57:11 -0500
Subject: [PATCH 37/79] fix: footer on CMS layout

---
 client/src/index.css                         | 11 +++++------
 server/portal/templates/includes/cms_ui.html |  6 ++++++
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/client/src/index.css b/client/src/index.css
index 1702163d39..5e0eba4df2 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -53,8 +53,7 @@ code {
 /* FAQ: The `html` and `body` boxes are only as tall as their content
         (which may be shorter than window height), cannot have siblings elements
         (would be influenced by force stretch), so force stretch outward. */
-html,
-body {
+body:not(.has-cms-ui) {
   /* As a stretched item */
   position: absolute;
   left: 0;
@@ -77,12 +76,12 @@ body {
 /* FAQ: The `.content` and `#react-root` boxes are only as tall as their content
         (which may be shorter than window height), can have siblings elements
         (would be influenced by force stretch), so gently stretch outward. */
-body {
+body:not(.has-cms-ui) {
   /* As a flex container */
   display: flex;
   flex-direction: column;
 }
-body > .content {
+body:not(.has-cms-ui) .content {
   /* As a flex item */
   flex-grow: 1;
 
@@ -90,14 +89,14 @@ body > .content {
   display: flex;
   flex-direction: column;
 }
-#react-root {
+body:not(.has-cms-ui) #react-root {
   /* As a flex item */
   flex-grow: 1;
 
   /* As a stretched item container */
   position: relative;
 }
-#react-root > :only-child {
+body:not(.has-cms-ui) #react-root > :only-child {
   /* As a stretched item */
   position: absolute;
   left: 0;
diff --git a/server/portal/templates/includes/cms_ui.html b/server/portal/templates/includes/cms_ui.html
index 1620ab5092..b95ccecd0e 100644
--- a/server/portal/templates/includes/cms_ui.html
+++ b/server/portal/templates/includes/cms_ui.html
@@ -32,6 +32,10 @@
     document.getElementById('cms-ui-styles').media = media;
   };
 
+  const toggleLayout = (enabled) => {
+    document.body.classList.toggle('has-cms-ui', enabled);
+  };
+
   const useCMSFooter = async () => {
     footerEl = document.getElementById('footer');
 
@@ -49,10 +53,12 @@
 
   window.addEventListener('cms-styles-activated', async () => {
     toggleStyles(true);
+    toggleLayout(true);
     await useCMSFooter();
   });
   window.addEventListener('cms-styles-deactivated', () => {
     toggleStyles(false);
+    toggleLayout(false);
     restorePortalFooter();
   });
 </script>

From fcc6120375389d6920fe5c0aeaa5f60b39afcbf5 Mon Sep 17 00:00:00 2001
From: Wesley B <62723358+wesleyboar@users.noreply.github.com>
Date: Thu, 26 Jun 2025 12:05:26 -0500
Subject: [PATCH 38/79] chore: remove duplicate code

---
 .../DataFiles/DataFilesForDPM/DataFilesForDPM.jsx      | 10 +---------
 1 file changed, 1 insertion(+), 9 deletions(-)

diff --git a/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPM.jsx b/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPM.jsx
index 152cea2b25..bb5b3040d7 100644
--- a/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPM.jsx
+++ b/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPM.jsx
@@ -1,4 +1,4 @@
-import { React, useEffect } from 'react';
+import { React } from 'react';  // Remove useEffect
 import CMSWrapper from '_common/CMSWrapper';
 
 import DataFilesForDPMBreadcrumbs from './DataFilesForDPMBreadcrumbs';
@@ -7,14 +7,6 @@ import DataFilesForDPMBrowse from './DataFilesForDPMBrowse';
 import './DataFilesForDPM.global.css';
 
 function DataGallery() {
-  useEffect(() => {
-    // To (de)activate CMS styles on (un)mount
-    window.dispatchEvent(new CustomEvent('cms-styles-activated'));
-    return () => {
-      window.dispatchEvent(new CustomEvent('cms-styles-deactivated'));
-    };
-  }, []);
-
   return (
     <CMSWrapper>
       <DataFilesForDPMBreadcrumbs />

From 3e73aaa4bd159cad89f1eaa573697c4761eee61f Mon Sep 17 00:00:00 2001
From: Wesley B <62723358+wesleyboar@users.noreply.github.com>
Date: Thu, 26 Jun 2025 12:18:06 -0500
Subject: [PATCH 39/79] chore: remove stray `async` keyword

---
 server/portal/templates/includes/cms_ui.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/server/portal/templates/includes/cms_ui.html b/server/portal/templates/includes/cms_ui.html
index b95ccecd0e..1b95c8bd01 100644
--- a/server/portal/templates/includes/cms_ui.html
+++ b/server/portal/templates/includes/cms_ui.html
@@ -45,7 +45,7 @@
       await replaceFromURL('/cms/markup/footer', footerEl);
     }
   };
-  const restorePortalFooter = async () => {
+  const restorePortalFooter = () => {
     if (footerEl && footerOriginalContent) {
       footerEl.innerHTML = footerOriginalContent;
     }

From 8791975e8f6bd29d766cef5ce0a8d3c48d6e1cb8 Mon Sep 17 00:00:00 2001
From: Wesley B <62723358+wesleyboar@users.noreply.github.com>
Date: Fri, 27 Jun 2025 15:12:35 -0500
Subject: [PATCH 40/79] fix: CMS footer present upon return to regular Portal

---
 server/portal/templates/includes/cms_ui.html | 20 +++++++++-----------
 1 file changed, 9 insertions(+), 11 deletions(-)

diff --git a/server/portal/templates/includes/cms_ui.html b/server/portal/templates/includes/cms_ui.html
index 1b95c8bd01..9b1671a012 100644
--- a/server/portal/templates/includes/cms_ui.html
+++ b/server/portal/templates/includes/cms_ui.html
@@ -25,7 +25,7 @@
 
 <script id="cms-ui-script" type="module">
   let footerEl = null;
-  let footerOriginalContent = null;
+  let footerOriginalMarkup = null;
 
   const toggleStyles = (enabled) => {
     const media = (enabled) ? 'all' : 'not all';
@@ -38,25 +38,23 @@
 
   const useCMSFooter = async () => {
     footerEl = document.getElementById('footer');
+    footerOriginalMarkup = footerEl.outerHTML;
 
-    if (footerEl?.childNodes.length) {
-      footerOriginalContent = footerEl.innerHTML;
-      const { replaceFromURL } = await import('/static/site_cms/js/modules/importHTML.js');
-      await replaceFromURL('/cms/markup/footer', footerEl);
-    }
+    const { replaceFromURL } = await import('/static/site_cms/js/modules/importHTML.js');
+    footerEl = await replaceFromURL('/cms/markup/footer', footerEl);
   };
   const restorePortalFooter = () => {
-    if (footerEl && footerOriginalContent) {
-      footerEl.innerHTML = footerOriginalContent;
-    }
+    footerEl.outerHTML = footerOriginalMarkup;
   };
 
-  window.addEventListener('cms-styles-activated', async () => {
+  window.addEventListener('cms-styles-activated', async (event) => {
+    console.log(`event: ${event.type}`);
     toggleStyles(true);
     toggleLayout(true);
     await useCMSFooter();
   });
-  window.addEventListener('cms-styles-deactivated', () => {
+  window.addEventListener('cms-styles-deactivated', (event) => {
+    console.log(`event: ${event.type}`);
     toggleStyles(false);
     toggleLayout(false);
     restorePortalFooter();

From a84f12b1004962df6e9e297ac696635f9e1058a4 Mon Sep 17 00:00:00 2001
From: Wesley B <62723358+wesleyboar@users.noreply.github.com>
Date: Fri, 27 Jun 2025 15:31:53 -0500
Subject: [PATCH 41/79] fix: DataFilesForDPM.global.css bleed

---
 .../DataFilesForDPM.global.css                |  3 ---
 .../DataFilesForDPM/DataFilesForDPM.jsx       | 26 ++++++++++++++++---
 2 files changed, 23 insertions(+), 6 deletions(-)
 delete mode 100644 client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPM.global.css

diff --git a/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPM.global.css b/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPM.global.css
deleted file mode 100644
index 5cdb99597e..0000000000
--- a/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPM.global.css
+++ /dev/null
@@ -1,3 +0,0 @@
-/* IDEA: Move these styles from CDN to here, though they would still need to be global, unless tediously converted to module */
-@import url('https://cdn.jsdelivr.net/gh/TACC/Core-CMS-Custom@5717c8d/digitalrocks_assets/css/cms.css') layer(mimic-cms);
-@import url('https://cdn.jsdelivr.net/gh/TACC/Core-CMS-Custom@5717c8d/digitalrocks_assets/css/for-core-styles.css') layer(mimic-cms);
diff --git a/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPM.jsx b/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPM.jsx
index bb5b3040d7..3169db71d5 100644
--- a/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPM.jsx
+++ b/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPM.jsx
@@ -1,12 +1,32 @@
-import { React } from 'react';  // Remove useEffect
+import { React, useEffect } from 'react';
 import CMSWrapper from '_common/CMSWrapper';
 
 import DataFilesForDPMBreadcrumbs from './DataFilesForDPMBreadcrumbs';
 import DataFilesForDPMBrowse from './DataFilesForDPMBrowse';
 
-import './DataFilesForDPM.global.css';
-
 function DataGallery() {
+  useEffect(() => {
+    // To load external CSS and unload on umount
+    // FAQ: As ….global.css, styles would remain after unmount;
+    //      effect seen on system-status/ table margin bottom
+    const cssUrls = [
+      'https://cdn.jsdelivr.net/gh/TACC/Core-CMS-Custom@5717c8d/digitalrocks_assets/css/cms.css',
+      'https://cdn.jsdelivr.net/gh/TACC/Core-CMS-Custom@5717c8d/digitalrocks_assets/css/for-core-styles.css'
+    ];
+
+    const links = cssUrls.map(url => {
+      const link = document.createElement('link');
+      link.rel = 'stylesheet';
+      link.href = url;
+      document.head.appendChild(link);
+      return link;
+    });
+
+    return () => {
+      links.forEach(link => link.remove());
+    };
+  }, []);
+
   return (
     <CMSWrapper>
       <DataFilesForDPMBreadcrumbs />

From 6017b41793718050829c2b9fed679fbb2285bbf1 Mon Sep 17 00:00:00 2001
From: Wesley B <62723358+wesleyboar@users.noreply.github.com>
Date: Fri, 27 Jun 2025 16:00:09 -0500
Subject: [PATCH 42/79] feat: CMSWrapper useDynamicStylesheets

---
 .../DataFilesForDPM/DataFilesForDPM.jsx       | 26 +++++------------
 .../_common/CMSWrapper/CMSWrapper.jsx         | 28 +++++++++++++++++++
 2 files changed, 35 insertions(+), 19 deletions(-)

diff --git a/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPM.jsx b/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPM.jsx
index 3169db71d5..3dad2432fa 100644
--- a/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPM.jsx
+++ b/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPM.jsx
@@ -4,27 +4,15 @@ import CMSWrapper from '_common/CMSWrapper';
 import DataFilesForDPMBreadcrumbs from './DataFilesForDPMBreadcrumbs';
 import DataFilesForDPMBrowse from './DataFilesForDPMBrowse';
 
-function DataGallery() {
+function DataFilesForDPM() {
   useEffect(() => {
-    // To load external CSS and unload on umount
-    // FAQ: As ….global.css, styles would remain after unmount;
-    //      effect seen on system-status/ table margin bottom
-    const cssUrls = [
+    // FAQ: If @import'ed via DataFilesForDPM.global.css,
+    //      styles would remain active after component unmount
+    //      (the effect was seen on system-status/ table margin bottom)
+    return CMSWrapper.useDynamicStylesheets([
       'https://cdn.jsdelivr.net/gh/TACC/Core-CMS-Custom@5717c8d/digitalrocks_assets/css/cms.css',
       'https://cdn.jsdelivr.net/gh/TACC/Core-CMS-Custom@5717c8d/digitalrocks_assets/css/for-core-styles.css'
-    ];
-
-    const links = cssUrls.map(url => {
-      const link = document.createElement('link');
-      link.rel = 'stylesheet';
-      link.href = url;
-      document.head.appendChild(link);
-      return link;
-    });
-
-    return () => {
-      links.forEach(link => link.remove());
-    };
+    ], 'DataFilesForDPM');
   }, []);
 
   return (
@@ -35,4 +23,4 @@ function DataGallery() {
   );
 }
 
-export default DataGallery;
+export default DataFilesForDPM;
diff --git a/client/src/components/_common/CMSWrapper/CMSWrapper.jsx b/client/src/components/_common/CMSWrapper/CMSWrapper.jsx
index e15f4c4488..f7f6cba423 100644
--- a/client/src/components/_common/CMSWrapper/CMSWrapper.jsx
+++ b/client/src/components/_common/CMSWrapper/CMSWrapper.jsx
@@ -18,6 +18,34 @@ function CMSWrapper({ children }) {
   );
 }
 
+/**
+ * Dynamically load stylesheets and returns a cleanup function
+ *
+ * @param {string[]} urls - Array of stylesheet URLs to load
+ * @param {string} [componentName] - Name of the component (for log and debug)
+ * @returns {Function} Cleanup function that unloads the stylesheets
+ *
+ * @example
+ * useEffect(() => {
+ *   return CMSWrapper.useDynamicStylesheets([
+ *     'https://example.com/styles1.css',
+ *     'https://example.com/styles2.css'
+ *   ]);
+ * }, []);
+ */
+CMSWrapper.useDynamicStylesheets = (urls, componentName) => {
+  const links = urls.map((url, index) => {
+    const link = document.createElement('link');
+    link.rel = 'stylesheet';
+    link.href = url;
+    link.id = `cms-wrapper-styles-from-${componentName || 'undefined'}-${index}`;
+    document.head.appendChild(link);
+    return link;
+  });
+  
+  return () => links.forEach(link => link.remove());
+};
+
 CMSWrapper.propTypes = {
   children: PropTypes.node.isRequired,
 };

From b9aac2249a88c02b34323440c4863ccbe1616004 Mon Sep 17 00:00:00 2001
From: Wesley B <62723358+wesleyboar@users.noreply.github.com>
Date: Fri, 27 Jun 2025 16:07:30 -0500
Subject: [PATCH 43/79] refactor: move <main> to CMSWrapper only

---
 client/src/components/_common/CMSWrapper/CMSWrapper.jsx       | 4 ++--
 .../apps/workbench/templates/portal/apps/workbench/index.html | 2 +-
 .../apps/workbench/templates/portal/apps/workbench/index.j2   | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/client/src/components/_common/CMSWrapper/CMSWrapper.jsx b/client/src/components/_common/CMSWrapper/CMSWrapper.jsx
index f7f6cba423..4d1447362b 100644
--- a/client/src/components/_common/CMSWrapper/CMSWrapper.jsx
+++ b/client/src/components/_common/CMSWrapper/CMSWrapper.jsx
@@ -12,9 +12,9 @@ function CMSWrapper({ children }) {
   }, []);
 
   return (
-    <div id="mimic-cms" className="container">
+    <main id="mimic-cms" className="container">
       {children}
-    </div>
+    </main>
   );
 }
 
diff --git a/server/portal/apps/workbench/templates/portal/apps/workbench/index.html b/server/portal/apps/workbench/templates/portal/apps/workbench/index.html
index bf599ca24f..4e81c34bf4 100644
--- a/server/portal/apps/workbench/templates/portal/apps/workbench/index.html
+++ b/server/portal/apps/workbench/templates/portal/apps/workbench/index.html
@@ -9,7 +9,7 @@
   <link rel="stylesheet" href="">
 {% endblock %}
 {% block content %}
-  <main id="react-root"></main>
+  <div id="react-root"></div>
 {% endblock %}
 {% block scripts %}
   <script> window.__INITIAL_SETUP_COMPLETE__ = {{ setup_complete|yesno:"true,false" }}; </script>
diff --git a/server/portal/apps/workbench/templates/portal/apps/workbench/index.j2 b/server/portal/apps/workbench/templates/portal/apps/workbench/index.j2
index c325fdd851..df67ff2acc 100644
--- a/server/portal/apps/workbench/templates/portal/apps/workbench/index.j2
+++ b/server/portal/apps/workbench/templates/portal/apps/workbench/index.j2
@@ -9,7 +9,7 @@
   <link rel="stylesheet" href="<%= htmlWebpackPlugin.files.css[1] %>">
 {% endblock %}
 {% block content %}
-  <main id="react-root"></main>
+  <div id="react-root"></div>
 {% endblock %}
 {% block scripts %}
   <script> window.__INITIAL_SETUP_COMPLETE__ = {{ setup_complete|yesno:"true,false" }}; </script>

From 56792400acd396005e8642fc5036436907d0ab4c Mon Sep 17 00:00:00 2001
From: Wesley B <62723358+wesleyboar@users.noreply.github.com>
Date: Fri, 27 Jun 2025 16:44:39 -0500
Subject: [PATCH 44/79] chore: npm prettier --write client

---
 .../DataFiles/DataFilesForDPM/DataFilesForDPM.jsx     | 11 +++++++----
 .../src/components/_common/CMSWrapper/CMSWrapper.jsx  |  8 +++++---
 2 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPM.jsx b/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPM.jsx
index 3dad2432fa..f094e66387 100644
--- a/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPM.jsx
+++ b/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPM.jsx
@@ -9,10 +9,13 @@ function DataFilesForDPM() {
     // FAQ: If @import'ed via DataFilesForDPM.global.css,
     //      styles would remain active after component unmount
     //      (the effect was seen on system-status/ table margin bottom)
-    return CMSWrapper.useDynamicStylesheets([
-      'https://cdn.jsdelivr.net/gh/TACC/Core-CMS-Custom@5717c8d/digitalrocks_assets/css/cms.css',
-      'https://cdn.jsdelivr.net/gh/TACC/Core-CMS-Custom@5717c8d/digitalrocks_assets/css/for-core-styles.css'
-    ], 'DataFilesForDPM');
+    return CMSWrapper.useDynamicStylesheets(
+      [
+        'https://cdn.jsdelivr.net/gh/TACC/Core-CMS-Custom@5717c8d/digitalrocks_assets/css/cms.css',
+        'https://cdn.jsdelivr.net/gh/TACC/Core-CMS-Custom@5717c8d/digitalrocks_assets/css/for-core-styles.css',
+      ],
+      'DataFilesForDPM'
+    );
   }, []);
 
   return (
diff --git a/client/src/components/_common/CMSWrapper/CMSWrapper.jsx b/client/src/components/_common/CMSWrapper/CMSWrapper.jsx
index 4d1447362b..04f1811d63 100644
--- a/client/src/components/_common/CMSWrapper/CMSWrapper.jsx
+++ b/client/src/components/_common/CMSWrapper/CMSWrapper.jsx
@@ -38,12 +38,14 @@ CMSWrapper.useDynamicStylesheets = (urls, componentName) => {
     const link = document.createElement('link');
     link.rel = 'stylesheet';
     link.href = url;
-    link.id = `cms-wrapper-styles-from-${componentName || 'undefined'}-${index}`;
+    link.id = `cms-wrapper-styles-from-${
+      componentName || 'undefined'
+    }-${index}`;
     document.head.appendChild(link);
     return link;
   });
-  
-  return () => links.forEach(link => link.remove());
+
+  return () => links.forEach((link) => link.remove());
 };
 
 CMSWrapper.propTypes = {

From 9b799052f8dd3991f87239198d02b3f4c92dfa6b Mon Sep 17 00:00:00 2001
From: Wesley B <62723358+wesleyboar@users.noreply.github.com>
Date: Fri, 27 Jun 2025 16:45:10 -0500
Subject: [PATCH 45/79] docs: remove pagination comment

---
 .../DataFiles/DataFilesForDPM/DataFilesForDPMBrowse.jsx          | 1 -
 1 file changed, 1 deletion(-)

diff --git a/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPMBrowse.jsx b/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPMBrowse.jsx
index 47058931f9..4029fa557b 100644
--- a/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPMBrowse.jsx
+++ b/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPMBrowse.jsx
@@ -268,7 +268,6 @@ export default function DataFilesForDPMBrowse() {
         </li>
       </div>
       <div className="o-section">
-        {/* <!-- FAQ: Bootstrap 4's Pagination pattern --> */}
         <ul className="pagination">
           <li className="page-item disabled">
             <span className="page-link">&lt; Previous</span>

From c6edca90d8c491513d9a2aa0b2bd213f5a20325d Mon Sep 17 00:00:00 2001
From: Wesley B <62723358+wesleyboar@users.noreply.github.com>
Date: Fri, 27 Jun 2025 16:46:39 -0500
Subject: [PATCH 46/79] chore: comment format

---
 .../DataFiles/DataFilesForDPM/DataFilesForDPMBrowse.jsx         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPMBrowse.jsx b/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPMBrowse.jsx
index 4029fa557b..ed887fa83c 100644
--- a/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPMBrowse.jsx
+++ b/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPMBrowse.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-/* TODO: Replace use of this with component(s) from WC-219 */
+// TODO: Replace use of this with component(s) from WC-219
 export default function DataFilesForDPMBrowse() {
   return (
     <div className="o-section">

From 3490cc89c7f10a04c05215619ab41a0121c8ac32 Mon Sep 17 00:00:00 2001
From: Wesley B <62723358+wesleyboar@users.noreply.github.com>
Date: Fri, 27 Jun 2025 17:45:25 -0500
Subject: [PATCH 47/79] test: other sample content

---
 .../DataFilesForDPM/DataFilesForDPMData.jsx   | 735 ++++++++++++++
 .../DataFilesForDPM/DataFilesForDPMRead.jsx   | 921 ++++++++++++++++++
 2 files changed, 1656 insertions(+)
 create mode 100644 client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPMData.jsx
 create mode 100644 client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPMRead.jsx

diff --git a/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPMData.jsx b/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPMData.jsx
new file mode 100644
index 0000000000..1992ee8ac7
--- /dev/null
+++ b/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPMData.jsx
@@ -0,0 +1,735 @@
+import React from 'react';
+
+import style from './DataFilesForDPM.module.css';
+
+// TODO: Replace use of this with component(s) from WC-219
+export default function DataFilesForDPMData() {
+  return (
+    <>
+      <section className="o-section">
+        <h3 className="u-title-needs-colon">
+          <span>Origin Data</span> <strong>Berea_2d25um_grayscale.raw</strong>
+        </h3>
+
+        <p>
+          Grayscale image data obtained by using high-resolution 3D X-ray
+          Microtomography. Source voltage and current were set to 50 kV and 200
+          µA, respectively. The CCD camera was configured to acquire projections
+          of 4904 x 3280 pixels, resulting in a pixel side length of 2.25 µm.
+          For more details, please refer to the related publications.
+        </p>
+
+        <table className="c-data-list c-data-list--horizontal c-data-list--is-narrow">
+          <tbody>
+            <tr>
+              <th className="c-data-list__key">Segmented</th>
+              <td className="c-data-list__value">No</td>
+            </tr>
+            <tr>
+              <th className="c-data-list__key">Voxel length (x, y, z)</th>
+              <td className="c-data-list__value">2.25, 2.25, 2.25 um</td>
+            </tr>
+            <tr>
+              <th className="c-data-list__key">Sample</th>
+              <td className="c-data-list__value">
+                <a href="/datasets/317#sample-berea">Berea</a>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </section>
+
+      <section id="data" className="o-section">
+        <h3>Data</h3>
+
+        <ul className="c-card-list" data-tag-change-from="div">
+          <li
+            className="c-card--image-top c-card--plain"
+            data-tag-change-from="article"
+          >
+            <img
+              src="/media/filer_public_thumbnails/filer_public/30/62/3062e147-8fdb-4cd8-afa1-3fbbc6c42b31/dr-proj-317-data-1352.jpg__1000.0x1000.0_q85_subsampling-2.jpg"
+              alt=""
+              srcSet="
+            
+                /media/filer_public_thumbnails/filer_public/30/62/3062e147-8fdb-4cd8-afa1-3fbbc6c42b31/dr-proj-317-data-1352.jpg__576x576_q85_subsampling-2.jpg 576w,
+            
+                /media/filer_public_thumbnails/filer_public/30/62/3062e147-8fdb-4cd8-afa1-3fbbc6c42b31/dr-proj-317-data-1352.jpg__768x768_q85_subsampling-2.jpg 768w,
+            
+                /media/filer_public_thumbnails/filer_public/30/62/3062e147-8fdb-4cd8-afa1-3fbbc6c42b31/dr-proj-317-data-1352.jpg__992x992_q85_subsampling-2.jpg 992w,
+            
+            /media/filer_public_thumbnails/filer_public/30/62/3062e147-8fdb-4cd8-afa1-3fbbc6c42b31/dr-proj-317-data-1352.jpg__1000.0x1000.0_q85_subsampling-2.jpg 1000.0w
+        "
+              sizes="
+            
+                (max-width: 576px) 576px,
+            
+                (max-width: 768px) 768px,
+            
+                (max-width: 992px) 992px,
+            
+            1000.0px
+        "
+              className="img-fluid"
+            />
+
+            <p>
+              <strong>Berea_2d25um_grayscale.raw</strong>
+              <br />
+              953.7 MB
+            </p>
+
+            <table className="c-data-list c-data-list--is-vert c-data-list--is-narrow c-data-list--should-truncate-values">
+              <tbody>
+                <tr>
+                  <th className="c-data-list__key">Image Type</th>
+                  <td className="c-data-list__value">8-bit</td>
+                </tr>
+                <tr>
+                  <th className="c-data-list__key">Width</th>
+                  <td className="c-data-list__value">1000</td>
+                </tr>
+                <tr>
+                  <th className="c-data-list__key">Height</th>
+                  <td className="c-data-list__value">1000</td>
+                </tr>
+                <tr>
+                  <th className="c-data-list__key">Number of Slices</th>
+                  <td className="c-data-list__value">1000</td>
+                </tr>
+                <tr className="c-data-list__row--start-final">
+                  <th className="c-data-list__key">Byte Order</th>
+                  <td className="c-data-list__value">little-endian</td>
+                </tr>
+              </tbody>
+            </table>
+
+            <p className="dropdown" data-tag-change-from="div">
+              <button
+                className="dropdown-toggle  c-button c-button--primary"
+                data-toggle="dropdown"
+                type="button"
+              >
+                Action
+              </button>
+              <menu className="dropdown-menu">
+                <li>
+                  <a
+                    className="dropdown-item"
+                    href="/datasets/317/images/223451/download/"
+                    target="_blank"
+                  >
+                    Download File{' '}
+                  </a>
+                </li>
+                <li>
+                  <a
+                    className="dropdown-item"
+                    href="/media/projects/317/origin/1352/images/Berea_2d25um_grayscale.raw.gif"
+                    target="_blank"
+                  >
+                    View GIF
+                  </a>
+                </li>
+                <li>
+                  <a
+                    className="dropdown-item"
+                    href="/media/projects/317/origin/1352/images/Berea_2d25um_grayscale.raw.histogram.jpg"
+                    target="_blank"
+                  >
+                    Histogram
+                  </a>
+                </li>
+                <li>
+                  <a
+                    className="dropdown-item"
+                    href="/media/projects/317/origin/1352/images/Berea_2d25um_grayscale.raw.histogram.csv"
+                    target="_blank"
+                  >
+                    Histogram (CSV)
+                  </a>
+                </li>
+                <li>
+                  <a
+                    className="dropdown-item"
+                    href="/datasets/317/images/223451/downloadMeta/"
+                    target="_blank"
+                  >
+                    Metadata
+                  </a>
+                </li>
+                <li className="dropdown-divider"></li>
+                <li>
+                  <a
+                    className="dropdown-item"
+                    href="/datasets/paraview_info/223451/"
+                    target="_blank"
+                  >
+                    View in Paraview
+                  </a>
+                </li>
+              </menu>
+            </p>
+          </li>
+          <li
+            className="c-card--image-top c-card--plain"
+            data-tag-change-from="article"
+          >
+            <img
+              src="/media/filer_public_thumbnails/filer_public/30/62/3062e147-8fdb-4cd8-afa1-3fbbc6c42b31/dr-proj-317-data-1352.jpg__1000.0x1000.0_q85_subsampling-2.jpg"
+              alt=""
+              srcSet="
+            
+                /media/filer_public_thumbnails/filer_public/30/62/3062e147-8fdb-4cd8-afa1-3fbbc6c42b31/dr-proj-317-data-1352.jpg__576x576_q85_subsampling-2.jpg 576w,
+            
+                /media/filer_public_thumbnails/filer_public/30/62/3062e147-8fdb-4cd8-afa1-3fbbc6c42b31/dr-proj-317-data-1352.jpg__768x768_q85_subsampling-2.jpg 768w,
+            
+                /media/filer_public_thumbnails/filer_public/30/62/3062e147-8fdb-4cd8-afa1-3fbbc6c42b31/dr-proj-317-data-1352.jpg__992x992_q85_subsampling-2.jpg 992w,
+            
+            /media/filer_public_thumbnails/filer_public/30/62/3062e147-8fdb-4cd8-afa1-3fbbc6c42b31/dr-proj-317-data-1352.jpg__1000.0x1000.0_q85_subsampling-2.jpg 1000.0w
+        "
+              sizes="
+            
+                (max-width: 576px) 576px,
+            
+                (max-width: 768px) 768px,
+            
+                (max-width: 992px) 992px,
+            
+            1000.0px
+        "
+              className="img-fluid"
+            />
+
+            <p>
+              <strong>Berea_2d25um_grayscale.raw</strong>
+              <br />
+              953.7 MB
+            </p>
+
+            <table className="c-data-list c-data-list--is-vert c-data-list--is-narrow c-data-list--should-truncate-values">
+              <tbody>
+                <tr>
+                  <th className="c-data-list__key">Image Type</th>
+                  <td className="c-data-list__value">8-bit</td>
+                </tr>
+                <tr>
+                  <th className="c-data-list__key">Width</th>
+                  <td className="c-data-list__value">1000</td>
+                </tr>
+                <tr>
+                  <th className="c-data-list__key">Height</th>
+                  <td className="c-data-list__value">1000</td>
+                </tr>
+                <tr>
+                  <th className="c-data-list__key">Number of Slices</th>
+                  <td className="c-data-list__value">1000</td>
+                </tr>
+                <tr className="c-data-list__row--start-final">
+                  <th className="c-data-list__key">Byte Order</th>
+                  <td className="c-data-list__value">little-endian</td>
+                </tr>
+              </tbody>
+            </table>
+
+            <p className="dropdown" data-tag-change-from="div">
+              <button
+                className="dropdown-toggle  c-button c-button--primary"
+                data-toggle="dropdown"
+                type="button"
+              >
+                Action
+              </button>
+              <menu className="dropdown-menu">
+                <li>
+                  <a
+                    className="dropdown-item"
+                    href="/datasets/317/images/223451/download/"
+                    target="_blank"
+                  >
+                    Download File{' '}
+                  </a>
+                </li>
+                <li>
+                  <a
+                    className="dropdown-item"
+                    href="/media/projects/317/origin/1352/images/Berea_2d25um_grayscale.raw.gif"
+                    target="_blank"
+                  >
+                    View GIF
+                  </a>
+                </li>
+                <li>
+                  <a
+                    className="dropdown-item"
+                    href="/media/projects/317/origin/1352/images/Berea_2d25um_grayscale.raw.histogram.jpg"
+                    target="_blank"
+                  >
+                    Histogram
+                  </a>
+                </li>
+                <li>
+                  <a
+                    className="dropdown-item"
+                    href="/media/projects/317/origin/1352/images/Berea_2d25um_grayscale.raw.histogram.csv"
+                    target="_blank"
+                  >
+                    Histogram (CSV)
+                  </a>
+                </li>
+                <li>
+                  <a
+                    className="dropdown-item"
+                    href="/datasets/317/images/223451/downloadMeta/"
+                    target="_blank"
+                  >
+                    Metadata
+                  </a>
+                </li>
+                <li className="dropdown-divider"></li>
+                <li>
+                  <a
+                    className="dropdown-item"
+                    href="/datasets/paraview_info/223451/"
+                    target="_blank"
+                  >
+                    View in Paraview
+                  </a>
+                </li>
+              </menu>
+            </p>
+          </li>
+          <li
+            className="c-card--image-top c-card--plain"
+            data-tag-change-from="article"
+          >
+            <img
+              src="/media/filer_public_thumbnails/filer_public/30/62/3062e147-8fdb-4cd8-afa1-3fbbc6c42b31/dr-proj-317-data-1352.jpg__1000.0x1000.0_q85_subsampling-2.jpg"
+              alt=""
+              srcSet="
+            
+                /media/filer_public_thumbnails/filer_public/30/62/3062e147-8fdb-4cd8-afa1-3fbbc6c42b31/dr-proj-317-data-1352.jpg__576x576_q85_subsampling-2.jpg 576w,
+            
+                /media/filer_public_thumbnails/filer_public/30/62/3062e147-8fdb-4cd8-afa1-3fbbc6c42b31/dr-proj-317-data-1352.jpg__768x768_q85_subsampling-2.jpg 768w,
+            
+                /media/filer_public_thumbnails/filer_public/30/62/3062e147-8fdb-4cd8-afa1-3fbbc6c42b31/dr-proj-317-data-1352.jpg__992x992_q85_subsampling-2.jpg 992w,
+            
+            /media/filer_public_thumbnails/filer_public/30/62/3062e147-8fdb-4cd8-afa1-3fbbc6c42b31/dr-proj-317-data-1352.jpg__1000.0x1000.0_q85_subsampling-2.jpg 1000.0w
+        "
+              sizes="
+            
+                (max-width: 576px) 576px,
+            
+                (max-width: 768px) 768px,
+            
+                (max-width: 992px) 992px,
+            
+            1000.0px
+        "
+              className="img-fluid"
+            />
+
+            <p>
+              <strong>Berea_2d25um_grayscale.raw</strong>
+              <br />
+              953.7 MB
+            </p>
+
+            <table className="c-data-list c-data-list--is-vert c-data-list--is-narrow c-data-list--should-truncate-values">
+              <tbody>
+                <tr>
+                  <th className="c-data-list__key">Image Type</th>
+                  <td className="c-data-list__value">8-bit</td>
+                </tr>
+                <tr>
+                  <th className="c-data-list__key">Width</th>
+                  <td className="c-data-list__value">1000</td>
+                </tr>
+                <tr>
+                  <th className="c-data-list__key">Height</th>
+                  <td className="c-data-list__value">1000</td>
+                </tr>
+                <tr>
+                  <th className="c-data-list__key">Number of Slices</th>
+                  <td className="c-data-list__value">1000</td>
+                </tr>
+                <tr className="c-data-list__row--start-final">
+                  <th className="c-data-list__key">Byte Order</th>
+                  <td className="c-data-list__value">little-endian</td>
+                </tr>
+              </tbody>
+            </table>
+
+            <p className="dropdown" data-tag-change-from="div">
+              <button
+                className="dropdown-toggle  c-button c-button--primary"
+                data-toggle="dropdown"
+                type="button"
+              >
+                Action
+              </button>
+              <menu className="dropdown-menu">
+                <li>
+                  <a
+                    className="dropdown-item"
+                    href="/datasets/317/images/223451/download/"
+                    target="_blank"
+                  >
+                    Download File{' '}
+                  </a>
+                </li>
+                <li>
+                  <a
+                    className="dropdown-item"
+                    href="/media/projects/317/origin/1352/images/Berea_2d25um_grayscale.raw.gif"
+                    target="_blank"
+                  >
+                    View GIF
+                  </a>
+                </li>
+                <li>
+                  <a
+                    className="dropdown-item"
+                    href="/media/projects/317/origin/1352/images/Berea_2d25um_grayscale.raw.histogram.jpg"
+                    target="_blank"
+                  >
+                    Histogram
+                  </a>
+                </li>
+                <li>
+                  <a
+                    className="dropdown-item"
+                    href="/media/projects/317/origin/1352/images/Berea_2d25um_grayscale.raw.histogram.csv"
+                    target="_blank"
+                  >
+                    Histogram (CSV)
+                  </a>
+                </li>
+                <li>
+                  <a
+                    className="dropdown-item"
+                    href="/datasets/317/images/223451/downloadMeta/"
+                    target="_blank"
+                  >
+                    Metadata
+                  </a>
+                </li>
+                <li className="dropdown-divider"></li>
+                <li>
+                  <a
+                    className="dropdown-item"
+                    href="/datasets/paraview_info/223451/"
+                    target="_blank"
+                  >
+                    View in Paraview
+                  </a>
+                </li>
+              </menu>
+            </p>
+          </li>
+          <li
+            className="c-card--image-top c-card--plain"
+            data-tag-change-from="article"
+          >
+            <img
+              src="/media/filer_public_thumbnails/filer_public/30/62/3062e147-8fdb-4cd8-afa1-3fbbc6c42b31/dr-proj-317-data-1352.jpg__1000.0x1000.0_q85_subsampling-2.jpg"
+              alt=""
+              srcSet="
+            
+                /media/filer_public_thumbnails/filer_public/30/62/3062e147-8fdb-4cd8-afa1-3fbbc6c42b31/dr-proj-317-data-1352.jpg__576x576_q85_subsampling-2.jpg 576w,
+            
+                /media/filer_public_thumbnails/filer_public/30/62/3062e147-8fdb-4cd8-afa1-3fbbc6c42b31/dr-proj-317-data-1352.jpg__768x768_q85_subsampling-2.jpg 768w,
+            
+                /media/filer_public_thumbnails/filer_public/30/62/3062e147-8fdb-4cd8-afa1-3fbbc6c42b31/dr-proj-317-data-1352.jpg__992x992_q85_subsampling-2.jpg 992w,
+            
+            /media/filer_public_thumbnails/filer_public/30/62/3062e147-8fdb-4cd8-afa1-3fbbc6c42b31/dr-proj-317-data-1352.jpg__1000.0x1000.0_q85_subsampling-2.jpg 1000.0w
+        "
+              sizes="
+            
+                (max-width: 576px) 576px,
+            
+                (max-width: 768px) 768px,
+            
+                (max-width: 992px) 992px,
+            
+            1000.0px
+        "
+              className="img-fluid"
+            />
+
+            <p>
+              <strong>Berea_2d25um_grayscale.raw</strong>
+              <br />
+              953.7 MB
+            </p>
+
+            <table className="c-data-list c-data-list--is-vert c-data-list--is-narrow c-data-list--should-truncate-values">
+              <tbody>
+                <tr>
+                  <th className="c-data-list__key">Image Type</th>
+                  <td className="c-data-list__value">8-bit</td>
+                </tr>
+                <tr>
+                  <th className="c-data-list__key">Width</th>
+                  <td className="c-data-list__value">1000</td>
+                </tr>
+                <tr>
+                  <th className="c-data-list__key">Height</th>
+                  <td className="c-data-list__value">1000</td>
+                </tr>
+                <tr>
+                  <th className="c-data-list__key">Number of Slices</th>
+                  <td className="c-data-list__value">1000</td>
+                </tr>
+                <tr className="c-data-list__row--start-final">
+                  <th className="c-data-list__key">Byte Order</th>
+                  <td className="c-data-list__value">little-endian</td>
+                </tr>
+              </tbody>
+            </table>
+
+            <p className="dropdown" data-tag-change-from="div">
+              <button
+                className="dropdown-toggle  c-button c-button--primary"
+                data-toggle="dropdown"
+                type="button"
+              >
+                Action
+              </button>
+              <menu className="dropdown-menu">
+                <li>
+                  <a
+                    className="dropdown-item"
+                    href="/datasets/317/images/223451/download/"
+                    target="_blank"
+                  >
+                    Download File{' '}
+                  </a>
+                </li>
+                <li>
+                  <a
+                    className="dropdown-item"
+                    href="/media/projects/317/origin/1352/images/Berea_2d25um_grayscale.raw.gif"
+                    target="_blank"
+                  >
+                    View GIF
+                  </a>
+                </li>
+                <li>
+                  <a
+                    className="dropdown-item"
+                    href="/media/projects/317/origin/1352/images/Berea_2d25um_grayscale.raw.histogram.jpg"
+                    target="_blank"
+                  >
+                    Histogram
+                  </a>
+                </li>
+                <li>
+                  <a
+                    className="dropdown-item"
+                    href="/media/projects/317/origin/1352/images/Berea_2d25um_grayscale.raw.histogram.csv"
+                    target="_blank"
+                  >
+                    Histogram (CSV)
+                  </a>
+                </li>
+                <li>
+                  <a
+                    className="dropdown-item"
+                    href="/datasets/317/images/223451/downloadMeta/"
+                    target="_blank"
+                  >
+                    Metadata
+                  </a>
+                </li>
+                <li className="dropdown-divider"></li>
+                <li>
+                  <a
+                    className="dropdown-item"
+                    href="/datasets/paraview_info/223451/"
+                    target="_blank"
+                  >
+                    View in Paraview
+                  </a>
+                </li>
+              </menu>
+            </p>
+          </li>
+          <li
+            className="c-card--image-top c-card--plain"
+            data-tag-change-from="article"
+          >
+            <img
+              src="/media/filer_public_thumbnails/filer_public/30/62/3062e147-8fdb-4cd8-afa1-3fbbc6c42b31/dr-proj-317-data-1352.jpg__1000.0x1000.0_q85_subsampling-2.jpg"
+              alt=""
+              srcSet="
+            
+                /media/filer_public_thumbnails/filer_public/30/62/3062e147-8fdb-4cd8-afa1-3fbbc6c42b31/dr-proj-317-data-1352.jpg__576x576_q85_subsampling-2.jpg 576w,
+            
+                /media/filer_public_thumbnails/filer_public/30/62/3062e147-8fdb-4cd8-afa1-3fbbc6c42b31/dr-proj-317-data-1352.jpg__768x768_q85_subsampling-2.jpg 768w,
+            
+                /media/filer_public_thumbnails/filer_public/30/62/3062e147-8fdb-4cd8-afa1-3fbbc6c42b31/dr-proj-317-data-1352.jpg__992x992_q85_subsampling-2.jpg 992w,
+            
+            /media/filer_public_thumbnails/filer_public/30/62/3062e147-8fdb-4cd8-afa1-3fbbc6c42b31/dr-proj-317-data-1352.jpg__1000.0x1000.0_q85_subsampling-2.jpg 1000.0w
+        "
+              sizes="
+            
+                (max-width: 576px) 576px,
+            
+                (max-width: 768px) 768px,
+            
+                (max-width: 992px) 992px,
+            
+            1000.0px
+        "
+              className="img-fluid"
+            />
+
+            <p>
+              <strong>Berea_2d25um_grayscale.raw</strong>
+              <br />
+              953.7 MB
+            </p>
+
+            <table className="c-data-list c-data-list--is-vert c-data-list--is-narrow c-data-list--should-truncate-values">
+              <tbody>
+                <tr>
+                  <th className="c-data-list__key">Image Type</th>
+                  <td className="c-data-list__value">8-bit</td>
+                </tr>
+                <tr>
+                  <th className="c-data-list__key">Width</th>
+                  <td className="c-data-list__value">1000</td>
+                </tr>
+                <tr>
+                  <th className="c-data-list__key">Height</th>
+                  <td className="c-data-list__value">1000</td>
+                </tr>
+                <tr>
+                  <th className="c-data-list__key">Number of Slices</th>
+                  <td className="c-data-list__value">1000</td>
+                </tr>
+                <tr className="c-data-list__row--start-final">
+                  <th className="c-data-list__key">Byte Order</th>
+                  <td className="c-data-list__value">little-endian</td>
+                </tr>
+              </tbody>
+            </table>
+            <p className="dropdown" data-tag-change-from="div">
+              <button
+                className="dropdown-toggle  c-button c-button--primary"
+                data-toggle="dropdown"
+                type="button"
+              >
+                Action
+              </button>
+              <menu className="dropdown-menu">
+                <li>
+                  <a
+                    className="dropdown-item"
+                    href="/datasets/317/images/223451/download/"
+                    target="_blank"
+                  >
+                    Download File{' '}
+                  </a>
+                </li>
+                <li>
+                  <a
+                    className="dropdown-item"
+                    href="/media/projects/317/origin/1352/images/Berea_2d25um_grayscale.raw.gif"
+                    target="_blank"
+                  >
+                    View GIF
+                  </a>
+                </li>
+                <li>
+                  <a
+                    className="dropdown-item"
+                    href="/media/projects/317/origin/1352/images/Berea_2d25um_grayscale.raw.histogram.jpg"
+                    target="_blank"
+                  >
+                    Histogram
+                  </a>
+                </li>
+                <li>
+                  <a
+                    className="dropdown-item"
+                    href="/media/projects/317/origin/1352/images/Berea_2d25um_grayscale.raw.histogram.csv"
+                    target="_blank"
+                  >
+                    Histogram (CSV)
+                  </a>
+                </li>
+                <li>
+                  <a
+                    className="dropdown-item"
+                    href="/datasets/317/images/223451/downloadMeta/"
+                    target="_blank"
+                  >
+                    Metadata
+                  </a>
+                </li>
+                <li className="dropdown-divider"></li>
+                <li>
+                  <a
+                    className="dropdown-item"
+                    href="/datasets/paraview_info/223451/"
+                    target="_blank"
+                  >
+                    View in Paraview
+                  </a>
+                </li>
+              </menu>
+            </p>
+          </li>
+        </ul>
+      </section>
+
+      <div className="o-section">
+        <ul className="pagination">
+          <li className="page-item">
+            <a className="page-link" href="#">
+              &lt; Previous
+            </a>
+          </li>
+          <li className="page-item">
+            <a className="page-link" href="#">
+              1
+            </a>
+          </li>
+          <li className="page-item">
+            <a className="page-link" href="#">
+              2
+            </a>
+          </li>
+          <li className="page-item active">
+            <span className="page-link">3</span>
+          </li>
+          <li className="page-item">
+            <a className="page-link" href="#">
+              4
+            </a>
+          </li>
+          <li className="page-item">
+            <a className="page-link" href="#">
+              5
+            </a>
+          </li>
+          <li className="page-item skip">
+            <span className="page-link">...</span>
+          </li>
+          <li className="page-item">
+            <a className="page-link" href="#">
+              20
+            </a>
+          </li>
+          <li className="page-item">
+            <a className="page-link" href="#">
+              Next &gt;
+            </a>
+          </li>
+        </ul>
+      </div>
+    </>
+  );
+}
diff --git a/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPMRead.jsx b/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPMRead.jsx
new file mode 100644
index 0000000000..e4c91875be
--- /dev/null
+++ b/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPMRead.jsx
@@ -0,0 +1,921 @@
+import React, { useEffect } from 'react';
+
+// TODO: Replace use of this with component(s) from WC-219
+export default function DataFilesForDPMRead() {
+  useEffect(() => {
+    // Or use `ShowMore` common component instead of `js-show-more` class
+    import(
+      'https://cdn.jsdelivr.net/gh/TACC/Core-Styles@v2.38.0/src/lib/_imports/components/c-show-more/c-show-more.js'
+    )
+      .then(({ generateMarkup }) => {
+        generateMarkup(document.getElementsByClassName('js-show-more'), {
+          shouldToggleResembleLink: true,
+        });
+      })
+      .catch((err) => {
+        console.error('Failed to load c-show-more module:', err);
+      });
+  }, []);
+
+  return (
+    <>
+      <div className="o-section project-title">
+        <h1>
+          <span>11 Sandstones: Raw, Filtered and Segmented Data</span>{' '}
+          <a
+            className="c-button c-button--primary  project-download-button"
+            data-target="#project-download-modal"
+            data-toggle="modal"
+            href="/media/filer_public_thumbnails/filer_public/65/10/6510c85e-4f00-4bde-b560-31614fb30ce0/dr-proj-317.png__768x768_subsampling-2.png"
+            target="_blank"
+          >
+            <i
+              className="icon icon-download
+    c-button__icon--before"
+            >
+              ↓
+            </i>{' '}
+            Download Dataset
+          </a>
+        </h1>
+      </div>
+      <div className="o-section o-section--style-muted project-citation">
+        <h3>Cite This Dataset</h3>
+        <p>
+          Neumann, R., Andreeta, M., &amp; Lucas-Oliveira, E.{' '}
+          <em>11 Sandstones: raw, filtered and segmented data</em> [Data set].
+          Digital Rocks Portal.{' '}
+          <a
+            href="https://doi.org/10.17612/F4H1-W124"
+            rel="noreferrer"
+            target="_blank"
+            aria-label="Opens in new window."
+          >
+            https://doi.org/10.17612/F4H1-W124
+          </a>
+        </p>
+
+        <p>
+          <strong>Download Citation:</strong>
+          <a
+            href="https://api.datacite.org/application/vnd.datacite.datacite+xml/10.17612/f4h1-w124"
+            rel="noreferrer"
+            target="_blank"
+            aria-label="Opens in new window."
+          >
+            DataCite XML
+          </a>{' '}
+          |
+          <a
+            href="https://api.datacite.org/application/x-research-info-systems/10.17612/f4h1-w124"
+            rel="noreferrer"
+            target="_blank"
+            aria-label="Opens in new window."
+          >
+            RIS
+          </a>{' '}
+          |
+          <a
+            href="https://api.datacite.org/application/x-bibtex/10.17612/f4h1-w124"
+            rel="noreferrer"
+            target="_blank"
+            aria-label="Opens in new window."
+          >
+            BibTeX
+          </a>{' '}
+          |
+          <a
+            href="https://commons.datacite.org/doi.org/10.17612/f4h1-w124"
+            rel="noreferrer"
+            target="_blank"
+            aria-label="Opens in new window."
+          >
+            Other Formats
+          </a>
+          <br />
+          <mark>
+            <output>0</output> Citations
+          </mark>{' '}
+          |
+          <strong>
+            <a
+              className="c-button c-button--as-link"
+              data-target="#project-metrics-modal"
+              data-toggle="modal"
+              href="./metrics/"
+            >
+              Details
+            </a>
+          </strong>
+        </p>
+      </div>
+      <div className="o-section o-section--style-light">
+        <div className="row project-overview">
+          <div className="col col-12 col-sm-12 col-md-3 col-lg-3 col-xl-3">
+            <img
+              src="/media/filer_public_thumbnails/filer_public/65/10/6510c85e-4f00-4bde-b560-31614fb30ce0/dr-proj-317.png__800.0x764.0_subsampling-2.png"
+              alt=""
+              srcSet="
+            
+                /media/filer_public_thumbnails/filer_public/65/10/6510c85e-4f00-4bde-b560-31614fb30ce0/dr-proj-317.png__576x576_subsampling-2.png 576w,
+            
+                /media/filer_public_thumbnails/filer_public/65/10/6510c85e-4f00-4bde-b560-31614fb30ce0/dr-proj-317.png__768x768_subsampling-2.png 768w,
+            
+            /media/filer_public_thumbnails/filer_public/65/10/6510c85e-4f00-4bde-b560-31614fb30ce0/dr-proj-317.png__800.0x764.0_subsampling-2.png 800.0w
+        "
+              sizes="
+            
+                (max-width: 576px) 576px,
+            
+                (max-width: 768px) 768px,
+            
+            800.0px
+        "
+              className="align-left img-fluid"
+            />
+          </div>
+
+          <div className="col project-desc">
+            <p>
+              A set of 11 sandstone plugs from Kocurek Industries: Bandera Gray,
+              Parker, Kirby, Bandera Brown, Berea Sister Gray, Berea Upper Gray,
+              Berea, Castlegate, Buff Berea, Leopard and Bentheimer. Source:{' '}
+              <a
+                href="https://kocurekindustries.com/sandstone-cores"
+                target="_blank"
+                rel="noreferrer"
+                aria-label="Opens in new window."
+              >
+                https://kocurekindustries.com/sandstone-cores
+              </a>
+              . All samples were subject to a combined experimental and
+              computational analysis in order to estimate Porosity and
+              Permeability.
+            </p>
+
+            <p>
+              For more details, please refer to{' '}
+              <a
+                href="https://arxiv.org/abs/2010.10679"
+                target="_blank"
+                rel="noreferrer"
+                aria-label="Opens in new window."
+              >
+                https://arxiv.org/abs/2010.10679
+              </a>
+              .
+            </p>
+
+            <table className="c-data-list c-data-list--is-vert c-data-list--is-narrow">
+              <tbody>
+                <tr>
+                  <th className="c-data-list__key">Author</th>
+                  <td className="c-data-list__value">
+                    Rodrigo Neumann (IBM Research)
+                  </td>
+                </tr>
+                <tr>
+                  <th className="c-data-list__key">Collaborators</th>
+                  <td className="c-data-list__value">
+                    <ul>
+                      <li>MARIANE ANDREETA (USP)</li>
+                      <li>
+                        Everton Lucas-Oliveira (Universidade de São Paulo)
+                      </li>
+                    </ul>
+                  </td>
+                </tr>
+                <tr>
+                  <th className="c-data-list__key">Created</th>
+                  <td className="c-data-list__value">Oct. 8, 2020</td>
+                </tr>
+                <tr>
+                  <th className="c-data-list__key">License</th>
+                  <td className="c-data-list__value">ODC-BY 1.0</td>
+                </tr>
+                <tr>
+                  <th className="c-data-list__key">
+                    Digital Object Identifier
+                  </th>
+                  <td className="c-data-list__value">10.17612/f4h1-w124</td>
+                </tr>
+                <tr>
+                  <th className="c-data-list__key">Linked Datasets</th>
+                  <td className="c-data-list__value">
+                    <nav>
+                      <a
+                        href="https://doi.org/10.1038/s41598-021-90090-0"
+                        target="_blank"
+                        rel="noreferrer"
+                        aria-label="Opens in new window."
+                      >
+                        <span>
+                          11 Sandstones: raw, filtered and segmented data
+                        </span>
+                        <i className="icon icon-exit" aria-hidden="true"></i>
+                      </a>
+                      <a
+                        href="https://doi.org/10.1016/j.petrol.2020.107400"
+                        target="_blank"
+                        rel="noreferrer"
+                        aria-label="Opens in new window."
+                      >
+                        <span>
+                          Sandstone surface relaxivity determined by NMR T2
+                          distribution and digital rock simulation for
+                          permeability evaluation
+                        </span>
+                        <i className="icon icon-exit" aria-hidden="true"></i>
+                      </a>
+                    </nav>
+                  </td>
+                </tr>
+                <tr className="sample">
+                  <th className="c-data-list__key">Cited By</th>
+                  <td className="c-data-list__value">
+                    <nav>
+                      <a href="#" target="_blank">
+                        <span>
+                          Example citation entry (Sample data - Not actual
+                          citations)
+                        </span>
+                        <i className="icon icon-exit" aria-hidden="true"></i>
+                      </a>
+                      <a href="#" target="_blank">
+                        <span>
+                          Another example of what a citation would look like
+                          when this feature is implemented
+                        </span>
+                        <i className="icon icon-exit" aria-hidden="true"></i>
+                      </a>
+                    </nav>
+                  </td>
+                </tr>
+                <tr className="sample">
+                  <th className="c-data-list__key">Context</th>
+                  <td className="c-data-list__value">
+                    <nav>
+                      <a href="#" target="_blank">
+                        <span>
+                          Sample contextual reference - This section will show
+                          related context
+                        </span>
+                        <i className="icon icon-exit" aria-hidden="true"></i>
+                      </a>
+                      <a href="#" target="_blank">
+                        <span>
+                          Example of how additional context entries would appear
+                          when this feature is implemented
+                        </span>
+                        <i className="icon icon-exit" aria-hidden="true"></i>
+                      </a>
+                    </nav>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+
+        <div className="project-content">
+          <div id="project-files">
+            <h2>Files</h2>
+
+            <ul className="data-tree">
+              <li className="data-tree__item" id="sample-berea">
+                <details>
+                  <summary className="u-summary-link-merged">
+                    <a className="u-title-needs-colon">
+                      <span>Sample</span>
+                      <strong>Berea</strong>
+                    </a>
+                  </summary>
+                  {/* <p className="js-show-more"> */}
+                  {/* only if desc is very long, then add className "js-show-more" or try `ShowMore` common component */}
+                  <p>
+                    Berea sandstone sample. For experimental and computational
+                    estimates of porosity and permeability, please refer to the
+                    related publications.
+                  </p>
+                  <table className="c-data-list c-data-list--is-vert c-data-list--is-narrow c-data-list--should-truncate-values">
+                    <tbody>
+                      <tr>
+                        <th className="c-data-list__key">Porous Media Type</th>
+                        <td className="c-data-list__value">Sandstone</td>
+                      </tr>
+                      <tr>
+                        <th className="c-data-list__key">Source</th>
+                        <td className="c-data-list__value">Natural</td>
+                      </tr>
+                      <tr>
+                        <th className="c-data-list__key">Grain Size</th>
+                        <td className="c-data-list__value">
+                          <dl>
+                            <dt>Minimum</dt>
+                            <dd>N/A</dd>
+                            <dt>Maximum</dt>
+                            <dd>N/A</dd>
+                            <dt>Average</dt>
+                            <dd>N/A</dd>
+                          </dl>
+                        </td>
+                      </tr>
+                      <tr>
+                        <th className="c-data-list__key">Porosity</th>
+                        <td className="c-data-list__value">18.96</td>
+                      </tr>
+                      <tr>
+                        <th className="c-data-list__key">Location</th>
+                        <td className="c-data-list__value">—</td>
+                      </tr>
+                    </tbody>
+                  </table>
+                </details>
+                <ul>
+                  <li>
+                    <a
+                      className="u-title-needs-colon"
+                      href="/datasets/317/origin-data/1352/"
+                    >
+                      <span>Origin Data</span>
+                      <strong>Berea_2d25um_grayscale.raw</strong>
+                    </a>
+                  </li>
+                  <li>
+                    <a
+                      className="u-title-needs-colon"
+                      href="/datasets/317/origin-data/1352/"
+                    >
+                      <span>Origin Data</span>
+                      <strong>Berea_2d25um_grayscale_filtered.raw</strong>
+                    </a>
+                  </li>
+                  <li>
+                    <a
+                      className="u-title-needs-colon"
+                      href="/datasets/317/origin-data/1352/"
+                    >
+                      <span>Origin Data</span>
+                      <strong>Berea_2d25um_binary.raw</strong>
+                    </a>
+                  </li>
+                </ul>
+              </li>
+              <li className="data-tree__item" id="sample-bandera-brown">
+                <details>
+                  <summary className="u-summary-link-merged">
+                    <a className="u-title-needs-colon">
+                      <span>Sample</span>
+                      <strong>Bandera Brown</strong>
+                    </a>
+                  </summary>
+                  {/* <p className="js-show-more"> */}
+                  {/* only if desc is very long, then add className "js-show-more" or try `ShowMore` common component */}
+                  <p>
+                    Bandera Brown sandstone sample. For experimental and
+                    computational estimates of porosity and permeability, please
+                    refer to the related publications.
+                  </p>
+                  <table className="c-data-list c-data-list--is-vert c-data-list--is-narrow c-data-list--should-truncate-values">
+                    <tbody>
+                      <tr>
+                        <th className="c-data-list__key">Porous Media Type</th>
+                        <td className="c-data-list__value">Sandstone</td>
+                      </tr>
+                      <tr>
+                        <th className="c-data-list__key">Source</th>
+                        <td className="c-data-list__value">Natural</td>
+                      </tr>
+                      <tr>
+                        <th className="c-data-list__key">Grain Size</th>
+                        <td className="c-data-list__value">
+                          <dl>
+                            <dt>Minimum</dt>
+                            <dd>N/A</dd>
+                            <dt>Maximum</dt>
+                            <dd>N/A</dd>
+                            <dt>Average</dt>
+                            <dd>N/A</dd>
+                          </dl>
+                        </td>
+                      </tr>
+                      <tr>
+                        <th className="c-data-list__key">Porosity</th>
+                        <td className="c-data-list__value">24.11</td>
+                      </tr>
+                      <tr>
+                        <th className="c-data-list__key">Location</th>
+                        <td className="c-data-list__value">—</td>
+                      </tr>
+                    </tbody>
+                  </table>
+                </details>
+                <ul>
+                  <li>
+                    <a
+                      className="u-title-needs-colon"
+                      href="/datasets/317/origin-data/1352/"
+                    >
+                      <span>Origin Data</span>
+                      <strong>BanderaBrown_2d25um_grayscale.raw</strong>
+                    </a>
+                  </li>
+                  <li>
+                    <a
+                      className="u-title-needs-colon"
+                      href="/datasets/317/origin-data/1352/"
+                    >
+                      <span>Origin Data</span>
+                      <strong>BanderaBrown_2d25um_binary.raw</strong>
+                    </a>
+                  </li>
+                  <li>
+                    <a
+                      className="u-title-needs-colon"
+                      href="/datasets/317/origin-data/1352/"
+                    >
+                      <span>Origin Data</span>
+                      <strong>
+                        BanderaBrown_2d25um_grayscale_filtered.raw
+                      </strong>
+                    </a>
+                  </li>
+                </ul>
+              </li>
+              <li className="data-tree__item" id="sample-bandera-gray">
+                <details>
+                  <summary className="u-summary-link-merged">
+                    <a className="u-title-needs-colon">
+                      <span>Sample</span>
+                      <strong>Bandera Gray</strong>
+                    </a>
+                  </summary>
+                  {/* <p className="js-show-more"> */}
+                  {/* only if desc is very long, then add className "js-show-more" or try `ShowMore` common component */}
+                  <p>
+                    Bandera Gray sandstone sample. For experimental and
+                    computational estimates of porosity and permeability, please
+                    refer to the related publications.
+                  </p>
+                  <table className="c-data-list c-data-list--is-vert c-data-list--is-narrow c-data-list--should-truncate-values">
+                    <tbody>
+                      <tr>
+                        <th className="c-data-list__key">Porous Media Type</th>
+                        <td className="c-data-list__value">Sandstone</td>
+                      </tr>
+                      <tr>
+                        <th className="c-data-list__key">Source</th>
+                        <td className="c-data-list__value">Natural</td>
+                      </tr>
+                      <tr>
+                        <th className="c-data-list__key">Grain Size</th>
+                        <td className="c-data-list__value">
+                          <dl>
+                            <dt>Minimum</dt>
+                            <dd>N/A</dd>
+                            <dt>Maximum</dt>
+                            <dd>N/A</dd>
+                            <dt>Average</dt>
+                            <dd>N/A</dd>
+                          </dl>
+                        </td>
+                      </tr>
+                      <tr>
+                        <th className="c-data-list__key">Porosity</th>
+                        <td className="c-data-list__value">18.1</td>
+                      </tr>
+                      <tr>
+                        <th className="c-data-list__key">Location</th>
+                        <td className="c-data-list__value">—</td>
+                      </tr>
+                    </tbody>
+                  </table>
+                </details>
+                <ul>
+                  <li>
+                    <a
+                      className="u-title-needs-colon"
+                      href="/datasets/317/origin-data/1352/"
+                    >
+                      <span>Origin Data</span>
+                      <strong>BanderaGray_2d25um_binary.raw</strong>
+                    </a>
+                  </li>
+                  <li>
+                    <a
+                      className="u-title-needs-colon"
+                      href="/datasets/317/origin-data/1352/"
+                    >
+                      <span>Origin Data</span>
+                      <strong>BanderaGray_2d25um_grayscale_filtered.raw</strong>
+                    </a>
+                  </li>
+                  <li>
+                    <a
+                      className="u-title-needs-colon"
+                      href="/datasets/317/origin-data/1352/"
+                    >
+                      <span>Origin Data</span>
+                      <strong>BanderaGray_2d25um_grayscale.raw</strong>
+                    </a>
+                  </li>
+                </ul>
+              </li>
+              <li className="data-tree__item" id="sample-bentheimer">
+                <details>
+                  <summary className="u-summary-link-merged">
+                    <a className="u-title-needs-colon">
+                      <span>Sample</span>
+                      <strong>Bentheimer</strong>
+                    </a>
+                  </summary>
+                  {/* <p className="js-show-more"> */}
+                  {/* only if desc is very long, then add className "js-show-more" or try `ShowMore` common component */}
+                  <p>
+                    Bentheimer sandstone sample. For experimental and
+                    computational estimates of porosity and permeability, please
+                    refer to the related publications.
+                  </p>
+                  <table className="c-data-list c-data-list--is-vert c-data-list--is-narrow c-data-list--should-truncate-values">
+                    <tbody>
+                      <tr>
+                        <th className="c-data-list__key">Porous Media Type</th>
+                        <td className="c-data-list__value">Sandstone</td>
+                      </tr>
+                      <tr>
+                        <th className="c-data-list__key">Source</th>
+                        <td className="c-data-list__value">Natural</td>
+                      </tr>
+                      <tr>
+                        <th className="c-data-list__key">Grain Size</th>
+                        <td className="c-data-list__value">
+                          <dl>
+                            <dt>Minimum</dt>
+                            <dd>N/A</dd>
+                            <dt>Maximum</dt>
+                            <dd>N/A</dd>
+                            <dt>Average</dt>
+                            <dd>N/A</dd>
+                          </dl>
+                        </td>
+                      </tr>
+                      <tr>
+                        <th className="c-data-list__key">Porosity</th>
+                        <td className="c-data-list__value">22.64</td>
+                      </tr>
+                      <tr>
+                        <th className="c-data-list__key">Location</th>
+                        <td className="c-data-list__value">—</td>
+                      </tr>
+                    </tbody>
+                  </table>
+                </details>
+                <ul>
+                  <li>
+                    <a
+                      className="u-title-needs-colon"
+                      href="/datasets/317/origin-data/1352/"
+                    >
+                      <span>Origin Data</span>
+                      <strong>Bentheimer_2d25um_binary.raw</strong>
+                    </a>
+                  </li>
+                  <li>
+                    <a
+                      className="u-title-needs-colon"
+                      href="/datasets/317/origin-data/1352/"
+                    >
+                      <span>Origin Data</span>
+                      <strong>Bentheimer_2d25um_grayscale_filtered.raw</strong>
+                    </a>
+                  </li>
+                  <li>
+                    <a
+                      className="u-title-needs-colon"
+                      href="/datasets/317/origin-data/1352/"
+                    >
+                      <span>Origin Data</span>
+                      <strong>Bentheimer_2d25um_grayscale.raw</strong>
+                    </a>
+                  </li>
+                </ul>
+              </li>
+              <li className="data-tree__item" id="sample-berea-sister-gray">
+                <details>
+                  <summary className="u-summary-link-merged">
+                    <a className="u-title-needs-colon">
+                      <span>Sample</span>
+                      <strong>Berea Sister Gray</strong>
+                    </a>
+                  </summary>
+                  {/* <p className="js-show-more"> */}
+                  {/* only if desc is very long, then add className "js-show-more" or try `ShowMore` common component */}
+                  <p>
+                    Berea Sister Gray sandstone sample. For experimental and
+                    computational estimates of porosity and permeability, please
+                    refer to the related publications.
+                  </p>
+                  <table className="c-data-list c-data-list--is-vert c-data-list--is-narrow c-data-list--should-truncate-values">
+                    <tbody>
+                      <tr>
+                        <th className="c-data-list__key">Porous Media Type</th>
+                        <td className="c-data-list__value">Sandstone</td>
+                      </tr>
+                      <tr>
+                        <th className="c-data-list__key">Source</th>
+                        <td className="c-data-list__value">Natural</td>
+                      </tr>
+                      <tr>
+                        <th className="c-data-list__key">Grain Size</th>
+                        <td className="c-data-list__value">
+                          <dl>
+                            <dt>Minimum</dt>
+                            <dd>N/A</dd>
+                            <dt>Maximum</dt>
+                            <dd>N/A</dd>
+                            <dt>Average</dt>
+                            <dd>N/A</dd>
+                          </dl>
+                        </td>
+                      </tr>
+                      <tr>
+                        <th className="c-data-list__key">Porosity</th>
+                        <td className="c-data-list__value">19.07</td>
+                      </tr>
+                      <tr>
+                        <th className="c-data-list__key">Location</th>
+                        <td className="c-data-list__value">—</td>
+                      </tr>
+                    </tbody>
+                  </table>
+                </details>
+                <ul>
+                  <li>
+                    <a
+                      className="u-title-needs-colon"
+                      href="/datasets/317/origin-data/1352/"
+                    >
+                      <span>Origin Data</span>
+                      <strong>BSG_2d25um_grayscale.raw</strong>
+                    </a>
+                  </li>
+                  <li>
+                    <a
+                      className="u-title-needs-colon"
+                      href="/datasets/317/origin-data/1352/"
+                    >
+                      <span>Origin Data</span>
+                      <strong>BSG_2d25um_grayscale_filtered.raw</strong>
+                    </a>
+                  </li>
+                  <li>
+                    <a
+                      className="u-title-needs-colon"
+                      href="/datasets/317/origin-data/1352/"
+                    >
+                      <span>Origin Data</span>
+                      <strong>BSG_2d25um_binary.raw</strong>
+                    </a>
+                  </li>
+                </ul>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+      <div
+        className="modal fade"
+        id="project-download-modal"
+        tabIndex="-1"
+        role="dialog"
+        aria-labelledby="project-download-modal-title"
+        aria-hidden="true"
+      >
+        <div
+          className="modal-dialog modal-dialog-centered modal-lg"
+          role="document"
+        >
+          <div className="modal-content">
+            <div className="modal-header">
+              <h5 className="modal-title" id="project-download-modal-title">
+                Download Dataset
+              </h5>
+              <button
+                type="button"
+                className="close"
+                data-dismiss="modal"
+                aria-label="Close"
+              >
+                <i aria-hidden="true">×</i>
+              </button>
+            </div>
+            <div className="modal-body">
+              <p>
+                This download is a ZIP file of the complete project dataset. The
+                size of the ZIP file is <strong>41.28 MB</strong>.
+              </p>
+              <hr />
+              <p>The files are licensed by the following:</p>
+              <ul className="license-list">
+                <li className="license">
+                  <h4 className="license__title">
+                    <i className="icon icon-file" data-label="ODC"></i>
+                    <span>
+                      <strong>
+                        Open Data Commons Attribution License (ODC-By) v1.0
+                      </strong>
+                      (
+                      <a
+                        href="https://opendatacommons.org/licenses/by/1-0/"
+                        target="_blank"
+                        rel="noreferrer"
+                        aria-label="Opens in new window."
+                      >
+                        License Website
+                      </a>
+                      )
+                    </span>
+                  </h4>
+                  <ul className="license__details">
+                    <li>
+                      You may […] restrictions lorem ipsum dolor sit amet,
+                      consectetur adipiscing elit.
+                    </li>
+                    <li>
+                      You […] attributed […] this work consectetur adipiscing
+                      elit.
+                    </li>
+                  </ul>
+                </li>
+              </ul>
+              <small>
+                <a
+                  href="https://example.com"
+                  target="_blank"
+                  rel="noreferrer"
+                  aria-label="Opens in new window."
+                >
+                  Data Usage Agreement
+                </a>
+              </small>
+            </div>
+            <div className="modal-footer">
+              <a
+                className="c-button c-button--primary  project-download-button"
+                download="digitalrocksportal-org-project-317.zip"
+                target="_blank"
+                href="https://www.digitalrocksportal.org/media/projects/317/archive.zip"
+                rel="noreferrer"
+                aria-label="Opens in new window."
+              >
+                <i className="icon icon-download  c-button__icon--before">↓</i>
+                Download Dataset
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        className="modal fade"
+        id="project-metrics-modal"
+        tabIndex="-1"
+        role="dialog"
+        aria-labelledby="project-metrics-modal-title"
+        aria-hidden="true"
+      >
+        <div
+          className="modal-dialog modal-dialog-centered modal-xl"
+          role="document"
+        >
+          <div className="modal-content">
+            <div className="modal-header">
+              <h5 className="modal-title" id="project-metrics-modal-title">
+                Dataset metrics
+              </h5>
+              <button
+                type="button"
+                className="close"
+                data-dismiss="modal"
+                aria-label="Close"
+              >
+                <i aria-hidden="true">×</i>
+              </button>
+            </div>
+            <div className="modal-body">
+              <div className="metrics-tableset">
+                <table>
+                  <thead>
+                    <tr>
+                      <th>Aggregated Usage</th>
+                      <th></th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr>
+                      <td>
+                        Unique Investigations
+                        <small className="metrics-note">(views)</small>
+                        <i
+                          title="Refers to the number of one-hour sessions during which a user previewed/downloaded/copied files associated with this DOI."
+                          data-title="Unique Investigations (Views)"
+                        >
+                          ?
+                        </i>
+                      </td>
+                      <td>0</td>
+                    </tr>
+                    <tr>
+                      <td>
+                        Unique Requests
+                        <small className="metrics-note">(downloads)</small>
+                        <i
+                          title="Refers to the number of one-hour sessions during which a user previewed/downloaded/copied files associated with this DOI."
+                          data-title="Unique Requests (Downloads)"
+                        >
+                          ?
+                        </i>
+                      </td>
+                      <td>0</td>
+                    </tr>
+                    <tr>
+                      <td>
+                        Total Requests
+                        <i
+                          title="Refers to the number of one-hour sessions during which a user previewed/downloaded/copied files associated with this DOI."
+                          data-title="Total Requests"
+                        >
+                          ?
+                        </i>
+                      </td>
+                      <td>0</td>
+                    </tr>
+                  </tbody>
+                </table>
+                <table>
+                  <thead>
+                    <tr>
+                      <th>
+                        <span className="u-thead-content-with-input">
+                          Quarter
+                          <select>
+                            <option>No Data</option>
+                          </select>
+                        </span>
+                      </th>
+                      <th>Unique Investigations</th>
+                      <th>Unique Requests</th>
+                      <th>Total Requests</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr>
+                      <td>Jan-Mar</td>
+                      <td>--</td>
+                      <td>--</td>
+                      <td>--</td>
+                    </tr>
+                    <tr>
+                      <td>Apr-Jun</td>
+                      <td>--</td>
+                      <td>--</td>
+                      <td>--</td>
+                    </tr>
+                    <tr>
+                      <td>Jul-Sep</td>
+                      <td>--</td>
+                      <td>--</td>
+                      <td>--</td>
+                    </tr>
+                    <tr>
+                      <td>Oct-Dec</td>
+                      <td>--</td>
+                      <td>--</td>
+                      <td>--</td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+              <p className="metrics-caption  c-message c-message--type-info c-message--scope-section">
+                These metrics are presented according to the{' '}
+                <a
+                  href="https://makedatacount.org/"
+                  target="_blank"
+                  rel="noreferrer"
+                  aria-label="Opens in new window."
+                >
+                  Make Data Count
+                </a>{' '}
+                standard.
+              </p>
+            </div>
+            <div className="modal-footer">
+              <small className="metrics-note">
+                Metrics recorded since January 2022.
+              </small>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}

From 302ec3dbdf2cff5ecacbbe4ec77a008798700242 Mon Sep 17 00:00:00 2001
From: Wesley B <62723358+wesleyboar@users.noreply.github.com>
Date: Fri, 27 Jun 2025 17:45:32 -0500
Subject: [PATCH 48/79] feat: navigate sample content

---
 .../DataFilesForDPM/DataFilesForDPM.jsx       | 45 ++++++++++++++--
 .../DataFilesForDPM.module.css                | 14 +++++
 .../DataFilesForDPM/DataFilesForDPMViews.jsx  | 52 +++++++++++++++++++
 3 files changed, 106 insertions(+), 5 deletions(-)
 create mode 100644 client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPM.module.css
 create mode 100644 client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPMViews.jsx

diff --git a/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPM.jsx b/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPM.jsx
index f094e66387..a2308d26a9 100644
--- a/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPM.jsx
+++ b/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPM.jsx
@@ -1,14 +1,43 @@
-import { React, useEffect } from 'react';
+import { React, useEffect, useState } from 'react';
 import CMSWrapper from '_common/CMSWrapper';
 
 import DataFilesForDPMBreadcrumbs from './DataFilesForDPMBreadcrumbs';
+import DataFilesForDPMViews from './DataFilesForDPMViews';
+
 import DataFilesForDPMBrowse from './DataFilesForDPMBrowse';
+import DataFilesForDPMRead from './DataFilesForDPMRead';
+import DataFilesForDPMData from './DataFilesForDPMData';
+
+import style from './DataFilesForDPM.module.css';
+
+const tabs = [
+  {
+    label: 'Browse',
+    view: 'browse',
+    id: 'tab-browse',
+    contentId: 'content-browse',
+    Content: DataFilesForDPMBrowse,
+  },
+  {
+    label: 'Read',
+    view: 'read',
+    id: 'tab-read',
+    contentId: 'content-read',
+    Content: DataFilesForDPMRead,
+  },
+  {
+    label: 'Data',
+    view: 'Data',
+    id: 'tab-Data',
+    contentId: 'content-data',
+    Content: DataFilesForDPMData,
+  },
+];
 
 function DataFilesForDPM() {
+  const [view, setView] = useState('browse');
+
   useEffect(() => {
-    // FAQ: If @import'ed via DataFilesForDPM.global.css,
-    //      styles would remain active after component unmount
-    //      (the effect was seen on system-status/ table margin bottom)
     return CMSWrapper.useDynamicStylesheets(
       [
         'https://cdn.jsdelivr.net/gh/TACC/Core-CMS-Custom@5717c8d/digitalrocks_assets/css/cms.css',
@@ -21,7 +50,13 @@ function DataFilesForDPM() {
   return (
     <CMSWrapper>
       <DataFilesForDPMBreadcrumbs />
-      <DataFilesForDPMBrowse />
+      <DataFilesForDPMViews
+        navClassName={style.nav}
+        contentClassName={style.content}
+        tabs={tabs}
+        view={view}
+        setView={setView}
+      />
     </CMSWrapper>
   );
 }
diff --git a/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPM.module.css b/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPM.module.css
new file mode 100644
index 0000000000..0c4615569e
--- /dev/null
+++ b/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPM.module.css
@@ -0,0 +1,14 @@
+/* to position nav to the right of breadcrumbs */
+:global(#mimic-cms) {
+  position: relative;
+}
+.nav {
+  position: absolute;
+  right: var(--bs-gutter-x);
+  top: 0;
+}
+
+/* to remove space to left and right of view */
+.content :global(.tab-pane) {
+  padding-inline: unset; /* overrides core-styles */
+}
diff --git a/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPMViews.jsx b/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPMViews.jsx
new file mode 100644
index 0000000000..fe28ab5818
--- /dev/null
+++ b/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPMViews.jsx
@@ -0,0 +1,52 @@
+import React from 'react';
+
+export default function DataFilesForDPMViews({
+  tabs,
+  view,
+  setView,
+  navClassName,
+  contentClassName,
+}) {
+  return (
+    <>
+      <ul className={`nav nav-tabs ${navClassName}`} id="tabs" role="tablist">
+        {tabs.map((tab) => (
+          <li className="nav-item" key={tab.view} role="presentation">
+            <a
+              className={`nav-link${view === tab.view ? ' active' : ''}`}
+              id={tab.id}
+              data-toggle="tab"
+              href={`#${tab.contentId}`}
+              role="tab"
+              aria-controls={tab.contentId}
+              aria-selected={view === tab.view}
+              tabIndex={view === tab.view ? 0 : -1}
+              onClick={(e) => {
+                e.preventDefault();
+                setView(tab.view);
+              }}
+            >
+              {tab.label}
+            </a>
+          </li>
+        ))}
+      </ul>
+      <div id="tabs-content" className={`tab-content ${contentClassName}`}>
+        {tabs.map((tab) => {
+          const TabContent = tab.Content;
+          return (
+            <div
+              key={tab.view}
+              className={`tab-pane ${view === tab.view ? 'active' : ''}`}
+              id={tab.contentId}
+              role="tabpanel"
+              aria-labelledby={tab.id}
+            >
+              {view === tab.view ? <TabContent /> : null}
+            </div>
+          );
+        })}
+      </div>
+    </>
+  );
+}

From 597e83314ea7543863dfb6afa5840173a5d76bca Mon Sep 17 00:00:00 2001
From: Wesley B <62723358+wesleyboar@users.noreply.github.com>
Date: Fri, 27 Jun 2025 17:49:17 -0500
Subject: [PATCH 49/79] fix: remove tab-content/pane styles

---
 .../DataFiles/DataFilesForDPM/DataFilesForDPM.module.css    | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPM.module.css b/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPM.module.css
index 0c4615569e..c67212cf84 100644
--- a/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPM.module.css
+++ b/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPM.module.css
@@ -8,7 +8,9 @@
   top: 0;
 }
 
-/* to remove space to left and right of view */
+/* to remove styles from tab-pane */
 .content :global(.tab-pane) {
-  padding-inline: unset; /* overrides core-styles */
+  /* overrides core-styles */
+  border-top: none;
+  padding-inline: unset;
 }

From 845b2dc80448fdf9365aac64fc7c59a9c1f758bb Mon Sep 17 00:00:00 2001
From: Wesley B <62723358+wesleyboar@users.noreply.github.com>
Date: Fri, 27 Jun 2025 17:58:27 -0500
Subject: [PATCH 50/79] fix: image url and attr whitepsace

---
 .../DataFilesForDPM/DataFilesForDPMBrowse.jsx |  32 ++--
 .../DataFilesForDPM/DataFilesForDPMData.jsx   | 140 +++++++-----------
 .../DataFilesForDPM/DataFilesForDPMRead.jsx   |   9 +-
 3 files changed, 69 insertions(+), 112 deletions(-)

diff --git a/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPMBrowse.jsx b/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPMBrowse.jsx
index ed887fa83c..0dad60823c 100644
--- a/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPMBrowse.jsx
+++ b/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPMBrowse.jsx
@@ -27,12 +27,12 @@ export default function DataFilesForDPMBrowse() {
                     https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/65/10/6510c85e-4f00-4bde-b560-31614fb30ce0/dr-proj-317.png__576x576_subsampling-2.png 576w,
                     https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/65/10/6510c85e-4f00-4bde-b560-31614fb30ce0/dr-proj-317.png__768x768_subsampling-2.png 768w,
                     https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/65/10/6510c85e-4f00-4bde-b560-31614fb30ce0/dr-proj-317.png__800.0x764.0_subsampling-2.png 800.0w
-                "
+            "
             sizes="
                     (max-width: 576px) 576px,
                     (max-width: 768px) 768px,
                     800.0px
-                "
+            "
             className="img-fluid"
           />
         </li>
@@ -61,13 +61,13 @@ export default function DataFilesForDPMBrowse() {
                     https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/a7/be/a7be0632-6120-4dba-8b2d-b02c1727acac/dr-project-218.png__768x768_q85_subsampling-2.jpg 768w,
                     https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/a7/be/a7be0632-6120-4dba-8b2d-b02c1727acac/dr-project-218.png__992x992_q85_subsampling-2.jpg 992w,
                     https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/a7/be/a7be0632-6120-4dba-8b2d-b02c1727acac/dr-project-218.png__1104.0x1104.0_q85_subject_location-552%2C552_subsampling-2.jpg 1104.0w
-                "
+            "
             sizes="
                     (max-width: 576px) 576px,
                     (max-width: 768px) 768px,
                     (max-width: 992px) 992px,
                     1104.0px
-                "
+            "
             className="img-fluid"
           />
         </li>
@@ -92,12 +92,12 @@ export default function DataFilesForDPMBrowse() {
                     https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/65/10/6510c85e-4f00-4bde-b560-31614fb30ce0/dr-proj-317.png__576x576_subsampling-2.png 576w,
                     https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/65/10/6510c85e-4f00-4bde-b560-31614fb30ce0/dr-proj-317.png__768x768_subsampling-2.png 768w,
                     https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/65/10/6510c85e-4f00-4bde-b560-31614fb30ce0/dr-proj-317.png__800.0x764.0_subsampling-2.png 800.0w
-                "
+            "
             sizes="
                     (max-width: 576px) 576px,
                     (max-width: 768px) 768px,
                     800.0px
-                "
+            "
             className="img-fluid"
           />
         </li>
@@ -126,13 +126,13 @@ export default function DataFilesForDPMBrowse() {
                     https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/a7/be/a7be0632-6120-4dba-8b2d-b02c1727acac/dr-project-218.png__768x768_q85_subsampling-2.jpg 768w,
                     https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/a7/be/a7be0632-6120-4dba-8b2d-b02c1727acac/dr-project-218.png__992x992_q85_subsampling-2.jpg 992w,
                     https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/a7/be/a7be0632-6120-4dba-8b2d-b02c1727acac/dr-project-218.png__1104.0x1104.0_q85_subject_location-552%2C552_subsampling-2.jpg 1104.0w
-                "
+            "
             sizes="
                     (max-width: 576px) 576px,
                     (max-width: 768px) 768px,
                     (max-width: 992px) 992px,
                     1104.0px
-                "
+            "
             className="img-fluid"
           />
         </li>
@@ -157,12 +157,12 @@ export default function DataFilesForDPMBrowse() {
                     https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/65/10/6510c85e-4f00-4bde-b560-31614fb30ce0/dr-proj-317.png__576x576_subsampling-2.png 576w,
                     https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/65/10/6510c85e-4f00-4bde-b560-31614fb30ce0/dr-proj-317.png__768x768_subsampling-2.png 768w,
                     https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/65/10/6510c85e-4f00-4bde-b560-31614fb30ce0/dr-proj-317.png__800.0x764.0_subsampling-2.png 800.0w
-                "
+            "
             sizes="
                     (max-width: 576px) 576px,
                     (max-width: 768px) 768px,
                     800.0px
-                "
+            "
             className="img-fluid"
           />
         </li>
@@ -191,13 +191,13 @@ export default function DataFilesForDPMBrowse() {
                     https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/a7/be/a7be0632-6120-4dba-8b2d-b02c1727acac/dr-project-218.png__768x768_q85_subsampling-2.jpg 768w,
                     https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/a7/be/a7be0632-6120-4dba-8b2d-b02c1727acac/dr-project-218.png__992x992_q85_subsampling-2.jpg 992w,
                     https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/a7/be/a7be0632-6120-4dba-8b2d-b02c1727acac/dr-project-218.png__1104.0x1104.0_q85_subject_location-552%2C552_subsampling-2.jpg 1104.0w
-                "
+            "
             sizes="
                     (max-width: 576px) 576px,
                     (max-width: 768px) 768px,
                     (max-width: 992px) 992px,
                     1104.0px
-                "
+            "
             className="img-fluid"
           />
         </li>
@@ -222,12 +222,12 @@ export default function DataFilesForDPMBrowse() {
                     https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/65/10/6510c85e-4f00-4bde-b560-31614fb30ce0/dr-proj-317.png__576x576_subsampling-2.png 576w,
                     https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/65/10/6510c85e-4f00-4bde-b560-31614fb30ce0/dr-proj-317.png__768x768_subsampling-2.png 768w,
                     https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/65/10/6510c85e-4f00-4bde-b560-31614fb30ce0/dr-proj-317.png__800.0x764.0_subsampling-2.png 800.0w
-                "
+            "
             sizes="
                     (max-width: 576px) 576px,
                     (max-width: 768px) 768px,
                     800.0px
-                "
+            "
             className="img-fluid"
           />
         </li>
@@ -256,13 +256,13 @@ export default function DataFilesForDPMBrowse() {
                     https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/a7/be/a7be0632-6120-4dba-8b2d-b02c1727acac/dr-project-218.png__768x768_q85_subsampling-2.jpg 768w,
                     https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/a7/be/a7be0632-6120-4dba-8b2d-b02c1727acac/dr-project-218.png__992x992_q85_subsampling-2.jpg 992w,
                     https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/a7/be/a7be0632-6120-4dba-8b2d-b02c1727acac/dr-project-218.png__1104.0x1104.0_q85_subject_location-552%2C552_subsampling-2.jpg 1104.0w
-                "
+            "
             sizes="
                     (max-width: 576px) 576px,
                     (max-width: 768px) 768px,
                     (max-width: 992px) 992px,
                     1104.0px
-                "
+            "
             className="img-fluid"
           />
         </li>
diff --git a/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPMData.jsx b/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPMData.jsx
index 1992ee8ac7..b9cc4e671a 100644
--- a/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPMData.jsx
+++ b/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPMData.jsx
@@ -51,25 +51,17 @@ export default function DataFilesForDPMData() {
               src="/media/filer_public_thumbnails/filer_public/30/62/3062e147-8fdb-4cd8-afa1-3fbbc6c42b31/dr-proj-317-data-1352.jpg__1000.0x1000.0_q85_subsampling-2.jpg"
               alt=""
               srcSet="
-            
-                /media/filer_public_thumbnails/filer_public/30/62/3062e147-8fdb-4cd8-afa1-3fbbc6c42b31/dr-proj-317-data-1352.jpg__576x576_q85_subsampling-2.jpg 576w,
-            
-                /media/filer_public_thumbnails/filer_public/30/62/3062e147-8fdb-4cd8-afa1-3fbbc6c42b31/dr-proj-317-data-1352.jpg__768x768_q85_subsampling-2.jpg 768w,
-            
-                /media/filer_public_thumbnails/filer_public/30/62/3062e147-8fdb-4cd8-afa1-3fbbc6c42b31/dr-proj-317-data-1352.jpg__992x992_q85_subsampling-2.jpg 992w,
-            
-            /media/filer_public_thumbnails/filer_public/30/62/3062e147-8fdb-4cd8-afa1-3fbbc6c42b31/dr-proj-317-data-1352.jpg__1000.0x1000.0_q85_subsampling-2.jpg 1000.0w
-        "
+                      https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/30/62/3062e147-8fdb-4cd8-afa1-3fbbc6c42b31/dr-proj-317-data-1352.jpg__576x576_q85_subsampling-2.jpg 576w,
+                      https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/30/62/3062e147-8fdb-4cd8-afa1-3fbbc6c42b31/dr-proj-317-data-1352.jpg__768x768_q85_subsampling-2.jpg 768w,
+                      https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/30/62/3062e147-8fdb-4cd8-afa1-3fbbc6c42b31/dr-proj-317-data-1352.jpg__992x992_q85_subsampling-2.jpg 992w,
+                      https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/30/62/3062e147-8fdb-4cd8-afa1-3fbbc6c42b31/dr-proj-317-data-1352.jpg__1000.0x1000.0_q85_subsampling-2.jpg 1000.0w
+              "
               sizes="
-            
-                (max-width: 576px) 576px,
-            
-                (max-width: 768px) 768px,
-            
-                (max-width: 992px) 992px,
-            
-            1000.0px
-        "
+                      (max-width: 576px) 576px,
+                      (max-width: 768px) 768px,
+                      (max-width: 992px) 992px,
+                      1000.0px
+              "
               className="img-fluid"
             />
 
@@ -179,25 +171,17 @@ export default function DataFilesForDPMData() {
               src="/media/filer_public_thumbnails/filer_public/30/62/3062e147-8fdb-4cd8-afa1-3fbbc6c42b31/dr-proj-317-data-1352.jpg__1000.0x1000.0_q85_subsampling-2.jpg"
               alt=""
               srcSet="
-            
-                /media/filer_public_thumbnails/filer_public/30/62/3062e147-8fdb-4cd8-afa1-3fbbc6c42b31/dr-proj-317-data-1352.jpg__576x576_q85_subsampling-2.jpg 576w,
-            
-                /media/filer_public_thumbnails/filer_public/30/62/3062e147-8fdb-4cd8-afa1-3fbbc6c42b31/dr-proj-317-data-1352.jpg__768x768_q85_subsampling-2.jpg 768w,
-            
-                /media/filer_public_thumbnails/filer_public/30/62/3062e147-8fdb-4cd8-afa1-3fbbc6c42b31/dr-proj-317-data-1352.jpg__992x992_q85_subsampling-2.jpg 992w,
-            
-            /media/filer_public_thumbnails/filer_public/30/62/3062e147-8fdb-4cd8-afa1-3fbbc6c42b31/dr-proj-317-data-1352.jpg__1000.0x1000.0_q85_subsampling-2.jpg 1000.0w
-        "
+                      https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/30/62/3062e147-8fdb-4cd8-afa1-3fbbc6c42b31/dr-proj-317-data-1352.jpg__576x576_q85_subsampling-2.jpg 576w,
+                      https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/30/62/3062e147-8fdb-4cd8-afa1-3fbbc6c42b31/dr-proj-317-data-1352.jpg__768x768_q85_subsampling-2.jpg 768w,
+                      https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/30/62/3062e147-8fdb-4cd8-afa1-3fbbc6c42b31/dr-proj-317-data-1352.jpg__992x992_q85_subsampling-2.jpg 992w,
+                      https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/30/62/3062e147-8fdb-4cd8-afa1-3fbbc6c42b31/dr-proj-317-data-1352.jpg__1000.0x1000.0_q85_subsampling-2.jpg 1000.0w
+              "
               sizes="
-            
-                (max-width: 576px) 576px,
-            
-                (max-width: 768px) 768px,
-            
-                (max-width: 992px) 992px,
-            
-            1000.0px
-        "
+                      (max-width: 576px) 576px,
+                      (max-width: 768px) 768px,
+                      (max-width: 992px) 992px,
+                      1000.0px
+              "
               className="img-fluid"
             />
 
@@ -307,25 +291,17 @@ export default function DataFilesForDPMData() {
               src="/media/filer_public_thumbnails/filer_public/30/62/3062e147-8fdb-4cd8-afa1-3fbbc6c42b31/dr-proj-317-data-1352.jpg__1000.0x1000.0_q85_subsampling-2.jpg"
               alt=""
               srcSet="
-            
-                /media/filer_public_thumbnails/filer_public/30/62/3062e147-8fdb-4cd8-afa1-3fbbc6c42b31/dr-proj-317-data-1352.jpg__576x576_q85_subsampling-2.jpg 576w,
-            
-                /media/filer_public_thumbnails/filer_public/30/62/3062e147-8fdb-4cd8-afa1-3fbbc6c42b31/dr-proj-317-data-1352.jpg__768x768_q85_subsampling-2.jpg 768w,
-            
-                /media/filer_public_thumbnails/filer_public/30/62/3062e147-8fdb-4cd8-afa1-3fbbc6c42b31/dr-proj-317-data-1352.jpg__992x992_q85_subsampling-2.jpg 992w,
-            
-            /media/filer_public_thumbnails/filer_public/30/62/3062e147-8fdb-4cd8-afa1-3fbbc6c42b31/dr-proj-317-data-1352.jpg__1000.0x1000.0_q85_subsampling-2.jpg 1000.0w
-        "
+                      https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/30/62/3062e147-8fdb-4cd8-afa1-3fbbc6c42b31/dr-proj-317-data-1352.jpg__576x576_q85_subsampling-2.jpg 576w,
+                      https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/30/62/3062e147-8fdb-4cd8-afa1-3fbbc6c42b31/dr-proj-317-data-1352.jpg__768x768_q85_subsampling-2.jpg 768w,
+                      https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/30/62/3062e147-8fdb-4cd8-afa1-3fbbc6c42b31/dr-proj-317-data-1352.jpg__992x992_q85_subsampling-2.jpg 992w,
+                      https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/30/62/3062e147-8fdb-4cd8-afa1-3fbbc6c42b31/dr-proj-317-data-1352.jpg__1000.0x1000.0_q85_subsampling-2.jpg 1000.0w
+              "
               sizes="
-            
-                (max-width: 576px) 576px,
-            
-                (max-width: 768px) 768px,
-            
-                (max-width: 992px) 992px,
-            
-            1000.0px
-        "
+                      (max-width: 576px) 576px,
+                      (max-width: 768px) 768px,
+                      (max-width: 992px) 992px,
+                      1000.0px
+              "
               className="img-fluid"
             />
 
@@ -435,25 +411,17 @@ export default function DataFilesForDPMData() {
               src="/media/filer_public_thumbnails/filer_public/30/62/3062e147-8fdb-4cd8-afa1-3fbbc6c42b31/dr-proj-317-data-1352.jpg__1000.0x1000.0_q85_subsampling-2.jpg"
               alt=""
               srcSet="
-            
-                /media/filer_public_thumbnails/filer_public/30/62/3062e147-8fdb-4cd8-afa1-3fbbc6c42b31/dr-proj-317-data-1352.jpg__576x576_q85_subsampling-2.jpg 576w,
-            
-                /media/filer_public_thumbnails/filer_public/30/62/3062e147-8fdb-4cd8-afa1-3fbbc6c42b31/dr-proj-317-data-1352.jpg__768x768_q85_subsampling-2.jpg 768w,
-            
-                /media/filer_public_thumbnails/filer_public/30/62/3062e147-8fdb-4cd8-afa1-3fbbc6c42b31/dr-proj-317-data-1352.jpg__992x992_q85_subsampling-2.jpg 992w,
-            
-            /media/filer_public_thumbnails/filer_public/30/62/3062e147-8fdb-4cd8-afa1-3fbbc6c42b31/dr-proj-317-data-1352.jpg__1000.0x1000.0_q85_subsampling-2.jpg 1000.0w
-        "
+                      https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/30/62/3062e147-8fdb-4cd8-afa1-3fbbc6c42b31/dr-proj-317-data-1352.jpg__576x576_q85_subsampling-2.jpg 576w,
+                      https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/30/62/3062e147-8fdb-4cd8-afa1-3fbbc6c42b31/dr-proj-317-data-1352.jpg__768x768_q85_subsampling-2.jpg 768w,
+                      https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/30/62/3062e147-8fdb-4cd8-afa1-3fbbc6c42b31/dr-proj-317-data-1352.jpg__992x992_q85_subsampling-2.jpg 992w,
+                      https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/30/62/3062e147-8fdb-4cd8-afa1-3fbbc6c42b31/dr-proj-317-data-1352.jpg__1000.0x1000.0_q85_subsampling-2.jpg 1000.0w
+              "
               sizes="
-            
-                (max-width: 576px) 576px,
-            
-                (max-width: 768px) 768px,
-            
-                (max-width: 992px) 992px,
-            
-            1000.0px
-        "
+                      (max-width: 576px) 576px,
+                      (max-width: 768px) 768px,
+                      (max-width: 992px) 992px,
+                      1000.0px
+              "
               className="img-fluid"
             />
 
@@ -563,25 +531,17 @@ export default function DataFilesForDPMData() {
               src="/media/filer_public_thumbnails/filer_public/30/62/3062e147-8fdb-4cd8-afa1-3fbbc6c42b31/dr-proj-317-data-1352.jpg__1000.0x1000.0_q85_subsampling-2.jpg"
               alt=""
               srcSet="
-            
-                /media/filer_public_thumbnails/filer_public/30/62/3062e147-8fdb-4cd8-afa1-3fbbc6c42b31/dr-proj-317-data-1352.jpg__576x576_q85_subsampling-2.jpg 576w,
-            
-                /media/filer_public_thumbnails/filer_public/30/62/3062e147-8fdb-4cd8-afa1-3fbbc6c42b31/dr-proj-317-data-1352.jpg__768x768_q85_subsampling-2.jpg 768w,
-            
-                /media/filer_public_thumbnails/filer_public/30/62/3062e147-8fdb-4cd8-afa1-3fbbc6c42b31/dr-proj-317-data-1352.jpg__992x992_q85_subsampling-2.jpg 992w,
-            
-            /media/filer_public_thumbnails/filer_public/30/62/3062e147-8fdb-4cd8-afa1-3fbbc6c42b31/dr-proj-317-data-1352.jpg__1000.0x1000.0_q85_subsampling-2.jpg 1000.0w
-        "
+                      https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/30/62/3062e147-8fdb-4cd8-afa1-3fbbc6c42b31/dr-proj-317-data-1352.jpg__576x576_q85_subsampling-2.jpg 576w,
+                      https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/30/62/3062e147-8fdb-4cd8-afa1-3fbbc6c42b31/dr-proj-317-data-1352.jpg__768x768_q85_subsampling-2.jpg 768w,
+                      https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/30/62/3062e147-8fdb-4cd8-afa1-3fbbc6c42b31/dr-proj-317-data-1352.jpg__992x992_q85_subsampling-2.jpg 992w,
+                      https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/30/62/3062e147-8fdb-4cd8-afa1-3fbbc6c42b31/dr-proj-317-data-1352.jpg__1000.0x1000.0_q85_subsampling-2.jpg 1000.0w
+              "
               sizes="
-            
-                (max-width: 576px) 576px,
-            
-                (max-width: 768px) 768px,
-            
-                (max-width: 992px) 992px,
-            
-            1000.0px
-        "
+                      (max-width: 576px) 576px,
+                      (max-width: 768px) 768px,
+                      (max-width: 992px) 992px,
+                      1000.0px
+              "
               className="img-fluid"
             />
 
diff --git a/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPMRead.jsx b/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPMRead.jsx
index e4c91875be..83e7baec30 100644
--- a/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPMRead.jsx
+++ b/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPMRead.jsx
@@ -116,12 +116,9 @@ export default function DataFilesForDPMRead() {
               src="/media/filer_public_thumbnails/filer_public/65/10/6510c85e-4f00-4bde-b560-31614fb30ce0/dr-proj-317.png__800.0x764.0_subsampling-2.png"
               alt=""
               srcSet="
-            
-                /media/filer_public_thumbnails/filer_public/65/10/6510c85e-4f00-4bde-b560-31614fb30ce0/dr-proj-317.png__576x576_subsampling-2.png 576w,
-            
-                /media/filer_public_thumbnails/filer_public/65/10/6510c85e-4f00-4bde-b560-31614fb30ce0/dr-proj-317.png__768x768_subsampling-2.png 768w,
-            
-            /media/filer_public_thumbnails/filer_public/65/10/6510c85e-4f00-4bde-b560-31614fb30ce0/dr-proj-317.png__800.0x764.0_subsampling-2.png 800.0w
+                      https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/65/10/6510c85e-4f00-4bde-b560-31614fb30ce0/dr-proj-317.png__576x576_subsampling-2.png 576w,
+                      https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/65/10/6510c85e-4f00-4bde-b560-31614fb30ce0/dr-proj-317.png__768x768_subsampling-2.png 768w,
+                      https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/65/10/6510c85e-4f00-4bde-b560-31614fb30ce0/dr-proj-317.png__800.0x764.0_subsampling-2.png 800.0w
         "
               sizes="
             

From 06a9a1fab01095bff1deef4fc984d4d3b41a810e Mon Sep 17 00:00:00 2001
From: Wesley B <62723358+wesleyboar@users.noreply.github.com>
Date: Fri, 27 Jun 2025 18:09:30 -0500
Subject: [PATCH 51/79] fix: whtiespace between HTML tags for DPMRead

---
 .../DataFilesForDPM/DataFilesForDPMRead.jsx     | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPMRead.jsx b/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPMRead.jsx
index 83e7baec30..5745378292 100644
--- a/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPMRead.jsx
+++ b/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPMRead.jsx
@@ -57,6 +57,7 @@ export default function DataFilesForDPMRead() {
 
         <p>
           <strong>Download Citation:</strong>
+          {' '}
           <a
             href="https://api.datacite.org/application/vnd.datacite.datacite+xml/10.17612/f4h1-w124"
             rel="noreferrer"
@@ -64,8 +65,8 @@ export default function DataFilesForDPMRead() {
             aria-label="Opens in new window."
           >
             DataCite XML
-          </a>{' '}
-          |
+          </a>
+          {' '}|{' '}
           <a
             href="https://api.datacite.org/application/x-research-info-systems/10.17612/f4h1-w124"
             rel="noreferrer"
@@ -73,8 +74,8 @@ export default function DataFilesForDPMRead() {
             aria-label="Opens in new window."
           >
             RIS
-          </a>{' '}
-          |
+          </a>
+          {' '}|{' '}
           <a
             href="https://api.datacite.org/application/x-bibtex/10.17612/f4h1-w124"
             rel="noreferrer"
@@ -82,8 +83,8 @@ export default function DataFilesForDPMRead() {
             aria-label="Opens in new window."
           >
             BibTeX
-          </a>{' '}
-          |
+          </a>
+          {' '}|{' '}
           <a
             href="https://commons.datacite.org/doi.org/10.17612/f4h1-w124"
             rel="noreferrer"
@@ -95,8 +96,8 @@ export default function DataFilesForDPMRead() {
           <br />
           <mark>
             <output>0</output> Citations
-          </mark>{' '}
-          |
+          </mark>
+          {' '}|{' '}
           <strong>
             <a
               className="c-button c-button--as-link"

From dd7fb2c882b20fea62614223500ab8730e4a2bc0 Mon Sep 17 00:00:00 2001
From: Wesley B <62723358+wesleyboar@users.noreply.github.com>
Date: Fri, 27 Jun 2025 18:18:19 -0500
Subject: [PATCH 52/79] chore: npm prettier --write client

---
 .../DataFilesForDPM/DataFilesForDPMRead.jsx   | 19 +++++++++----------
 1 file changed, 9 insertions(+), 10 deletions(-)

diff --git a/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPMRead.jsx b/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPMRead.jsx
index 5745378292..1f19bcf420 100644
--- a/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPMRead.jsx
+++ b/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPMRead.jsx
@@ -56,8 +56,7 @@ export default function DataFilesForDPMRead() {
         </p>
 
         <p>
-          <strong>Download Citation:</strong>
-          {' '}
+          <strong>Download Citation:</strong>{' '}
           <a
             href="https://api.datacite.org/application/vnd.datacite.datacite+xml/10.17612/f4h1-w124"
             rel="noreferrer"
@@ -65,8 +64,8 @@ export default function DataFilesForDPMRead() {
             aria-label="Opens in new window."
           >
             DataCite XML
-          </a>
-          {' '}|{' '}
+          </a>{' '}
+          |{' '}
           <a
             href="https://api.datacite.org/application/x-research-info-systems/10.17612/f4h1-w124"
             rel="noreferrer"
@@ -74,8 +73,8 @@ export default function DataFilesForDPMRead() {
             aria-label="Opens in new window."
           >
             RIS
-          </a>
-          {' '}|{' '}
+          </a>{' '}
+          |{' '}
           <a
             href="https://api.datacite.org/application/x-bibtex/10.17612/f4h1-w124"
             rel="noreferrer"
@@ -83,8 +82,8 @@ export default function DataFilesForDPMRead() {
             aria-label="Opens in new window."
           >
             BibTeX
-          </a>
-          {' '}|{' '}
+          </a>{' '}
+          |{' '}
           <a
             href="https://commons.datacite.org/doi.org/10.17612/f4h1-w124"
             rel="noreferrer"
@@ -96,8 +95,8 @@ export default function DataFilesForDPMRead() {
           <br />
           <mark>
             <output>0</output> Citations
-          </mark>
-          {' '}|{' '}
+          </mark>{' '}
+          |{' '}
           <strong>
             <a
               className="c-button c-button--as-link"

From 07bb33284e26821c25047b5edc11569151d1bf03 Mon Sep 17 00:00:00 2001
From: Wesley B <62723358+wesleyboar@users.noreply.github.com>
Date: Mon, 30 Jun 2025 11:20:39 -0500
Subject: [PATCH 53/79] fix: misaligned image in <div> missing `container`

Also added on design:
- https://pprd.digitalrocks.tacc.utexas.edu/datasets/317/
- https://pprd.digitalrocks.tacc.utexas.edu/datasets/218/
---
 .../DataFiles/DataFilesForDPM/DataFilesForDPMRead.jsx        | 2 +-
 server/portal/templates/includes/cms_ui.html                 | 5 ++++-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPMRead.jsx b/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPMRead.jsx
index 1f19bcf420..2b18bce470 100644
--- a/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPMRead.jsx
+++ b/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPMRead.jsx
@@ -109,7 +109,7 @@ export default function DataFilesForDPMRead() {
           </strong>
         </p>
       </div>
-      <div className="o-section o-section--style-light">
+      <div className="o-section o-section--style-light container">
         <div className="row project-overview">
           <div className="col col-12 col-sm-12 col-md-3 col-lg-3 col-xl-3">
             <img
diff --git a/server/portal/templates/includes/cms_ui.html b/server/portal/templates/includes/cms_ui.html
index 9b1671a012..42aecb4b1c 100644
--- a/server/portal/templates/includes/cms_ui.html
+++ b/server/portal/templates/includes/cms_ui.html
@@ -6,10 +6,13 @@
   @import url(/static/site_cms/css/build/core-cms.css) layer(mimic-cms.project);
   @import url('https://cdn.jsdelivr.net/npm/@tacc/core-styles@v2/dist/trumps/s-footer.css') layer(mimic-cms.project);
 
+  /* To mimic Bootstrap v4 (which CMS uses) */
+  .workbench-content .container { --bs-gutter-x: 15px; }
+  .workbench-content .row { --bs-gutter-x: 30px; }
+
   /* To change high-level styles to match CMS */
   .workbench-wrapper { color: var(--global-color-primary--x-dark); }
   .workbench-content .container {
-    --bs-gutter-x: 15px;
     margin-left: revert-layer;
     max-width: revert-layer;
   }

From b741029f8885ba3e50a6289cd52cc62a3ab55bef Mon Sep 17 00:00:00 2001
From: Wesley B <62723358+wesleyboar@users.noreply.github.com>
Date: Mon, 30 Jun 2025 11:35:01 -0500
Subject: [PATCH 54/79] fix: wrong markup for heading

Also fixed in design:
- https://pprd.digitalrocks.tacc.utexas.edu/datasets/317/
- https://pprd.digitalrocks.tacc.utexas.edu/datasets/218/
---
 .../DataFiles/DataFilesForDPM/DataFilesForDPMRead.jsx           | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPMRead.jsx b/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPMRead.jsx
index 2b18bce470..08c1ea95a5 100644
--- a/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPMRead.jsx
+++ b/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPMRead.jsx
@@ -276,7 +276,7 @@ export default function DataFilesForDPMRead() {
 
         <div className="project-content">
           <div id="project-files">
-            <h2>Files</h2>
+            <h3>Files</h3>
 
             <ul className="data-tree">
               <li className="data-tree__item" id="sample-berea">

From 14197a843b90f106f9ef15bc14e254454f14f364 Mon Sep 17 00:00:00 2001
From: Wesley B <62723358+wesleyboar@users.noreply.github.com>
Date: Mon, 30 Jun 2025 11:35:29 -0500
Subject: [PATCH 55/79] fix: nested container alignement

mimics a CMS idiosyncrasy
---
 server/portal/templates/includes/cms_ui.html | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/server/portal/templates/includes/cms_ui.html b/server/portal/templates/includes/cms_ui.html
index 42aecb4b1c..f6f0ae571f 100644
--- a/server/portal/templates/includes/cms_ui.html
+++ b/server/portal/templates/includes/cms_ui.html
@@ -6,6 +6,10 @@
   @import url(/static/site_cms/css/build/core-cms.css) layer(mimic-cms.project);
   @import url('https://cdn.jsdelivr.net/npm/@tacc/core-styles@v2/dist/trumps/s-footer.css') layer(mimic-cms.project);
 
+  /* To mimic a CMS idiosyncrasy */
+  /* https://github.com/TACC/Core-CMS/blob/v4.31.0/taccsite_cms/templates/base.html#L73-L76 */
+  #cms-content-container.container .container { padding-inline: 0; }
+
   /* To mimic Bootstrap v4 (which CMS uses) */
   .workbench-content .container { --bs-gutter-x: 15px; }
   .workbench-content .row { --bs-gutter-x: 30px; }

From 134827f20c01dd1bf1cf4c6ccaa074832226af62 Mon Sep 17 00:00:00 2001
From: Wesley B <62723358+wesleyboar@users.noreply.github.com>
Date: Mon, 30 Jun 2025 11:43:05 -0500
Subject: [PATCH 56/79] chore: npm prettier --write client

---
 .../components/DataFiles/DataFilesForDPM/DataFilesForDPM.jsx    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPM.jsx b/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPM.jsx
index a2308d26a9..e502e090f6 100644
--- a/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPM.jsx
+++ b/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPM.jsx
@@ -43,7 +43,7 @@ function DataFilesForDPM() {
         'https://cdn.jsdelivr.net/gh/TACC/Core-CMS-Custom@5717c8d/digitalrocks_assets/css/cms.css',
         'https://cdn.jsdelivr.net/gh/TACC/Core-CMS-Custom@5717c8d/digitalrocks_assets/css/for-core-styles.css',
       ],
-      'DataFilesForDPM'
+      'DataFilesForDPM',
     );
   }, []);
 

From a3dda1d9b666b4f6eb1ebe6bc666c34ffad1fe03 Mon Sep 17 00:00:00 2001
From: Wesley B <62723358+wesleyboar@users.noreply.github.com>
Date: Mon, 30 Jun 2025 11:43:15 -0500
Subject: [PATCH 57/79] fix: missing spaces

---
 .../DataFilesForDPM/DataFilesForDPMRead.jsx   | 45 +++++++++----------
 1 file changed, 20 insertions(+), 25 deletions(-)

diff --git a/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPMRead.jsx b/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPMRead.jsx
index 08c1ea95a5..2747793f37 100644
--- a/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPMRead.jsx
+++ b/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPMRead.jsx
@@ -283,8 +283,7 @@ export default function DataFilesForDPMRead() {
                 <details>
                   <summary className="u-summary-link-merged">
                     <a className="u-title-needs-colon">
-                      <span>Sample</span>
-                      <strong>Berea</strong>
+                      <span>Sample</span> <strong>Berea</strong>
                     </a>
                   </summary>
                   {/* <p className="js-show-more"> */}
@@ -334,7 +333,7 @@ export default function DataFilesForDPMRead() {
                       className="u-title-needs-colon"
                       href="/datasets/317/origin-data/1352/"
                     >
-                      <span>Origin Data</span>
+                      <span>Origin Data</span>{' '}
                       <strong>Berea_2d25um_grayscale.raw</strong>
                     </a>
                   </li>
@@ -343,7 +342,7 @@ export default function DataFilesForDPMRead() {
                       className="u-title-needs-colon"
                       href="/datasets/317/origin-data/1352/"
                     >
-                      <span>Origin Data</span>
+                      <span>Origin Data</span>{' '}
                       <strong>Berea_2d25um_grayscale_filtered.raw</strong>
                     </a>
                   </li>
@@ -352,7 +351,7 @@ export default function DataFilesForDPMRead() {
                       className="u-title-needs-colon"
                       href="/datasets/317/origin-data/1352/"
                     >
-                      <span>Origin Data</span>
+                      <span>Origin Data</span>{' '}
                       <strong>Berea_2d25um_binary.raw</strong>
                     </a>
                   </li>
@@ -362,8 +361,7 @@ export default function DataFilesForDPMRead() {
                 <details>
                   <summary className="u-summary-link-merged">
                     <a className="u-title-needs-colon">
-                      <span>Sample</span>
-                      <strong>Bandera Brown</strong>
+                      <span>Sample</span> <strong>Bandera Brown</strong>
                     </a>
                   </summary>
                   {/* <p className="js-show-more"> */}
@@ -413,7 +411,7 @@ export default function DataFilesForDPMRead() {
                       className="u-title-needs-colon"
                       href="/datasets/317/origin-data/1352/"
                     >
-                      <span>Origin Data</span>
+                      <span>Origin Data</span>{' '}
                       <strong>BanderaBrown_2d25um_grayscale.raw</strong>
                     </a>
                   </li>
@@ -422,7 +420,7 @@ export default function DataFilesForDPMRead() {
                       className="u-title-needs-colon"
                       href="/datasets/317/origin-data/1352/"
                     >
-                      <span>Origin Data</span>
+                      <span>Origin Data</span>{' '}
                       <strong>BanderaBrown_2d25um_binary.raw</strong>
                     </a>
                   </li>
@@ -431,7 +429,7 @@ export default function DataFilesForDPMRead() {
                       className="u-title-needs-colon"
                       href="/datasets/317/origin-data/1352/"
                     >
-                      <span>Origin Data</span>
+                      <span>Origin Data</span>{' '}
                       <strong>
                         BanderaBrown_2d25um_grayscale_filtered.raw
                       </strong>
@@ -443,8 +441,7 @@ export default function DataFilesForDPMRead() {
                 <details>
                   <summary className="u-summary-link-merged">
                     <a className="u-title-needs-colon">
-                      <span>Sample</span>
-                      <strong>Bandera Gray</strong>
+                      <span>Sample</span> <strong>Bandera Gray</strong>
                     </a>
                   </summary>
                   {/* <p className="js-show-more"> */}
@@ -494,7 +491,7 @@ export default function DataFilesForDPMRead() {
                       className="u-title-needs-colon"
                       href="/datasets/317/origin-data/1352/"
                     >
-                      <span>Origin Data</span>
+                      <span>Origin Data</span>{' '}
                       <strong>BanderaGray_2d25um_binary.raw</strong>
                     </a>
                   </li>
@@ -503,7 +500,7 @@ export default function DataFilesForDPMRead() {
                       className="u-title-needs-colon"
                       href="/datasets/317/origin-data/1352/"
                     >
-                      <span>Origin Data</span>
+                      <span>Origin Data</span>{' '}
                       <strong>BanderaGray_2d25um_grayscale_filtered.raw</strong>
                     </a>
                   </li>
@@ -512,7 +509,7 @@ export default function DataFilesForDPMRead() {
                       className="u-title-needs-colon"
                       href="/datasets/317/origin-data/1352/"
                     >
-                      <span>Origin Data</span>
+                      <span>Origin Data</span>{' '}
                       <strong>BanderaGray_2d25um_grayscale.raw</strong>
                     </a>
                   </li>
@@ -522,8 +519,7 @@ export default function DataFilesForDPMRead() {
                 <details>
                   <summary className="u-summary-link-merged">
                     <a className="u-title-needs-colon">
-                      <span>Sample</span>
-                      <strong>Bentheimer</strong>
+                      <span>Sample</span> <strong>Bentheimer</strong>
                     </a>
                   </summary>
                   {/* <p className="js-show-more"> */}
@@ -573,7 +569,7 @@ export default function DataFilesForDPMRead() {
                       className="u-title-needs-colon"
                       href="/datasets/317/origin-data/1352/"
                     >
-                      <span>Origin Data</span>
+                      <span>Origin Data</span>{' '}
                       <strong>Bentheimer_2d25um_binary.raw</strong>
                     </a>
                   </li>
@@ -582,7 +578,7 @@ export default function DataFilesForDPMRead() {
                       className="u-title-needs-colon"
                       href="/datasets/317/origin-data/1352/"
                     >
-                      <span>Origin Data</span>
+                      <span>Origin Data</span>{' '}
                       <strong>Bentheimer_2d25um_grayscale_filtered.raw</strong>
                     </a>
                   </li>
@@ -591,7 +587,7 @@ export default function DataFilesForDPMRead() {
                       className="u-title-needs-colon"
                       href="/datasets/317/origin-data/1352/"
                     >
-                      <span>Origin Data</span>
+                      <span>Origin Data</span>{' '}
                       <strong>Bentheimer_2d25um_grayscale.raw</strong>
                     </a>
                   </li>
@@ -601,8 +597,7 @@ export default function DataFilesForDPMRead() {
                 <details>
                   <summary className="u-summary-link-merged">
                     <a className="u-title-needs-colon">
-                      <span>Sample</span>
-                      <strong>Berea Sister Gray</strong>
+                      <span>Sample</span> <strong>Berea Sister Gray</strong>
                     </a>
                   </summary>
                   {/* <p className="js-show-more"> */}
@@ -652,7 +647,7 @@ export default function DataFilesForDPMRead() {
                       className="u-title-needs-colon"
                       href="/datasets/317/origin-data/1352/"
                     >
-                      <span>Origin Data</span>
+                      <span>Origin Data</span>{' '}
                       <strong>BSG_2d25um_grayscale.raw</strong>
                     </a>
                   </li>
@@ -661,7 +656,7 @@ export default function DataFilesForDPMRead() {
                       className="u-title-needs-colon"
                       href="/datasets/317/origin-data/1352/"
                     >
-                      <span>Origin Data</span>
+                      <span>Origin Data</span>{' '}
                       <strong>BSG_2d25um_grayscale_filtered.raw</strong>
                     </a>
                   </li>
@@ -670,7 +665,7 @@ export default function DataFilesForDPMRead() {
                       className="u-title-needs-colon"
                       href="/datasets/317/origin-data/1352/"
                     >
-                      <span>Origin Data</span>
+                      <span>Origin Data</span>{' '}
                       <strong>BSG_2d25um_binary.raw</strong>
                     </a>
                   </li>

From 94c8ff4be0ef468fe52677f20d9d09ea5e46e877 Mon Sep 17 00:00:00 2001
From: Wesley B <62723358+wesleyboar@users.noreply.github.com>
Date: Mon, 30 Jun 2025 11:50:09 -0500
Subject: [PATCH 58/79] fix: misaligned nested container

---
 server/portal/templates/includes/cms_ui.html | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/server/portal/templates/includes/cms_ui.html b/server/portal/templates/includes/cms_ui.html
index f6f0ae571f..99db3b0794 100644
--- a/server/portal/templates/includes/cms_ui.html
+++ b/server/portal/templates/includes/cms_ui.html
@@ -20,6 +20,10 @@
     margin-left: revert-layer;
     max-width: revert-layer;
   }
+  .workbench-content .row {
+    margin-right: revert-layer;
+    margin-left: revert-layer;
+  }
   body { -webkit-font-smoothing: revert; }
   .c-button { --max-width: auto; }
 

From f96f5ecf227d371a74a0b7b824b800c5354a8134 Mon Sep 17 00:00:00 2001
From: Wesley B <62723358+wesleyboar@users.noreply.github.com>
Date: Wed, 2 Jul 2025 16:39:51 -0500
Subject: [PATCH 59/79] fix: poetry lock

---
 server/poetry.lock | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/server/poetry.lock b/server/poetry.lock
index 7c431d3d37..3a9108f036 100644
--- a/server/poetry.lock
+++ b/server/poetry.lock
@@ -3835,4 +3835,4 @@ testing = ["coverage (>=5.0.3)", "zope.event", "zope.testing"]
 [metadata]
 lock-version = "2.1"
 python-versions = "^3.11"
-content-hash = "724bb3ce6ab75236ded8c594edde736a1847eaee8bca686db7cee6a4733d3815"
+content-hash = "7227641d4ff53c1227eddf9108f5d61d7f784feb5f661319414a0850f379185c"

From 1f2c17556be03e993d645ecabca08f11f7dba10e Mon Sep 17 00:00:00 2001
From: Wesley B <62723358+wesleyboar@users.noreply.github.com>
Date: Wed, 2 Jul 2025 16:58:33 -0500
Subject: [PATCH 60/79] fix: do not import s-footer twice

core-styles.cms.css provides it
---
 server/portal/templates/includes/cms_ui.html | 1 -
 1 file changed, 1 deletion(-)

diff --git a/server/portal/templates/includes/cms_ui.html b/server/portal/templates/includes/cms_ui.html
index 99db3b0794..2d82e3639a 100644
--- a/server/portal/templates/includes/cms_ui.html
+++ b/server/portal/templates/includes/cms_ui.html
@@ -4,7 +4,6 @@
   @import url(/static/site_cms/css/build/core-styles.base.css) layer(mimic-cms.base);
   @import url(/static/site_cms/css/build/core-styles.cms.css) layer(mimic-cms.base);
   @import url(/static/site_cms/css/build/core-cms.css) layer(mimic-cms.project);
-  @import url('https://cdn.jsdelivr.net/npm/@tacc/core-styles@v2/dist/trumps/s-footer.css') layer(mimic-cms.project);
 
   /* To mimic a CMS idiosyncrasy */
   /* https://github.com/TACC/Core-CMS/blob/v4.31.0/taccsite_cms/templates/base.html#L73-L76 */

From a118c97e01c9857589887d02d9ea98cb9686a1ff Mon Sep 17 00:00:00 2001
From: Wesley B <62723358+wesleyboar@users.noreply.github.com>
Date: Thu, 3 Jul 2025 16:27:51 -0500
Subject: [PATCH 61/79] fix: mirror TACC/Core-CMS-Custom#494 updates

https://github.com/TACC/Core-CMS-Custom/pull/494

And those updates made to templates on PPRD DigitalRocks.
---
 .../DataFilesForDPM/DataFilesForDPMData.jsx          | 10 +++++-----
 .../DataFilesForDPM/DataFilesForDPMRead.jsx          | 12 ++++++------
 2 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPMData.jsx b/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPMData.jsx
index b9cc4e671a..c6fb907b44 100644
--- a/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPMData.jsx
+++ b/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPMData.jsx
@@ -89,7 +89,7 @@ export default function DataFilesForDPMData() {
                   <th className="c-data-list__key">Number of Slices</th>
                   <td className="c-data-list__value">1000</td>
                 </tr>
-                <tr className="c-data-list__row--start-final">
+                <tr>
                   <th className="c-data-list__key">Byte Order</th>
                   <td className="c-data-list__value">little-endian</td>
                 </tr>
@@ -209,7 +209,7 @@ export default function DataFilesForDPMData() {
                   <th className="c-data-list__key">Number of Slices</th>
                   <td className="c-data-list__value">1000</td>
                 </tr>
-                <tr className="c-data-list__row--start-final">
+                <tr>
                   <th className="c-data-list__key">Byte Order</th>
                   <td className="c-data-list__value">little-endian</td>
                 </tr>
@@ -329,7 +329,7 @@ export default function DataFilesForDPMData() {
                   <th className="c-data-list__key">Number of Slices</th>
                   <td className="c-data-list__value">1000</td>
                 </tr>
-                <tr className="c-data-list__row--start-final">
+                <tr>
                   <th className="c-data-list__key">Byte Order</th>
                   <td className="c-data-list__value">little-endian</td>
                 </tr>
@@ -449,7 +449,7 @@ export default function DataFilesForDPMData() {
                   <th className="c-data-list__key">Number of Slices</th>
                   <td className="c-data-list__value">1000</td>
                 </tr>
-                <tr className="c-data-list__row--start-final">
+                <tr>
                   <th className="c-data-list__key">Byte Order</th>
                   <td className="c-data-list__value">little-endian</td>
                 </tr>
@@ -569,7 +569,7 @@ export default function DataFilesForDPMData() {
                   <th className="c-data-list__key">Number of Slices</th>
                   <td className="c-data-list__value">1000</td>
                 </tr>
-                <tr className="c-data-list__row--start-final">
+                <tr>
                   <th className="c-data-list__key">Byte Order</th>
                   <td className="c-data-list__value">little-endian</td>
                 </tr>
diff --git a/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPMRead.jsx b/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPMRead.jsx
index 2747793f37..3923bbf1a4 100644
--- a/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPMRead.jsx
+++ b/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPMRead.jsx
@@ -275,13 +275,13 @@ export default function DataFilesForDPMRead() {
         </div>
 
         <div className="project-content">
-          <div id="project-files">
+          <div id="files">
             <h3>Files</h3>
 
             <ul className="data-tree">
               <li className="data-tree__item" id="sample-berea">
                 <details>
-                  <summary className="u-summary-link-merged">
+                  <summary className="u-summary-with-a-link">
                     <a className="u-title-needs-colon">
                       <span>Sample</span> <strong>Berea</strong>
                     </a>
@@ -359,7 +359,7 @@ export default function DataFilesForDPMRead() {
               </li>
               <li className="data-tree__item" id="sample-bandera-brown">
                 <details>
-                  <summary className="u-summary-link-merged">
+                  <summary className="u-summary-with-a-link">
                     <a className="u-title-needs-colon">
                       <span>Sample</span> <strong>Bandera Brown</strong>
                     </a>
@@ -439,7 +439,7 @@ export default function DataFilesForDPMRead() {
               </li>
               <li className="data-tree__item" id="sample-bandera-gray">
                 <details>
-                  <summary className="u-summary-link-merged">
+                  <summary className="u-summary-with-a-link">
                     <a className="u-title-needs-colon">
                       <span>Sample</span> <strong>Bandera Gray</strong>
                     </a>
@@ -517,7 +517,7 @@ export default function DataFilesForDPMRead() {
               </li>
               <li className="data-tree__item" id="sample-bentheimer">
                 <details>
-                  <summary className="u-summary-link-merged">
+                  <summary className="u-summary-with-a-link">
                     <a className="u-title-needs-colon">
                       <span>Sample</span> <strong>Bentheimer</strong>
                     </a>
@@ -595,7 +595,7 @@ export default function DataFilesForDPMRead() {
               </li>
               <li className="data-tree__item" id="sample-berea-sister-gray">
                 <details>
-                  <summary className="u-summary-link-merged">
+                  <summary className="u-summary-with-a-link">
                     <a className="u-title-needs-colon">
                       <span>Sample</span> <strong>Berea Sister Gray</strong>
                     </a>

From 7b8d4f7be89574431f57bdf1533d637e0d4a9e83 Mon Sep 17 00:00:00 2001
From: Wesley B <62723358+wesleyboar@users.noreply.github.com>
Date: Thu, 3 Jul 2025 16:38:51 -0500
Subject: [PATCH 62/79] deps: Core-Styles v2.45

---
 client/package-lock.json                            | 8 ++++----
 client/package.json                                 | 2 +-
 server/conf/docker/docker-compose-dev.all.debug.yml | 2 +-
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/client/package-lock.json b/client/package-lock.json
index 9844015090..02f9c0e113 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -47,7 +47,7 @@
       },
       "devDependencies": {
         "@rollup/plugin-eslint": "^8.0.1",
-        "@tacc/core-styles": "^2.39.4",
+        "@tacc/core-styles": "^2.45.0",
         "@testing-library/jest-dom": "^5.0.2",
         "@testing-library/react": "^16.0.1",
         "@types/js-cookie": "^3.0.6",
@@ -4599,9 +4599,9 @@
       }
     },
     "node_modules/@tacc/core-styles": {
-      "version": "2.39.4",
-      "resolved": "https://registry.npmjs.org/@tacc/core-styles/-/core-styles-2.39.4.tgz",
-      "integrity": "sha512-qFig8qt01JQ25EknoOl3k+uESe66B4Zl2Rgm9+pS45yltHEkpyMOxdu6BLllgUac1gpVylS4nzfWW6iDSdEQ5w==",
+      "version": "2.45.0",
+      "resolved": "https://registry.npmjs.org/@tacc/core-styles/-/core-styles-2.45.0.tgz",
+      "integrity": "sha512-ujck0rgUFb+vo42Qr5MRUfF8KHnIAEjHsRuh9dhBaeo6mrRhyjBCq+JgGryjQxOiCnFFM8yuYrJlUPsCaSEGCA==",
       "dev": true,
       "license": "MIT",
       "bin": {
diff --git a/client/package.json b/client/package.json
index 2d2f8e4ec6..0765b9ad18 100644
--- a/client/package.json
+++ b/client/package.json
@@ -70,7 +70,7 @@
   },
   "devDependencies": {
     "@rollup/plugin-eslint": "^8.0.1",
-    "@tacc/core-styles": "^2.39.4",
+    "@tacc/core-styles": "^2.45.0",
     "@testing-library/jest-dom": "^5.0.2",
     "@testing-library/react": "^16.0.1",
     "@types/js-cookie": "^3.0.6",
diff --git a/server/conf/docker/docker-compose-dev.all.debug.yml b/server/conf/docker/docker-compose-dev.all.debug.yml
index 4f7ea2538b..dbc3a86ed8 100644
--- a/server/conf/docker/docker-compose-dev.all.debug.yml
+++ b/server/conf/docker/docker-compose-dev.all.debug.yml
@@ -1,6 +1,6 @@
 services:
   cms:
-    image: taccwma/core-cms:latest
+    image: taccwma/core-cms:deps-core-styles-v2-45
     volumes:
       - ../cms/secrets.py:/code/taccsite_cms/secrets.py
       - ../cms/uwsgi/uwsgi.ini:/code/uwsgi.ini

From 7066762ebe4c0141685e8233a6426966a124ea8e Mon Sep 17 00:00:00 2001
From: Wesley B <62723358+wesleyboar@users.noreply.github.com>
Date: Thu, 3 Jul 2025 18:35:10 -0500
Subject: [PATCH 63/79] enhance: migrate styles from CDN to here

---
 .../DataFilesForDPM.global.css                |  9 +++
 .../DataFilesForDPM/DataFilesForDPM.jsx       | 13 +---
 .../styles/data-tree.global.css               | 48 +++++++++++++
 .../DataFilesForDPM/styles/license.global.css | 19 +++++
 .../DataFilesForDPM/styles/metrics.global.css | 22 ++++++
 .../DataFilesForDPM/styles/project.global.css | 41 +++++++++++
 .../styles/publication.global.css             | 11 +++
 .../styles/tweak-core-styles.global.css       | 69 +++++++++++++++++++
 .../_common/CMSWrapper/CMSWrapper.jsx         | 30 --------
 9 files changed, 221 insertions(+), 41 deletions(-)
 create mode 100644 client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPM.global.css
 create mode 100644 client/src/components/DataFiles/DataFilesForDPM/styles/data-tree.global.css
 create mode 100644 client/src/components/DataFiles/DataFilesForDPM/styles/license.global.css
 create mode 100644 client/src/components/DataFiles/DataFilesForDPM/styles/metrics.global.css
 create mode 100644 client/src/components/DataFiles/DataFilesForDPM/styles/project.global.css
 create mode 100644 client/src/components/DataFiles/DataFilesForDPM/styles/publication.global.css
 create mode 100644 client/src/components/DataFiles/DataFilesForDPM/styles/tweak-core-styles.global.css

diff --git a/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPM.global.css b/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPM.global.css
new file mode 100644
index 0000000000..84edd634ca
--- /dev/null
+++ b/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPM.global.css
@@ -0,0 +1,9 @@
+@import url('@tacc/core-styles/dist/components/bootstrap.pagination.css');
+
+@import url('./styles/data-tree.global.css');
+@import url('./styles/project.global.css');
+@import url('./styles/publication.global.css');
+@import url('./styles/metrics.global.css');
+@import url('./styles/license.global.css');
+
+@import url('./styles/tweak-core-styles.global.css');
diff --git a/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPM.jsx b/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPM.jsx
index e502e090f6..2bee262f63 100644
--- a/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPM.jsx
+++ b/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPM.jsx
@@ -1,4 +1,4 @@
-import { React, useEffect, useState } from 'react';
+import { React, useState } from 'react';
 import CMSWrapper from '_common/CMSWrapper';
 
 import DataFilesForDPMBreadcrumbs from './DataFilesForDPMBreadcrumbs';
@@ -8,6 +8,7 @@ import DataFilesForDPMBrowse from './DataFilesForDPMBrowse';
 import DataFilesForDPMRead from './DataFilesForDPMRead';
 import DataFilesForDPMData from './DataFilesForDPMData';
 
+import './DataFilesForDPM.global.css';
 import style from './DataFilesForDPM.module.css';
 
 const tabs = [
@@ -37,16 +38,6 @@ const tabs = [
 function DataFilesForDPM() {
   const [view, setView] = useState('browse');
 
-  useEffect(() => {
-    return CMSWrapper.useDynamicStylesheets(
-      [
-        'https://cdn.jsdelivr.net/gh/TACC/Core-CMS-Custom@5717c8d/digitalrocks_assets/css/cms.css',
-        'https://cdn.jsdelivr.net/gh/TACC/Core-CMS-Custom@5717c8d/digitalrocks_assets/css/for-core-styles.css',
-      ],
-      'DataFilesForDPM',
-    );
-  }, []);
-
   return (
     <CMSWrapper>
       <DataFilesForDPMBreadcrumbs />
diff --git a/client/src/components/DataFiles/DataFilesForDPM/styles/data-tree.global.css b/client/src/components/DataFiles/DataFilesForDPM/styles/data-tree.global.css
new file mode 100644
index 0000000000..a62a0d59a9
--- /dev/null
+++ b/client/src/components/DataFiles/DataFilesForDPM/styles/data-tree.global.css
@@ -0,0 +1,48 @@
+/* DATASET LIST */
+
+/* Root */
+
+ul.data-tree,
+.data-tree ul {
+    list-style: none;
+}
+ul.data-tree {
+    padding-left: unset;
+}
+.data-tree ul:has(details) {
+    padding-left: var(--indent);
+}
+.data-tree ul:not(:has(details)) {
+    padding-left: calc(var(--indent)* 2);
+}
+
+/* To indent all expanded content */
+.data-tree {
+    --indent: 1.5rem;
+}
+.data-tree__item details {
+    margin-left: var(--indent);
+}
+.data-tree__item summary {
+    margin-left: calc( -1 * var(--indent) );
+}
+.data-tree__item summary.u-summary-with-a-link::before,
+.data-tree__item summary.u-summary-fake-marker::before {
+    width: var(--indent);
+    display: inline-block;
+}
+
+
+/* Elements */
+
+.data-tree__item ul {
+    margin-block: 1rem;
+}
+
+
+/* Components */
+
+/* to reduce excess width of table key */
+.data-tree th.c-data-list__key {
+    width: 22ch;
+}
diff --git a/client/src/components/DataFiles/DataFilesForDPM/styles/license.global.css b/client/src/components/DataFiles/DataFilesForDPM/styles/license.global.css
new file mode 100644
index 0000000000..3454c20c0b
--- /dev/null
+++ b/client/src/components/DataFiles/DataFilesForDPM/styles/license.global.css
@@ -0,0 +1,19 @@
+/* License */
+
+ul.license-list {
+    padding-left: unset;
+    list-style: none;
+}
+
+.license {
+    /* … */
+}
+.license__title:has(.icon) {
+    display: flex;
+    align-items: center;
+    gap: 1em;
+}
+.license__details {
+    /* to align with license__title text */
+    padding-left: 3.5em; /* icon width + gap between icon and text */
+}
diff --git a/client/src/components/DataFiles/DataFilesForDPM/styles/metrics.global.css b/client/src/components/DataFiles/DataFilesForDPM/styles/metrics.global.css
new file mode 100644
index 0000000000..dfb0c4ca00
--- /dev/null
+++ b/client/src/components/DataFiles/DataFilesForDPM/styles/metrics.global.css
@@ -0,0 +1,22 @@
+/* Metrics */
+
+.metrics-tableset {
+    display: flex;
+    gap: 1rem;
+    justify-content: space-evenly;
+}
+
+.metrics-caption {
+    padding-block: 8px;
+    padding-inline: 12px;
+}
+p.metrics-caption {
+    margin-bottom: 0;
+}
+
+.metrics-note {
+    font-style: italic;
+}
+.metrics-note:not(small) {
+    font-size: small;
+} 
\ No newline at end of file
diff --git a/client/src/components/DataFiles/DataFilesForDPM/styles/project.global.css b/client/src/components/DataFiles/DataFilesForDPM/styles/project.global.css
new file mode 100644
index 0000000000..987be69bfa
--- /dev/null
+++ b/client/src/components/DataFiles/DataFilesForDPM/styles/project.global.css
@@ -0,0 +1,41 @@
+/* DESCRIPTION */
+
+.project-desc > img {
+    width: 20%;
+    padding: 10px;
+}
+.project-desc p a {
+    word-break: break-all;
+}
+
+.project-desc th.c-data-list__key {
+    width: 25ch;
+}
+
+
+
+/* DOWNLOAD BUTTON */
+
+.project-download-button {
+    /* to align as if it were a far-right tab */
+    float: right;
+}
+p:has(.project-download-button) {
+    text-align: center;
+}
+.project-download-button i.icon-download {
+    font-weight: bold;
+}
+
+
+/* CONTENT */
+
+.project-content.row {
+    gap: calc( var(--global-space--bootstrap-gap) / 2 );
+}
+
+.project-content {
+    display: grid;
+    grid-template-columns: repeat( auto-fit, minmax( min( 100%, 40ch ), 1fr ));
+    gap: var(--global-space--bootstrap-gap);
+}
diff --git a/client/src/components/DataFiles/DataFilesForDPM/styles/publication.global.css b/client/src/components/DataFiles/DataFilesForDPM/styles/publication.global.css
new file mode 100644
index 0000000000..158d3cd5e7
--- /dev/null
+++ b/client/src/components/DataFiles/DataFilesForDPM/styles/publication.global.css
@@ -0,0 +1,11 @@
+/* Publications */
+
+.publication {
+    /* … */
+}
+
+.publication__title {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+}
diff --git a/client/src/components/DataFiles/DataFilesForDPM/styles/tweak-core-styles.global.css b/client/src/components/DataFiles/DataFilesForDPM/styles/tweak-core-styles.global.css
new file mode 100644
index 0000000000..8b7f19e0a3
--- /dev/null
+++ b/client/src/components/DataFiles/DataFilesForDPM/styles/tweak-core-styles.global.css
@@ -0,0 +1,69 @@
+/* TWEAK CORE-STYLES */
+
+/* Card */
+
+/* To make project link align across cards */
+/* FAQ: Card layout is inconsistent cuz headings can span few to many lines */
+[class*="card--image-top"] {
+    grid-template-rows: repeat(3, min-content) 1fr;
+}
+[class*="card--image-top"] > p:has(a:only-child) {
+    align-self: end;
+}
+
+
+/* Card List */
+
+.c-card-list [class*="card--"] img {
+    padding: 20px;
+    aspect-ratio: 1 / 1;
+}
+
+/* to allow long file names to wrap */
+.c-card-list p {
+    word-break: break-word;
+}
+
+
+/* Data List */
+
+/* to swap colors for key and value (design request specific to projects) */
+.c-data-list__key { color: var(--global-color-primary--dark); }
+.c-data-list__value { color: var(--global-color-primary--x-dark) }
+
+/* to arrange and truncate links in value column */
+.c-data-list__value nav {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5em;
+}
+.c-data-list__value nav a {
+    display: flex;
+    flex-direction: row;
+    gap: 0.5em;
+}
+.c-data-list__value nav a span {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+
+/* Modal */
+
+.modal-body {
+    padding: 1.5rem;
+}
+
+
+
+
+/* CUSTOM UTILITIES */
+
+.u-thead-content-with-input {
+    display: flex;
+    gap: 1ch;
+}
+
+.u-title-needs-colon span { font-weight: normal; }
+.u-title-needs-colon span::after { content: ':'; }
diff --git a/client/src/components/_common/CMSWrapper/CMSWrapper.jsx b/client/src/components/_common/CMSWrapper/CMSWrapper.jsx
index 04f1811d63..8eb764e6c8 100644
--- a/client/src/components/_common/CMSWrapper/CMSWrapper.jsx
+++ b/client/src/components/_common/CMSWrapper/CMSWrapper.jsx
@@ -18,36 +18,6 @@ function CMSWrapper({ children }) {
   );
 }
 
-/**
- * Dynamically load stylesheets and returns a cleanup function
- *
- * @param {string[]} urls - Array of stylesheet URLs to load
- * @param {string} [componentName] - Name of the component (for log and debug)
- * @returns {Function} Cleanup function that unloads the stylesheets
- *
- * @example
- * useEffect(() => {
- *   return CMSWrapper.useDynamicStylesheets([
- *     'https://example.com/styles1.css',
- *     'https://example.com/styles2.css'
- *   ]);
- * }, []);
- */
-CMSWrapper.useDynamicStylesheets = (urls, componentName) => {
-  const links = urls.map((url, index) => {
-    const link = document.createElement('link');
-    link.rel = 'stylesheet';
-    link.href = url;
-    link.id = `cms-wrapper-styles-from-${
-      componentName || 'undefined'
-    }-${index}`;
-    document.head.appendChild(link);
-    return link;
-  });
-
-  return () => links.forEach((link) => link.remove());
-};
-
 CMSWrapper.propTypes = {
   children: PropTypes.node.isRequired,
 };

From aef0da5a8b408a020421510b8cb71895550bf2fd Mon Sep 17 00:00:00 2001
From: Wesley B <62723358+wesleyboar@users.noreply.github.com>
Date: Thu, 3 Jul 2025 18:42:51 -0500
Subject: [PATCH 64/79] refactor: reorg styles so CMS can load 'em cleanly

---
 .../DataFiles/DataFilesForDPM/DataFilesForDPM.global.css | 9 ++-------
 .../DataFilesForDPM/styles/components.global.css         | 5 +++++
 .../styles/{ => components}/data-tree.global.css         | 0
 .../styles/{ => components}/license.global.css           | 0
 .../styles/{ => components}/metrics.global.css           | 0
 .../styles/{ => components}/project.global.css           | 0
 .../styles/{ => components}/publication.global.css       | 0
 ...tyles.global.css => customize-core-styles.global.css} | 0
 8 files changed, 7 insertions(+), 7 deletions(-)
 create mode 100644 client/src/components/DataFiles/DataFilesForDPM/styles/components.global.css
 rename client/src/components/DataFiles/DataFilesForDPM/styles/{ => components}/data-tree.global.css (100%)
 rename client/src/components/DataFiles/DataFilesForDPM/styles/{ => components}/license.global.css (100%)
 rename client/src/components/DataFiles/DataFilesForDPM/styles/{ => components}/metrics.global.css (100%)
 rename client/src/components/DataFiles/DataFilesForDPM/styles/{ => components}/project.global.css (100%)
 rename client/src/components/DataFiles/DataFilesForDPM/styles/{ => components}/publication.global.css (100%)
 rename client/src/components/DataFiles/DataFilesForDPM/styles/{tweak-core-styles.global.css => customize-core-styles.global.css} (100%)

diff --git a/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPM.global.css b/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPM.global.css
index 84edd634ca..4cc4d1b758 100644
--- a/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPM.global.css
+++ b/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPM.global.css
@@ -1,9 +1,4 @@
 @import url('@tacc/core-styles/dist/components/bootstrap.pagination.css');
 
-@import url('./styles/data-tree.global.css');
-@import url('./styles/project.global.css');
-@import url('./styles/publication.global.css');
-@import url('./styles/metrics.global.css');
-@import url('./styles/license.global.css');
-
-@import url('./styles/tweak-core-styles.global.css');
+@import url('./styles/components.global.css');
+@import url('./styles/customize-core-styles.global.css');
diff --git a/client/src/components/DataFiles/DataFilesForDPM/styles/components.global.css b/client/src/components/DataFiles/DataFilesForDPM/styles/components.global.css
new file mode 100644
index 0000000000..30b39b875b
--- /dev/null
+++ b/client/src/components/DataFiles/DataFilesForDPM/styles/components.global.css
@@ -0,0 +1,5 @@
+@import url('./components/data-tree.global.css');
+@import url('./components/project.global.css');
+@import url('./components/publication.global.css');
+@import url('./components/metrics.global.css');
+@import url('./components/license.global.css');
diff --git a/client/src/components/DataFiles/DataFilesForDPM/styles/data-tree.global.css b/client/src/components/DataFiles/DataFilesForDPM/styles/components/data-tree.global.css
similarity index 100%
rename from client/src/components/DataFiles/DataFilesForDPM/styles/data-tree.global.css
rename to client/src/components/DataFiles/DataFilesForDPM/styles/components/data-tree.global.css
diff --git a/client/src/components/DataFiles/DataFilesForDPM/styles/license.global.css b/client/src/components/DataFiles/DataFilesForDPM/styles/components/license.global.css
similarity index 100%
rename from client/src/components/DataFiles/DataFilesForDPM/styles/license.global.css
rename to client/src/components/DataFiles/DataFilesForDPM/styles/components/license.global.css
diff --git a/client/src/components/DataFiles/DataFilesForDPM/styles/metrics.global.css b/client/src/components/DataFiles/DataFilesForDPM/styles/components/metrics.global.css
similarity index 100%
rename from client/src/components/DataFiles/DataFilesForDPM/styles/metrics.global.css
rename to client/src/components/DataFiles/DataFilesForDPM/styles/components/metrics.global.css
diff --git a/client/src/components/DataFiles/DataFilesForDPM/styles/project.global.css b/client/src/components/DataFiles/DataFilesForDPM/styles/components/project.global.css
similarity index 100%
rename from client/src/components/DataFiles/DataFilesForDPM/styles/project.global.css
rename to client/src/components/DataFiles/DataFilesForDPM/styles/components/project.global.css
diff --git a/client/src/components/DataFiles/DataFilesForDPM/styles/publication.global.css b/client/src/components/DataFiles/DataFilesForDPM/styles/components/publication.global.css
similarity index 100%
rename from client/src/components/DataFiles/DataFilesForDPM/styles/publication.global.css
rename to client/src/components/DataFiles/DataFilesForDPM/styles/components/publication.global.css
diff --git a/client/src/components/DataFiles/DataFilesForDPM/styles/tweak-core-styles.global.css b/client/src/components/DataFiles/DataFilesForDPM/styles/customize-core-styles.global.css
similarity index 100%
rename from client/src/components/DataFiles/DataFilesForDPM/styles/tweak-core-styles.global.css
rename to client/src/components/DataFiles/DataFilesForDPM/styles/customize-core-styles.global.css

From 1dc6f0aef96c57326f2d2a052f5344e5592bb9d3 Mon Sep 17 00:00:00 2001
From: Wesley B <62723358+wesleyboar@users.noreply.github.com>
Date: Thu, 3 Jul 2025 18:53:24 -0500
Subject: [PATCH 65/79] chore: use latest corestyles, if used via CDN

---
 .../DataFiles/DataFilesForDPM/DataFilesForDPMRead.jsx           | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPMRead.jsx b/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPMRead.jsx
index 3923bbf1a4..70663bd3da 100644
--- a/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPMRead.jsx
+++ b/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPMRead.jsx
@@ -5,7 +5,7 @@ export default function DataFilesForDPMRead() {
   useEffect(() => {
     // Or use `ShowMore` common component instead of `js-show-more` class
     import(
-      'https://cdn.jsdelivr.net/gh/TACC/Core-Styles@v2.38.0/src/lib/_imports/components/c-show-more/c-show-more.js'
+      'https://cdn.jsdelivr.net/gh/TACC/Core-Styles@v2/src/lib/_imports/components/c-show-more/c-show-more.js'
     )
       .then(({ generateMarkup }) => {
         generateMarkup(document.getElementsByClassName('js-show-more'), {

From fc8f41952b01f670ba565f1ff499f86e48a6a59c Mon Sep 17 00:00:00 2001
From: Wesley B <62723358+wesleyboar@users.noreply.github.com>
Date: Thu, 3 Jul 2025 19:00:13 -0500
Subject: [PATCH 66/79] chore: core-cms v4.33 via latest

---
 server/conf/docker/docker-compose-dev.all.debug.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/server/conf/docker/docker-compose-dev.all.debug.yml b/server/conf/docker/docker-compose-dev.all.debug.yml
index dbc3a86ed8..4f7ea2538b 100644
--- a/server/conf/docker/docker-compose-dev.all.debug.yml
+++ b/server/conf/docker/docker-compose-dev.all.debug.yml
@@ -1,6 +1,6 @@
 services:
   cms:
-    image: taccwma/core-cms:deps-core-styles-v2-45
+    image: taccwma/core-cms:latest
     volumes:
       - ../cms/secrets.py:/code/taccsite_cms/secrets.py
       - ../cms/uwsgi/uwsgi.ini:/code/uwsgi.ini

From 90890d2424bcf20db7bd1ec1e2aa0bcb1acf19f2 Mon Sep 17 00:00:00 2001
From: Wesley B <62723358+wesleyboar@users.noreply.github.com>
Date: Thu, 3 Jul 2025 19:04:44 -0500
Subject: [PATCH 67/79] fix: manually revert unintentional change

probably related to task.digital-rocks being behind main
---
 Makefile | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/Makefile b/Makefile
index f58bd6f7f5..e70bc49a50 100644
--- a/Makefile
+++ b/Makefile
@@ -32,12 +32,12 @@ publish-latest:
 
 .PHONY: start
 start:
-	docker compose --env-file $(NGROK_ENV_FILE) -f server/conf/docker/docker-compose-dev.all.debug.yml up
+	$(DOCKER_COMPOSE_CMD) -f server/conf/docker/docker-compose-dev.all.debug.yml up
 
 .PHONY: stop
 stop:
-	docker compose --env-file $(NGROK_ENV_FILE) -f server/conf/docker/docker-compose-dev.all.debug.yml down
+	$(DOCKER_COMPOSE_CMD) -f server/conf/docker/docker-compose-dev.all.debug.yml down
 
 .PHONY: stop-full
 stop-v:
-	docker compose --env-file $(NGROK_ENV_FILE) -f server/conf/docker/docker-compose-dev.all.debug.yml down -v
+	$(DOCKER_COMPOSE_CMD) -f server/conf/docker/docker-compose-dev.all.debug.yml down -v

From eb1f9ab14efb836d6b570b7a9b0550585339fb65 Mon Sep 17 00:00:00 2001
From: Wesley B <62723358+wesleyboar@users.noreply.github.com>
Date: Thu, 3 Jul 2025 19:11:09 -0500
Subject: [PATCH 68/79] Revert "fix: manually revert unintentional change"

This reverts commit 90890d2424bcf20db7bd1ec1e2aa0bcb1acf19f2.
---
 Makefile | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/Makefile b/Makefile
index e70bc49a50..f58bd6f7f5 100644
--- a/Makefile
+++ b/Makefile
@@ -32,12 +32,12 @@ publish-latest:
 
 .PHONY: start
 start:
-	$(DOCKER_COMPOSE_CMD) -f server/conf/docker/docker-compose-dev.all.debug.yml up
+	docker compose --env-file $(NGROK_ENV_FILE) -f server/conf/docker/docker-compose-dev.all.debug.yml up
 
 .PHONY: stop
 stop:
-	$(DOCKER_COMPOSE_CMD) -f server/conf/docker/docker-compose-dev.all.debug.yml down
+	docker compose --env-file $(NGROK_ENV_FILE) -f server/conf/docker/docker-compose-dev.all.debug.yml down
 
 .PHONY: stop-full
 stop-v:
-	$(DOCKER_COMPOSE_CMD) -f server/conf/docker/docker-compose-dev.all.debug.yml down -v
+	docker compose --env-file $(NGROK_ENV_FILE) -f server/conf/docker/docker-compose-dev.all.debug.yml down -v

From f6be6fd5a41ead67a864235065c3240845d7ecc1 Mon Sep 17 00:00:00 2001
From: Wesley B <62723358+wesleyboar@users.noreply.github.com>
Date: Thu, 3 Jul 2025 19:17:33 -0500
Subject: [PATCH 69/79] fix: condifently revert unintentional changes

probably related to task.digital-rocks being behind main
---
 .gitignore                                    |  3 -
 Makefile                                      | 13 ++-
 README.md                                     | 19 ++--
 .../docker/docker-compose-dev.all.debug.yml   | 25 +-----
 .../env_files/{ngrok.sample.env => ngrok.env} |  0
 server/conf/env_files/rabbitmq.sample.env     |  7 ++
 server/conf/nginx/nginx.conf                  |  4 +
 server/poetry.lock                            | 38 ++++----
 .../onboarding/steps/project_membership.py    | 59 ++++++-------
 server/portal/apps/projects/views.py          |  1 +
 server/portal/apps/webhooks/utils.py          |  2 +-
 .../portal/apps/webhooks/views_unit_test.py   |  2 +-
 server/portal/apps/workspace/api/views.py     | 21 ++---
 server/portal/settings/settings.py            | 18 +---
 .../settings/settings_custom.example.py       | 86 +++++++------------
 server/portal/settings/settings_default.py    | 41 ++-------
 .../portal/settings/settings_local.example.py |  3 +-
 server/portal/settings/unit_test_settings.py  |  2 +-
 server/pyproject.toml                         |  2 +-
 19 files changed, 126 insertions(+), 220 deletions(-)
 rename server/conf/env_files/{ngrok.sample.env => ngrok.env} (100%)
 create mode 100644 server/conf/env_files/rabbitmq.sample.env

diff --git a/.gitignore b/.gitignore
index f1e4f7be30..297742961c 100644
--- a/.gitignore
+++ b/.gitignore
@@ -171,6 +171,3 @@ portal_crypt.key
 
 # vim stuff
 *.swp
-
-# ngrok
-ngrok.env
diff --git a/Makefile b/Makefile
index f58bd6f7f5..0d51544548 100644
--- a/Makefile
+++ b/Makefile
@@ -2,10 +2,7 @@ DOCKERHUB_REPO := $(shell cat ./docker_repo.var)
 DOCKER_TAG ?= $(shell git rev-parse --short HEAD)
 DOCKER_IMAGE := $(DOCKERHUB_REPO):$(DOCKER_TAG)
 DOCKER_IMAGE_LATEST := $(DOCKERHUB_REPO):latest
-NGROK_ENV_FILE = ./server/conf/env_files/ngrok.env
-ifeq ("$(wildcard $(NGROK_ENV_FILE))","")
-    NGROK_ENV_FILE = ./server/conf/env_files/ngrok.sample.env
-endif
+DOCKER_COMPOSE_CMD := $(shell if command -v docker-compose > /dev/null; then echo "docker-compose"; else echo "docker compose"; fi)
 
 ####
 # `DOCKER_IMAGE_BRANCH` tag is the git tag for the commit if it exists, else the branch on which the commit exists
@@ -13,7 +10,7 @@ DOCKER_IMAGE_BRANCH := $(DOCKERHUB_REPO):$(shell git describe --exact-match --ta
 
 .PHONY: build
 build:
-	docker compose -f ./server/conf/docker/docker-compose.yml build
+	$(DOCKER_COMPOSE_CMD) -f ./server/conf/docker/docker-compose.yml build
 
 .PHONY: build-full
 build-full:
@@ -32,12 +29,12 @@ publish-latest:
 
 .PHONY: start
 start:
-	docker compose --env-file $(NGROK_ENV_FILE) -f server/conf/docker/docker-compose-dev.all.debug.yml up
+	$(DOCKER_COMPOSE_CMD) -f server/conf/docker/docker-compose-dev.all.debug.yml up
 
 .PHONY: stop
 stop:
-	docker compose --env-file $(NGROK_ENV_FILE) -f server/conf/docker/docker-compose-dev.all.debug.yml down
+	$(DOCKER_COMPOSE_CMD) -f server/conf/docker/docker-compose-dev.all.debug.yml down
 
 .PHONY: stop-full
 stop-v:
-	docker compose --env-file $(NGROK_ENV_FILE) -f server/conf/docker/docker-compose-dev.all.debug.yml down -v
+	$(DOCKER_COMPOSE_CMD) -f server/conf/docker/docker-compose-dev.all.debug.yml down -v
diff --git a/README.md b/README.md
index f79ae5ab81..831e749f09 100644
--- a/README.md
+++ b/README.md
@@ -102,8 +102,8 @@ After you clone the repository locally, there are several configuration steps re
 
 - Create `server/portal/settings/settings_secret.py` containing what is in `secret` field in the `Core Portal Settings Secret` entry secured on [UT Stache](https://stache.utexas.edu/entry/bedc97190d3a907cb44488785440595c)
 
-- Copy `server/conf/env_files/ngrok.sample.env` to `server/conf/env_files/ngrok.env`
-    - _Note: [Setup ngrok](#setting-up-notifications-locally) and update `NGROK_AUTHTOKEN` and `NGROK_DOMAIN` in `ngrok.env` to enable webhook notifications locally_
+- Copy `server/portal/settings/settings_local.example.py` to `server/portal/settings/settings_local.py`
+    - _Note: [Setup ngrok](#setting-up-notifications-locally) and update `WH_BASE_URL` in `settings_local.py` to enable webhook notifications locally_
 
 ##### CMS
 
@@ -117,14 +117,14 @@ After you clone the repository locally, there are several configuration steps re
     make build
 OR
 
-    docker compose -f ./server/conf/docker/docker-compose.yml build
+    docker-compose -f ./server/conf/docker/docker-compose.yml build
 
 
 #### Start the development environment:
     make start
 OR
 
-    docker compose -f ./server/conf/docker/docker-compose-dev.all.debug.yml up
+    docker-compose -f ./server/conf/docker/docker-compose-dev.all.debug.yml up
 
 
 #### Install client-side dependencies and bundle code:
@@ -187,14 +187,9 @@ setup_allocations_index(force=True)
 
 ### Setting up notifications locally:
 
-1. Configure ngrok
-
-   a. Install [ngrok](https://ngrok.com/docs/getting-started/), and create an ngrok account.
-
-   b. Copy [server/conf/env_files/ngrok.sample.env](server/conf/env_files/ngrok.sample.env) to `server/conf/env_files/ngrok.env`.
-
-   c. In `server/conf/env_files/ngrok.env`, set the `NGROK_AUTHTOKEN` and `NGROK_DOMAIN` variables using your authtoken and static ngrok domain found in your [ngrok dashboard](https://dashboard.ngrok.com/).
-
+1. Setup an account in ngrok, https://dashboard.ngrok.com/signup. Run the auth setup the signup steps suggest.
+2. Run an [ngrok](https://ngrok.com/download) session to route webhooks to `core_portal_nginx`:
+   
 ```
 ngrok http 443
 ```
diff --git a/server/conf/docker/docker-compose-dev.all.debug.yml b/server/conf/docker/docker-compose-dev.all.debug.yml
index 4f7ea2538b..fc239ce4ac 100644
--- a/server/conf/docker/docker-compose-dev.all.debug.yml
+++ b/server/conf/docker/docker-compose-dev.all.debug.yml
@@ -1,3 +1,6 @@
+# This compose file is useful for testing https.
+# The .env file sets ENVVARS for the Docker CLI used by this compose file.
+---
 services:
   cms:
     image: taccwma/core-cms:latest
@@ -87,9 +90,6 @@ services:
 
   websockets:
     image: taccwma/core-portal:latest
-    env_file:
-      - path: ../env_files/ngrok.env
-        required: false
     volumes:
       - ../../../.:/srv/www/portal
       - ../nginx/certificates/cep.test.crt:/etc/ssl/cep.test.crt
@@ -103,9 +103,6 @@ services:
 
   django:
     image: taccwma/core-portal:latest
-    env_file:
-      - path: ../env_files/ngrok.env
-        required: false
     volumes:
       - ../../../.:/srv/www/portal
       - ../../static:/var/www/portal/server/static
@@ -125,9 +122,6 @@ services:
 
   workers:
     image: taccwma/core-portal:latest
-    env_file:
-      - path: ../env_files/ngrok.env
-        required: false
     volumes:
       - ../../../.:/srv/www/portal
       - ../../static:/var/www/portal/server/static
@@ -148,19 +142,6 @@ services:
     command: ["mkdocs", "build"]
     container_name: frontera_docs
 
-  ngrok:
-    image: ngrok/ngrok:latest
-    env_file:
-      - path: ../env_files/ngrok.env
-    command:
-      - "http"
-      - --url=${NGROK_DOMAIN}
-      - "https://host.docker.internal:443"
-    ports:
-      - 4040:4040
-    container_name: core_portal_ngrok
-    hostname: core_portal_ngrok
-
 volumes:
   core_portal_redis_data:
   core_portal_es_data:
diff --git a/server/conf/env_files/ngrok.sample.env b/server/conf/env_files/ngrok.env
similarity index 100%
rename from server/conf/env_files/ngrok.sample.env
rename to server/conf/env_files/ngrok.env
diff --git a/server/conf/env_files/rabbitmq.sample.env b/server/conf/env_files/rabbitmq.sample.env
new file mode 100644
index 0000000000..7e25387907
--- /dev/null
+++ b/server/conf/env_files/rabbitmq.sample.env
@@ -0,0 +1,7 @@
+#RabbitMQ env file
+#More info: https://hub.docker.com/_/rabbitmq/
+#Use this to configure rabbitmq container
+#RABBIT_ERLANG_COOKIE=
+RABBITMQ_DEFAULT_USER=username
+RABBITMQ_DEFAULT_PASS=password
+RABBITMQ_DEFAULT_VHOST=vhost
diff --git a/server/conf/nginx/nginx.conf b/server/conf/nginx/nginx.conf
index 0f63518504..d809fda6b4 100644
--- a/server/conf/nginx/nginx.conf
+++ b/server/conf/nginx/nginx.conf
@@ -77,6 +77,10 @@ http {
             proxy_redirect off;
         }
 
+        location /user-guide {
+            alias /srv/www/portal/server/docs;
+        }
+
         location /core/media {
             alias /srv/www/portal/server/media;
         }
diff --git a/server/poetry.lock b/server/poetry.lock
index 3a9108f036..294132436a 100644
--- a/server/poetry.lock
+++ b/server/poetry.lock
@@ -2527,23 +2527,25 @@ wcwidth = "*"
 
 [[package]]
 name = "protobuf"
-version = "4.25.8"
+version = "4.24.4"
 description = ""
 optional = false
-python-versions = ">=3.8"
+python-versions = ">=3.7"
 groups = ["main"]
 files = [
-    {file = "protobuf-4.25.8-cp310-abi3-win32.whl", hash = "sha256:504435d831565f7cfac9f0714440028907f1975e4bed228e58e72ecfff58a1e0"},
-    {file = "protobuf-4.25.8-cp310-abi3-win_amd64.whl", hash = "sha256:bd551eb1fe1d7e92c1af1d75bdfa572eff1ab0e5bf1736716814cdccdb2360f9"},
-    {file = "protobuf-4.25.8-cp37-abi3-macosx_10_9_universal2.whl", hash = "sha256:ca809b42f4444f144f2115c4c1a747b9a404d590f18f37e9402422033e464e0f"},
-    {file = "protobuf-4.25.8-cp37-abi3-manylinux2014_aarch64.whl", hash = "sha256:9ad7ef62d92baf5a8654fbb88dac7fa5594cfa70fd3440488a5ca3bfc6d795a7"},
-    {file = "protobuf-4.25.8-cp37-abi3-manylinux2014_x86_64.whl", hash = "sha256:83e6e54e93d2b696a92cad6e6efc924f3850f82b52e1563778dfab8b355101b0"},
-    {file = "protobuf-4.25.8-cp38-cp38-win32.whl", hash = "sha256:27d498ffd1f21fb81d987a041c32d07857d1d107909f5134ba3350e1ce80a4af"},
-    {file = "protobuf-4.25.8-cp38-cp38-win_amd64.whl", hash = "sha256:d552c53d0415449c8d17ced5c341caba0d89dbf433698e1436c8fa0aae7808a3"},
-    {file = "protobuf-4.25.8-cp39-cp39-win32.whl", hash = "sha256:077ff8badf2acf8bc474406706ad890466274191a48d0abd3bd6987107c9cde5"},
-    {file = "protobuf-4.25.8-cp39-cp39-win_amd64.whl", hash = "sha256:f4510b93a3bec6eba8fd8f1093e9d7fb0d4a24d1a81377c10c0e5bbfe9e4ed24"},
-    {file = "protobuf-4.25.8-py3-none-any.whl", hash = "sha256:15a0af558aa3b13efef102ae6e4f3efac06f1eea11afb3a57db2901447d9fb59"},
-    {file = "protobuf-4.25.8.tar.gz", hash = "sha256:6135cf8affe1fc6f76cced2641e4ea8d3e59518d1f24ae41ba97bcad82d397cd"},
+    {file = "protobuf-4.24.4-cp310-abi3-win32.whl", hash = "sha256:ec9912d5cb6714a5710e28e592ee1093d68c5ebfeda61983b3f40331da0b1ebb"},
+    {file = "protobuf-4.24.4-cp310-abi3-win_amd64.whl", hash = "sha256:1badab72aa8a3a2b812eacfede5020472e16c6b2212d737cefd685884c191085"},
+    {file = "protobuf-4.24.4-cp37-abi3-macosx_10_9_universal2.whl", hash = "sha256:8e61a27f362369c2f33248a0ff6896c20dcd47b5d48239cb9720134bef6082e4"},
+    {file = "protobuf-4.24.4-cp37-abi3-manylinux2014_aarch64.whl", hash = "sha256:bffa46ad9612e6779d0e51ae586fde768339b791a50610d85eb162daeb23661e"},
+    {file = "protobuf-4.24.4-cp37-abi3-manylinux2014_x86_64.whl", hash = "sha256:b493cb590960ff863743b9ff1452c413c2ee12b782f48beca77c8da3e2ffe9d9"},
+    {file = "protobuf-4.24.4-cp37-cp37m-win32.whl", hash = "sha256:dbbed8a56e56cee8d9d522ce844a1379a72a70f453bde6243e3c86c30c2a3d46"},
+    {file = "protobuf-4.24.4-cp37-cp37m-win_amd64.whl", hash = "sha256:6b7d2e1c753715dcfe9d284a25a52d67818dd43c4932574307daf836f0071e37"},
+    {file = "protobuf-4.24.4-cp38-cp38-win32.whl", hash = "sha256:02212557a76cd99574775a81fefeba8738d0f668d6abd0c6b1d3adcc75503dbe"},
+    {file = "protobuf-4.24.4-cp38-cp38-win_amd64.whl", hash = "sha256:2fa3886dfaae6b4c5ed2730d3bf47c7a38a72b3a1f0acb4d4caf68e6874b947b"},
+    {file = "protobuf-4.24.4-cp39-cp39-win32.whl", hash = "sha256:b77272f3e28bb416e2071186cb39efd4abbf696d682cbb5dc731308ad37fa6dd"},
+    {file = "protobuf-4.24.4-cp39-cp39-win_amd64.whl", hash = "sha256:9fee5e8aa20ef1b84123bb9232b3f4a5114d9897ed89b4b8142d81924e05d79b"},
+    {file = "protobuf-4.24.4-py3-none-any.whl", hash = "sha256:80797ce7424f8c8d2f2547e2d42bfbb6c08230ce5832d6c099a37335c9c90a92"},
+    {file = "protobuf-4.24.4.tar.gz", hash = "sha256:5a70731910cd9104762161719c3d883c960151eea077134458503723b60e3667"},
 ]
 
 [[package]]
@@ -3172,19 +3174,19 @@ rpds-py = ">=0.7.0"
 
 [[package]]
 name = "requests"
-version = "2.32.4"
+version = "2.32.3"
 description = "Python HTTP for Humans."
 optional = false
 python-versions = ">=3.8"
 groups = ["main", "dev"]
 files = [
-    {file = "requests-2.32.4-py3-none-any.whl", hash = "sha256:27babd3cda2a6d50b30443204ee89830707d396671944c998b5975b031ac2b2c"},
-    {file = "requests-2.32.4.tar.gz", hash = "sha256:27d0316682c8a29834d3264820024b62a36942083d52caf2f14c0591336d3422"},
+    {file = "requests-2.32.3-py3-none-any.whl", hash = "sha256:70761cfe03c773ceb22aa2f671b4757976145175cdfca038c02654d061d6dcc6"},
+    {file = "requests-2.32.3.tar.gz", hash = "sha256:55365417734eb18255590a9ff9eb97e9e1da868d4ccd6402399eaf68af20a760"},
 ]
 
 [package.dependencies]
 certifi = ">=2017.4.17"
-charset_normalizer = ">=2,<4"
+charset-normalizer = ">=2,<4"
 idna = ">=2.5,<4"
 urllib3 = ">=1.21.1,<3"
 
@@ -3835,4 +3837,4 @@ testing = ["coverage (>=5.0.3)", "zope.event", "zope.testing"]
 [metadata]
 lock-version = "2.1"
 python-versions = "^3.11"
-content-hash = "7227641d4ff53c1227eddf9108f5d61d7f784feb5f661319414a0850f379185c"
+content-hash = "724bb3ce6ab75236ded8c594edde736a1847eaee8bca686db7cee6a4733d3815"
diff --git a/server/portal/apps/onboarding/steps/project_membership.py b/server/portal/apps/onboarding/steps/project_membership.py
index 50ee2ae66a..0e0c4f126c 100644
--- a/server/portal/apps/onboarding/steps/project_membership.py
+++ b/server/portal/apps/onboarding/steps/project_membership.py
@@ -1,13 +1,15 @@
 import logging
+from portal.apps.onboarding.steps.abstract import AbstractStep
+from portal.apps.onboarding.state import SetupState
 from django.conf import settings
 from requests.auth import HTTPBasicAuth
 from pytas.http import TASClient
 from rt import Rt
-from portal.apps.onboarding.steps.abstract import AbstractStep
-from portal.apps.onboarding.state import SetupState
 
 
+# pylint: disable=invalid-name
 logger = logging.getLogger(__name__)
+# pylint: enable=invalid-name
 
 
 class ProjectMembershipStep(AbstractStep):
@@ -16,19 +18,9 @@ def __init__(self, user):
         Call super class constructor
         """
         super(ProjectMembershipStep, self).__init__(user)
-        self.project_sql_ids = (
-            self.settings["project_sql_id"]
-            if isinstance(self.settings["project_sql_id"], list)
-            else [self.settings["project_sql_id"]]
-        )
-        self.default_project_sql_id = self.settings.get(
-            "default_project_sql_id", self.project_sql_ids[0]
-        )
-        self.default_project = self.get_tas_project(self.default_project_sql_id)
+        self.project = self.get_tas_project()
         self.user_confirm = "Request Project Access"
-        self.staff_approve = "Add to {project}".format(
-            project=self.default_project["title"]
-        )
+        self.staff_approve = "Add to {project}".format(project=self.project['title'])
         self.staff_deny = "Deny Project Access Request"
 
     def get_tas_client(self):
@@ -41,8 +33,8 @@ def get_tas_client(self):
         )
         return tas_client
 
-    def get_tas_project(self, project_sql_id):
-        return self.get_tas_client().project(project_sql_id)
+    def get_tas_project(self):
+        return self.get_tas_client().project(self.settings['project_sql_id'])
 
     def description(self):
         if self.settings is not None and 'description' in self.settings:
@@ -71,11 +63,8 @@ def get_tracker(self):
     def is_project_member(self):
         username = self.user.username
         tas_client = self.get_tas_client()
-        for project_id in self.project_sql_ids:
-            project_users = tas_client.get_project_users(project_id)
-            if any([u['username'] == username for u in project_users]):
-                return True
-        return False
+        project_users = tas_client.get_project_users(self.settings['project_sql_id'])
+        return any([u['username'] == username for u in project_users])
 
     def send_project_request(self, request):
         tracker = self.get_tracker()
@@ -83,7 +72,7 @@ def send_project_request(self, request):
         ticket_text += '{onboarding_url} to complete this request.'
         ticket_text = ticket_text.format(
             username=self.user.username,
-            project=self.default_project['title'],
+            project=self.project['title'],
             onboarding_url=request.build_absolute_uri(
                 '/workbench/onboarding/setup/{username}'.format(
                     username=self.user.username
@@ -96,7 +85,7 @@ def send_project_request(self, request):
                 result = tracker.create_ticket(
                     Queue=self.settings.get('rt_queue') or 'Accounting',
                     Subject='{project} Project Membership Request for {username}'.format(
-                        project=self.default_project['title'],
+                        project=self.project['title'],
                         username=self.user.username
                     ),
                     Text=ticket_text,
@@ -128,20 +117,20 @@ def add_to_project(self):
         # When viewing a project in tas.tacc.utexas.edu, you should see "?id=xxxxx"
         # in the address bar. This is the SQL ID
         try:
-            tas_client.add_project_user(self.default_project_sql_id, self.user.username)
+            tas_client.add_project_user(self.settings['project_sql_id'], self.user.username)
         except Exception as e:
             error, reason = e.args
             if "is already a member" in reason:
                 self.complete(
                     "{username} is already a member of the {project}".format(
                         username=self.user.username,
-                        project=self.default_project['title']
+                        project=self.project['title']
                     )
                 )
             else:
                 self.fail(
                     "{username} could not be added to {project} due to error {reason}".format(
-                        project=self.default_project['title'],
+                        project=self.project['title'],
                         username=self.user.username,
                         reason=reason
                     )
@@ -157,16 +146,16 @@ def deny_project_request(self):
         request_text = """Your request for membership on the {project} project has been
         denied. If you believe this is an error, please submit a help ticket.
         """.format(
-            project=self.default_project['title']
+            project=self.project['title']
         )
         if tracker.login():
             tracker.reply(ticket_id, text=request_text)
             tracker.comment(
                 ticket_id,
                 text="User was not added to the {project} TAS Project (GID {gid}) at {base_url}".format(
-                    project=self.default_project['title'],
-                    gid=self.default_project['gid'],
-                    base_url=settings.VANITY_BASE_URL
+                    project=self.project['title'],
+                    gid=self.project['gid'],
+                    base_url=settings.WH_BASE_URL
                 )
             )
             tracker.edit_ticket(ticket_id, Status='resolved')
@@ -186,17 +175,17 @@ def close_project_request(self, deny=False):
         request_text = """Your request for membership on the {project} project has been
         granted. Please login at {base_url}/workbench/onboarding/setup to continue setting up your account.
         """.format(
-            project=self.default_project['title'],
-            base_url=settings.VANITY_BASE_URL
+            project=self.project['title'],
+            base_url=settings.WH_BASE_URL
         )
         if tracker.login():
             tracker.reply(ticket_id, text=request_text)
             tracker.comment(
                 ticket_id,
                 text="User has been added to the {project} TAS Project (GID {gid}) via {base_url}".format(
-                    project=self.default_project['title'],
-                    gid=self.default_project['gid'],
-                    base_url=settings.VANITY_BASE_URL
+                    project=self.project['title'],
+                    gid=self.project['gid'],
+                    base_url=settings.WH_BASE_URL
                 )
             )
             tracker.edit_ticket(ticket_id, Status='resolved')
diff --git a/server/portal/apps/projects/views.py b/server/portal/apps/projects/views.py
index fc83f67622..14557eaed6 100644
--- a/server/portal/apps/projects/views.py
+++ b/server/portal/apps/projects/views.py
@@ -179,6 +179,7 @@ def post(self, request):  # pylint: disable=no-self-use
             service_client.files.insert(systemId=settings.PORTAL_PROJECTS_ROOT_SYSTEM_NAME, 
                                 path=f'media/{settings.PORTAL_PROJECTS_ID_PREFIX}-{workspace_number}/cover_image/{cover_image.name}', 
                                 file=resized_file)
+
         METRICS.info(
             "Projects",
             extra={
diff --git a/server/portal/apps/webhooks/utils.py b/server/portal/apps/webhooks/utils.py
index 80af9510a9..dcd426a940 100644
--- a/server/portal/apps/webhooks/utils.py
+++ b/server/portal/apps/webhooks/utils.py
@@ -27,7 +27,7 @@ def register_webhook(callback=None, callback_data=None, user=None):
         user=user,
         webhook_id=get_webhook_id()
     )
-    return "{}/webhooks/callbacks/{}/".format(settings.VANITY_BASE_URL, external_call.webhook_id)
+    return "{}/webhooks/callbacks/{}/".format(settings.WH_BASE_URL, external_call.webhook_id)
 
 
 def validate_webhook(webhook_id):
diff --git a/server/portal/apps/webhooks/views_unit_test.py b/server/portal/apps/webhooks/views_unit_test.py
index cc8d100260..489bdf5558 100644
--- a/server/portal/apps/webhooks/views_unit_test.py
+++ b/server/portal/apps/webhooks/views_unit_test.py
@@ -14,7 +14,7 @@ def webhook_url():
         callback="portal.apps.webhooks.views_unit_test.MockCallback",
         callback_data={"key": "value"}
     )
-    yield webhook_url[len(settings.VANITY_BASE_URL):]
+    yield webhook_url[len(settings.WH_BASE_URL):]
 
 
 class MockCallback(WebhookCallback):
diff --git a/server/portal/apps/workspace/api/views.py b/server/portal/apps/workspace/api/views.py
index 7288b5cf81..048717a919 100644
--- a/server/portal/apps/workspace/api/views.py
+++ b/server/portal/apps/workspace/api/views.py
@@ -4,7 +4,6 @@
 """
 import logging
 import json
-from urllib.parse import urlparse
 from django.http import JsonResponse
 from django.conf import settings
 from django.contrib.auth.decorators import login_required
@@ -390,25 +389,17 @@ def post(self, request, *args, **kwargs):
                     )
 
             if settings.DEBUG:
-                webhook_url = getattr(settings, "NGROK_DOMAIN", None) or getattr(settings, "WH_BASE_URL", "")
-                parsed_url = urlparse(webhook_url)
-                if not parsed_url.scheme:
-                    webhook_base_url = f"https://{webhook_url}"
-                else:
-                    webhook_base_url = settings.NGROK_DOMAIN
-
-                interactive_wh_url = webhook_base_url + reverse("webhooks:interactive_wh_handler")
-                jobs_wh_url = webhook_base_url + reverse("webhooks:jobs_wh_handler")
+                wh_base_url = settings.WH_BASE_URL + reverse('webhooks:interactive_wh_handler')
+                jobs_wh_url = settings.WH_BASE_URL + reverse('webhooks:jobs_wh_handler')
             else:
-                interactive_wh_url = request.build_absolute_uri(reverse("webhooks:interactive_wh_handler"))
-                jobs_wh_url = request.build_absolute_uri(reverse("webhooks:jobs_wh_handler"))
+                wh_base_url = request.build_absolute_uri(reverse('webhooks:interactive_wh_handler'))
+                jobs_wh_url = request.build_absolute_uri(reverse('webhooks:jobs_wh_handler'))
 
             # Add additional data for interactive apps
             if body.get('isInteractive'):
                 # Add webhook URL environment variable for interactive apps
-                job_post["parameterSet"]["envVariables"] = job_post["parameterSet"].get(
-                    "envVariables", []
-                ) + [{"key": "_INTERACTIVE_WEBHOOK_URL", "value": interactive_wh_url}]
+                job_post['parameterSet']['envVariables'] = job_post['parameterSet'].get('envVariables', []) + \
+                                                           [{'key': '_INTERACTIVE_WEBHOOK_URL', 'value':  wh_base_url}]
 
                 # Make sure $HOME/.tap directory exists for user when running interactive apps
                 system = next((v for k, v in settings.TACC_EXEC_SYSTEMS.items() if execSystemId.endswith(k)), None)
diff --git a/server/portal/settings/settings.py b/server/portal/settings/settings.py
index ab3273fac5..ac2eac6581 100644
--- a/server/portal/settings/settings.py
+++ b/server/portal/settings/settings.py
@@ -674,28 +674,12 @@ def portal_filter(record):
 
 PORTAL_JOB_NOTIFICATION_STATES = ["PENDING", "STAGING_INPUTS", "RUNNING", "ARCHIVING", "BLOCKED", "PAUSED", "FINISHED", "CANCELLED", "FAILED"]
 
-NGROK_DOMAIN = os.environ.get('NGROK_DOMAIN', '')
+WH_BASE_URL = getattr(settings_custom, '_WH_BASE_URL', '')
 
 PORTAL_ALLOCATION = getattr(settings_custom, '_PORTAL_ALLOCATION', '')
 
 PORTAL_PROJECTS_USE_SET_FACL_JOB = getattr(settings_custom, '_PORTAL_PROJECTS_USE_SET_FACL_JOB', True)
 
-# Vanity URL for the portal. Backwards compatibility with old _WH_BASE_URL setting.
-# Also include support for NGINX_SERVER_NAME environment variable if no settings are set.
-VANITY_BASE_URL = getattr(
-    settings_custom,
-    "_VANITY_BASE_URL",
-    getattr(
-        settings_custom,
-        "_WH_BASE_URL",
-        (
-            f"https://{os.environ.get('NGINX_SERVER_NAME')}"
-            if os.environ.get("NGINX_SERVER_NAME")
-            else ""
-        ),
-    ),
-)
-
 """
 SETTINGS: ELASTICSEARCH
 """
diff --git a/server/portal/settings/settings_custom.example.py b/server/portal/settings/settings_custom.example.py
index af468f6479..04a47d6447 100644
--- a/server/portal/settings/settings_custom.example.py
+++ b/server/portal/settings/settings_custom.example.py
@@ -11,7 +11,8 @@
 # Namespace for portal
 _PORTAL_NAMESPACE = 'CEP'
 
-VANITY_BASE_URL = 'https://cep.test'
+# NOTE: set _WH_BASE_URL to ngrok redirect for local dev testing (i.e. _WH_BASE_URL = 'https://12345.ngrock.io', see https://ngrok.com/)
+_WH_BASE_URL = ''
 
 # To authenticate a user with the CMS after Portal login,
 # set the _LOGIN_REDIRECT_URL to the custom cms auth endpoint
@@ -19,7 +20,7 @@
 _LOGIN_REDIRECT_URL = '/remote/login/'
 _LOGOUT_REDIRECT_URL = '/cms/logout/'
 
-_SYSTEM_MONITOR_DISPLAY_LIST = ['Stampede3', 'Lonestar6', 'Frontera', 'Vista']
+_SYSTEM_MONITOR_DISPLAY_LIST = ['Stampede2', 'Lonestar6', 'Frontera']
 
 ########################
 # DJANGO SETTINGS LOCAL
@@ -30,9 +31,11 @@
 _CSRF_TRUSTED_ORIGINS = ['https://cep.test']
 
 ########################
-# TAPIS SETTINGS
+# AGAVE SETTINGS
 ########################
 
+_TAPIS_DEFAULT_TRASH_NAME = 'Trash'
+
 _AGAVE_JWT_HEADER = 'HTTP_X_JWT_ASSERTION_PORTALS'
 
 ########################
@@ -48,35 +51,34 @@
 _PORTAL_APPS_NAMES_SEARCH = ["ALL", _PORTAL_NAMESPACE]
 _PORTAL_ALLOCATION = 'TACC-ACI'
 _PORTAL_APPS_DEFAULT_TAB = 'Data Processing'
+_PORTAL_PROJECTS_USE_SET_FACL_JOB = True
 
 ########################
 # DJANGO APP: DATA DEPOT
 ########################
 
-_TAPIS_DEFAULT_TRASH_NAME = '.Trash'
-
 _PORTAL_KEYS_MANAGER = 'portal.apps.accounts.managers.ssh_keys.KeysManager'
 
 _PORTAL_DATAFILES_STORAGE_SYSTEMS = [
     {
-        'name': 'My Data (Work)',
+        'name': 'My Data (Corral)',
         'system': 'cloud.data',
         'scheme': 'private',
         'api': 'tapis',
-        'homeDir': '/work/{tasdir}',
+        'homeDir': '/home/{username}',
         'icon': None,
         'default': True
     },
     {
-        'name': 'My Data (Frontera Scratch)',
+        'name': 'My Data (Work)',
         'system': 'frontera',
         'scheme': 'private',
         'api': 'tapis',
-        'homeDir': '/scratch1/{tasdir}',
-        'icon': None
+        'homeDir': '/work/{tasdir}',
+        'icon': None,
     },
     {
-        'name': 'My Data (Frontera Home)',
+        'name': 'My Data (Frontera)',
         'system': 'frontera',
         'scheme': 'private',
         'api': 'tapis',
@@ -146,17 +148,8 @@
     {
         'step': 'portal.apps.onboarding.steps.project_membership.ProjectMembershipStep',
         'settings': {
-            # List of TAS project SQL IDs to check membership against for
-            # portal access. Only one is required.
-            'project_sql_id': [12345, 66858],
-
-            # TAS project SQL Id to set as the default project for users in
-            # this portal if user does not have membership in any project in
-            # the project_sql_id list.
-            'default_project_sql_id': 66858,
-
-            # Defaults to 'Accounting' if left blank
-            'rt_queue': 'Life Sciences'
+            'project_sql_id': 12345,
+            'rt_queue': 'Life Sciences'     # Defaults to 'Accounting' if left blank
         }
     },
     {
@@ -167,13 +160,6 @@
             'rt_queue': 'Life Sciences'     # Defaults to 'Accounting' if left blank
         }
     },
-    {
-        'step': 'portal.apps.onboarding.steps.system_access_v3.SystemAccessStepV3',
-        'settings': {
-            'access_systems': ['cloud.data', 'frontera', 'stampede2.community'],  # Tapis systems to grant file access
-            'credentials_systems': ['cloud.data']  # Tapis systems to grant user credentials with TMS
-        }
-    },
 ]
 """
 
@@ -182,25 +168,10 @@
         'step': 'portal.apps.onboarding.steps.allocation.AllocationStep',
         'settings': {}
     },
-    {
-        'step': 'portal.apps.onboarding.steps.project_membership.ProjectMembershipStep',
-        'settings': {
-            # List of TAS project SQL IDs to check membership against for
-            # portal access. Only one is required.
-            'project_sql_id': [12345, 67891],
-
-            # TAS project SQL Id to set upon approval as the default project
-            # for users in this portal if user does not have membership in any
-            # project in the project_sql_id list.
-            'default_project_sql_id': 12345,
-
-            # Defaults to 'Accounting' if left blank
-            'rt_queue': ''
-        }
-    },
     {
         'step': 'portal.apps.onboarding.steps.system_access_v3.SystemAccessStepV3',
         'settings': {
+            'access_systems': ['cloud.data', 'frontera', 'ls6'],
             'credentials_systems': ['cloud.data']
         }
     },
@@ -211,13 +182,12 @@
 #######################
 
 _PORTAL_PROJECTS_SYSTEM_PREFIX = 'cep.project'
-_PORTAL_PROJECTS_ID_PREFIX = 'CEP'
+_PORTAL_PROJECTS_ID_PREFIX = 'CEPV3-DEV'
 _PORTAL_PROJECTS_ROOT_DIR = '/corral-repl/tacc/aci/CEP/projects'
 _PORTAL_PROJECTS_ROOT_SYSTEM_NAME = 'cep.project.root'
 _PORTAL_PROJECTS_ROOT_HOST = 'cloud.data.tacc.utexas.edu'
 _PORTAL_PROJECTS_SYSTEM_PORT = "22"
 _PORTAL_PROJECTS_PEMS_APP_ID = ""  # Defunct in v3
-_PORTAL_PROJECTS_USE_SET_FACL_JOB = True
 
 ########################
 # Custom Portal Template Assets
@@ -229,7 +199,16 @@
 # _PORTAL_ICON_FILENAME=''                 # Empty string yields NO icon.
 
 # Default Art.
-_PORTAL_ICON_FILENAME = "/static/site_cms/img/favicons/favicon.ico"
+_PORTAL_ICON_FILENAME = '/static/site_cms/img/favicons/favicon.ico'
+
+
+# No Extra Styles.
+# _PORTAL_CSS_FILENAMES = []                      # Empty array yields NO extra styles.
+
+# Theme "has dark logo" Styles.
+# _PORTAL_CSS_FILENAMES = [
+#     '/static/site_cms/css/build/theme.has-dark-logo.css'
+# ]
 
 ########################
 # GOOGLE ANALYTICS
@@ -239,7 +218,7 @@
 # To use during dev, Tracking Protection in browser needs to be turned OFF.
 # Need to setup an admin account to aggregate tracking properties for portals.
 # NOTE: Use the _TAPIS_TENANT_BASEURL URL value when setting up the tracking property.
-_GOOGLE_ANALYTICS_PROPERTY_ID = 'UA-114289987-X'
+_GOOGLE_ANALYTICS_PROPERTY_ID = 'UA-XXXXX-Y'
 
 ########################
 # WORKBENCH SETTINGS
@@ -255,13 +234,13 @@
     "viewPath": True,
     "compressApp": {
         "id": "compress",
-        "version": "latest"  # Can be set to "" to use the latest version
+        "version": "0.0.3"  # Can be set to "" to use the latest version
     },
     "extractApp": {
         "id": "extract",
-        "version": "latest"  # Can be set to "" to use the latest version
+        "version": "0.0.1"  # Can be set to "" to use the latest version
     },
-    "makePublic": True,
+    "makePublic": False,
     "hideApps": False,
     "hideDataFiles": False,
     "hideAllocations": False,
@@ -300,5 +279,6 @@
   }
 }
 
+
 _SMTP_HOST = "relay.tacc.utexas.edu"
-_DEFAULT_FROM_EMAIL="no-reply@digitalrocksportal.org"
+_DEFAULT_FROM_EMAIL="no-reply@digitalrocksportal.org"
\ No newline at end of file
diff --git a/server/portal/settings/settings_default.py b/server/portal/settings/settings_default.py
index 4522ddec56..1c4d0897dc 100644
--- a/server/portal/settings/settings_default.py
+++ b/server/portal/settings/settings_default.py
@@ -11,7 +11,8 @@
 # Namespace for portal
 _PORTAL_NAMESPACE = 'DRP'
 
-_VANITY_BASE_URL = 'https://cep.test'
+# NOTE: set _WH_BASE_URL to ngrok redirect for local dev testing (i.e. _WH_BASE_URL = 'https://12345.ngrock.io', see https://ngrok.com/)
+_WH_BASE_URL = ''
 
 # To authenticate a user with the CMS after Portal login,
 # set the _LOGIN_REDIRECT_URL to the custom cms auth endpoint
@@ -19,7 +20,7 @@
 _LOGIN_REDIRECT_URL = '/remote/login/'
 _LOGOUT_REDIRECT_URL = '/cms/logout/'
 
-_SYSTEM_MONITOR_DISPLAY_LIST = ['Stampede3', 'Lonestar6', 'Frontera', 'Vista']
+_SYSTEM_MONITOR_DISPLAY_LIST = ['Stampede3', 'Lonestar6', 'Frontera']
 
 ########################
 # DJANGO SETTINGS LOCAL
@@ -68,7 +69,7 @@
         'default': True
     },
     {
-        'name': 'My Data (Frontera Scratch)',
+        'name': 'My Data (Scratch)',
         'system': 'frontera',
         'scheme': 'private',
         'api': 'tapis',
@@ -76,7 +77,7 @@
         'icon': None
     },
     {
-        'name': 'My Data (Frontera Home)',
+        'name': 'My Data (Frontera)',
         'system': 'frontera',
         'scheme': 'private',
         'api': 'tapis',
@@ -163,17 +164,8 @@
     {
         'step': 'portal.apps.onboarding.steps.project_membership.ProjectMembershipStep',
         'settings': {
-            # List of TAS project SQL IDs to check membership against for
-            # portal access. Only one is required.
-            'project_sql_id': [12345, 66858],
-
-            # TAS project SQL Id to set as the default project for users in
-            # this portal if user does not have membership in any project in
-            # the project_sql_id list.
-            'default_project_sql_id': 66858,
-
-            # Defaults to 'Accounting' if left blank
-            'rt_queue': 'Life Sciences'
+            'project_sql_id': 12345,
+            'rt_queue': 'Life Sciences'     # Defaults to 'Accounting' if left blank
         }
     },
     {
@@ -188,7 +180,7 @@
         'step': 'portal.apps.onboarding.steps.system_access_v3.SystemAccessStepV3',
         'settings': {
             'access_systems': ['cloud.data', 'frontera', 'stampede2.community'],  # Tapis systems to grant file access
-            'credentials_systems': ['cloud.data']  # Tapis systems to grant user credentials with TMS
+            'credentials_systems': ['cloud.data']  # Tapis systems to grant user credentials with the keys service
         }
     },
 ]
@@ -199,25 +191,10 @@
         'step': 'portal.apps.onboarding.steps.allocation.AllocationStep',
         'settings': {}
     },
-    {
-        'step': 'portal.apps.onboarding.steps.project_membership.ProjectMembershipStep',
-        'settings': {
-            # List of TAS project SQL IDs to check membership against for
-            # portal access. Only one is required.
-            'project_sql_id': [12345, 66858],
-
-            # TAS project SQL Id to set upon approval as the default project
-            # for users in this portal if user does not have membership in any
-            # project in the project_sql_id list.
-            'default_project_sql_id': 66858,
-
-            # Defaults to 'Accounting' if left blank
-            'rt_queue': 'Life Sciences'
-        }
-    },
     {
         'step': 'portal.apps.onboarding.steps.system_access_v3.SystemAccessStepV3',
         'settings': {
+            'access_systems': ['cloud.data', 'frontera', 'ls6'],
             'credentials_systems': ['cloud.data']
         }
     },
diff --git a/server/portal/settings/settings_local.example.py b/server/portal/settings/settings_local.example.py
index ad86b66f61..857b436bcf 100644
--- a/server/portal/settings/settings_local.example.py
+++ b/server/portal/settings/settings_local.example.py
@@ -1 +1,2 @@
-# Add settings here to override settings in settings.py
+# NOTE: set WH_BASE_URL to ngrok redirect for local dev testing (i.e. WH_BASE_URL = 'https://12345.ngrock.io', see https://ngrok.com/)
+WH_BASE_URL = 'https://12345.ngrok.io'
diff --git a/server/portal/settings/unit_test_settings.py b/server/portal/settings/unit_test_settings.py
index db3d856458..910dbec66a 100644
--- a/server/portal/settings/unit_test_settings.py
+++ b/server/portal/settings/unit_test_settings.py
@@ -520,7 +520,7 @@
     },
 }
 
-VANITY_BASE_URL = "https://testserver"
+WH_BASE_URL = "https://testserver"
 
 WORKBENCH_SETTINGS = {
     "debug": False
diff --git a/server/pyproject.toml b/server/pyproject.toml
index 9b4fb176d5..c321b4de6d 100644
--- a/server/pyproject.toml
+++ b/server/pyproject.toml
@@ -30,7 +30,7 @@ ipython = "^9.0.2"
 pycryptodome = "^3.19.1"
 elasticsearch = "^7.7.1"
 uwsgi = "^2.0.22"
-requests = "^2.32.4"
+requests = "^2.32.3"
 django-impersonate = "^1.5"
 channels = "^4.0.0"
 channels-redis = "^4.1.0"

From 584814158f3b4c033469d6e6d91426c6a6c287f2 Mon Sep 17 00:00:00 2001
From: Wesley B <62723358+wesleyboar@users.noreply.github.com>
Date: Thu, 3 Jul 2025 19:18:22 -0500
Subject: [PATCH 70/79] fix: delete stray file

probably related to task.digital-rocks being behind main
---
 server/conf/env_files/ngrok.env | 5 -----
 1 file changed, 5 deletions(-)
 delete mode 100644 server/conf/env_files/ngrok.env

diff --git a/server/conf/env_files/ngrok.env b/server/conf/env_files/ngrok.env
deleted file mode 100644
index 65ae75620a..0000000000
--- a/server/conf/env_files/ngrok.env
+++ /dev/null
@@ -1,5 +0,0 @@
-# Get authtoken from https://dashboard.ngrok.com/get-started/your-authtoken
-NGROK_AUTHTOKEN=your_ngrok_authtoken
-
-# Get static domain from https://dashboard.ngrok.com/domains
-NGROK_DOMAIN=your-ngrok-subdomain.ngrok-free.app

From 0efd64b091ce7cc0e96504bbd55d9e1be26694a6 Mon Sep 17 00:00:00 2001
From: Wesley B <62723358+wesleyboar@users.noreply.github.com>
Date: Mon, 7 Jul 2025 16:23:22 -0500
Subject: [PATCH 71/79] fix: inaccurate href value

---
 .../DataFiles/DataFilesForDPM/DataFilesForDPMRead.jsx         | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPMRead.jsx b/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPMRead.jsx
index 70663bd3da..b2d814e661 100644
--- a/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPMRead.jsx
+++ b/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPMRead.jsx
@@ -26,7 +26,7 @@ export default function DataFilesForDPMRead() {
             className="c-button c-button--primary  project-download-button"
             data-target="#project-download-modal"
             data-toggle="modal"
-            href="/media/filer_public_thumbnails/filer_public/65/10/6510c85e-4f00-4bde-b560-31614fb30ce0/dr-proj-317.png__768x768_subsampling-2.png"
+            href="#"
             target="_blank"
           >
             <i
@@ -113,7 +113,7 @@ export default function DataFilesForDPMRead() {
         <div className="row project-overview">
           <div className="col col-12 col-sm-12 col-md-3 col-lg-3 col-xl-3">
             <img
-              src="/media/filer_public_thumbnails/filer_public/65/10/6510c85e-4f00-4bde-b560-31614fb30ce0/dr-proj-317.png__800.0x764.0_subsampling-2.png"
+              src="https://www.digitalrocksportal.org/media/projects/317/archive.zip"
               alt=""
               srcSet="
                       https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/65/10/6510c85e-4f00-4bde-b560-31614fb30ce0/dr-proj-317.png__576x576_subsampling-2.png 576w,

From e217fbce55d50fcb525ec693fe39ee1ea56db8a7 Mon Sep 17 00:00:00 2001
From: Wesley B <62723358+wesleyboar@users.noreply.github.com>
Date: Mon, 7 Jul 2025 16:30:34 -0500
Subject: [PATCH 72/79] fix: modals, dropdowns, tabs (new bootstrap, v5)

Bootstrap v5 changes `data-` attributes for these features.

Modals and Dropdowns require new naming.
---
 .../DataFiles/DataFilesForDPM/DataFilesForDPMData.jsx  | 10 +++++-----
 .../DataFiles/DataFilesForDPM/DataFilesForDPMRead.jsx  | 10 +++++-----
 .../DataFiles/DataFilesForDPM/DataFilesForDPMViews.jsx |  2 +-
 3 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPMData.jsx b/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPMData.jsx
index c6fb907b44..8c53786827 100644
--- a/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPMData.jsx
+++ b/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPMData.jsx
@@ -99,7 +99,7 @@ export default function DataFilesForDPMData() {
             <p className="dropdown" data-tag-change-from="div">
               <button
                 className="dropdown-toggle  c-button c-button--primary"
-                data-toggle="dropdown"
+                data-bs-toggle="dropdown"
                 type="button"
               >
                 Action
@@ -219,7 +219,7 @@ export default function DataFilesForDPMData() {
             <p className="dropdown" data-tag-change-from="div">
               <button
                 className="dropdown-toggle  c-button c-button--primary"
-                data-toggle="dropdown"
+                data-bs-toggle="dropdown"
                 type="button"
               >
                 Action
@@ -339,7 +339,7 @@ export default function DataFilesForDPMData() {
             <p className="dropdown" data-tag-change-from="div">
               <button
                 className="dropdown-toggle  c-button c-button--primary"
-                data-toggle="dropdown"
+                data-bs-toggle="dropdown"
                 type="button"
               >
                 Action
@@ -459,7 +459,7 @@ export default function DataFilesForDPMData() {
             <p className="dropdown" data-tag-change-from="div">
               <button
                 className="dropdown-toggle  c-button c-button--primary"
-                data-toggle="dropdown"
+                data-bs-toggle="dropdown"
                 type="button"
               >
                 Action
@@ -578,7 +578,7 @@ export default function DataFilesForDPMData() {
             <p className="dropdown" data-tag-change-from="div">
               <button
                 className="dropdown-toggle  c-button c-button--primary"
-                data-toggle="dropdown"
+                data-bs-toggle="dropdown"
                 type="button"
               >
                 Action
diff --git a/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPMRead.jsx b/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPMRead.jsx
index b2d814e661..90fb7fa9ea 100644
--- a/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPMRead.jsx
+++ b/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPMRead.jsx
@@ -24,8 +24,8 @@ export default function DataFilesForDPMRead() {
           <span>11 Sandstones: Raw, Filtered and Segmented Data</span>{' '}
           <a
             className="c-button c-button--primary  project-download-button"
-            data-target="#project-download-modal"
-            data-toggle="modal"
+            data-bs-target="#project-download-modal"
+            data-bs-toggle="modal"
             href="#"
             target="_blank"
           >
@@ -100,8 +100,8 @@ export default function DataFilesForDPMRead() {
           <strong>
             <a
               className="c-button c-button--as-link"
-              data-target="#project-metrics-modal"
-              data-toggle="modal"
+              data-bs-target="#project-metrics-modal"
+              data-bs-toggle="modal"
               href="./metrics/"
             >
               Details
@@ -695,7 +695,7 @@ export default function DataFilesForDPMRead() {
               <button
                 type="button"
                 className="close"
-                data-dismiss="modal"
+                data-bs-dismiss="modal"
                 aria-label="Close"
               >
                 <i aria-hidden="true">×</i>
diff --git a/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPMViews.jsx b/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPMViews.jsx
index fe28ab5818..e43c0881d7 100644
--- a/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPMViews.jsx
+++ b/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPMViews.jsx
@@ -15,7 +15,7 @@ export default function DataFilesForDPMViews({
             <a
               className={`nav-link${view === tab.view ? ' active' : ''}`}
               id={tab.id}
-              data-toggle="tab"
+              data-bs-toggle="tab"
               href={`#${tab.contentId}`}
               role="tab"
               aria-controls={tab.contentId}

From 49e2642229ba06ae632f8a10470a509eb5fe46b1 Mon Sep 17 00:00:00 2001
From: Wesley B <62723358+wesleyboar@users.noreply.github.com>
Date: Mon, 7 Jul 2025 16:33:38 -0500
Subject: [PATCH 73/79] fix: missing modals data- attr update

Related to previous commit
---
 .../DataFiles/DataFilesForDPM/DataFilesForDPMRead.jsx           | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPMRead.jsx b/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPMRead.jsx
index 90fb7fa9ea..96218f5391 100644
--- a/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPMRead.jsx
+++ b/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPMRead.jsx
@@ -787,7 +787,7 @@ export default function DataFilesForDPMRead() {
               <button
                 type="button"
                 className="close"
-                data-dismiss="modal"
+                data-bs-dismiss="modal"
                 aria-label="Close"
               >
                 <i aria-hidden="true">×</i>

From f5e32d266c3115fe5c8cdab0d47592e1410a5001 Mon Sep 17 00:00:00 2001
From: Wesley B <62723358+wesleyboar@users.noreply.github.com>
Date: Mon, 7 Jul 2025 16:34:45 -0500
Subject: [PATCH 74/79] chore: remove `data-tag-change-from` attributes

These are cruft from CMS script that changes HTML elements which Django CMS did not allow me to put in a snippet.
---
 .../DataFilesForDPM/DataFilesForDPMBrowse.jsx | 40 ++++---------------
 .../DataFilesForDPM/DataFilesForDPMData.jsx   | 37 +++++------------
 2 files changed, 19 insertions(+), 58 deletions(-)

diff --git a/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPMBrowse.jsx b/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPMBrowse.jsx
index 0dad60823c..2a309a19d7 100644
--- a/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPMBrowse.jsx
+++ b/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPMBrowse.jsx
@@ -6,10 +6,7 @@ export default function DataFilesForDPMBrowse() {
     <div className="o-section">
       <h1>Browse Datasets</h1>
       <div className="c-card-list">
-        <li
-          className="c-card--image-top c-card--plain"
-          data-tag-change-from="article"
-        >
+        <li className="c-card--image-top c-card--plain">
           <h3>11 Sandstones: raw, filtered and segmented data</h3>
           <p>
             <strong>Rodrigo Neumann</strong>
@@ -36,10 +33,7 @@ export default function DataFilesForDPMBrowse() {
             className="img-fluid"
           />
         </li>
-        <li
-          className="c-card--image-top c-card--plain"
-          data-tag-change-from="article"
-        >
+        <li className="c-card--image-top c-card--plain">
           <h3>
             Bentheimer and Nugget Residual Saturation Micro-Computed Tomography
             Data
@@ -71,10 +65,7 @@ export default function DataFilesForDPMBrowse() {
             className="img-fluid"
           />
         </li>
-        <li
-          className="c-card--image-top c-card--plain"
-          data-tag-change-from="article"
-        >
+        <li className="c-card--image-top c-card--plain">
           <h3>11 Sandstones: raw, filtered and segmented data</h3>
           <p>
             <strong>Rodrigo Neumann</strong>
@@ -101,10 +92,7 @@ export default function DataFilesForDPMBrowse() {
             className="img-fluid"
           />
         </li>
-        <li
-          className="c-card--image-top c-card--plain"
-          data-tag-change-from="article"
-        >
+        <li className="c-card--image-top c-card--plain">
           <h3>
             Bentheimer and Nugget Residual Saturation Micro-Computed Tomography
             Data
@@ -136,10 +124,7 @@ export default function DataFilesForDPMBrowse() {
             className="img-fluid"
           />
         </li>
-        <li
-          className="c-card--image-top c-card--plain"
-          data-tag-change-from="article"
-        >
+        <li className="c-card--image-top c-card--plain">
           <h3>11 Sandstones: raw, filtered and segmented data</h3>
           <p>
             <strong>Rodrigo Neumann</strong>
@@ -166,10 +151,7 @@ export default function DataFilesForDPMBrowse() {
             className="img-fluid"
           />
         </li>
-        <li
-          className="c-card--image-top c-card--plain"
-          data-tag-change-from="article"
-        >
+        <li className="c-card--image-top c-card--plain">
           <h3>
             Bentheimer and Nugget Residual Saturation Micro-Computed Tomography
             Data
@@ -201,10 +183,7 @@ export default function DataFilesForDPMBrowse() {
             className="img-fluid"
           />
         </li>
-        <li
-          className="c-card--image-top c-card--plain"
-          data-tag-change-from="article"
-        >
+        <li className="c-card--image-top c-card--plain">
           <h3>11 Sandstones: raw, filtered and segmented data</h3>
           <p>
             <strong>Rodrigo Neumann</strong>
@@ -231,10 +210,7 @@ export default function DataFilesForDPMBrowse() {
             className="img-fluid"
           />
         </li>
-        <li
-          className="c-card--image-top c-card--plain"
-          data-tag-change-from="article"
-        >
+        <li className="c-card--image-top c-card--plain">
           <h3>
             Bentheimer and Nugget Residual Saturation Micro-Computed Tomography
             Data
diff --git a/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPMData.jsx b/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPMData.jsx
index 8c53786827..8e230d2716 100644
--- a/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPMData.jsx
+++ b/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPMData.jsx
@@ -42,11 +42,8 @@ export default function DataFilesForDPMData() {
       <section id="data" className="o-section">
         <h3>Data</h3>
 
-        <ul className="c-card-list" data-tag-change-from="div">
-          <li
-            className="c-card--image-top c-card--plain"
-            data-tag-change-from="article"
-          >
+        <ul className="c-card-list">
+          <li className="c-card--image-top c-card--plain">
             <img
               src="/media/filer_public_thumbnails/filer_public/30/62/3062e147-8fdb-4cd8-afa1-3fbbc6c42b31/dr-proj-317-data-1352.jpg__1000.0x1000.0_q85_subsampling-2.jpg"
               alt=""
@@ -96,7 +93,7 @@ export default function DataFilesForDPMData() {
               </tbody>
             </table>
 
-            <p className="dropdown" data-tag-change-from="div">
+            <p className="dropdown">
               <button
                 className="dropdown-toggle  c-button c-button--primary"
                 data-bs-toggle="dropdown"
@@ -163,10 +160,7 @@ export default function DataFilesForDPMData() {
               </menu>
             </p>
           </li>
-          <li
-            className="c-card--image-top c-card--plain"
-            data-tag-change-from="article"
-          >
+          <li className="c-card--image-top c-card--plain">
             <img
               src="/media/filer_public_thumbnails/filer_public/30/62/3062e147-8fdb-4cd8-afa1-3fbbc6c42b31/dr-proj-317-data-1352.jpg__1000.0x1000.0_q85_subsampling-2.jpg"
               alt=""
@@ -216,7 +210,7 @@ export default function DataFilesForDPMData() {
               </tbody>
             </table>
 
-            <p className="dropdown" data-tag-change-from="div">
+            <p className="dropdown">
               <button
                 className="dropdown-toggle  c-button c-button--primary"
                 data-bs-toggle="dropdown"
@@ -283,10 +277,7 @@ export default function DataFilesForDPMData() {
               </menu>
             </p>
           </li>
-          <li
-            className="c-card--image-top c-card--plain"
-            data-tag-change-from="article"
-          >
+          <li className="c-card--image-top c-card--plain">
             <img
               src="/media/filer_public_thumbnails/filer_public/30/62/3062e147-8fdb-4cd8-afa1-3fbbc6c42b31/dr-proj-317-data-1352.jpg__1000.0x1000.0_q85_subsampling-2.jpg"
               alt=""
@@ -336,7 +327,7 @@ export default function DataFilesForDPMData() {
               </tbody>
             </table>
 
-            <p className="dropdown" data-tag-change-from="div">
+            <p className="dropdown">
               <button
                 className="dropdown-toggle  c-button c-button--primary"
                 data-bs-toggle="dropdown"
@@ -403,10 +394,7 @@ export default function DataFilesForDPMData() {
               </menu>
             </p>
           </li>
-          <li
-            className="c-card--image-top c-card--plain"
-            data-tag-change-from="article"
-          >
+          <li className="c-card--image-top c-card--plain">
             <img
               src="/media/filer_public_thumbnails/filer_public/30/62/3062e147-8fdb-4cd8-afa1-3fbbc6c42b31/dr-proj-317-data-1352.jpg__1000.0x1000.0_q85_subsampling-2.jpg"
               alt=""
@@ -456,7 +444,7 @@ export default function DataFilesForDPMData() {
               </tbody>
             </table>
 
-            <p className="dropdown" data-tag-change-from="div">
+            <p className="dropdown">
               <button
                 className="dropdown-toggle  c-button c-button--primary"
                 data-bs-toggle="dropdown"
@@ -523,10 +511,7 @@ export default function DataFilesForDPMData() {
               </menu>
             </p>
           </li>
-          <li
-            className="c-card--image-top c-card--plain"
-            data-tag-change-from="article"
-          >
+          <li className="c-card--image-top c-card--plain">
             <img
               src="/media/filer_public_thumbnails/filer_public/30/62/3062e147-8fdb-4cd8-afa1-3fbbc6c42b31/dr-proj-317-data-1352.jpg__1000.0x1000.0_q85_subsampling-2.jpg"
               alt=""
@@ -575,7 +560,7 @@ export default function DataFilesForDPMData() {
                 </tr>
               </tbody>
             </table>
-            <p className="dropdown" data-tag-change-from="div">
+            <p className="dropdown">
               <button
                 className="dropdown-toggle  c-button c-button--primary"
                 data-bs-toggle="dropdown"

From b49998bc44a28ca50092d31902c93e82295ccbdc Mon Sep 17 00:00:00 2001
From: Wesley B <62723358+wesleyboar@users.noreply.github.com>
Date: Mon, 7 Jul 2025 17:25:43 -0500
Subject: [PATCH 75/79] fix: tooltips

---
 .../DataFilesForDPM/DataFilesForDPMRead.jsx   | 32 ++++++++++++++++---
 .../styles/components/bootstrap.tooltip.css   |  7 ++++
 client/src/styles/global.css                  |  1 +
 3 files changed, 36 insertions(+), 4 deletions(-)
 create mode 100644 client/src/styles/components/bootstrap.tooltip.css

diff --git a/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPMRead.jsx b/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPMRead.jsx
index 96218f5391..9c66f51d53 100644
--- a/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPMRead.jsx
+++ b/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPMRead.jsx
@@ -3,6 +3,15 @@ import React, { useEffect } from 'react';
 // TODO: Replace use of this with component(s) from WC-219
 export default function DataFilesForDPMRead() {
   useEffect(() => {
+    // To trigger tooltips
+    let tooltipInstances = [];
+    if (window.bootstrap && window.bootstrap.Tooltip) {
+      const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
+      tooltipInstances = [...tooltipTriggerList].map(
+        (el) => new window.bootstrap.Tooltip(el)
+      );
+    }
+
     // Or use `ShowMore` common component instead of `js-show-more` class
     import(
       'https://cdn.jsdelivr.net/gh/TACC/Core-Styles@v2/src/lib/_imports/components/c-show-more/c-show-more.js'
@@ -15,6 +24,11 @@ export default function DataFilesForDPMRead() {
       .catch((err) => {
         console.error('Failed to load c-show-more module:', err);
       });
+
+    // To clean up
+    return () => {
+      tooltipInstances.forEach((instance) => instance.dispose && instance.dispose());
+    };
   }, []);
 
   return (
@@ -806,12 +820,15 @@ export default function DataFilesForDPMRead() {
                     <tr>
                       <td>
                         Unique Investigations
+                        {' '}
                         <small className="metrics-note">(views)</small>
+                        {' '}
                         <i
                           title="Refers to the number of one-hour sessions during which a user previewed/downloaded/copied files associated with this DOI."
-                          data-title="Unique Investigations (Views)"
+                          data-bs-toggle="tooltip"
+                          data-bs-placement="top"
                         >
-                          ?
+                          ⓘ
                         </i>
                       </td>
                       <td>0</td>
@@ -819,12 +836,16 @@ export default function DataFilesForDPMRead() {
                     <tr>
                       <td>
                         Unique Requests
+                        {' '}
                         <small className="metrics-note">(downloads)</small>
+                        {' '}
                         <i
                           title="Refers to the number of one-hour sessions during which a user previewed/downloaded/copied files associated with this DOI."
+                          data-bs-toggle="tooltip"
+                          data-bs-placement="top"
                           data-title="Unique Requests (Downloads)"
                         >
-                          ?
+                          ⓘ
                         </i>
                       </td>
                       <td>0</td>
@@ -832,11 +853,14 @@ export default function DataFilesForDPMRead() {
                     <tr>
                       <td>
                         Total Requests
+                        {' '}
                         <i
                           title="Refers to the number of one-hour sessions during which a user previewed/downloaded/copied files associated with this DOI."
+                          data-bs-toggle="tooltip"
+                          data-bs-placement="top"
                           data-title="Total Requests"
                         >
-                          ?
+                          ⓘ
                         </i>
                       </td>
                       <td>0</td>
diff --git a/client/src/styles/components/bootstrap.tooltip.css b/client/src/styles/components/bootstrap.tooltip.css
new file mode 100644
index 0000000000..80a5381bf4
--- /dev/null
+++ b/client/src/styles/components/bootstrap.tooltip.css
@@ -0,0 +1,7 @@
+i[data-bs-toggle="tooltip"] {
+  font-style: normal;
+}
+
+.tooltip-inner {
+    font-size: var(--global-font-size--medium);
+}
diff --git a/client/src/styles/global.css b/client/src/styles/global.css
index 98f19ba8a2..814c41a840 100644
--- a/client/src/styles/global.css
+++ b/client/src/styles/global.css
@@ -30,6 +30,7 @@
 @import url('./components/bootstrap.nav.css');
 @import url('./components/bootstrap.utils.css');
 @import url('./components/bootstrap.button.css');
+@import url('./components/bootstrap.tooltip.css');
 @import url('./components/mui.tabs.css');
 
 /* TRUMPS */

From 25f31c18700034b344937887d268164d112b0fa4 Mon Sep 17 00:00:00 2001
From: Wesley B <62723358+wesleyboar@users.noreply.github.com>
Date: Mon, 7 Jul 2025 17:47:25 -0500
Subject: [PATCH 76/79] fix: modal content styles

---
 .../DataFilesForDPM/DataFilesForDPMRead.jsx   |  4 ++--
 .../styles/components/metrics.global.css      | 21 +++++++++++++++++++
 2 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPMRead.jsx b/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPMRead.jsx
index 9c66f51d53..53e6ea8dca 100644
--- a/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPMRead.jsx
+++ b/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPMRead.jsx
@@ -809,7 +809,7 @@ export default function DataFilesForDPMRead() {
             </div>
             <div className="modal-body">
               <div className="metrics-tableset">
-                <table>
+                <table className="metrics-table">
                   <thead>
                     <tr>
                       <th>Aggregated Usage</th>
@@ -867,7 +867,7 @@ export default function DataFilesForDPMRead() {
                     </tr>
                   </tbody>
                 </table>
-                <table>
+                <table className="metrics-table">
                   <thead>
                     <tr>
                       <th>
diff --git a/client/src/components/DataFiles/DataFilesForDPM/styles/components/metrics.global.css b/client/src/components/DataFiles/DataFilesForDPM/styles/components/metrics.global.css
index dfb0c4ca00..bae76975ca 100644
--- a/client/src/components/DataFiles/DataFilesForDPM/styles/components/metrics.global.css
+++ b/client/src/components/DataFiles/DataFilesForDPM/styles/components/metrics.global.css
@@ -5,6 +5,27 @@
     gap: 1rem;
     justify-content: space-evenly;
 }
+.metrics-tableset > * {
+    align-self: start;
+}
+
+.metrics-table :is(input, select, textarea) {
+    font-size: small;
+}
+/* To undo CMS size of interactive elements */
+@layer mimic-cms.base {
+    .metrics-table :is(input, select, textarea) {
+        padding: revert-layer;
+    }
+}
+/* To undo CMS size of interactive elements (for DPM Pre-Prod CMS) */
+/* TODO: Remove after DPM pprd CMS "Browse Databases" reference is useless */
+/* https://github.com/TACC/Core-CMS-Custom/blob/9f5d6b1/digitalrocks_assets/css/browse-datasets.css */
+@layer base {
+    .metrics-table :is(input, select, textarea) {
+        padding: revert-layer;
+    }
+}
 
 .metrics-caption {
     padding-block: 8px;

From 803bc8ad8ec7a37a4d1a2373626b54b7d0cbdc05 Mon Sep 17 00:00:00 2001
From: Wesley B <62723358+wesleyboar@users.noreply.github.com>
Date: Mon, 7 Jul 2025 17:50:50 -0500
Subject: [PATCH 77/79] fix: limit portal modal content styles to portal

---
 .../DataFilesForDPM/styles/components/metrics.global.css        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/components/DataFiles/DataFilesForDPM/styles/components/metrics.global.css b/client/src/components/DataFiles/DataFilesForDPM/styles/components/metrics.global.css
index bae76975ca..875157893b 100644
--- a/client/src/components/DataFiles/DataFilesForDPM/styles/components/metrics.global.css
+++ b/client/src/components/DataFiles/DataFilesForDPM/styles/components/metrics.global.css
@@ -14,7 +14,7 @@
 }
 /* To undo CMS size of interactive elements */
 @layer mimic-cms.base {
-    .metrics-table :is(input, select, textarea) {
+    body.has-cms-ui .metrics-table :is(input, select, textarea) {
         padding: revert-layer;
     }
 }

From 97618984c7aded1aff22e2fee9594ebd349a8073 Mon Sep 17 00:00:00 2001
From: Wesley B <62723358+wesleyboar@users.noreply.github.com>
Date: Mon, 7 Jul 2025 18:17:51 -0500
Subject: [PATCH 78/79] fix: dropdown styles

---
 server/portal/templates/includes/cms_ui.html | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/server/portal/templates/includes/cms_ui.html b/server/portal/templates/includes/cms_ui.html
index 2d82e3639a..8cafd80f71 100644
--- a/server/portal/templates/includes/cms_ui.html
+++ b/server/portal/templates/includes/cms_ui.html
@@ -26,6 +26,17 @@
   body { -webkit-font-smoothing: revert; }
   .c-button { --max-width: auto; }
 
+  /* To change Portal's Bootstrap styles to match CMS */
+  .workbench-wrapper .dropdown-menu,
+  .workbench-wrapper .dropdown-menu::before,
+  .workbench-wrapper .dropdown-menu::after,
+  .workbench-wrapper .dropdown-item,
+  .workbench-wrapper .dropdown-item:focus,
+  .workbench-wrapper .dropdown-item:hover,
+  .workbench-wrapper .dropdown-divider {
+    all: revert-layer;
+  }
+
   /* To hide navbar */
   /* TODO: Instead of this, component using CMS styles should not use navbar */
   #react-root:has(#mimic-cms) .nav-sidebar {

From e0916df490c42514759fe5c6dc209ce4fe1d0326 Mon Sep 17 00:00:00 2001
From: Wesley B <62723358+wesleyboar@users.noreply.github.com>
Date: Mon, 7 Jul 2025 18:21:33 -0500
Subject: [PATCH 79/79] refactor: delete sample components + their styles

---
 .../DataFilesForDPM.global.css                |   4 -
 .../DataFilesForDPM/DataFilesForDPM.jsx       |  55 -
 .../DataFilesForDPM.module.css                |  16 -
 .../DataFilesForDPMBreadcrumbs.jsx            |   8 -
 .../DataFilesForDPM/DataFilesForDPMBrowse.jsx | 261 -----
 .../DataFilesForDPM/DataFilesForDPMData.jsx   | 680 -------------
 .../DataFilesForDPM/DataFilesForDPMRead.jsx   | 937 ------------------
 .../DataFilesForDPM/DataFilesForDPMViews.jsx  |  52 -
 .../styles/components.global.css              |   5 -
 .../styles/components/data-tree.global.css    |  48 -
 .../styles/components/license.global.css      |  19 -
 .../styles/components/metrics.global.css      |  43 -
 .../styles/components/project.global.css      |  41 -
 .../styles/components/publication.global.css  |  11 -
 .../styles/customize-core-styles.global.css   |  69 --
 client/src/components/DataFiles/index.js      |   2 +-
 16 files changed, 1 insertion(+), 2250 deletions(-)
 delete mode 100644 client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPM.global.css
 delete mode 100644 client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPM.jsx
 delete mode 100644 client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPM.module.css
 delete mode 100644 client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPMBreadcrumbs.jsx
 delete mode 100644 client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPMBrowse.jsx
 delete mode 100644 client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPMData.jsx
 delete mode 100644 client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPMRead.jsx
 delete mode 100644 client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPMViews.jsx
 delete mode 100644 client/src/components/DataFiles/DataFilesForDPM/styles/components.global.css
 delete mode 100644 client/src/components/DataFiles/DataFilesForDPM/styles/components/data-tree.global.css
 delete mode 100644 client/src/components/DataFiles/DataFilesForDPM/styles/components/license.global.css
 delete mode 100644 client/src/components/DataFiles/DataFilesForDPM/styles/components/metrics.global.css
 delete mode 100644 client/src/components/DataFiles/DataFilesForDPM/styles/components/project.global.css
 delete mode 100644 client/src/components/DataFiles/DataFilesForDPM/styles/components/publication.global.css
 delete mode 100644 client/src/components/DataFiles/DataFilesForDPM/styles/customize-core-styles.global.css

diff --git a/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPM.global.css b/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPM.global.css
deleted file mode 100644
index 4cc4d1b758..0000000000
--- a/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPM.global.css
+++ /dev/null
@@ -1,4 +0,0 @@
-@import url('@tacc/core-styles/dist/components/bootstrap.pagination.css');
-
-@import url('./styles/components.global.css');
-@import url('./styles/customize-core-styles.global.css');
diff --git a/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPM.jsx b/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPM.jsx
deleted file mode 100644
index 2bee262f63..0000000000
--- a/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPM.jsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import { React, useState } from 'react';
-import CMSWrapper from '_common/CMSWrapper';
-
-import DataFilesForDPMBreadcrumbs from './DataFilesForDPMBreadcrumbs';
-import DataFilesForDPMViews from './DataFilesForDPMViews';
-
-import DataFilesForDPMBrowse from './DataFilesForDPMBrowse';
-import DataFilesForDPMRead from './DataFilesForDPMRead';
-import DataFilesForDPMData from './DataFilesForDPMData';
-
-import './DataFilesForDPM.global.css';
-import style from './DataFilesForDPM.module.css';
-
-const tabs = [
-  {
-    label: 'Browse',
-    view: 'browse',
-    id: 'tab-browse',
-    contentId: 'content-browse',
-    Content: DataFilesForDPMBrowse,
-  },
-  {
-    label: 'Read',
-    view: 'read',
-    id: 'tab-read',
-    contentId: 'content-read',
-    Content: DataFilesForDPMRead,
-  },
-  {
-    label: 'Data',
-    view: 'Data',
-    id: 'tab-Data',
-    contentId: 'content-data',
-    Content: DataFilesForDPMData,
-  },
-];
-
-function DataFilesForDPM() {
-  const [view, setView] = useState('browse');
-
-  return (
-    <CMSWrapper>
-      <DataFilesForDPMBreadcrumbs />
-      <DataFilesForDPMViews
-        navClassName={style.nav}
-        contentClassName={style.content}
-        tabs={tabs}
-        view={view}
-        setView={setView}
-      />
-    </CMSWrapper>
-  );
-}
-
-export default DataFilesForDPM;
diff --git a/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPM.module.css b/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPM.module.css
deleted file mode 100644
index c67212cf84..0000000000
--- a/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPM.module.css
+++ /dev/null
@@ -1,16 +0,0 @@
-/* to position nav to the right of breadcrumbs */
-:global(#mimic-cms) {
-  position: relative;
-}
-.nav {
-  position: absolute;
-  right: var(--bs-gutter-x);
-  top: 0;
-}
-
-/* to remove styles from tab-pane */
-.content :global(.tab-pane) {
-  /* overrides core-styles */
-  border-top: none;
-  padding-inline: unset;
-}
diff --git a/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPMBreadcrumbs.jsx b/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPMBreadcrumbs.jsx
deleted file mode 100644
index 7f969746ae..0000000000
--- a/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPMBreadcrumbs.jsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import React from 'react';
-
-import { CMSBreadcrumbs } from '_common';
-
-/** To load CMS breadcrumbs with Data Files data */
-export default function DataFilesForDPMBreadcrumbs() {
-  return <CMSBreadcrumbs />;
-}
diff --git a/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPMBrowse.jsx b/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPMBrowse.jsx
deleted file mode 100644
index 2a309a19d7..0000000000
--- a/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPMBrowse.jsx
+++ /dev/null
@@ -1,261 +0,0 @@
-import React from 'react';
-
-// TODO: Replace use of this with component(s) from WC-219
-export default function DataFilesForDPMBrowse() {
-  return (
-    <div className="o-section">
-      <h1>Browse Datasets</h1>
-      <div className="c-card-list">
-        <li className="c-card--image-top c-card--plain">
-          <h3>11 Sandstones: raw, filtered and segmented data</h3>
-          <p>
-            <strong>Rodrigo Neumann</strong>
-            <br /> IBM Research
-          </p>
-          <p>
-            <a href="/datasets/317/" className="c-button c-button--primary">
-              Dataset #317
-            </a>
-          </p>
-          <img
-            src="https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/65/10/6510c85e-4f00-4bde-b560-31614fb30ce0/dr-proj-317.png__800.0x764.0_subsampling-2.png"
-            alt=""
-            srcSet="
-                    https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/65/10/6510c85e-4f00-4bde-b560-31614fb30ce0/dr-proj-317.png__576x576_subsampling-2.png 576w,
-                    https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/65/10/6510c85e-4f00-4bde-b560-31614fb30ce0/dr-proj-317.png__768x768_subsampling-2.png 768w,
-                    https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/65/10/6510c85e-4f00-4bde-b560-31614fb30ce0/dr-proj-317.png__800.0x764.0_subsampling-2.png 800.0w
-            "
-            sizes="
-                    (max-width: 576px) 576px,
-                    (max-width: 768px) 768px,
-                    800.0px
-            "
-            className="img-fluid"
-          />
-        </li>
-        <li className="c-card--image-top c-card--plain">
-          <h3>
-            Bentheimer and Nugget Residual Saturation Micro-Computed Tomography
-            Data
-          </h3>
-          <p>
-            <strong>Laura Dalton</strong>
-            <br /> Duke University
-          </p>
-          <p>
-            <a href="/datasets/218/" className="c-button c-button--primary">
-              Dataset #218
-            </a>
-          </p>
-          <img
-            src="https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/a7/be/a7be0632-6120-4dba-8b2d-b02c1727acac/dr-project-218.png__1104.0x1104.0_q85_subject_location-552%2C552_subsampling-2.jpg"
-            alt=""
-            srcSet="
-                    https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/a7/be/a7be0632-6120-4dba-8b2d-b02c1727acac/dr-project-218.png__576x576_q85_subsampling-2.jpg 576w,
-                    https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/a7/be/a7be0632-6120-4dba-8b2d-b02c1727acac/dr-project-218.png__768x768_q85_subsampling-2.jpg 768w,
-                    https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/a7/be/a7be0632-6120-4dba-8b2d-b02c1727acac/dr-project-218.png__992x992_q85_subsampling-2.jpg 992w,
-                    https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/a7/be/a7be0632-6120-4dba-8b2d-b02c1727acac/dr-project-218.png__1104.0x1104.0_q85_subject_location-552%2C552_subsampling-2.jpg 1104.0w
-            "
-            sizes="
-                    (max-width: 576px) 576px,
-                    (max-width: 768px) 768px,
-                    (max-width: 992px) 992px,
-                    1104.0px
-            "
-            className="img-fluid"
-          />
-        </li>
-        <li className="c-card--image-top c-card--plain">
-          <h3>11 Sandstones: raw, filtered and segmented data</h3>
-          <p>
-            <strong>Rodrigo Neumann</strong>
-            <br /> IBM Research
-          </p>
-          <p>
-            <a href="/datasets/317/" className="c-button c-button--primary">
-              Dataset #317
-            </a>
-          </p>
-          <img
-            src="https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/65/10/6510c85e-4f00-4bde-b560-31614fb30ce0/dr-proj-317.png__800.0x764.0_subsampling-2.png"
-            alt=""
-            srcSet="
-                    https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/65/10/6510c85e-4f00-4bde-b560-31614fb30ce0/dr-proj-317.png__576x576_subsampling-2.png 576w,
-                    https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/65/10/6510c85e-4f00-4bde-b560-31614fb30ce0/dr-proj-317.png__768x768_subsampling-2.png 768w,
-                    https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/65/10/6510c85e-4f00-4bde-b560-31614fb30ce0/dr-proj-317.png__800.0x764.0_subsampling-2.png 800.0w
-            "
-            sizes="
-                    (max-width: 576px) 576px,
-                    (max-width: 768px) 768px,
-                    800.0px
-            "
-            className="img-fluid"
-          />
-        </li>
-        <li className="c-card--image-top c-card--plain">
-          <h3>
-            Bentheimer and Nugget Residual Saturation Micro-Computed Tomography
-            Data
-          </h3>
-          <p>
-            <strong>Laura Dalton</strong>
-            <br /> Duke University
-          </p>
-          <p>
-            <a href="/datasets/218/" className="c-button c-button--primary">
-              Dataset #218
-            </a>
-          </p>
-          <img
-            src="https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/a7/be/a7be0632-6120-4dba-8b2d-b02c1727acac/dr-project-218.png__1104.0x1104.0_q85_subject_location-552%2C552_subsampling-2.jpg"
-            alt=""
-            srcSet="
-                    https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/a7/be/a7be0632-6120-4dba-8b2d-b02c1727acac/dr-project-218.png__576x576_q85_subsampling-2.jpg 576w,
-                    https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/a7/be/a7be0632-6120-4dba-8b2d-b02c1727acac/dr-project-218.png__768x768_q85_subsampling-2.jpg 768w,
-                    https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/a7/be/a7be0632-6120-4dba-8b2d-b02c1727acac/dr-project-218.png__992x992_q85_subsampling-2.jpg 992w,
-                    https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/a7/be/a7be0632-6120-4dba-8b2d-b02c1727acac/dr-project-218.png__1104.0x1104.0_q85_subject_location-552%2C552_subsampling-2.jpg 1104.0w
-            "
-            sizes="
-                    (max-width: 576px) 576px,
-                    (max-width: 768px) 768px,
-                    (max-width: 992px) 992px,
-                    1104.0px
-            "
-            className="img-fluid"
-          />
-        </li>
-        <li className="c-card--image-top c-card--plain">
-          <h3>11 Sandstones: raw, filtered and segmented data</h3>
-          <p>
-            <strong>Rodrigo Neumann</strong>
-            <br /> IBM Research
-          </p>
-          <p>
-            <a href="/datasets/317/" className="c-button c-button--primary">
-              Dataset #317
-            </a>
-          </p>
-          <img
-            src="https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/65/10/6510c85e-4f00-4bde-b560-31614fb30ce0/dr-proj-317.png__800.0x764.0_subsampling-2.png"
-            alt=""
-            srcSet="
-                    https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/65/10/6510c85e-4f00-4bde-b560-31614fb30ce0/dr-proj-317.png__576x576_subsampling-2.png 576w,
-                    https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/65/10/6510c85e-4f00-4bde-b560-31614fb30ce0/dr-proj-317.png__768x768_subsampling-2.png 768w,
-                    https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/65/10/6510c85e-4f00-4bde-b560-31614fb30ce0/dr-proj-317.png__800.0x764.0_subsampling-2.png 800.0w
-            "
-            sizes="
-                    (max-width: 576px) 576px,
-                    (max-width: 768px) 768px,
-                    800.0px
-            "
-            className="img-fluid"
-          />
-        </li>
-        <li className="c-card--image-top c-card--plain">
-          <h3>
-            Bentheimer and Nugget Residual Saturation Micro-Computed Tomography
-            Data
-          </h3>
-          <p>
-            <strong>Laura Dalton</strong>
-            <br /> Duke University
-          </p>
-          <p>
-            <a href="/datasets/218/" className="c-button c-button--primary">
-              Dataset #218
-            </a>
-          </p>
-          <img
-            src="https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/a7/be/a7be0632-6120-4dba-8b2d-b02c1727acac/dr-project-218.png__1104.0x1104.0_q85_subject_location-552%2C552_subsampling-2.jpg"
-            alt=""
-            srcSet="
-                    https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/a7/be/a7be0632-6120-4dba-8b2d-b02c1727acac/dr-project-218.png__576x576_q85_subsampling-2.jpg 576w,
-                    https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/a7/be/a7be0632-6120-4dba-8b2d-b02c1727acac/dr-project-218.png__768x768_q85_subsampling-2.jpg 768w,
-                    https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/a7/be/a7be0632-6120-4dba-8b2d-b02c1727acac/dr-project-218.png__992x992_q85_subsampling-2.jpg 992w,
-                    https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/a7/be/a7be0632-6120-4dba-8b2d-b02c1727acac/dr-project-218.png__1104.0x1104.0_q85_subject_location-552%2C552_subsampling-2.jpg 1104.0w
-            "
-            sizes="
-                    (max-width: 576px) 576px,
-                    (max-width: 768px) 768px,
-                    (max-width: 992px) 992px,
-                    1104.0px
-            "
-            className="img-fluid"
-          />
-        </li>
-        <li className="c-card--image-top c-card--plain">
-          <h3>11 Sandstones: raw, filtered and segmented data</h3>
-          <p>
-            <strong>Rodrigo Neumann</strong>
-            <br /> IBM Research
-          </p>
-          <p>
-            <a href="/datasets/317/" className="c-button c-button--primary">
-              Dataset #317
-            </a>
-          </p>
-          <img
-            src="https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/65/10/6510c85e-4f00-4bde-b560-31614fb30ce0/dr-proj-317.png__800.0x764.0_subsampling-2.png"
-            alt=""
-            srcSet="
-                    https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/65/10/6510c85e-4f00-4bde-b560-31614fb30ce0/dr-proj-317.png__576x576_subsampling-2.png 576w,
-                    https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/65/10/6510c85e-4f00-4bde-b560-31614fb30ce0/dr-proj-317.png__768x768_subsampling-2.png 768w,
-                    https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/65/10/6510c85e-4f00-4bde-b560-31614fb30ce0/dr-proj-317.png__800.0x764.0_subsampling-2.png 800.0w
-            "
-            sizes="
-                    (max-width: 576px) 576px,
-                    (max-width: 768px) 768px,
-                    800.0px
-            "
-            className="img-fluid"
-          />
-        </li>
-        <li className="c-card--image-top c-card--plain">
-          <h3>
-            Bentheimer and Nugget Residual Saturation Micro-Computed Tomography
-            Data
-          </h3>
-          <p>
-            <strong>Laura Dalton</strong>
-            <br /> Duke University
-          </p>
-          <p>
-            <a href="/datasets/218/" className="c-button c-button--primary">
-              Dataset #218
-            </a>
-          </p>
-          <img
-            src="https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/a7/be/a7be0632-6120-4dba-8b2d-b02c1727acac/dr-project-218.png__1104.0x1104.0_q85_subject_location-552%2C552_subsampling-2.jpg"
-            alt=""
-            srcSet="
-                    https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/a7/be/a7be0632-6120-4dba-8b2d-b02c1727acac/dr-project-218.png__576x576_q85_subsampling-2.jpg 576w,
-                    https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/a7/be/a7be0632-6120-4dba-8b2d-b02c1727acac/dr-project-218.png__768x768_q85_subsampling-2.jpg 768w,
-                    https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/a7/be/a7be0632-6120-4dba-8b2d-b02c1727acac/dr-project-218.png__992x992_q85_subsampling-2.jpg 992w,
-                    https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/a7/be/a7be0632-6120-4dba-8b2d-b02c1727acac/dr-project-218.png__1104.0x1104.0_q85_subject_location-552%2C552_subsampling-2.jpg 1104.0w
-            "
-            sizes="
-                    (max-width: 576px) 576px,
-                    (max-width: 768px) 768px,
-                    (max-width: 992px) 992px,
-                    1104.0px
-            "
-            className="img-fluid"
-          />
-        </li>
-      </div>
-      <div className="o-section">
-        <ul className="pagination">
-          <li className="page-item disabled">
-            <span className="page-link">&lt; Previous</span>
-          </li>
-          <li className="page-item active">
-            <span className="page-link">1</span>
-          </li>
-          <li className="page-item disabled">
-            <span className="page-link">Next &gt;</span>
-          </li>
-        </ul>
-      </div>
-    </div>
-  );
-}
diff --git a/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPMData.jsx b/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPMData.jsx
deleted file mode 100644
index 8e230d2716..0000000000
--- a/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPMData.jsx
+++ /dev/null
@@ -1,680 +0,0 @@
-import React from 'react';
-
-import style from './DataFilesForDPM.module.css';
-
-// TODO: Replace use of this with component(s) from WC-219
-export default function DataFilesForDPMData() {
-  return (
-    <>
-      <section className="o-section">
-        <h3 className="u-title-needs-colon">
-          <span>Origin Data</span> <strong>Berea_2d25um_grayscale.raw</strong>
-        </h3>
-
-        <p>
-          Grayscale image data obtained by using high-resolution 3D X-ray
-          Microtomography. Source voltage and current were set to 50 kV and 200
-          µA, respectively. The CCD camera was configured to acquire projections
-          of 4904 x 3280 pixels, resulting in a pixel side length of 2.25 µm.
-          For more details, please refer to the related publications.
-        </p>
-
-        <table className="c-data-list c-data-list--horizontal c-data-list--is-narrow">
-          <tbody>
-            <tr>
-              <th className="c-data-list__key">Segmented</th>
-              <td className="c-data-list__value">No</td>
-            </tr>
-            <tr>
-              <th className="c-data-list__key">Voxel length (x, y, z)</th>
-              <td className="c-data-list__value">2.25, 2.25, 2.25 um</td>
-            </tr>
-            <tr>
-              <th className="c-data-list__key">Sample</th>
-              <td className="c-data-list__value">
-                <a href="/datasets/317#sample-berea">Berea</a>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </section>
-
-      <section id="data" className="o-section">
-        <h3>Data</h3>
-
-        <ul className="c-card-list">
-          <li className="c-card--image-top c-card--plain">
-            <img
-              src="/media/filer_public_thumbnails/filer_public/30/62/3062e147-8fdb-4cd8-afa1-3fbbc6c42b31/dr-proj-317-data-1352.jpg__1000.0x1000.0_q85_subsampling-2.jpg"
-              alt=""
-              srcSet="
-                      https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/30/62/3062e147-8fdb-4cd8-afa1-3fbbc6c42b31/dr-proj-317-data-1352.jpg__576x576_q85_subsampling-2.jpg 576w,
-                      https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/30/62/3062e147-8fdb-4cd8-afa1-3fbbc6c42b31/dr-proj-317-data-1352.jpg__768x768_q85_subsampling-2.jpg 768w,
-                      https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/30/62/3062e147-8fdb-4cd8-afa1-3fbbc6c42b31/dr-proj-317-data-1352.jpg__992x992_q85_subsampling-2.jpg 992w,
-                      https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/30/62/3062e147-8fdb-4cd8-afa1-3fbbc6c42b31/dr-proj-317-data-1352.jpg__1000.0x1000.0_q85_subsampling-2.jpg 1000.0w
-              "
-              sizes="
-                      (max-width: 576px) 576px,
-                      (max-width: 768px) 768px,
-                      (max-width: 992px) 992px,
-                      1000.0px
-              "
-              className="img-fluid"
-            />
-
-            <p>
-              <strong>Berea_2d25um_grayscale.raw</strong>
-              <br />
-              953.7 MB
-            </p>
-
-            <table className="c-data-list c-data-list--is-vert c-data-list--is-narrow c-data-list--should-truncate-values">
-              <tbody>
-                <tr>
-                  <th className="c-data-list__key">Image Type</th>
-                  <td className="c-data-list__value">8-bit</td>
-                </tr>
-                <tr>
-                  <th className="c-data-list__key">Width</th>
-                  <td className="c-data-list__value">1000</td>
-                </tr>
-                <tr>
-                  <th className="c-data-list__key">Height</th>
-                  <td className="c-data-list__value">1000</td>
-                </tr>
-                <tr>
-                  <th className="c-data-list__key">Number of Slices</th>
-                  <td className="c-data-list__value">1000</td>
-                </tr>
-                <tr>
-                  <th className="c-data-list__key">Byte Order</th>
-                  <td className="c-data-list__value">little-endian</td>
-                </tr>
-              </tbody>
-            </table>
-
-            <p className="dropdown">
-              <button
-                className="dropdown-toggle  c-button c-button--primary"
-                data-bs-toggle="dropdown"
-                type="button"
-              >
-                Action
-              </button>
-              <menu className="dropdown-menu">
-                <li>
-                  <a
-                    className="dropdown-item"
-                    href="/datasets/317/images/223451/download/"
-                    target="_blank"
-                  >
-                    Download File{' '}
-                  </a>
-                </li>
-                <li>
-                  <a
-                    className="dropdown-item"
-                    href="/media/projects/317/origin/1352/images/Berea_2d25um_grayscale.raw.gif"
-                    target="_blank"
-                  >
-                    View GIF
-                  </a>
-                </li>
-                <li>
-                  <a
-                    className="dropdown-item"
-                    href="/media/projects/317/origin/1352/images/Berea_2d25um_grayscale.raw.histogram.jpg"
-                    target="_blank"
-                  >
-                    Histogram
-                  </a>
-                </li>
-                <li>
-                  <a
-                    className="dropdown-item"
-                    href="/media/projects/317/origin/1352/images/Berea_2d25um_grayscale.raw.histogram.csv"
-                    target="_blank"
-                  >
-                    Histogram (CSV)
-                  </a>
-                </li>
-                <li>
-                  <a
-                    className="dropdown-item"
-                    href="/datasets/317/images/223451/downloadMeta/"
-                    target="_blank"
-                  >
-                    Metadata
-                  </a>
-                </li>
-                <li className="dropdown-divider"></li>
-                <li>
-                  <a
-                    className="dropdown-item"
-                    href="/datasets/paraview_info/223451/"
-                    target="_blank"
-                  >
-                    View in Paraview
-                  </a>
-                </li>
-              </menu>
-            </p>
-          </li>
-          <li className="c-card--image-top c-card--plain">
-            <img
-              src="/media/filer_public_thumbnails/filer_public/30/62/3062e147-8fdb-4cd8-afa1-3fbbc6c42b31/dr-proj-317-data-1352.jpg__1000.0x1000.0_q85_subsampling-2.jpg"
-              alt=""
-              srcSet="
-                      https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/30/62/3062e147-8fdb-4cd8-afa1-3fbbc6c42b31/dr-proj-317-data-1352.jpg__576x576_q85_subsampling-2.jpg 576w,
-                      https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/30/62/3062e147-8fdb-4cd8-afa1-3fbbc6c42b31/dr-proj-317-data-1352.jpg__768x768_q85_subsampling-2.jpg 768w,
-                      https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/30/62/3062e147-8fdb-4cd8-afa1-3fbbc6c42b31/dr-proj-317-data-1352.jpg__992x992_q85_subsampling-2.jpg 992w,
-                      https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/30/62/3062e147-8fdb-4cd8-afa1-3fbbc6c42b31/dr-proj-317-data-1352.jpg__1000.0x1000.0_q85_subsampling-2.jpg 1000.0w
-              "
-              sizes="
-                      (max-width: 576px) 576px,
-                      (max-width: 768px) 768px,
-                      (max-width: 992px) 992px,
-                      1000.0px
-              "
-              className="img-fluid"
-            />
-
-            <p>
-              <strong>Berea_2d25um_grayscale.raw</strong>
-              <br />
-              953.7 MB
-            </p>
-
-            <table className="c-data-list c-data-list--is-vert c-data-list--is-narrow c-data-list--should-truncate-values">
-              <tbody>
-                <tr>
-                  <th className="c-data-list__key">Image Type</th>
-                  <td className="c-data-list__value">8-bit</td>
-                </tr>
-                <tr>
-                  <th className="c-data-list__key">Width</th>
-                  <td className="c-data-list__value">1000</td>
-                </tr>
-                <tr>
-                  <th className="c-data-list__key">Height</th>
-                  <td className="c-data-list__value">1000</td>
-                </tr>
-                <tr>
-                  <th className="c-data-list__key">Number of Slices</th>
-                  <td className="c-data-list__value">1000</td>
-                </tr>
-                <tr>
-                  <th className="c-data-list__key">Byte Order</th>
-                  <td className="c-data-list__value">little-endian</td>
-                </tr>
-              </tbody>
-            </table>
-
-            <p className="dropdown">
-              <button
-                className="dropdown-toggle  c-button c-button--primary"
-                data-bs-toggle="dropdown"
-                type="button"
-              >
-                Action
-              </button>
-              <menu className="dropdown-menu">
-                <li>
-                  <a
-                    className="dropdown-item"
-                    href="/datasets/317/images/223451/download/"
-                    target="_blank"
-                  >
-                    Download File{' '}
-                  </a>
-                </li>
-                <li>
-                  <a
-                    className="dropdown-item"
-                    href="/media/projects/317/origin/1352/images/Berea_2d25um_grayscale.raw.gif"
-                    target="_blank"
-                  >
-                    View GIF
-                  </a>
-                </li>
-                <li>
-                  <a
-                    className="dropdown-item"
-                    href="/media/projects/317/origin/1352/images/Berea_2d25um_grayscale.raw.histogram.jpg"
-                    target="_blank"
-                  >
-                    Histogram
-                  </a>
-                </li>
-                <li>
-                  <a
-                    className="dropdown-item"
-                    href="/media/projects/317/origin/1352/images/Berea_2d25um_grayscale.raw.histogram.csv"
-                    target="_blank"
-                  >
-                    Histogram (CSV)
-                  </a>
-                </li>
-                <li>
-                  <a
-                    className="dropdown-item"
-                    href="/datasets/317/images/223451/downloadMeta/"
-                    target="_blank"
-                  >
-                    Metadata
-                  </a>
-                </li>
-                <li className="dropdown-divider"></li>
-                <li>
-                  <a
-                    className="dropdown-item"
-                    href="/datasets/paraview_info/223451/"
-                    target="_blank"
-                  >
-                    View in Paraview
-                  </a>
-                </li>
-              </menu>
-            </p>
-          </li>
-          <li className="c-card--image-top c-card--plain">
-            <img
-              src="/media/filer_public_thumbnails/filer_public/30/62/3062e147-8fdb-4cd8-afa1-3fbbc6c42b31/dr-proj-317-data-1352.jpg__1000.0x1000.0_q85_subsampling-2.jpg"
-              alt=""
-              srcSet="
-                      https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/30/62/3062e147-8fdb-4cd8-afa1-3fbbc6c42b31/dr-proj-317-data-1352.jpg__576x576_q85_subsampling-2.jpg 576w,
-                      https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/30/62/3062e147-8fdb-4cd8-afa1-3fbbc6c42b31/dr-proj-317-data-1352.jpg__768x768_q85_subsampling-2.jpg 768w,
-                      https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/30/62/3062e147-8fdb-4cd8-afa1-3fbbc6c42b31/dr-proj-317-data-1352.jpg__992x992_q85_subsampling-2.jpg 992w,
-                      https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/30/62/3062e147-8fdb-4cd8-afa1-3fbbc6c42b31/dr-proj-317-data-1352.jpg__1000.0x1000.0_q85_subsampling-2.jpg 1000.0w
-              "
-              sizes="
-                      (max-width: 576px) 576px,
-                      (max-width: 768px) 768px,
-                      (max-width: 992px) 992px,
-                      1000.0px
-              "
-              className="img-fluid"
-            />
-
-            <p>
-              <strong>Berea_2d25um_grayscale.raw</strong>
-              <br />
-              953.7 MB
-            </p>
-
-            <table className="c-data-list c-data-list--is-vert c-data-list--is-narrow c-data-list--should-truncate-values">
-              <tbody>
-                <tr>
-                  <th className="c-data-list__key">Image Type</th>
-                  <td className="c-data-list__value">8-bit</td>
-                </tr>
-                <tr>
-                  <th className="c-data-list__key">Width</th>
-                  <td className="c-data-list__value">1000</td>
-                </tr>
-                <tr>
-                  <th className="c-data-list__key">Height</th>
-                  <td className="c-data-list__value">1000</td>
-                </tr>
-                <tr>
-                  <th className="c-data-list__key">Number of Slices</th>
-                  <td className="c-data-list__value">1000</td>
-                </tr>
-                <tr>
-                  <th className="c-data-list__key">Byte Order</th>
-                  <td className="c-data-list__value">little-endian</td>
-                </tr>
-              </tbody>
-            </table>
-
-            <p className="dropdown">
-              <button
-                className="dropdown-toggle  c-button c-button--primary"
-                data-bs-toggle="dropdown"
-                type="button"
-              >
-                Action
-              </button>
-              <menu className="dropdown-menu">
-                <li>
-                  <a
-                    className="dropdown-item"
-                    href="/datasets/317/images/223451/download/"
-                    target="_blank"
-                  >
-                    Download File{' '}
-                  </a>
-                </li>
-                <li>
-                  <a
-                    className="dropdown-item"
-                    href="/media/projects/317/origin/1352/images/Berea_2d25um_grayscale.raw.gif"
-                    target="_blank"
-                  >
-                    View GIF
-                  </a>
-                </li>
-                <li>
-                  <a
-                    className="dropdown-item"
-                    href="/media/projects/317/origin/1352/images/Berea_2d25um_grayscale.raw.histogram.jpg"
-                    target="_blank"
-                  >
-                    Histogram
-                  </a>
-                </li>
-                <li>
-                  <a
-                    className="dropdown-item"
-                    href="/media/projects/317/origin/1352/images/Berea_2d25um_grayscale.raw.histogram.csv"
-                    target="_blank"
-                  >
-                    Histogram (CSV)
-                  </a>
-                </li>
-                <li>
-                  <a
-                    className="dropdown-item"
-                    href="/datasets/317/images/223451/downloadMeta/"
-                    target="_blank"
-                  >
-                    Metadata
-                  </a>
-                </li>
-                <li className="dropdown-divider"></li>
-                <li>
-                  <a
-                    className="dropdown-item"
-                    href="/datasets/paraview_info/223451/"
-                    target="_blank"
-                  >
-                    View in Paraview
-                  </a>
-                </li>
-              </menu>
-            </p>
-          </li>
-          <li className="c-card--image-top c-card--plain">
-            <img
-              src="/media/filer_public_thumbnails/filer_public/30/62/3062e147-8fdb-4cd8-afa1-3fbbc6c42b31/dr-proj-317-data-1352.jpg__1000.0x1000.0_q85_subsampling-2.jpg"
-              alt=""
-              srcSet="
-                      https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/30/62/3062e147-8fdb-4cd8-afa1-3fbbc6c42b31/dr-proj-317-data-1352.jpg__576x576_q85_subsampling-2.jpg 576w,
-                      https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/30/62/3062e147-8fdb-4cd8-afa1-3fbbc6c42b31/dr-proj-317-data-1352.jpg__768x768_q85_subsampling-2.jpg 768w,
-                      https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/30/62/3062e147-8fdb-4cd8-afa1-3fbbc6c42b31/dr-proj-317-data-1352.jpg__992x992_q85_subsampling-2.jpg 992w,
-                      https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/30/62/3062e147-8fdb-4cd8-afa1-3fbbc6c42b31/dr-proj-317-data-1352.jpg__1000.0x1000.0_q85_subsampling-2.jpg 1000.0w
-              "
-              sizes="
-                      (max-width: 576px) 576px,
-                      (max-width: 768px) 768px,
-                      (max-width: 992px) 992px,
-                      1000.0px
-              "
-              className="img-fluid"
-            />
-
-            <p>
-              <strong>Berea_2d25um_grayscale.raw</strong>
-              <br />
-              953.7 MB
-            </p>
-
-            <table className="c-data-list c-data-list--is-vert c-data-list--is-narrow c-data-list--should-truncate-values">
-              <tbody>
-                <tr>
-                  <th className="c-data-list__key">Image Type</th>
-                  <td className="c-data-list__value">8-bit</td>
-                </tr>
-                <tr>
-                  <th className="c-data-list__key">Width</th>
-                  <td className="c-data-list__value">1000</td>
-                </tr>
-                <tr>
-                  <th className="c-data-list__key">Height</th>
-                  <td className="c-data-list__value">1000</td>
-                </tr>
-                <tr>
-                  <th className="c-data-list__key">Number of Slices</th>
-                  <td className="c-data-list__value">1000</td>
-                </tr>
-                <tr>
-                  <th className="c-data-list__key">Byte Order</th>
-                  <td className="c-data-list__value">little-endian</td>
-                </tr>
-              </tbody>
-            </table>
-
-            <p className="dropdown">
-              <button
-                className="dropdown-toggle  c-button c-button--primary"
-                data-bs-toggle="dropdown"
-                type="button"
-              >
-                Action
-              </button>
-              <menu className="dropdown-menu">
-                <li>
-                  <a
-                    className="dropdown-item"
-                    href="/datasets/317/images/223451/download/"
-                    target="_blank"
-                  >
-                    Download File{' '}
-                  </a>
-                </li>
-                <li>
-                  <a
-                    className="dropdown-item"
-                    href="/media/projects/317/origin/1352/images/Berea_2d25um_grayscale.raw.gif"
-                    target="_blank"
-                  >
-                    View GIF
-                  </a>
-                </li>
-                <li>
-                  <a
-                    className="dropdown-item"
-                    href="/media/projects/317/origin/1352/images/Berea_2d25um_grayscale.raw.histogram.jpg"
-                    target="_blank"
-                  >
-                    Histogram
-                  </a>
-                </li>
-                <li>
-                  <a
-                    className="dropdown-item"
-                    href="/media/projects/317/origin/1352/images/Berea_2d25um_grayscale.raw.histogram.csv"
-                    target="_blank"
-                  >
-                    Histogram (CSV)
-                  </a>
-                </li>
-                <li>
-                  <a
-                    className="dropdown-item"
-                    href="/datasets/317/images/223451/downloadMeta/"
-                    target="_blank"
-                  >
-                    Metadata
-                  </a>
-                </li>
-                <li className="dropdown-divider"></li>
-                <li>
-                  <a
-                    className="dropdown-item"
-                    href="/datasets/paraview_info/223451/"
-                    target="_blank"
-                  >
-                    View in Paraview
-                  </a>
-                </li>
-              </menu>
-            </p>
-          </li>
-          <li className="c-card--image-top c-card--plain">
-            <img
-              src="/media/filer_public_thumbnails/filer_public/30/62/3062e147-8fdb-4cd8-afa1-3fbbc6c42b31/dr-proj-317-data-1352.jpg__1000.0x1000.0_q85_subsampling-2.jpg"
-              alt=""
-              srcSet="
-                      https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/30/62/3062e147-8fdb-4cd8-afa1-3fbbc6c42b31/dr-proj-317-data-1352.jpg__576x576_q85_subsampling-2.jpg 576w,
-                      https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/30/62/3062e147-8fdb-4cd8-afa1-3fbbc6c42b31/dr-proj-317-data-1352.jpg__768x768_q85_subsampling-2.jpg 768w,
-                      https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/30/62/3062e147-8fdb-4cd8-afa1-3fbbc6c42b31/dr-proj-317-data-1352.jpg__992x992_q85_subsampling-2.jpg 992w,
-                      https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/30/62/3062e147-8fdb-4cd8-afa1-3fbbc6c42b31/dr-proj-317-data-1352.jpg__1000.0x1000.0_q85_subsampling-2.jpg 1000.0w
-              "
-              sizes="
-                      (max-width: 576px) 576px,
-                      (max-width: 768px) 768px,
-                      (max-width: 992px) 992px,
-                      1000.0px
-              "
-              className="img-fluid"
-            />
-
-            <p>
-              <strong>Berea_2d25um_grayscale.raw</strong>
-              <br />
-              953.7 MB
-            </p>
-
-            <table className="c-data-list c-data-list--is-vert c-data-list--is-narrow c-data-list--should-truncate-values">
-              <tbody>
-                <tr>
-                  <th className="c-data-list__key">Image Type</th>
-                  <td className="c-data-list__value">8-bit</td>
-                </tr>
-                <tr>
-                  <th className="c-data-list__key">Width</th>
-                  <td className="c-data-list__value">1000</td>
-                </tr>
-                <tr>
-                  <th className="c-data-list__key">Height</th>
-                  <td className="c-data-list__value">1000</td>
-                </tr>
-                <tr>
-                  <th className="c-data-list__key">Number of Slices</th>
-                  <td className="c-data-list__value">1000</td>
-                </tr>
-                <tr>
-                  <th className="c-data-list__key">Byte Order</th>
-                  <td className="c-data-list__value">little-endian</td>
-                </tr>
-              </tbody>
-            </table>
-            <p className="dropdown">
-              <button
-                className="dropdown-toggle  c-button c-button--primary"
-                data-bs-toggle="dropdown"
-                type="button"
-              >
-                Action
-              </button>
-              <menu className="dropdown-menu">
-                <li>
-                  <a
-                    className="dropdown-item"
-                    href="/datasets/317/images/223451/download/"
-                    target="_blank"
-                  >
-                    Download File{' '}
-                  </a>
-                </li>
-                <li>
-                  <a
-                    className="dropdown-item"
-                    href="/media/projects/317/origin/1352/images/Berea_2d25um_grayscale.raw.gif"
-                    target="_blank"
-                  >
-                    View GIF
-                  </a>
-                </li>
-                <li>
-                  <a
-                    className="dropdown-item"
-                    href="/media/projects/317/origin/1352/images/Berea_2d25um_grayscale.raw.histogram.jpg"
-                    target="_blank"
-                  >
-                    Histogram
-                  </a>
-                </li>
-                <li>
-                  <a
-                    className="dropdown-item"
-                    href="/media/projects/317/origin/1352/images/Berea_2d25um_grayscale.raw.histogram.csv"
-                    target="_blank"
-                  >
-                    Histogram (CSV)
-                  </a>
-                </li>
-                <li>
-                  <a
-                    className="dropdown-item"
-                    href="/datasets/317/images/223451/downloadMeta/"
-                    target="_blank"
-                  >
-                    Metadata
-                  </a>
-                </li>
-                <li className="dropdown-divider"></li>
-                <li>
-                  <a
-                    className="dropdown-item"
-                    href="/datasets/paraview_info/223451/"
-                    target="_blank"
-                  >
-                    View in Paraview
-                  </a>
-                </li>
-              </menu>
-            </p>
-          </li>
-        </ul>
-      </section>
-
-      <div className="o-section">
-        <ul className="pagination">
-          <li className="page-item">
-            <a className="page-link" href="#">
-              &lt; Previous
-            </a>
-          </li>
-          <li className="page-item">
-            <a className="page-link" href="#">
-              1
-            </a>
-          </li>
-          <li className="page-item">
-            <a className="page-link" href="#">
-              2
-            </a>
-          </li>
-          <li className="page-item active">
-            <span className="page-link">3</span>
-          </li>
-          <li className="page-item">
-            <a className="page-link" href="#">
-              4
-            </a>
-          </li>
-          <li className="page-item">
-            <a className="page-link" href="#">
-              5
-            </a>
-          </li>
-          <li className="page-item skip">
-            <span className="page-link">...</span>
-          </li>
-          <li className="page-item">
-            <a className="page-link" href="#">
-              20
-            </a>
-          </li>
-          <li className="page-item">
-            <a className="page-link" href="#">
-              Next &gt;
-            </a>
-          </li>
-        </ul>
-      </div>
-    </>
-  );
-}
diff --git a/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPMRead.jsx b/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPMRead.jsx
deleted file mode 100644
index 53e6ea8dca..0000000000
--- a/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPMRead.jsx
+++ /dev/null
@@ -1,937 +0,0 @@
-import React, { useEffect } from 'react';
-
-// TODO: Replace use of this with component(s) from WC-219
-export default function DataFilesForDPMRead() {
-  useEffect(() => {
-    // To trigger tooltips
-    let tooltipInstances = [];
-    if (window.bootstrap && window.bootstrap.Tooltip) {
-      const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
-      tooltipInstances = [...tooltipTriggerList].map(
-        (el) => new window.bootstrap.Tooltip(el)
-      );
-    }
-
-    // Or use `ShowMore` common component instead of `js-show-more` class
-    import(
-      'https://cdn.jsdelivr.net/gh/TACC/Core-Styles@v2/src/lib/_imports/components/c-show-more/c-show-more.js'
-    )
-      .then(({ generateMarkup }) => {
-        generateMarkup(document.getElementsByClassName('js-show-more'), {
-          shouldToggleResembleLink: true,
-        });
-      })
-      .catch((err) => {
-        console.error('Failed to load c-show-more module:', err);
-      });
-
-    // To clean up
-    return () => {
-      tooltipInstances.forEach((instance) => instance.dispose && instance.dispose());
-    };
-  }, []);
-
-  return (
-    <>
-      <div className="o-section project-title">
-        <h1>
-          <span>11 Sandstones: Raw, Filtered and Segmented Data</span>{' '}
-          <a
-            className="c-button c-button--primary  project-download-button"
-            data-bs-target="#project-download-modal"
-            data-bs-toggle="modal"
-            href="#"
-            target="_blank"
-          >
-            <i
-              className="icon icon-download
-    c-button__icon--before"
-            >
-              ↓
-            </i>{' '}
-            Download Dataset
-          </a>
-        </h1>
-      </div>
-      <div className="o-section o-section--style-muted project-citation">
-        <h3>Cite This Dataset</h3>
-        <p>
-          Neumann, R., Andreeta, M., &amp; Lucas-Oliveira, E.{' '}
-          <em>11 Sandstones: raw, filtered and segmented data</em> [Data set].
-          Digital Rocks Portal.{' '}
-          <a
-            href="https://doi.org/10.17612/F4H1-W124"
-            rel="noreferrer"
-            target="_blank"
-            aria-label="Opens in new window."
-          >
-            https://doi.org/10.17612/F4H1-W124
-          </a>
-        </p>
-
-        <p>
-          <strong>Download Citation:</strong>{' '}
-          <a
-            href="https://api.datacite.org/application/vnd.datacite.datacite+xml/10.17612/f4h1-w124"
-            rel="noreferrer"
-            target="_blank"
-            aria-label="Opens in new window."
-          >
-            DataCite XML
-          </a>{' '}
-          |{' '}
-          <a
-            href="https://api.datacite.org/application/x-research-info-systems/10.17612/f4h1-w124"
-            rel="noreferrer"
-            target="_blank"
-            aria-label="Opens in new window."
-          >
-            RIS
-          </a>{' '}
-          |{' '}
-          <a
-            href="https://api.datacite.org/application/x-bibtex/10.17612/f4h1-w124"
-            rel="noreferrer"
-            target="_blank"
-            aria-label="Opens in new window."
-          >
-            BibTeX
-          </a>{' '}
-          |{' '}
-          <a
-            href="https://commons.datacite.org/doi.org/10.17612/f4h1-w124"
-            rel="noreferrer"
-            target="_blank"
-            aria-label="Opens in new window."
-          >
-            Other Formats
-          </a>
-          <br />
-          <mark>
-            <output>0</output> Citations
-          </mark>{' '}
-          |{' '}
-          <strong>
-            <a
-              className="c-button c-button--as-link"
-              data-bs-target="#project-metrics-modal"
-              data-bs-toggle="modal"
-              href="./metrics/"
-            >
-              Details
-            </a>
-          </strong>
-        </p>
-      </div>
-      <div className="o-section o-section--style-light container">
-        <div className="row project-overview">
-          <div className="col col-12 col-sm-12 col-md-3 col-lg-3 col-xl-3">
-            <img
-              src="https://www.digitalrocksportal.org/media/projects/317/archive.zip"
-              alt=""
-              srcSet="
-                      https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/65/10/6510c85e-4f00-4bde-b560-31614fb30ce0/dr-proj-317.png__576x576_subsampling-2.png 576w,
-                      https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/65/10/6510c85e-4f00-4bde-b560-31614fb30ce0/dr-proj-317.png__768x768_subsampling-2.png 768w,
-                      https://pprd.digitalrocks.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/65/10/6510c85e-4f00-4bde-b560-31614fb30ce0/dr-proj-317.png__800.0x764.0_subsampling-2.png 800.0w
-        "
-              sizes="
-            
-                (max-width: 576px) 576px,
-            
-                (max-width: 768px) 768px,
-            
-            800.0px
-        "
-              className="align-left img-fluid"
-            />
-          </div>
-
-          <div className="col project-desc">
-            <p>
-              A set of 11 sandstone plugs from Kocurek Industries: Bandera Gray,
-              Parker, Kirby, Bandera Brown, Berea Sister Gray, Berea Upper Gray,
-              Berea, Castlegate, Buff Berea, Leopard and Bentheimer. Source:{' '}
-              <a
-                href="https://kocurekindustries.com/sandstone-cores"
-                target="_blank"
-                rel="noreferrer"
-                aria-label="Opens in new window."
-              >
-                https://kocurekindustries.com/sandstone-cores
-              </a>
-              . All samples were subject to a combined experimental and
-              computational analysis in order to estimate Porosity and
-              Permeability.
-            </p>
-
-            <p>
-              For more details, please refer to{' '}
-              <a
-                href="https://arxiv.org/abs/2010.10679"
-                target="_blank"
-                rel="noreferrer"
-                aria-label="Opens in new window."
-              >
-                https://arxiv.org/abs/2010.10679
-              </a>
-              .
-            </p>
-
-            <table className="c-data-list c-data-list--is-vert c-data-list--is-narrow">
-              <tbody>
-                <tr>
-                  <th className="c-data-list__key">Author</th>
-                  <td className="c-data-list__value">
-                    Rodrigo Neumann (IBM Research)
-                  </td>
-                </tr>
-                <tr>
-                  <th className="c-data-list__key">Collaborators</th>
-                  <td className="c-data-list__value">
-                    <ul>
-                      <li>MARIANE ANDREETA (USP)</li>
-                      <li>
-                        Everton Lucas-Oliveira (Universidade de São Paulo)
-                      </li>
-                    </ul>
-                  </td>
-                </tr>
-                <tr>
-                  <th className="c-data-list__key">Created</th>
-                  <td className="c-data-list__value">Oct. 8, 2020</td>
-                </tr>
-                <tr>
-                  <th className="c-data-list__key">License</th>
-                  <td className="c-data-list__value">ODC-BY 1.0</td>
-                </tr>
-                <tr>
-                  <th className="c-data-list__key">
-                    Digital Object Identifier
-                  </th>
-                  <td className="c-data-list__value">10.17612/f4h1-w124</td>
-                </tr>
-                <tr>
-                  <th className="c-data-list__key">Linked Datasets</th>
-                  <td className="c-data-list__value">
-                    <nav>
-                      <a
-                        href="https://doi.org/10.1038/s41598-021-90090-0"
-                        target="_blank"
-                        rel="noreferrer"
-                        aria-label="Opens in new window."
-                      >
-                        <span>
-                          11 Sandstones: raw, filtered and segmented data
-                        </span>
-                        <i className="icon icon-exit" aria-hidden="true"></i>
-                      </a>
-                      <a
-                        href="https://doi.org/10.1016/j.petrol.2020.107400"
-                        target="_blank"
-                        rel="noreferrer"
-                        aria-label="Opens in new window."
-                      >
-                        <span>
-                          Sandstone surface relaxivity determined by NMR T2
-                          distribution and digital rock simulation for
-                          permeability evaluation
-                        </span>
-                        <i className="icon icon-exit" aria-hidden="true"></i>
-                      </a>
-                    </nav>
-                  </td>
-                </tr>
-                <tr className="sample">
-                  <th className="c-data-list__key">Cited By</th>
-                  <td className="c-data-list__value">
-                    <nav>
-                      <a href="#" target="_blank">
-                        <span>
-                          Example citation entry (Sample data - Not actual
-                          citations)
-                        </span>
-                        <i className="icon icon-exit" aria-hidden="true"></i>
-                      </a>
-                      <a href="#" target="_blank">
-                        <span>
-                          Another example of what a citation would look like
-                          when this feature is implemented
-                        </span>
-                        <i className="icon icon-exit" aria-hidden="true"></i>
-                      </a>
-                    </nav>
-                  </td>
-                </tr>
-                <tr className="sample">
-                  <th className="c-data-list__key">Context</th>
-                  <td className="c-data-list__value">
-                    <nav>
-                      <a href="#" target="_blank">
-                        <span>
-                          Sample contextual reference - This section will show
-                          related context
-                        </span>
-                        <i className="icon icon-exit" aria-hidden="true"></i>
-                      </a>
-                      <a href="#" target="_blank">
-                        <span>
-                          Example of how additional context entries would appear
-                          when this feature is implemented
-                        </span>
-                        <i className="icon icon-exit" aria-hidden="true"></i>
-                      </a>
-                    </nav>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
-        </div>
-
-        <div className="project-content">
-          <div id="files">
-            <h3>Files</h3>
-
-            <ul className="data-tree">
-              <li className="data-tree__item" id="sample-berea">
-                <details>
-                  <summary className="u-summary-with-a-link">
-                    <a className="u-title-needs-colon">
-                      <span>Sample</span> <strong>Berea</strong>
-                    </a>
-                  </summary>
-                  {/* <p className="js-show-more"> */}
-                  {/* only if desc is very long, then add className "js-show-more" or try `ShowMore` common component */}
-                  <p>
-                    Berea sandstone sample. For experimental and computational
-                    estimates of porosity and permeability, please refer to the
-                    related publications.
-                  </p>
-                  <table className="c-data-list c-data-list--is-vert c-data-list--is-narrow c-data-list--should-truncate-values">
-                    <tbody>
-                      <tr>
-                        <th className="c-data-list__key">Porous Media Type</th>
-                        <td className="c-data-list__value">Sandstone</td>
-                      </tr>
-                      <tr>
-                        <th className="c-data-list__key">Source</th>
-                        <td className="c-data-list__value">Natural</td>
-                      </tr>
-                      <tr>
-                        <th className="c-data-list__key">Grain Size</th>
-                        <td className="c-data-list__value">
-                          <dl>
-                            <dt>Minimum</dt>
-                            <dd>N/A</dd>
-                            <dt>Maximum</dt>
-                            <dd>N/A</dd>
-                            <dt>Average</dt>
-                            <dd>N/A</dd>
-                          </dl>
-                        </td>
-                      </tr>
-                      <tr>
-                        <th className="c-data-list__key">Porosity</th>
-                        <td className="c-data-list__value">18.96</td>
-                      </tr>
-                      <tr>
-                        <th className="c-data-list__key">Location</th>
-                        <td className="c-data-list__value">—</td>
-                      </tr>
-                    </tbody>
-                  </table>
-                </details>
-                <ul>
-                  <li>
-                    <a
-                      className="u-title-needs-colon"
-                      href="/datasets/317/origin-data/1352/"
-                    >
-                      <span>Origin Data</span>{' '}
-                      <strong>Berea_2d25um_grayscale.raw</strong>
-                    </a>
-                  </li>
-                  <li>
-                    <a
-                      className="u-title-needs-colon"
-                      href="/datasets/317/origin-data/1352/"
-                    >
-                      <span>Origin Data</span>{' '}
-                      <strong>Berea_2d25um_grayscale_filtered.raw</strong>
-                    </a>
-                  </li>
-                  <li>
-                    <a
-                      className="u-title-needs-colon"
-                      href="/datasets/317/origin-data/1352/"
-                    >
-                      <span>Origin Data</span>{' '}
-                      <strong>Berea_2d25um_binary.raw</strong>
-                    </a>
-                  </li>
-                </ul>
-              </li>
-              <li className="data-tree__item" id="sample-bandera-brown">
-                <details>
-                  <summary className="u-summary-with-a-link">
-                    <a className="u-title-needs-colon">
-                      <span>Sample</span> <strong>Bandera Brown</strong>
-                    </a>
-                  </summary>
-                  {/* <p className="js-show-more"> */}
-                  {/* only if desc is very long, then add className "js-show-more" or try `ShowMore` common component */}
-                  <p>
-                    Bandera Brown sandstone sample. For experimental and
-                    computational estimates of porosity and permeability, please
-                    refer to the related publications.
-                  </p>
-                  <table className="c-data-list c-data-list--is-vert c-data-list--is-narrow c-data-list--should-truncate-values">
-                    <tbody>
-                      <tr>
-                        <th className="c-data-list__key">Porous Media Type</th>
-                        <td className="c-data-list__value">Sandstone</td>
-                      </tr>
-                      <tr>
-                        <th className="c-data-list__key">Source</th>
-                        <td className="c-data-list__value">Natural</td>
-                      </tr>
-                      <tr>
-                        <th className="c-data-list__key">Grain Size</th>
-                        <td className="c-data-list__value">
-                          <dl>
-                            <dt>Minimum</dt>
-                            <dd>N/A</dd>
-                            <dt>Maximum</dt>
-                            <dd>N/A</dd>
-                            <dt>Average</dt>
-                            <dd>N/A</dd>
-                          </dl>
-                        </td>
-                      </tr>
-                      <tr>
-                        <th className="c-data-list__key">Porosity</th>
-                        <td className="c-data-list__value">24.11</td>
-                      </tr>
-                      <tr>
-                        <th className="c-data-list__key">Location</th>
-                        <td className="c-data-list__value">—</td>
-                      </tr>
-                    </tbody>
-                  </table>
-                </details>
-                <ul>
-                  <li>
-                    <a
-                      className="u-title-needs-colon"
-                      href="/datasets/317/origin-data/1352/"
-                    >
-                      <span>Origin Data</span>{' '}
-                      <strong>BanderaBrown_2d25um_grayscale.raw</strong>
-                    </a>
-                  </li>
-                  <li>
-                    <a
-                      className="u-title-needs-colon"
-                      href="/datasets/317/origin-data/1352/"
-                    >
-                      <span>Origin Data</span>{' '}
-                      <strong>BanderaBrown_2d25um_binary.raw</strong>
-                    </a>
-                  </li>
-                  <li>
-                    <a
-                      className="u-title-needs-colon"
-                      href="/datasets/317/origin-data/1352/"
-                    >
-                      <span>Origin Data</span>{' '}
-                      <strong>
-                        BanderaBrown_2d25um_grayscale_filtered.raw
-                      </strong>
-                    </a>
-                  </li>
-                </ul>
-              </li>
-              <li className="data-tree__item" id="sample-bandera-gray">
-                <details>
-                  <summary className="u-summary-with-a-link">
-                    <a className="u-title-needs-colon">
-                      <span>Sample</span> <strong>Bandera Gray</strong>
-                    </a>
-                  </summary>
-                  {/* <p className="js-show-more"> */}
-                  {/* only if desc is very long, then add className "js-show-more" or try `ShowMore` common component */}
-                  <p>
-                    Bandera Gray sandstone sample. For experimental and
-                    computational estimates of porosity and permeability, please
-                    refer to the related publications.
-                  </p>
-                  <table className="c-data-list c-data-list--is-vert c-data-list--is-narrow c-data-list--should-truncate-values">
-                    <tbody>
-                      <tr>
-                        <th className="c-data-list__key">Porous Media Type</th>
-                        <td className="c-data-list__value">Sandstone</td>
-                      </tr>
-                      <tr>
-                        <th className="c-data-list__key">Source</th>
-                        <td className="c-data-list__value">Natural</td>
-                      </tr>
-                      <tr>
-                        <th className="c-data-list__key">Grain Size</th>
-                        <td className="c-data-list__value">
-                          <dl>
-                            <dt>Minimum</dt>
-                            <dd>N/A</dd>
-                            <dt>Maximum</dt>
-                            <dd>N/A</dd>
-                            <dt>Average</dt>
-                            <dd>N/A</dd>
-                          </dl>
-                        </td>
-                      </tr>
-                      <tr>
-                        <th className="c-data-list__key">Porosity</th>
-                        <td className="c-data-list__value">18.1</td>
-                      </tr>
-                      <tr>
-                        <th className="c-data-list__key">Location</th>
-                        <td className="c-data-list__value">—</td>
-                      </tr>
-                    </tbody>
-                  </table>
-                </details>
-                <ul>
-                  <li>
-                    <a
-                      className="u-title-needs-colon"
-                      href="/datasets/317/origin-data/1352/"
-                    >
-                      <span>Origin Data</span>{' '}
-                      <strong>BanderaGray_2d25um_binary.raw</strong>
-                    </a>
-                  </li>
-                  <li>
-                    <a
-                      className="u-title-needs-colon"
-                      href="/datasets/317/origin-data/1352/"
-                    >
-                      <span>Origin Data</span>{' '}
-                      <strong>BanderaGray_2d25um_grayscale_filtered.raw</strong>
-                    </a>
-                  </li>
-                  <li>
-                    <a
-                      className="u-title-needs-colon"
-                      href="/datasets/317/origin-data/1352/"
-                    >
-                      <span>Origin Data</span>{' '}
-                      <strong>BanderaGray_2d25um_grayscale.raw</strong>
-                    </a>
-                  </li>
-                </ul>
-              </li>
-              <li className="data-tree__item" id="sample-bentheimer">
-                <details>
-                  <summary className="u-summary-with-a-link">
-                    <a className="u-title-needs-colon">
-                      <span>Sample</span> <strong>Bentheimer</strong>
-                    </a>
-                  </summary>
-                  {/* <p className="js-show-more"> */}
-                  {/* only if desc is very long, then add className "js-show-more" or try `ShowMore` common component */}
-                  <p>
-                    Bentheimer sandstone sample. For experimental and
-                    computational estimates of porosity and permeability, please
-                    refer to the related publications.
-                  </p>
-                  <table className="c-data-list c-data-list--is-vert c-data-list--is-narrow c-data-list--should-truncate-values">
-                    <tbody>
-                      <tr>
-                        <th className="c-data-list__key">Porous Media Type</th>
-                        <td className="c-data-list__value">Sandstone</td>
-                      </tr>
-                      <tr>
-                        <th className="c-data-list__key">Source</th>
-                        <td className="c-data-list__value">Natural</td>
-                      </tr>
-                      <tr>
-                        <th className="c-data-list__key">Grain Size</th>
-                        <td className="c-data-list__value">
-                          <dl>
-                            <dt>Minimum</dt>
-                            <dd>N/A</dd>
-                            <dt>Maximum</dt>
-                            <dd>N/A</dd>
-                            <dt>Average</dt>
-                            <dd>N/A</dd>
-                          </dl>
-                        </td>
-                      </tr>
-                      <tr>
-                        <th className="c-data-list__key">Porosity</th>
-                        <td className="c-data-list__value">22.64</td>
-                      </tr>
-                      <tr>
-                        <th className="c-data-list__key">Location</th>
-                        <td className="c-data-list__value">—</td>
-                      </tr>
-                    </tbody>
-                  </table>
-                </details>
-                <ul>
-                  <li>
-                    <a
-                      className="u-title-needs-colon"
-                      href="/datasets/317/origin-data/1352/"
-                    >
-                      <span>Origin Data</span>{' '}
-                      <strong>Bentheimer_2d25um_binary.raw</strong>
-                    </a>
-                  </li>
-                  <li>
-                    <a
-                      className="u-title-needs-colon"
-                      href="/datasets/317/origin-data/1352/"
-                    >
-                      <span>Origin Data</span>{' '}
-                      <strong>Bentheimer_2d25um_grayscale_filtered.raw</strong>
-                    </a>
-                  </li>
-                  <li>
-                    <a
-                      className="u-title-needs-colon"
-                      href="/datasets/317/origin-data/1352/"
-                    >
-                      <span>Origin Data</span>{' '}
-                      <strong>Bentheimer_2d25um_grayscale.raw</strong>
-                    </a>
-                  </li>
-                </ul>
-              </li>
-              <li className="data-tree__item" id="sample-berea-sister-gray">
-                <details>
-                  <summary className="u-summary-with-a-link">
-                    <a className="u-title-needs-colon">
-                      <span>Sample</span> <strong>Berea Sister Gray</strong>
-                    </a>
-                  </summary>
-                  {/* <p className="js-show-more"> */}
-                  {/* only if desc is very long, then add className "js-show-more" or try `ShowMore` common component */}
-                  <p>
-                    Berea Sister Gray sandstone sample. For experimental and
-                    computational estimates of porosity and permeability, please
-                    refer to the related publications.
-                  </p>
-                  <table className="c-data-list c-data-list--is-vert c-data-list--is-narrow c-data-list--should-truncate-values">
-                    <tbody>
-                      <tr>
-                        <th className="c-data-list__key">Porous Media Type</th>
-                        <td className="c-data-list__value">Sandstone</td>
-                      </tr>
-                      <tr>
-                        <th className="c-data-list__key">Source</th>
-                        <td className="c-data-list__value">Natural</td>
-                      </tr>
-                      <tr>
-                        <th className="c-data-list__key">Grain Size</th>
-                        <td className="c-data-list__value">
-                          <dl>
-                            <dt>Minimum</dt>
-                            <dd>N/A</dd>
-                            <dt>Maximum</dt>
-                            <dd>N/A</dd>
-                            <dt>Average</dt>
-                            <dd>N/A</dd>
-                          </dl>
-                        </td>
-                      </tr>
-                      <tr>
-                        <th className="c-data-list__key">Porosity</th>
-                        <td className="c-data-list__value">19.07</td>
-                      </tr>
-                      <tr>
-                        <th className="c-data-list__key">Location</th>
-                        <td className="c-data-list__value">—</td>
-                      </tr>
-                    </tbody>
-                  </table>
-                </details>
-                <ul>
-                  <li>
-                    <a
-                      className="u-title-needs-colon"
-                      href="/datasets/317/origin-data/1352/"
-                    >
-                      <span>Origin Data</span>{' '}
-                      <strong>BSG_2d25um_grayscale.raw</strong>
-                    </a>
-                  </li>
-                  <li>
-                    <a
-                      className="u-title-needs-colon"
-                      href="/datasets/317/origin-data/1352/"
-                    >
-                      <span>Origin Data</span>{' '}
-                      <strong>BSG_2d25um_grayscale_filtered.raw</strong>
-                    </a>
-                  </li>
-                  <li>
-                    <a
-                      className="u-title-needs-colon"
-                      href="/datasets/317/origin-data/1352/"
-                    >
-                      <span>Origin Data</span>{' '}
-                      <strong>BSG_2d25um_binary.raw</strong>
-                    </a>
-                  </li>
-                </ul>
-              </li>
-            </ul>
-          </div>
-        </div>
-      </div>
-      <div
-        className="modal fade"
-        id="project-download-modal"
-        tabIndex="-1"
-        role="dialog"
-        aria-labelledby="project-download-modal-title"
-        aria-hidden="true"
-      >
-        <div
-          className="modal-dialog modal-dialog-centered modal-lg"
-          role="document"
-        >
-          <div className="modal-content">
-            <div className="modal-header">
-              <h5 className="modal-title" id="project-download-modal-title">
-                Download Dataset
-              </h5>
-              <button
-                type="button"
-                className="close"
-                data-bs-dismiss="modal"
-                aria-label="Close"
-              >
-                <i aria-hidden="true">×</i>
-              </button>
-            </div>
-            <div className="modal-body">
-              <p>
-                This download is a ZIP file of the complete project dataset. The
-                size of the ZIP file is <strong>41.28 MB</strong>.
-              </p>
-              <hr />
-              <p>The files are licensed by the following:</p>
-              <ul className="license-list">
-                <li className="license">
-                  <h4 className="license__title">
-                    <i className="icon icon-file" data-label="ODC"></i>
-                    <span>
-                      <strong>
-                        Open Data Commons Attribution License (ODC-By) v1.0
-                      </strong>
-                      (
-                      <a
-                        href="https://opendatacommons.org/licenses/by/1-0/"
-                        target="_blank"
-                        rel="noreferrer"
-                        aria-label="Opens in new window."
-                      >
-                        License Website
-                      </a>
-                      )
-                    </span>
-                  </h4>
-                  <ul className="license__details">
-                    <li>
-                      You may […] restrictions lorem ipsum dolor sit amet,
-                      consectetur adipiscing elit.
-                    </li>
-                    <li>
-                      You […] attributed […] this work consectetur adipiscing
-                      elit.
-                    </li>
-                  </ul>
-                </li>
-              </ul>
-              <small>
-                <a
-                  href="https://example.com"
-                  target="_blank"
-                  rel="noreferrer"
-                  aria-label="Opens in new window."
-                >
-                  Data Usage Agreement
-                </a>
-              </small>
-            </div>
-            <div className="modal-footer">
-              <a
-                className="c-button c-button--primary  project-download-button"
-                download="digitalrocksportal-org-project-317.zip"
-                target="_blank"
-                href="https://www.digitalrocksportal.org/media/projects/317/archive.zip"
-                rel="noreferrer"
-                aria-label="Opens in new window."
-              >
-                <i className="icon icon-download  c-button__icon--before">↓</i>
-                Download Dataset
-              </a>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        className="modal fade"
-        id="project-metrics-modal"
-        tabIndex="-1"
-        role="dialog"
-        aria-labelledby="project-metrics-modal-title"
-        aria-hidden="true"
-      >
-        <div
-          className="modal-dialog modal-dialog-centered modal-xl"
-          role="document"
-        >
-          <div className="modal-content">
-            <div className="modal-header">
-              <h5 className="modal-title" id="project-metrics-modal-title">
-                Dataset metrics
-              </h5>
-              <button
-                type="button"
-                className="close"
-                data-bs-dismiss="modal"
-                aria-label="Close"
-              >
-                <i aria-hidden="true">×</i>
-              </button>
-            </div>
-            <div className="modal-body">
-              <div className="metrics-tableset">
-                <table className="metrics-table">
-                  <thead>
-                    <tr>
-                      <th>Aggregated Usage</th>
-                      <th></th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    <tr>
-                      <td>
-                        Unique Investigations
-                        {' '}
-                        <small className="metrics-note">(views)</small>
-                        {' '}
-                        <i
-                          title="Refers to the number of one-hour sessions during which a user previewed/downloaded/copied files associated with this DOI."
-                          data-bs-toggle="tooltip"
-                          data-bs-placement="top"
-                        >
-                          ⓘ
-                        </i>
-                      </td>
-                      <td>0</td>
-                    </tr>
-                    <tr>
-                      <td>
-                        Unique Requests
-                        {' '}
-                        <small className="metrics-note">(downloads)</small>
-                        {' '}
-                        <i
-                          title="Refers to the number of one-hour sessions during which a user previewed/downloaded/copied files associated with this DOI."
-                          data-bs-toggle="tooltip"
-                          data-bs-placement="top"
-                          data-title="Unique Requests (Downloads)"
-                        >
-                          ⓘ
-                        </i>
-                      </td>
-                      <td>0</td>
-                    </tr>
-                    <tr>
-                      <td>
-                        Total Requests
-                        {' '}
-                        <i
-                          title="Refers to the number of one-hour sessions during which a user previewed/downloaded/copied files associated with this DOI."
-                          data-bs-toggle="tooltip"
-                          data-bs-placement="top"
-                          data-title="Total Requests"
-                        >
-                          ⓘ
-                        </i>
-                      </td>
-                      <td>0</td>
-                    </tr>
-                  </tbody>
-                </table>
-                <table className="metrics-table">
-                  <thead>
-                    <tr>
-                      <th>
-                        <span className="u-thead-content-with-input">
-                          Quarter
-                          <select>
-                            <option>No Data</option>
-                          </select>
-                        </span>
-                      </th>
-                      <th>Unique Investigations</th>
-                      <th>Unique Requests</th>
-                      <th>Total Requests</th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    <tr>
-                      <td>Jan-Mar</td>
-                      <td>--</td>
-                      <td>--</td>
-                      <td>--</td>
-                    </tr>
-                    <tr>
-                      <td>Apr-Jun</td>
-                      <td>--</td>
-                      <td>--</td>
-                      <td>--</td>
-                    </tr>
-                    <tr>
-                      <td>Jul-Sep</td>
-                      <td>--</td>
-                      <td>--</td>
-                      <td>--</td>
-                    </tr>
-                    <tr>
-                      <td>Oct-Dec</td>
-                      <td>--</td>
-                      <td>--</td>
-                      <td>--</td>
-                    </tr>
-                  </tbody>
-                </table>
-              </div>
-              <p className="metrics-caption  c-message c-message--type-info c-message--scope-section">
-                These metrics are presented according to the{' '}
-                <a
-                  href="https://makedatacount.org/"
-                  target="_blank"
-                  rel="noreferrer"
-                  aria-label="Opens in new window."
-                >
-                  Make Data Count
-                </a>{' '}
-                standard.
-              </p>
-            </div>
-            <div className="modal-footer">
-              <small className="metrics-note">
-                Metrics recorded since January 2022.
-              </small>
-            </div>
-          </div>
-        </div>
-      </div>
-    </>
-  );
-}
diff --git a/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPMViews.jsx b/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPMViews.jsx
deleted file mode 100644
index e43c0881d7..0000000000
--- a/client/src/components/DataFiles/DataFilesForDPM/DataFilesForDPMViews.jsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import React from 'react';
-
-export default function DataFilesForDPMViews({
-  tabs,
-  view,
-  setView,
-  navClassName,
-  contentClassName,
-}) {
-  return (
-    <>
-      <ul className={`nav nav-tabs ${navClassName}`} id="tabs" role="tablist">
-        {tabs.map((tab) => (
-          <li className="nav-item" key={tab.view} role="presentation">
-            <a
-              className={`nav-link${view === tab.view ? ' active' : ''}`}
-              id={tab.id}
-              data-bs-toggle="tab"
-              href={`#${tab.contentId}`}
-              role="tab"
-              aria-controls={tab.contentId}
-              aria-selected={view === tab.view}
-              tabIndex={view === tab.view ? 0 : -1}
-              onClick={(e) => {
-                e.preventDefault();
-                setView(tab.view);
-              }}
-            >
-              {tab.label}
-            </a>
-          </li>
-        ))}
-      </ul>
-      <div id="tabs-content" className={`tab-content ${contentClassName}`}>
-        {tabs.map((tab) => {
-          const TabContent = tab.Content;
-          return (
-            <div
-              key={tab.view}
-              className={`tab-pane ${view === tab.view ? 'active' : ''}`}
-              id={tab.contentId}
-              role="tabpanel"
-              aria-labelledby={tab.id}
-            >
-              {view === tab.view ? <TabContent /> : null}
-            </div>
-          );
-        })}
-      </div>
-    </>
-  );
-}
diff --git a/client/src/components/DataFiles/DataFilesForDPM/styles/components.global.css b/client/src/components/DataFiles/DataFilesForDPM/styles/components.global.css
deleted file mode 100644
index 30b39b875b..0000000000
--- a/client/src/components/DataFiles/DataFilesForDPM/styles/components.global.css
+++ /dev/null
@@ -1,5 +0,0 @@
-@import url('./components/data-tree.global.css');
-@import url('./components/project.global.css');
-@import url('./components/publication.global.css');
-@import url('./components/metrics.global.css');
-@import url('./components/license.global.css');
diff --git a/client/src/components/DataFiles/DataFilesForDPM/styles/components/data-tree.global.css b/client/src/components/DataFiles/DataFilesForDPM/styles/components/data-tree.global.css
deleted file mode 100644
index a62a0d59a9..0000000000
--- a/client/src/components/DataFiles/DataFilesForDPM/styles/components/data-tree.global.css
+++ /dev/null
@@ -1,48 +0,0 @@
-/* DATASET LIST */
-
-/* Root */
-
-ul.data-tree,
-.data-tree ul {
-    list-style: none;
-}
-ul.data-tree {
-    padding-left: unset;
-}
-.data-tree ul:has(details) {
-    padding-left: var(--indent);
-}
-.data-tree ul:not(:has(details)) {
-    padding-left: calc(var(--indent)* 2);
-}
-
-/* To indent all expanded content */
-.data-tree {
-    --indent: 1.5rem;
-}
-.data-tree__item details {
-    margin-left: var(--indent);
-}
-.data-tree__item summary {
-    margin-left: calc( -1 * var(--indent) );
-}
-.data-tree__item summary.u-summary-with-a-link::before,
-.data-tree__item summary.u-summary-fake-marker::before {
-    width: var(--indent);
-    display: inline-block;
-}
-
-
-/* Elements */
-
-.data-tree__item ul {
-    margin-block: 1rem;
-}
-
-
-/* Components */
-
-/* to reduce excess width of table key */
-.data-tree th.c-data-list__key {
-    width: 22ch;
-}
diff --git a/client/src/components/DataFiles/DataFilesForDPM/styles/components/license.global.css b/client/src/components/DataFiles/DataFilesForDPM/styles/components/license.global.css
deleted file mode 100644
index 3454c20c0b..0000000000
--- a/client/src/components/DataFiles/DataFilesForDPM/styles/components/license.global.css
+++ /dev/null
@@ -1,19 +0,0 @@
-/* License */
-
-ul.license-list {
-    padding-left: unset;
-    list-style: none;
-}
-
-.license {
-    /* … */
-}
-.license__title:has(.icon) {
-    display: flex;
-    align-items: center;
-    gap: 1em;
-}
-.license__details {
-    /* to align with license__title text */
-    padding-left: 3.5em; /* icon width + gap between icon and text */
-}
diff --git a/client/src/components/DataFiles/DataFilesForDPM/styles/components/metrics.global.css b/client/src/components/DataFiles/DataFilesForDPM/styles/components/metrics.global.css
deleted file mode 100644
index 875157893b..0000000000
--- a/client/src/components/DataFiles/DataFilesForDPM/styles/components/metrics.global.css
+++ /dev/null
@@ -1,43 +0,0 @@
-/* Metrics */
-
-.metrics-tableset {
-    display: flex;
-    gap: 1rem;
-    justify-content: space-evenly;
-}
-.metrics-tableset > * {
-    align-self: start;
-}
-
-.metrics-table :is(input, select, textarea) {
-    font-size: small;
-}
-/* To undo CMS size of interactive elements */
-@layer mimic-cms.base {
-    body.has-cms-ui .metrics-table :is(input, select, textarea) {
-        padding: revert-layer;
-    }
-}
-/* To undo CMS size of interactive elements (for DPM Pre-Prod CMS) */
-/* TODO: Remove after DPM pprd CMS "Browse Databases" reference is useless */
-/* https://github.com/TACC/Core-CMS-Custom/blob/9f5d6b1/digitalrocks_assets/css/browse-datasets.css */
-@layer base {
-    .metrics-table :is(input, select, textarea) {
-        padding: revert-layer;
-    }
-}
-
-.metrics-caption {
-    padding-block: 8px;
-    padding-inline: 12px;
-}
-p.metrics-caption {
-    margin-bottom: 0;
-}
-
-.metrics-note {
-    font-style: italic;
-}
-.metrics-note:not(small) {
-    font-size: small;
-} 
\ No newline at end of file
diff --git a/client/src/components/DataFiles/DataFilesForDPM/styles/components/project.global.css b/client/src/components/DataFiles/DataFilesForDPM/styles/components/project.global.css
deleted file mode 100644
index 987be69bfa..0000000000
--- a/client/src/components/DataFiles/DataFilesForDPM/styles/components/project.global.css
+++ /dev/null
@@ -1,41 +0,0 @@
-/* DESCRIPTION */
-
-.project-desc > img {
-    width: 20%;
-    padding: 10px;
-}
-.project-desc p a {
-    word-break: break-all;
-}
-
-.project-desc th.c-data-list__key {
-    width: 25ch;
-}
-
-
-
-/* DOWNLOAD BUTTON */
-
-.project-download-button {
-    /* to align as if it were a far-right tab */
-    float: right;
-}
-p:has(.project-download-button) {
-    text-align: center;
-}
-.project-download-button i.icon-download {
-    font-weight: bold;
-}
-
-
-/* CONTENT */
-
-.project-content.row {
-    gap: calc( var(--global-space--bootstrap-gap) / 2 );
-}
-
-.project-content {
-    display: grid;
-    grid-template-columns: repeat( auto-fit, minmax( min( 100%, 40ch ), 1fr ));
-    gap: var(--global-space--bootstrap-gap);
-}
diff --git a/client/src/components/DataFiles/DataFilesForDPM/styles/components/publication.global.css b/client/src/components/DataFiles/DataFilesForDPM/styles/components/publication.global.css
deleted file mode 100644
index 158d3cd5e7..0000000000
--- a/client/src/components/DataFiles/DataFilesForDPM/styles/components/publication.global.css
+++ /dev/null
@@ -1,11 +0,0 @@
-/* Publications */
-
-.publication {
-    /* … */
-}
-
-.publication__title {
-    display: flex;
-    justify-content: space-between;
-    align-items: flex-start;
-}
diff --git a/client/src/components/DataFiles/DataFilesForDPM/styles/customize-core-styles.global.css b/client/src/components/DataFiles/DataFilesForDPM/styles/customize-core-styles.global.css
deleted file mode 100644
index 8b7f19e0a3..0000000000
--- a/client/src/components/DataFiles/DataFilesForDPM/styles/customize-core-styles.global.css
+++ /dev/null
@@ -1,69 +0,0 @@
-/* TWEAK CORE-STYLES */
-
-/* Card */
-
-/* To make project link align across cards */
-/* FAQ: Card layout is inconsistent cuz headings can span few to many lines */
-[class*="card--image-top"] {
-    grid-template-rows: repeat(3, min-content) 1fr;
-}
-[class*="card--image-top"] > p:has(a:only-child) {
-    align-self: end;
-}
-
-
-/* Card List */
-
-.c-card-list [class*="card--"] img {
-    padding: 20px;
-    aspect-ratio: 1 / 1;
-}
-
-/* to allow long file names to wrap */
-.c-card-list p {
-    word-break: break-word;
-}
-
-
-/* Data List */
-
-/* to swap colors for key and value (design request specific to projects) */
-.c-data-list__key { color: var(--global-color-primary--dark); }
-.c-data-list__value { color: var(--global-color-primary--x-dark) }
-
-/* to arrange and truncate links in value column */
-.c-data-list__value nav {
-    display: flex;
-    flex-direction: column;
-    gap: 0.5em;
-}
-.c-data-list__value nav a {
-    display: flex;
-    flex-direction: row;
-    gap: 0.5em;
-}
-.c-data-list__value nav a span {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
-
-/* Modal */
-
-.modal-body {
-    padding: 1.5rem;
-}
-
-
-
-
-/* CUSTOM UTILITIES */
-
-.u-thead-content-with-input {
-    display: flex;
-    gap: 1ch;
-}
-
-.u-title-needs-colon span { font-weight: normal; }
-.u-title-needs-colon span::after { content: ':'; }
diff --git a/client/src/components/DataFiles/index.js b/client/src/components/DataFiles/index.js
index c7204be3cf..86018e2c3c 100644
--- a/client/src/components/DataFiles/index.js
+++ b/client/src/components/DataFiles/index.js
@@ -1 +1 @@
-export { default } from './DataFilesForDPM/DataFilesForDPM';
+export { default } from './DataFiles';