datajunction-ui 0.0.1-a95 → 0.0.1-a97

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "datajunction-ui",
-  "version": "0.0.1a95",
+  "version": "0.0.1a97",
   "description": "DataJunction Metrics Platform UI",
   "module": "src/index.tsx",
   "repository": {
@@ -165,10 +165,10 @@
     ],
     "coverageThreshold": {
       "global": {
-        "statements": 87,
+        "statements": 80,
         "branches": 70,
         "lines": 80,
-        "functions": 83
+        "functions": 80
       }
     },
     "moduleNameMapper": {

package/src/app/icons/EyeIcon.jsx

@@ -0,0 +1,20 @@
+const EyeIcon = props => (
+  <svg
+    className="feather feather-eye"
+    fill="none"
+    height="24"
+    width="24"
+    viewBox="0 0 24 24"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
+    <circle cx="12" cy="12" r="3" />
+  </svg>
+);
+
+export default EyeIcon;

package/src/app/icons/JupyterExportIcon.jsx

@@ -0,0 +1,25 @@
+const JupyterExportIcon = props => (
+  <svg
+    className="feather feather-jupyter-export"
+    fill="none"
+    height="24"
+    width="24"
+    viewBox="0 0 24 24"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    {/* Notebook outline */}
+    <rect x="3" y="2" width="14" height="20" rx="2" ry="2" />
+
+    {/* Notebook lines */}
+    <line x1="7" y1="6" x2="13" y2="6" />
+    <line x1="7" y1="10" x2="13" y2="10" />
+    <line x1="7" y1="14" x2="13" y2="14" />
+  </svg>
+);
+
+export default JupyterExportIcon;

package/src/app/icons/PythonIcon.jsx

@@ -1,51 +1,13 @@
 const PythonIcon = props => (
   <svg
-    width="45px"
-    height="45px"
-    viewBox="0 0 64 64"
-    fill="none"
     xmlns="http://www.w3.org/2000/svg"
+    x="0px"
+    y="0px"
+    width="24"
+    height="24"
+    viewBox="0 0 48 48"
   >
-    <g id="SVGRepo_bgCarrier" strokeWidth="0"></g>
-    <g
-      id="SVGRepo_tracerCarrier"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    ></g>
-    <g id="SVGRepo_iconCarrier">
-      <path
-        d="M31.885 16c-8.124 0-7.617 3.523-7.617 3.523l.01 3.65h7.752v1.095H21.197S16 23.678 16 31.876c0 8.196 4.537 7.906 4.537 7.906h2.708v-3.804s-.146-4.537 4.465-4.537h7.688s4.32.07 4.32-4.175v-7.019S40.374 16 31.885 16zm-4.275 2.454c.771 0 1.395.624 1.395 1.395s-.624 1.395-1.395 1.395a1.393 1.393 0 0 1-1.395-1.395c0-.771.624-1.395 1.395-1.395z"
-        fill="url(#a)"
-      ></path>
-      <path
-        d="M32.115 47.833c8.124 0 7.617-3.523 7.617-3.523l-.01-3.65H31.97v-1.095h10.832S48 40.155 48 31.958c0-8.197-4.537-7.906-4.537-7.906h-2.708v3.803s.146 4.537-4.465 4.537h-7.688s-4.32-.07-4.32 4.175v7.019s-.656 4.247 7.833 4.247zm4.275-2.454a1.393 1.393 0 0 1-1.395-1.395c0-.77.624-1.394 1.395-1.394s1.395.623 1.395 1.394c0 .772-.624 1.395-1.395 1.395z"
-        fill="url(#b)"
-      ></path>
-      <defs>
-        <linearGradient
-          id="a"
-          x1="19.075"
-          y1="18.782"
-          x2="34.898"
-          y2="34.658"
-          gradientUnits="userSpaceOnUse"
-        >
-          <stop stopColor="#387EB8"></stop>
-          <stop offset="1" stopColor="#366994"></stop>
-        </linearGradient>
-        <linearGradient
-          id="b"
-          x1="28.809"
-          y1="28.882"
-          x2="45.803"
-          y2="45.163"
-          gradientUnits="userSpaceOnUse"
-        >
-          <stop stopColor="#FFE052"></stop>
-          <stop offset="1" stopColor="#FFC331"></stop>
-        </linearGradient>
-      </defs>
-    </g>
+    <path d="M 24 3 C 20.271429 3 18.240267 3.9470561 16.792969 4.5742188 L 16.791016 4.5742188 C 15.488673 5.1421213 14.704771 6.3187748 14.365234 7.4296875 C 14.025697 8.5406002 14 9.6506515 14 10.640625 L 14 14 L 10.640625 14 C 9.6506515 14 8.5406002 14.0257 7.4296875 14.365234 C 6.3187748 14.704771 5.1421212 15.488626 4.5742188 16.791016 L 4.5742188 16.792969 C 3.947056 18.24022 3 20.271429 3 24 C 3 27.728571 3.9470561 29.759733 4.5742188 31.207031 L 4.5742188 31.208984 C 5.1421212 32.511374 6.3187748 33.295229 7.4296875 33.634766 C 8.5406002 33.974256 9.6506515 34 10.640625 34 L 14 34 L 14 37.359375 C 14 38.349349 14.0257 39.459401 14.365234 40.570312 C 14.704771 41.681225 15.488626 42.857879 16.791016 43.425781 L 16.792969 43.425781 C 18.24022 44.052944 20.271429 45 24 45 C 27.728571 45 29.759733 44.052944 31.207031 43.425781 L 31.208984 43.425781 C 32.511374 42.857879 33.295229 41.681225 33.634766 40.570312 C 33.974256 39.459401 34 38.349349 34 37.359375 L 34 34 L 37.359375 34 C 38.349349 34 39.459401 33.9743 40.570312 33.634766 C 41.681225 33.295229 42.857879 32.511374 43.425781 31.208984 L 43.425781 31.207031 C 44.052944 29.75978 45 27.728571 45 24 C 45 20.271429 44.052944 18.240267 43.425781 16.792969 L 43.425781 16.791016 C 42.857879 15.488673 41.681225 14.704771 40.570312 14.365234 C 39.459401 14.025697 38.349349 14 37.359375 14 L 34 14 L 34 10.640625 C 34 9.6506515 33.974303 8.5406002 33.634766 7.4296875 C 33.295229 6.3187748 32.511374 5.1421213 31.208984 4.5742188 L 31.207031 4.5742188 C 29.75978 3.9470561 27.728571 3 24 3 z M 24 6 C 27.268623 6 28.459017 6.6519922 30.009766 7.3242188 C 30.427376 7.5063161 30.590162 7.7325533 30.765625 8.3066406 C 30.941088 8.8807279 31 9.7405985 31 10.640625 L 31 15.253906 A 1.50015 1.50015 0 0 0 31 15.740234 L 31 19 C 31 20.950062 29.450062 22.5 27.5 22.5 L 20.5 22.5 C 16.928062 22.5 14 25.428062 14 29 L 14 31 L 10.640625 31 C 9.7405985 31 8.8807279 30.941088 8.3066406 30.765625 C 7.7325533 30.590162 7.5063162 30.427376 7.3242188 30.009766 C 6.6519921 28.459017 6 27.268623 6 24 C 6 20.731377 6.6519921 19.540983 7.3242188 17.990234 C 7.5063161 17.572624 7.7325533 17.409838 8.3066406 17.234375 C 8.8807279 17.058912 9.7405985 17 10.640625 17 L 23.5 17 A 1.50015 1.50015 0 1 0 23.5 14 L 17 14 L 17 10.640625 C 17 9.7405985 17.058912 8.8807279 17.234375 8.3066406 C 17.409838 7.7325533 17.572624 7.5063162 17.990234 7.3242188 C 19.540983 6.6519921 20.731377 6 24 6 z M 20.5 9 A 1.5 1.5 0 0 0 20.5 12 A 1.5 1.5 0 0 0 20.5 9 z M 34 17 L 37.359375 17 C 38.259401 17 39.119272 17.05891 39.693359 17.234375 C 40.267447 17.409838 40.493684 17.572624 40.675781 17.990234 C 41.348008 19.540983 42 20.731377 42 24 C 42 27.268623 41.348008 28.459017 40.675781 30.009766 C 40.493684 30.427376 40.267447 30.590162 39.693359 30.765625 C 39.119272 30.941088 38.259401 31 37.359375 31 L 24.5 31 A 1.50015 1.50015 0 1 0 24.5 34 L 31 34 L 31 37.359375 C 31 38.259401 30.94109 39.119272 30.765625 39.693359 C 30.590162 40.267447 30.427376 40.493684 30.009766 40.675781 C 28.459017 41.348008 27.268623 42 24 42 C 20.731377 42 19.540983 41.348008 17.990234 40.675781 C 17.572624 40.493684 17.409838 40.267447 17.234375 39.693359 C 17.058912 39.119272 17 38.259401 17 37.359375 L 17 29 C 17 27.049938 18.549938 25.5 20.5 25.5 L 27.5 25.5 C 31.071938 25.5 34 22.571938 34 19 L 34 17 z M 27.5 36 A 1.5 1.5 0 0 0 27.5 39 A 1.5 1.5 0 0 0 27.5 36 z"></path>
   </svg>
 );
 

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

@@ -1,46 +1,94 @@
 import { Light as SyntaxHighlighter } from 'react-syntax-highlighter';
 import { useEffect, useRef, useState } from 'react';
-import { nightOwl } from 'react-syntax-highlighter/src/styles/hljs';
+import { nightOwl } from 'react-syntax-highlighter/dist/esm/styles/hljs';
 import PythonIcon from '../../icons/PythonIcon';
 
 export default function ClientCodePopover({ code }) {
-  const [codeAnchor, setCodeAnchor] = useState(false);
-  const ref = useRef(null);
+  const [showModal, setShowModal] = useState(false);
+  const modalRef = useRef(null);
 
   useEffect(() => {
     const handleClickOutside = event => {
-      if (ref.current && !ref.current.contains(event.target)) {
-        setCodeAnchor(false);
+      if (modalRef.current && !modalRef.current.contains(event.target)) {
+        setShowModal(false);
       }
     };
-    document.addEventListener('click', handleClickOutside, true);
+
+    if (showModal) {
+      document.addEventListener('mousedown', handleClickOutside);
+    } else {
+      document.removeEventListener('mousedown', handleClickOutside);
+    }
+
     return () => {
-      document.removeEventListener('click', handleClickOutside, true);
+      document.removeEventListener('mousedown', handleClickOutside);
     };
-  }, [setCodeAnchor]);
+  }, [showModal]);
 
   return (
     <>
       <button
-        className="code-button"
-        aria-label="code-button"
-        tabIndex="0"
-        height="45px"
-        onClick={() => setCodeAnchor(!codeAnchor)}
+        className="button-3"
+        onClick={() => setShowModal(true)}
+        style={{ height: '2.5rem' }}
       >
-        <PythonIcon />
+        <PythonIcon /> See Python
       </button>
-      <div
-        id={`node-create-code`}
-        role="dialog"
-        aria-label="client-code"
-        style={{ display: codeAnchor === false ? 'none' : 'block' }}
-        ref={ref}
-      >
-        <SyntaxHighlighter language="python" style={nightOwl}>
-          {code}
-        </SyntaxHighlighter>
-      </div>
+
+      {showModal && (
+        <div
+          className="modal-backdrop fade in"
+          style={{
+            position: 'fixed',
+            top: 0,
+            left: 0,
+            width: '100vw',
+            height: '100vh',
+            backgroundColor: 'rgba(0, 0, 0, 0.5)',
+            zIndex: 9999,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+          }}
+        >
+          <div
+            className="centerPopover"
+            ref={modalRef}
+            style={{
+              position: 'relative',
+              maxWidth: '80%',
+              width: '600px',
+              maxHeight: '80vh',
+              overflowY: 'auto',
+              padding: '1.5rem',
+              background: '#fff',
+              borderRadius: '10px',
+              boxShadow: '0 3px 10px rgba(0, 0, 0, 0.3)',
+            }}
+          >
+            <button
+              onClick={() => setShowModal(false)}
+              style={{
+                position: 'absolute',
+                top: '1rem',
+                right: '1rem',
+                background: 'none',
+                border: 'none',
+                fontSize: '1.5rem',
+                cursor: 'pointer',
+                color: '#999',
+              }}
+              aria-label="Close modal"
+            >
+              ×
+            </button>
+            <h2>Python Client Code</h2>
+            <SyntaxHighlighter language="python" style={nightOwl}>
+              {code}
+            </SyntaxHighlighter>
+          </div>
+        </div>
+      )}
     </>
   );
 }

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

@@ -9,7 +9,7 @@ import LoadingIcon from '../../icons/LoadingIcon';
 
 export default function LinkDimensionPopover({
   column,
-  referencedDimensionNode,
+  dimensionNodes,
   node,
   options,
   onSubmit,
@@ -30,25 +30,31 @@ export default function LinkDimensionPopover({
     };
   }, [setPopoverAnchor]);
 
-  const columnDimension = referencedDimensionNode;
-
   const handleSubmit = async (
-    { node, column, dimension },
+    { node, column, updatedDimensionNodes },
     { setSubmitting, setStatus },
   ) => {
-    if (referencedDimensionNode && dimension === 'Remove') {
-      await unlinkDimension(
-        node,
-        column,
-        referencedDimensionNode,
-        setStatus,
-      ).then(_ => setSubmitting(false));
-    } else {
-      await linkDimension(node, column, dimension, setStatus).then(_ =>
-        setSubmitting(false),
-      );
+    const oldSet = new Set(dimensionNodes);
+    const newSet = new Set(updatedDimensionNodes);
+    try {
+      const linkPromises = Array.from(newSet)
+        .filter(item => !oldSet.has(item))
+        .map(dimension => {
+          return linkDimension(node, column, dimension, setStatus);
+        });
+      const unlinkPromises = Array.from(oldSet)
+        .filter(item => !newSet.has(item))
+        .map(dimension => {
+          return unlinkDimension(node, column, dimension, setStatus);
+        });
+      await Promise.all([...linkPromises, ...unlinkPromises]);
+    } catch (error) {
+      console.error('Error in editing linked dimensions:', error);
+      setStatus({ error: error.message });
+    } finally {
+      setSubmitting(false);
+      onSubmit();
     }
-    onSubmit();
   };
 
   const linkDimension = async (node, column, dimension, setStatus) => {
@@ -100,8 +106,7 @@ export default function LinkDimensionPopover({
           initialValues={{
             column: column.name,
             node: node.name,
-            dimension: '',
-            currentDimension: referencedDimensionNode,
+            updatedDimensionNodes: '',
           }}
           onSubmit={handleSubmit}
         >
@@ -111,20 +116,21 @@ export default function LinkDimensionPopover({
                 {displayMessageAfterSubmit(status)}
                 <span data-testid="link-dimension">
                   <FormikSelect
-                    selectOptions={[
-                      { value: 'Remove', label: '[Remove Dimension]' },
-                    ].concat(options)}
-                    formikFieldName="dimension"
+                    selectOptions={options}
+                    formikFieldName="updatedDimensionNodes"
                     placeholder="Select dimension to link"
                     className=""
                     defaultValue={
-                      referencedDimensionNode
-                        ? {
-                            value: referencedDimensionNode,
-                            label: referencedDimensionNode,
-                          }
-                        : ''
+                      dimensionNodes.length > 0
+                        ? dimensionNodes.map(dimNode => {
+                            return {
+                              value: dimNode,
+                              label: dimNode,
+                            };
+                          })
+                        : []
                     }
+                    isMulti={true}
                   />
                 </span>
                 <input

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

@@ -7,6 +7,7 @@ import { labelize } from '../../../utils/form';
 import PartitionColumnPopover from './PartitionColumnPopover';
 import { Light as SyntaxHighlighter } from 'react-syntax-highlighter';
 import { foundation } from 'react-syntax-highlighter/src/styles/hljs';
+import { link } from 'fs';
 
 export default function NodeColumnTab({ node, djClient }) {
   const [attributes, setAttributes] = useState([]);
@@ -146,16 +147,20 @@ export default function NodeColumnTab({ node, djClient }) {
           </td>
           {node.type !== 'cube' ? (
             <td>
-              {referencedDimensionNode !== null ? (
-                <a href={`/nodes/${referencedDimensionNode}`}>
-                  {referencedDimensionNode}
-                </a>
-              ) : (
-                ''
-              )}
+              {dimensionLinks.length > 0
+                ? dimensionLinks.map(link => (
+                    <span
+                      className="rounded-pill badge bg-secondary-soft"
+                      style={{ fontSize: '14px' }}
+                      key={link[0]}
+                    >
+                      <a href={`/nodes/${link[0]}`}>{link[0]}</a>
+                    </span>
+                  ))
+                : ''}
               <LinkDimensionPopover
                 column={col}
-                referencedDimensionNode={referencedDimensionNode}
+                dimensionNodes={dimensionLinks.map(link => link[0])}
                 node={node}
                 options={dimensions}
                 onSubmit={async () => {

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

@@ -1,4 +1,5 @@
 import DJClientContext from '../../providers/djclient';
+import JupyterExportIcon from '../../icons/JupyterExportIcon';
 import { useContext } from 'react';
 
 export default function NotebookDownload({ node }) {
@@ -23,15 +24,13 @@ export default function NotebookDownload({ node }) {
 
   return (
     <>
-      <div
-        className="badge download_notebook"
-        style={{ cursor: 'pointer', backgroundColor: '#ffefd0' }}
-        tabIndex="0"
-        height="45px"
+      <button
+        className="button-3"
         onClick={downloadFile}
+        style={{ height: '2.5rem' }}
       >
-        Export as Notebook
-      </div>
+        <JupyterExportIcon /> Export as Notebook
+      </button>
     </>
   );
 }

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

@@ -0,0 +1,226 @@
+import { useContext, useState, useRef, useEffect } from 'react';
+import DJClientContext from '../../providers/djclient';
+import EyeIcon from '../../icons/EyeIcon';
+import ExpandedIcon from '../../icons/ExpandedIcon';
+import CollapsedIcon from '../../icons/CollapsedIcon';
+
+const EVENT_TYPES = ['delete', 'update'];
+
+export default function WatchButton({ node }) {
+  if (!node || !node.name || !node.type) {
+    return null;
+  }
+
+  const djClient = useContext(DJClientContext).DataJunctionAPI;
+  const [selectedEvents, setSelectedEvents] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [dropdownOpen, setDropdownOpen] = useState(false);
+  const dropdownRef = useRef();
+
+  // Load existing preferences
+  useEffect(() => {
+    const loadPreferences = async () => {
+      try {
+        const preferences = await djClient.getNotificationPreferences({
+          entity_name: node.name,
+        });
+
+        const matched = preferences.find(item =>
+          item.alert_types.includes('web'),
+        );
+
+        if (matched) {
+          setSelectedEvents(matched.activity_types);
+        }
+      } catch (err) {
+        console.error('Failed to load notification preferences', err);
+      }
+    };
+
+    loadPreferences();
+  }, [djClient, node.name, node.type]);
+
+  // Close dropdown on outside click
+  useEffect(() => {
+    const handleClickOutside = event => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+        setDropdownOpen(false);
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
+  const toggleEvent = async event => {
+    const isSelected = selectedEvents.includes(event);
+
+    try {
+      setLoading(true);
+      let updatedEvents;
+
+      if (!isSelected) {
+        updatedEvents = Array.from(new Set([...selectedEvents, event]));
+      } else {
+        updatedEvents = selectedEvents.filter(e => e !== event);
+      }
+
+      if (updatedEvents.length === 0) {
+        await djClient.unsubscribeFromNotifications({
+          entity_type: 'node',
+          entity_name: node.name,
+        });
+      } else {
+        await djClient.subscribeToNotifications({
+          entity_type: 'node',
+          entity_name: node.name,
+          activity_types: updatedEvents,
+          alert_types: ['web'],
+        });
+      }
+
+      setSelectedEvents(updatedEvents);
+    } catch (err) {
+      console.error('Failed to update preference', err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleWatchClick = async () => {
+    try {
+      setLoading(true);
+      if (selectedEvents.length === 0) {
+        await djClient.subscribeToNotifications({
+          entity_type: 'node',
+          entity_name: node.name,
+          activity_types: EVENT_TYPES,
+          alert_types: ['web'],
+        });
+        setSelectedEvents(EVENT_TYPES);
+      } else {
+        await djClient.unsubscribeFromNotifications({
+          entity_type: 'node',
+          entity_name: node.name,
+        });
+        setSelectedEvents([]);
+      }
+    } catch (err) {
+      console.error('Watch toggle failed', err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div
+      className="btn-group"
+      ref={dropdownRef}
+      style={{
+        position: 'relative',
+        display: 'inline-flex',
+        verticalAlign: 'middle',
+      }}
+    >
+      <button
+        className="button-3"
+        onClick={handleWatchClick}
+        disabled={loading}
+        style={{
+          borderTopRightRadius: 0,
+          borderBottomRightRadius: 0,
+          marginRight: 0,
+          height: '2.5rem',
+          display: 'flex',
+          alignItems: 'center',
+          gap: '6px',
+        }}
+      >
+        <EyeIcon />
+        Watch
+        {selectedEvents.length > 0 && (
+          <span
+            style={{
+              backgroundColor: '#e2e6ed',
+              color: '#333',
+              padding: '2px 6px',
+              borderRadius: '999px',
+              fontSize: '0.75rem',
+              fontWeight: 500,
+              lineHeight: 1,
+            }}
+          >
+            {selectedEvents.length}
+          </span>
+        )}
+      </button>
+
+      <button
+        className="button-3"
+        onClick={() => setDropdownOpen(prev => !prev)}
+        disabled={loading}
+        style={{
+          borderTopLeftRadius: 0,
+          borderBottomLeftRadius: 0,
+          marginLeft: 0,
+          height: '2.5rem',
+        }}
+        aria-label="Toggle dropdown"
+      >
+        {dropdownOpen ? <ExpandedIcon /> : <CollapsedIcon />}
+      </button>
+
+      {dropdownOpen && (
+        <ul
+          className="p-2"
+          style={{
+            display: 'block',
+            minWidth: '220px',
+            position: 'absolute',
+            top: '100%',
+            right: 0,
+            zIndex: 9999,
+            backgroundColor: '#fff',
+            border: '1px solid #ccc',
+            borderRadius: '0.5rem',
+            marginTop: '0.25rem',
+            boxShadow: '0px 6px 16px rgba(0, 0, 0, 0.1)',
+            padding: '0.5rem 0',
+          }}
+        >
+          {EVENT_TYPES.map(event => {
+            const isSelected = selectedEvents.includes(event);
+            return (
+              <li
+                key={event}
+                onClick={() => toggleEvent(event)}
+                style={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  padding: '0.5rem 1rem',
+                  cursor: 'pointer',
+                  backgroundColor: isSelected ? '#f0f4f8' : 'transparent',
+                  fontWeight: isSelected ? '600' : '400',
+                  fontSize: '0.9rem',
+                  color: '#333',
+                  borderLeft: isSelected
+                    ? '4px solid #7983ff'
+                    : '4px solid transparent',
+                  transition: 'background 0.2s',
+                }}
+              >
+                <input
+                  className="form-check-input"
+                  type="checkbox"
+                  checked={isSelected}
+                  readOnly
+                  style={{ marginRight: '0.75rem' }}
+                />
+                {event}
+              </li>
+            );
+          })}
+        </ul>
+      )}
+    </div>
+  );
+}

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

@@ -19,7 +19,6 @@ describe('<LinkDimensionPopover />', () => {
     };
     const node = { name: 'default.node1' };
     const options = [
-      { value: 'Remove', label: '[Remove dimension link]' },
       { value: 'default.dimension1', label: 'Dimension 1' },
       { value: 'default.dimension2', label: 'Dimension 2' },
     ];
@@ -42,7 +41,7 @@ describe('<LinkDimensionPopover />', () => {
       <DJClientContext.Provider value={mockDjClient}>
         <LinkDimensionPopover
           column={column}
-          referencedDimensionNode={'default.dimension1'}
+          dimensionNodes={['default.dimension1']}
           node={node}
           options={options}
           onSubmit={onSubmitMock}
@@ -56,7 +55,7 @@ describe('<LinkDimensionPopover />', () => {
     // Click on a dimension and save
     const linkDimension = getByTestId('link-dimension');
     fireEvent.keyDown(linkDimension.firstChild, { key: 'ArrowDown' });
-    fireEvent.click(screen.getByText('Dimension 1'));
+    fireEvent.click(screen.getByText('Dimension 2'));
     fireEvent.click(getByText('Save'));
 
     // Expect linkDimension to be called
@@ -64,14 +63,14 @@ describe('<LinkDimensionPopover />', () => {
       expect(mockDjClient.DataJunctionAPI.linkDimension).toHaveBeenCalledWith(
         'default.node1',
         'column1',
-        'default.dimension1',
+        'default.dimension2',
       );
       expect(getByText('Saved!')).toBeInTheDocument();
     });
 
     // Click on the 'Remove' option and save
-    fireEvent.keyDown(linkDimension.firstChild, { key: 'ArrowDown' });
-    fireEvent.click(screen.getByText('[Remove dimension link]'));
+    const removeButton = screen.getByLabelText('Remove default.dimension1');
+    fireEvent.click(removeButton);
     fireEvent.click(getByText('Save'));
 
     // Expect unlinkDimension to be called
@@ -115,7 +114,7 @@ describe('<LinkDimensionPopover />', () => {
       <DJClientContext.Provider value={mockDjClient}>
         <LinkDimensionPopover
           column={column}
-          referencedDimensionNode={'default.dimension1'}
+          dimensionNodes={['default.dimension1']}
           node={node}
           options={options}
           onSubmit={onSubmitMock}
@@ -129,7 +128,7 @@ describe('<LinkDimensionPopover />', () => {
     // Click on a dimension and save
     const linkDimension = getByTestId('link-dimension');
     fireEvent.keyDown(linkDimension.firstChild, { key: 'ArrowDown' });
-    fireEvent.click(screen.getByText('Dimension 1'));
+    fireEvent.click(screen.getByText('Dimension 2'));
     fireEvent.click(getByText('Save'));
 
     // Expect linkDimension to be called
@@ -137,7 +136,7 @@ describe('<LinkDimensionPopover />', () => {
       expect(mockDjClient.DataJunctionAPI.linkDimension).toHaveBeenCalledWith(
         'default.node1',
         'column1',
-        'default.dimension1',
+        'default.dimension2',
       );
       expect(
         getByText('Failed due to nonexistent dimension'),
@@ -145,8 +144,8 @@ describe('<LinkDimensionPopover />', () => {
     });
 
     // Click on the 'Remove' option and save
-    fireEvent.keyDown(linkDimension.firstChild, { key: 'ArrowDown' });
-    fireEvent.click(screen.getByText('[Remove Dimension]'));
+    const removeButton = screen.getByLabelText('Remove default.dimension1');
+    fireEvent.click(removeButton);
     fireEvent.click(getByText('Save'));
 
     // Expect unlinkDimension to be called

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

@@ -657,10 +657,6 @@ describe('<NodePage />', () => {
         expect(djClient.DataJunctionAPI.materializations).toHaveBeenCalledWith(
           mocks.mockTransformNode.name,
         );
-
-        expect(
-          screen.getByRole('table', { name: 'Materializations' }),
-        ).toMatchSnapshot();
       },
       { timeout: 3000 },
     );

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

@@ -17,304 +17,3 @@ HTMLCollection [
   </code>,
 ]
 `;
-
-exports[`<NodePage /> renders the NodeMaterialization tab with materializations correctly 1`] = `
-<div
-  aria-label="Materializations"
-  class="table-vertical"
-  role="table"
->
-  <div>
-    <h2>
-      Materializations
-    </h2>
-    <button
-      aria-label="AddMaterialization"
-      class="edit_button"
-      tabindex="0"
-    >
-      <span
-        class="add_node"
-      >
-        + Add Materialization
-      </span>
-    </button>
-    <div
-      class="fade modal-backdrop in"
-      style="display: none;"
-    />
-    <div
-      aria-label="client-code"
-      class="centerPopover"
-      role="dialog"
-      style="display: none; width: 50%;"
-    >
-      <form
-        action="#"
-      >
-        <h2>
-          Configure Materialization
-        </h2>
-        <input
-          hidden=""
-          name="node"
-          readonly=""
-          value="default.repair_order_transform"
-        />
-        <span
-          data-testid="edit-partition"
-        >
-          <label
-            for="strategy"
-          >
-            Strategy
-          </label>
-          <select
-            id="strategy"
-            name="strategy"
-          >
-            <option
-              value="full"
-            >
-              Full
-            </option>
-            <option
-              value="incremental_time"
-            >
-              Incremental Time
-            </option>
-          </select>
-        </span>
-        <br />
-        <br />
-        <label
-          for="schedule"
-        >
-          Schedule
-        </label>
-        <input
-          default=""
-          id="schedule"
-          name="schedule"
-          placeholder="Cron"
-          type="text"
-          value="@daily"
-        />
-        <br />
-        <br />
-        <div
-          class="DescriptionInput"
-        >
-          <label
-            for="lookback_window"
-          >
-            Lookback Window
-          </label>
-          <input
-            default=""
-            id="lookback_window"
-            name="lookback_window"
-            placeholder="1 DAY"
-            type="text"
-            value="1 DAY"
-          />
-        </div>
-        <br />
-        <div
-          class="DescriptionInput"
-        >
-          <details>
-            <summary>
-              <label
-                for="SparkConfig"
-                style="display: inline-block;"
-              >
-                Spark Config
-              </label>
-            </summary>
-            <textarea
-              id="SparkConfig"
-              name="spark_config"
-              style="display: none;"
-              type="textarea"
-            >
-              [object Object]
-            </textarea>
-            <div
-              class="relative flex bg-[#282a36]"
-              role="button"
-              tabindex="0"
-            >
-              <div
-                class="cm-theme-light"
-                id="spark_config"
-                name="spark_config"
-                options="[object Object]"
-                style="margin: 0px 0px 23px 0px; flex: 1; font-size: 150%; text-align: left;"
-              >
-                <div
-                  class="cm-editor ͼ1 ͼ2 ͼ4 ͼ1g ͼ15"
-                >
-                  <div
-                    aria-live="polite"
-                    style="position: absolute; top: -10000px;"
-                  />
-                  <div
-                    class="cm-scroller"
-                    tabindex="-1"
-                  >
-                    <div
-                      aria-hidden="true"
-                      class="cm-gutters"
-                      style="min-height: 56px; position: sticky;"
-                    >
-                      <div
-                        class="cm-gutter cm-lineNumbers"
-                      >
-                        <div
-                          class="cm-gutterElement"
-                          style="height: 0px; visibility: hidden; pointer-events: none;"
-                        >
-                          9
-                        </div>
-                        <div
-                          class="cm-gutterElement cm-activeLineGutter"
-                          style="height: 14px;"
-                        >
-                          1
-                        </div>
-                        <div
-                          class="cm-gutterElement"
-                          style="height: 14px;"
-                        >
-                          2
-                        </div>
-                        <div
-                          class="cm-gutterElement"
-                          style="height: 14px;"
-                        >
-                          3
-                        </div>
-                        <div
-                          class="cm-gutterElement"
-                          style="height: 14px;"
-                        >
-                          4
-                        </div>
-                      </div>
-                      <div
-                        class="cm-gutter cm-foldGutter"
-                      >
-                        <div
-                          class="cm-gutterElement"
-                          style="height: 0px; visibility: hidden; pointer-events: none;"
-                        >
-                          <span
-                            title="Unfold line"
-                          >
-                            ›
-                          </span>
-                        </div>
-                        <div
-                          class="cm-gutterElement cm-activeLineGutter"
-                          style="height: 14px;"
-                        >
-                          <span
-                            title="Fold line"
-                          >
-                            ⌄
-                          </span>
-                        </div>
-                      </div>
-                    </div>
-                    <div
-                      aria-autocomplete="list"
-                      aria-multiline="true"
-                      autocapitalize="off"
-                      autocorrect="off"
-                      class="cm-content"
-                      contenteditable="true"
-                      data-language="json"
-                      role="textbox"
-                      spellcheck="false"
-                      style="tab-size: 4"
-                      translate="no"
-                    >
-                      <div
-                        class="cm-activeLine cm-line"
-                      >
-                        {
-                      </div>
-                      <div
-                        class="cm-line"
-                      >
-                            "spark.executor.memory": 
-                        <span
-                          class="ͼe"
-                        >
-                          "16g"
-                        </span>
-                        ,
-                      </div>
-                      <div
-                        class="cm-line"
-                      >
-                            "spark.memory.fraction": 
-                        <span
-                          class="ͼe"
-                        >
-                          "0.3"
-                        </span>
-                      </div>
-                      <div
-                        class="cm-line"
-                      >
-                        }
-                      </div>
-                    </div>
-                    <div
-                      aria-hidden="true"
-                      class="cm-selectionLayer"
-                    />
-                    <div
-                      aria-hidden="true"
-                      class="cm-cursorLayer"
-                      style="animation-duration: 1200ms;"
-                    />
-                  </div>
-                </div>
-              </div>
-            </div>
-          </details>
-           
-        </div>
-        <button
-          aria-hidden="false"
-          aria-label="SaveEditColumn"
-          class="add_node"
-          type="submit"
-        >
-          Save
-        </button>
-      </form>
-    </div>
-    <div
-      class="message alert"
-      style="margin-top: 10px;"
-    >
-      No materialization workflows configured for this node.
-    </div>
-  </div>
-  <div>
-    <h2>
-      Materialized Datasets
-    </h2>
-    <div
-      class="message alert"
-      style="margin-top: 10px;"
-    >
-      No materialized datasets available for this node.
-    </div>
-  </div>
-</div>
-`;

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

@@ -12,6 +12,7 @@ import DJClientContext from '../../providers/djclient';
 import NodeValidateTab from './NodeValidateTab';
 import NodeMaterializationTab from './NodeMaterializationTab';
 import ClientCodePopover from './ClientCodePopover';
+import WatchButton from './WatchNodeButton';
 import NodesWithDimension from './NodesWithDimension';
 import NodeColumnLineage from './NodeLineageTab';
 import EditIcon from '../../icons/EditIcon';
@@ -150,44 +151,66 @@ export function NodePage() {
     case 'dependencies':
       tabToDisplay = <NodeDependenciesTab node={node} djClient={djClient} />;
       break;
-    default: /* istanbul ignore next */
+    default:
+      /* istanbul ignore next */
       tabToDisplay = <NodeInfoTab node={node} />;
   }
+
+  const NodeButtons = () => {
+    return (
+      <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
+        <button
+          className="button-3"
+          onClick={() => navigate(`/nodes/${node?.name}/edit`)}
+        >
+          <EditIcon /> Edit
+        </button>
+
+        <WatchButton node={node} />
+
+        <ClientCodePopover code={node?.createNodeClientCode} />
+        {node?.type === 'cube' && <NotebookDownload node={node} />}
+      </div>
+    );
+  };
+
   // @ts-ignore
   return (
     <div className="node__header">
       <NamespaceHeader namespace={name.split('.').slice(0, -1).join('.')} />
       <div className="card">
         {node?.message === undefined ? (
-          <div className="card-header">
-            <h3
-              className="card-title align-items-start flex-column"
-              style={{ display: 'inline-block' }}
+          <div className="card-header" style={{}}>
+            <div
+              style={{
+                display: 'flex',
+                flexDirection: 'row',
+                justifyContent: 'space-between',
+              }}
             >
-              <span
-                className="card-label fw-bold text-gray-800"
-                role="dialog"
-                aria-hidden="false"
-                aria-label="DisplayName"
+              <h3
+                className="card-title align-items-start flex-column"
+                style={{ display: 'inline-block' }}
               >
-                {node?.display_name}{' '}
                 <span
-                  className={'node_type__' + node?.type + ' badge node_type'}
+                  className="card-label fw-bold text-gray-800"
                   role="dialog"
                   aria-hidden="false"
-                  aria-label="NodeType"
+                  aria-label="DisplayName"
                 >
-                  {node?.type}
+                  {node?.display_name}{' '}
+                  <span
+                    className={'node_type__' + node?.type + ' badge node_type'}
+                    role="dialog"
+                    aria-hidden="false"
+                    aria-label="NodeType"
+                  >
+                    {node?.type}
+                  </span>
                 </span>
-              </span>
-            </h3>
-            <a
-              href={`/nodes/${node?.name}/edit`}
-              style={{ marginLeft: '0.5rem' }}
-            >
-              <EditIcon />
-            </a>
-            <ClientCodePopover code={node?.createNodeClientCode} />
+              </h3>
+              <NodeButtons />
+            </div>
             <div>
               <a
                 href={'/nodes/' + node?.name}
@@ -204,7 +227,6 @@ export function NodePage() {
               >
                 {node?.version}
               </span>
-              {node?.type === 'cube' ? <NotebookDownload node={node} /> : <></>}
             </div>
             <div className="align-items-center row">
               {tabsList(node).map(buildTabs)}

package/src/app/services/DJService.js

@@ -1137,4 +1137,61 @@ export const DataJunctionAPI = {
       })
     ).json();
   },
+  // GET /notifications/
+  getNotificationPreferences: async function (params = {}) {
+    const url = new URL(`${DJ_URL}/notifications/`);
+    Object.entries(params).forEach(([key, value]) =>
+      url.searchParams.append(key, value),
+    );
+
+    return await (
+      await fetch(url, {
+        credentials: 'include',
+      })
+    ).json();
+  },
+
+  // POST /notifications/subscribe
+  subscribeToNotifications: async function ({
+    entity_type,
+    entity_name,
+    activity_types,
+    alert_types,
+  }) {
+    const response = await fetch(`${DJ_URL}/notifications/subscribe`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      credentials: 'include',
+      body: JSON.stringify({
+        entity_type,
+        entity_name,
+        activity_types,
+        alert_types,
+      }),
+    });
+
+    return {
+      status: response.status,
+      json: await response.json(),
+    };
+  },
+
+  // DELETE /notifications/unsubscribe
+  unsubscribeFromNotifications: async function ({ entity_type, entity_name }) {
+    const url = new URL(`${DJ_URL}/notifications/unsubscribe`);
+    url.searchParams.append('entity_type', entity_type);
+    url.searchParams.append('entity_name', entity_name);
+
+    const response = await fetch(url, {
+      method: 'DELETE',
+      credentials: 'include',
+    });
+
+    return {
+      status: response.status,
+      json: await response.json(),
+    };
+  },
 };

package/src/styles/index.css

@@ -939,7 +939,7 @@ pre {
 }
 
 .centerPopover {
-  position: absolute !important;
+  position: fixed !important;
   top: 1%;
   left: 25%;
 

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

@@ -1,49 +0,0 @@
-import React from 'react';
-import { render, fireEvent, screen, waitFor } from '@testing-library/react';
-import ClientCodePopover from '../ClientCodePopover';
-import userEvent from '@testing-library/user-event';
-
-describe('<ClientCodePopover />', () => {
-  const defaultProps = {
-    code: "print('Hello, World!')",
-  };
-
-  it('toggles the code popover visibility when the button is clicked', async () => {
-    render(<ClientCodePopover {...defaultProps} />);
-
-    const button = screen.getByRole('button', 'code-button');
-
-    // Initially, the popover should be hidden
-    expect(screen.getByRole('dialog', { hidden: true })).toHaveStyle(
-      'display: none',
-    );
-
-    // Clicking the button should display the popover
-    fireEvent.click(button);
-    expect(screen.getByRole('dialog', { hidden: true })).not.toHaveStyle(
-      'display: none',
-    );
-
-    // Clicking the button again should hide the popover
-    fireEvent.click(button);
-    expect(screen.getByRole('dialog', { hidden: true })).toHaveStyle(
-      'display: none',
-    );
-
-    // Trigger onClose by pressing <escape>
-    userEvent.keyboard('{Escape}');
-    // fireEvent.click(screen.getByTestId('body').firstChild());
-    await waitFor(() => {
-      expect(screen.getByRole('dialog', { hidden: true })).toHaveStyle(
-        'display: none',
-      );
-    });
-  });
-
-  it('renders the provided code within the SyntaxHighlighter', () => {
-    render(<ClientCodePopover {...defaultProps} />);
-    expect(screen.getByRole('dialog', { hidden: true })).toHaveTextContent(
-      defaultProps.code,
-    );
-  });
-});