Add new endpoint to fetch initial showDatasetsPreviews value

Signed-off-by: Sajid Alam <[email protected]>

package/kedro_viz/api/rest/router.py

@@ -65,6 +65,21 @@ async def update_preferences(preferences: UserPreference):
         )
 
 
+@router.get("/preferences", response_model=UserPreference)
+async def get_preferences():
+    try:
+        show_dataset_previews = DataNodeMetadata.is_all_previews_enabled
+        return JSONResponse(
+            status_code=200, content={"showDatasetPreviews": show_dataset_previews}
+        )
+    except Exception as exception:
+        logger.error("Failed to fetch preferences: %s", str(exception))
+        return JSONResponse(
+            status_code=500,
+            content={"message": f"Failed to fetch preferences: {str(exception)}"},
+        )
+
+
 @router.get(
     "/pipelines/{registered_pipeline_id}",
     response_model=GraphAPIResponse,

src/config.js

@@ -1,4 +1,5 @@
 import { sanitizedPathname } from './utils';
+import { fetchPreferences } from './utils/preferences-api';
 
 export const localStorageName = 'KedroViz';
 export const localStorageFlowchartLink = 'KedroViz-link-to-flowchart';
@@ -84,6 +85,16 @@ export const settings = {
   },
 };
 
+// Fetch preferences from the backend and update settings
+(async () => {
+  try {
+    const preferences = await fetchPreferences();
+    settings.showDatasetPreviews.default = preferences.showDatasetPreviews;
+  } catch (error) {
+    console.error('Error fetching initial preferences:', error);
+  }
+})();
+
 // Sidebar groups is an ordered map of { id: label }
 export const sidebarGroups = {
   elementType: 'Element types',

src/utils/preferences-api.js

@@ -30,3 +30,27 @@ export const updatePreferences = async (showDatasetPreviews) => {
     throw error;
   }
 };
+
+/**
+ * Fetch preferences from the backend.
+ * @return {Promise<Object>} Preferences object containing showDatasetPreviews.
+ */
+export const fetchPreferences = async () => {
+  try {
+    const response = await fetch('/api/preferences', {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    });
+
+    if (!response.ok) {
+      throw new Error('Failed to fetch preferences');
+    }
+
+    return await response.json();
+  } catch (error) {
+    console.error('Error fetching preferences:', error);
+    throw error;
+  }
+};