Add disable preview toggle in settings panel

package/kedro_viz/api/rest/requests.py

@@ -10,3 +10,9 @@ class DeployerConfiguration(BaseModel):
     is_all_previews_enabled: bool = False
     endpoint: str
     bucket_name: str
+
+
+class UserPreference(BaseModel):
+    """User preferences for Kedro Viz."""
+
+    showDatasetPreviews: bool

package/kedro_viz/api/rest/router.py

@@ -4,15 +4,16 @@
 import logging
 from typing import List
 
-from fastapi import APIRouter
+from fastapi import APIRouter, HTTPException
 from fastapi.responses import JSONResponse
 
-from kedro_viz.api.rest.requests import DeployerConfiguration
+from kedro_viz.api.rest.requests import DeployerConfiguration, UserPreference
 from kedro_viz.constants import PACKAGE_REQUIREMENTS
 from kedro_viz.integrations.deployment.deployer_factory import DeployerFactory
 
 from .responses import (
     APIErrorMessage,
+    DataNodeMetadata,
     GraphAPIResponse,
     NodeMetadataAPIResponse,
     PackageCompatibilityAPIResponse,
@@ -49,6 +50,18 @@ async def get_single_node_metadata(node_id: str):
     return get_node_metadata_response(node_id)
 
 
+@router.post("/preferences")
+async def update_preferences(preferences: UserPreference):
+    try:
+        DataNodeMetadata.set_is_all_previews_enabled(preferences.showDatasetPreviews)
+        return {"message": "Preferences updated successfully"}
+    except Exception as exception:
+        logger.error("Failed to update preferences: %s", str(exception))
+        raise HTTPException(
+            status_code=500, detail="Failed to update preferences"
+        ) from exception
+
+
 @router.get(
     "/pipelines/{registered_pipeline_id}",
     response_model=GraphAPIResponse,

package/tests/test_api/test_rest/test_router.py

@@ -86,3 +86,24 @@ def test_get_package_compatibilities(
 
     assert response.status_code == expected_status_code
     assert response.json() == expected_response
+
+
+def test_update_preferences_success(client, mocker):
+    mocker.patch(
+        "kedro_viz.api.rest.responses.DataNodeMetadata.set_is_all_previews_enabled"
+    )
+    response = client.post("api/preferences", json={"showDatasetPreviews": True})
+
+    assert response.status_code == 200
+    assert response.json() == {"message": "Preferences updated successfully"}
+
+
+def test_update_preferences_failure(client, mocker):
+    mocker.patch(
+        "kedro_viz.api.rest.responses.DataNodeMetadata.set_is_all_previews_enabled",
+        side_effect=Exception("Test Exception"),
+    )
+    response = client.post("api/preferences", json={"showDatasetPreviews": True})
+
+    assert response.status_code == 500
+    assert response.json() == {"detail": "Failed to update preferences"}

src/actions/index.js

@@ -141,6 +141,19 @@ export function toggleShowFeatureHints(showFeatureHints) {
   };
 }
 
+export const TOGGLE_SHOW_DATASET_PREVIEWS = 'TOGGLE_SHOW_DATASET_PREVIEWS';
+
+/**
+ * Toggle whether to show dataset previews on/off
+ * @param {Boolean} showDatasetPreviews True if dataset previews are to be shown
+ */
+export function toggleShowDatasetPreviews(showDatasetPreviews) {
+  return {
+    type: TOGGLE_SHOW_DATASET_PREVIEWS,
+    showDatasetPreviews,
+  };
+}
+
 export const TOGGLE_SIDEBAR = 'TOGGLE_SIDEBAR';
 
 /**

src/components/settings-modal/settings-modal.js

@@ -5,6 +5,7 @@ import {
   toggleShowFeatureHints,
   toggleIsPrettyName,
   toggleSettingsModal,
+  toggleShowDatasetPreviews,
 } from '../../actions';
 import { getFlagsState } from '../../utils/flags';
 import SettingsModalRow from './settings-modal-row';
@@ -27,10 +28,12 @@ const SettingsModal = ({
   showFeatureHints,
   isOutdated,
   isPrettyName,
+  showDatasetPreviews,
   latestVersion,
   onToggleFlag,
   onToggleShowFeatureHints,
   onToggleIsPrettyName,
+  onToggleShowDatasetPreviews,
   showSettingsModal,
   visible,
 }) => {
@@ -40,12 +43,18 @@ const SettingsModal = ({
   const [isPrettyNameValue, setIsPrettyName] = useState(isPrettyName);
   const [showFeatureHintsValue, setShowFeatureHintsValue] =
     useState(showFeatureHints);
+  const [showDatasetPreviewsValue, setShowDatasetPreviewsValue] =
+    useState(showDatasetPreviews);
   const [toggleFlags, setToggleFlags] = useState(flags);
 
   useEffect(() => {
     setShowFeatureHintsValue(showFeatureHints);
   }, [showFeatureHints]);
 
+  useEffect(() => {
+    setShowDatasetPreviewsValue(showDatasetPreviews);
+  }, [showDatasetPreviews]);
+
   useEffect(() => {
     let modalTimeout, resetTimeout;
 
@@ -65,6 +74,7 @@ const SettingsModal = ({
 
         onToggleIsPrettyName(isPrettyNameValue);
         onToggleShowFeatureHints(showFeatureHintsValue);
+        onToggleShowDatasetPreviews(showDatasetPreviewsValue);
         setHasNotInteracted(true);
         setHasClickApplyAndClose(false);
 
@@ -80,19 +90,49 @@ const SettingsModal = ({
     hasClickedApplyAndClose,
     showFeatureHintsValue,
     isPrettyNameValue,
+    showDatasetPreviewsValue,
     onToggleFlag,
     onToggleShowFeatureHints,
     onToggleIsPrettyName,
+    onToggleShowDatasetPreviews,
     showSettingsModal,
     toggleFlags,
   ]);
 
+  useEffect(() => {
+    const updatePreferences = async () => {
+      try {
+        const response = await fetch('/api/preferences', {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify({
+            showDatasetPreviews: showDatasetPreviewsValue,
+          }),
+        });
+
+        if (!response.ok) {
+          throw new Error('Failed to update preferences');
+        }
+
+        const result = await response.json();
+        console.log('Preferences updated successfully:', result);
+      } catch (error) {
+        console.error('Error updating preferences:', error);
+      }
+    };
+
+    updatePreferences();
+  }, [showDatasetPreviewsValue]);
+
   const resetStateCloseModal = () => {
     showSettingsModal(false);
     setHasNotInteracted(true);
     setToggleFlags(flags);
     setIsPrettyName(isPrettyName);
-    setShowFeatureHintsValue(showFeatureHintsValue);
+    setShowFeatureHintsValue(showFeatureHints);
+    setShowDatasetPreviewsValue(showDatasetPreviews);
   };
 
   return (
@@ -130,6 +170,16 @@ const SettingsModal = ({
                 }
               }}
             />
+            <SettingsModalRow
+              id="showDatasetPreviews"
+              name={settingsConfig['showDatasetPreviews'].name}
+              toggleValue={showDatasetPreviewsValue}
+              description={settingsConfig['showDatasetPreviews'].description}
+              onToggleChange={(event) => {
+                setShowDatasetPreviewsValue(event.target.checked);
+                setHasNotInteracted(false);
+              }}
+            />
             {flagData.map(({ name, value, description }) => (
               <SettingsModalRow
                 description={description}
@@ -209,6 +259,7 @@ export const mapStateToProps = (state) => ({
   flags: state.flags,
   showFeatureHints: state.showFeatureHints,
   isPrettyName: state.isPrettyName,
+  showDatasetPreviews: state.showDatasetPreviews,
   visible: state.visible,
 });
 
@@ -225,6 +276,9 @@ export const mapDispatchToProps = (dispatch) => ({
   onToggleShowFeatureHints: (value) => {
     dispatch(toggleShowFeatureHints(value));
   },
+  onToggleShowDatasetPreviews: (value) => {
+    dispatch(toggleShowDatasetPreviews(value));
+  },
 });
 
 export default connect(mapStateToProps, mapDispatchToProps)(SettingsModal);

src/components/settings-modal/settings-modal.test.js

@@ -46,6 +46,7 @@ describe('SettingsModal', () => {
         exportModal: expect.any(Boolean),
         settingsModal: expect.any(Boolean),
       }),
+      showDatasetPreviews: expect.any(Boolean),
       flags: expect.any(Object),
       isPrettyName: expect.any(Boolean),
       showFeatureHints: expect.any(Boolean),
@@ -74,5 +75,11 @@ describe('SettingsModal', () => {
       type: 'TOGGLE_IS_PRETTY_NAME',
       isPrettyName: false,
     });
+
+    mapDispatchToProps(dispatch).onToggleShowDatasetPreviews(false);
+    expect(dispatch.mock.calls[3][0]).toEqual({
+      type: 'TOGGLE_SHOW_DATASET_PREVIEWS',
+      showDatasetPreviews: false,
+    });
   });
 });

src/config.js

@@ -77,6 +77,11 @@ export const settings = {
     description: 'Enable or disable all new feature hints in the interface.',
     default: true,
   },
+  showDatasetPreviews: {
+    name: 'Dataset previews',
+    description: 'Display preview data for all datasets.',
+    default: true,
+  },
 };
 
 // Sidebar groups is an ordered map of { id: label }

src/reducers/index.js

@@ -13,6 +13,7 @@ import visible from './visible';
 import {
   RESET_DATA,
   TOGGLE_SHOW_FEATURE_HINTS,
+  TOGGLE_SHOW_DATASET_PREVIEWS,
   TOGGLE_HOVERED_FOCUS_MODE,
   TOGGLE_IGNORE_LARGE_WARNING,
   TOGGLE_IS_PRETTY_NAME,
@@ -81,6 +82,11 @@ const combinedReducer = combineReducers({
     TOGGLE_SHOW_FEATURE_HINTS,
     'showFeatureHints'
   ),
+  showDatasetPreviews: createReducer(
+    true,
+    TOGGLE_SHOW_DATASET_PREVIEWS,
+    'showDatasetPreviews'
+  ),
   hoveredParameters: createReducer(
     false,
     TOGGLE_PARAMETERS_HOVERED,

src/store/initial-state.js

@@ -24,6 +24,7 @@ export const createInitialState = () => ({
   expandAllPipelines: false,
   isPrettyName: settings.isPrettyName.default,
   showFeatureHints: settings.showFeatureHints.default,
+  showDatasetPreviews: settings.showDatasetPreviews.default,
   ignoreLargeWarning: false,
   loading: {
     graph: false,

src/store/store.js

@@ -57,6 +57,7 @@ const saveStateToLocalStorage = (state) => {
     theme: state.theme,
     isPrettyName: state.isPrettyName,
     showFeatureHints: state.showFeatureHints,
+    showDatasetPreviews: state.showDatasetPreviews,
     flags: state.flags,
     expandAllPipelines: state.expandAllPipelines,
   });