frontend: components: redux: Add feature to keep resource maps expanded by default

Author: mudit06mah

frontend/src/components/App/Settings/Settings.tsx

@@ -44,11 +44,13 @@ export default function Settings() {
   const storedTimezone = settingsObj.timezone;
   const storedRowsPerPageOptions = settingsObj.tableRowsPerPageOptions;
   const storedSortSidebar = settingsObj.sidebarSortAlphabetically;
+  const expandLargeGraph = settingsObj.expandLargeGraph;
   const storedUseEvict = settingsObj.useEvict;
   const [selectedTimezone, setSelectedTimezone] = useState<string>(
     storedTimezone || Intl.DateTimeFormat().resolvedOptions().timeZone
   );
   const [sortSidebar, setSortSidebar] = useState<boolean>(storedSortSidebar);
+  const [expandGraph, setExpandGraph] = useState<boolean>(expandLargeGraph);
   const [useEvict, setUseEvict] = useState<boolean>(storedUseEvict);
   const dispatch = useDispatch();
   const themeName = useTypedSelector(state => state.theme.name);
@@ -78,10 +80,19 @@ export default function Settings() {
     );
   }, [useEvict]);
 
+  useEffect(() => {
+    dispatch(
+      setAppSettings({
+        expandLargeGraph: expandGraph,
+      })
+    );
+  }, [expandGraph]);
+
   const sidebarLabelID = 'sort-sidebar-label';
   const evictLabelID = 'use-evict-label';
   const tableRowsLabelID = 'rows-per-page-label';
   const timezoneLabelID = 'timezone-label';
+  const expandGraphID = 'expand-graph-label';
 
   return (
     <SectionBox
@@ -161,6 +172,20 @@ export default function Settings() {
             ),
             nameID: evictLabelID,
           },
+          {
+            name: t('translation|Keep Large Graph Groups Expanded'),
+            value: (
+              <Switch
+                color="primary"
+                checked={expandGraph}
+                onChange={e => setExpandGraph(e.target.checked)}
+                inputProps={{
+                  'aria-labelledby': expandGraphID,
+                }}
+              />
+            ),
+            nameID: expandGraphID,
+          },
         ]}
       />
       <Box

frontend/src/components/App/Settings/__snapshots__/Settings.General.stories.storyshot

@@ -382,13 +382,13 @@
             </span>
           </dd>
           <dt
-            class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-3 MuiGrid-grid-md-2 css-1hrqr1q-MuiGrid-root"
+            class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-3 MuiGrid-grid-md-2 css-9i4s51-MuiGrid-root"
             id="use-evict-label"
           >
             Use evict for pod deletion
           </dt>
           <dd
-            class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-9 MuiGrid-grid-md-10 css-ui3itl-MuiGrid-root"
+            class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-9 MuiGrid-grid-md-10 css-1dbzfsd-MuiGrid-root"
           >
             <span
               class="MuiSwitch-root MuiSwitch-sizeMedium css-julti5-MuiSwitch-root"
@@ -414,6 +414,38 @@
               />
             </span>
           </dd>
+          <dt
+            class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-3 MuiGrid-grid-md-2 css-1hrqr1q-MuiGrid-root"
+            id="expand-graph-label"
+          >
+            Keep Large Graph Groups Expanded
+          </dt>
+          <dd
+            class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-9 MuiGrid-grid-md-10 css-ui3itl-MuiGrid-root"
+          >
+            <span
+              class="MuiSwitch-root MuiSwitch-sizeMedium css-julti5-MuiSwitch-root"
+            >
+              <span
+                class="MuiButtonBase-root MuiSwitch-switchBase MuiSwitch-colorPrimary PrivateSwitchBase-root MuiSwitch-switchBase MuiSwitch-colorPrimary css-1emuodk-MuiButtonBase-root-MuiSwitch-switchBase"
+              >
+                <input
+                  aria-labelledby="expand-graph-label"
+                  class="PrivateSwitchBase-input MuiSwitch-input css-1m9pwf3"
+                  type="checkbox"
+                />
+                <span
+                  class="MuiSwitch-thumb css-jsexje-MuiSwitch-thumb"
+                />
+                <span
+                  class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+                />
+              </span>
+              <span
+                class="MuiSwitch-track css-1yjjitx-MuiSwitch-track"
+              />
+            </span>
+          </dd>
         </dl>
         <div
           class="MuiBox-root css-1k57ox4"

frontend/src/components/resourceMap/GraphView.tsx

@@ -168,6 +168,9 @@ function GraphViewContent({
   // Expand all groups state
   const [expandAll, setExpandAll] = useState(false);
 
+  // Expand by Default
+  const expandLargeGraph = useTypedSelector(state => state.config.settings.expandLargeGraph);
+
   // Load source data
   const { nodes, edges, selectedSources, sourceData, isLoading, toggleSelection } = useSources();
 
@@ -198,11 +201,18 @@ function GraphViewContent({
       namespaces: allNamespaces ?? [],
       k8sNodes: allNodes ?? [],
     });
-
-    const visibleGraph = collapseGraph(graph, { selectedNodeId, expandAll });
+    const visibleGraph = collapseGraph(graph, { selectedNodeId, expandAll, expandLargeGraph });
 
     return { visibleGraph, fullGraph: graph };
-  }, [filteredGraph, groupBy, selectedNodeId, expandAll, allNamespaces]);
+  }, [
+    filteredGraph,
+    groupBy,
+    selectedNodeId,
+    expandAll,
+    allNamespaces,
+    allNodes,
+    expandLargeGraph,
+  ]);
 
   const viewport = useGraphViewport();
 

frontend/src/components/resourceMap/graph/graphGrouping.tsx

@@ -395,11 +395,16 @@ export function findGroupContaining(
  * @param graph Single graph node
  * @param params.selectedNodeId Graph node that is selected
  * @param params.expandAll Display all the children within all groups
+ * @param params.expandLargeGraph When true, Keeps Large groups expanded
  * @returns Collapsed graph
  */
 export function collapseGraph(
   graph: GraphNode,
-  { selectedNodeId = 'root', expandAll }: { selectedNodeId?: string; expandAll: boolean }
+  {
+    selectedNodeId = 'root',
+    expandAll,
+    expandLargeGraph = true,
+  }: { selectedNodeId?: string; expandAll: boolean; expandLargeGraph?: boolean }
 ) {
   let root = { ...graph };
   let selectedGroup: GraphNode | undefined;
@@ -418,8 +423,9 @@ export function collapseGraph(
     const isBig = (group.nodes?.length ?? 0) > 10 || (group.edges?.length ?? 0) > 0;
     const isSelectedGroup = selectedGroup?.id === group.id;
     const isRoot = group.id === 'root';
-
-    const collapsed = !expandAll && !isRoot && !isSelectedGroup && isBig;
+    const isPrimaryGroup = graph.nodes?.some(n => n.id === group.id);
+    const collapsed =
+      !expandAll && !isRoot && !isSelectedGroup && isBig && (!expandLargeGraph || !isPrimaryGroup);
 
     return {
       ...group,

frontend/src/i18n/locales/de/translation.json

@@ -157,6 +157,7 @@
   "Timezone to display for dates": "Zeitzone",
   "Sort sidebar items alphabetically": "",
   "Use evict for pod deletion": "",
+  "Keep Large Graph Groups Expanded": "",
   "Theme": "Design",
   "Keyboard Shortcuts": "",
   "Configure keyboard shortcuts for quick access to various parts of the application.": "",

frontend/src/i18n/locales/en/translation.json

@@ -157,6 +157,7 @@
   "Timezone to display for dates": "Timezone to display for dates",
   "Sort sidebar items alphabetically": "Sort sidebar items alphabetically",
   "Use evict for pod deletion": "Use evict for pod deletion",
+  "Keep Large Graph Groups Expanded": "Keep Large Graph Groups Expanded",
   "Theme": "Theme",
   "Keyboard Shortcuts": "Keyboard Shortcuts",
   "Configure keyboard shortcuts for quick access to various parts of the application.": "Configure keyboard shortcuts for quick access to various parts of the application.",

frontend/src/i18n/locales/es/translation.json

@@ -157,6 +157,7 @@
   "Timezone to display for dates": "Huso horario para mostrar en fechas",
   "Sort sidebar items alphabetically": "",
   "Use evict for pod deletion": "",
+  "Keep Large Graph Groups Expanded": "",
   "Theme": "Tema",
   "Keyboard Shortcuts": "",
   "Configure keyboard shortcuts for quick access to various parts of the application.": "",

frontend/src/i18n/locales/fr/translation.json

@@ -157,6 +157,7 @@
   "Timezone to display for dates": "Fuseau horaire à afficher pour les dates",
   "Sort sidebar items alphabetically": "Trier les éléments de la barre latérale par ordre alphabétique",
   "Use evict for pod deletion": "Utiliser l'éviction pour la suppression de pods",
+  "Keep Large Graph Groups Expanded": "",
   "Theme": "Thème",
   "Keyboard Shortcuts": "",
   "Configure keyboard shortcuts for quick access to various parts of the application.": "",

frontend/src/i18n/locales/hi/translation.json

@@ -157,6 +157,7 @@
   "Timezone to display for dates": "तिथियों के लिए प्रदर्शित करने का समय क्षेत्र",
   "Sort sidebar items alphabetically": "साइडबार आइटमों को वर्णानुक्रम में सॉर्ट करें",
   "Use evict for pod deletion": "Pod हटाने के लिए निष्कासन का उपयोग करें",
+  "Keep Large Graph Groups Expanded": "",
   "Theme": "थीम",
   "Keyboard Shortcuts": "",
   "Configure keyboard shortcuts for quick access to various parts of the application.": "",

frontend/src/i18n/locales/it/translation.json

@@ -157,6 +157,7 @@
   "Timezone to display for dates": "Fuso orario per la visualizzazione delle date",
   "Sort sidebar items alphabetically": "",
   "Use evict for pod deletion": "",
+  "Keep Large Graph Groups Expanded": "",
   "Theme": "Tema",
   "Keyboard Shortcuts": "",
   "Configure keyboard shortcuts for quick access to various parts of the application.": "",