revers hide hypernode to show hypernode (for better consistance in settings names)

Author: william-schlegel

packages/app-builder/src/components/Graph/GraphImpl.tsx

@@ -56,7 +56,7 @@ function personRefFromNodeId(nodes: GraphRfNode[], key: string): GraphObjectRef
 export function GraphImpl({ data, dataModel }: GraphImplProps) {
   const { t } = useTranslation(graphI18n);
   const theme = useTheme();
-  const { showEdgeLabels, setShowEdgeLabels, hideHypernodes } = useGraphViewSettings();
+  const { showEdgeLabels, setShowEdgeLabels, showHypernodes } = useGraphViewSettings();
   const selectedObject = useSelectedObject();
   const setSelectedObject = useSetSelectedObject();
   const { hiddenNodeIds } = useGraphStructure();
@@ -75,7 +75,7 @@ export function GraphImpl({ data, dataModel }: GraphImplProps) {
   // this component and never see the node arrays.
   const graphStats = useMemo(() => {
     const countWith = (hidden: Set<string>) =>
-      applyVisibilityFilters(flatGraph.nodes, flatGraph.edges, hidden, flatGraph.startKey, hideHypernodes).nodes.length;
+      applyVisibilityFilters(flatGraph.nodes, flatGraph.edges, hidden, flatGraph.startKey, showHypernodes).nodes.length;
 
     const unhiddenCount = hiddenNodeIds.size === 0 ? visibleGraph.nodes.length : countWith(new Set());
     const hiddenCount = unhiddenCount - visibleGraph.nodes.length;
@@ -84,7 +84,7 @@ export function GraphImpl({ data, dataModel }: GraphImplProps) {
     const withChecked = countWith(new Set([...hiddenNodeIds, ...checkedNodeIds]));
     const removed = visibleGraph.nodes.length - withChecked;
     return { hiddenCount, hidePreviewOrphans: Math.max(0, removed - checkedNodeIds.size) };
-  }, [flatGraph, hiddenNodeIds, checkedNodeIds, visibleGraph, hideHypernodes]);
+  }, [flatGraph, hiddenNodeIds, checkedNodeIds, visibleGraph, showHypernodes]);
 
   useEffect(() => {
     setGraphStats(graphStats);
@@ -116,7 +116,7 @@ export function GraphImpl({ data, dataModel }: GraphImplProps) {
   }, [connectedPersonsForNode, nodes, selectedObject, setSelectedObject]);
 
   useEffect(() => {
-    if (!hideHypernodes || selectedObject?.nodeType !== 'hypernode') return;
+    if (showHypernodes || selectedObject?.nodeType !== 'hypernode') return;
 
     const startNode = flatGraph.nodes.find(
       (n): n is Extract<GraphRfNode, { type: 'person' }> => n.id === flatGraph.startKey && n.type === 'person',
@@ -128,7 +128,7 @@ export function GraphImpl({ data, dataModel }: GraphImplProps) {
       ...personRefFromRfNode(startNode),
       persons: connectedPersonsForNode(startNode.id),
     });
-  }, [hideHypernodes, selectedObject, flatGraph, connectedPersonsForNode, setSelectedObject]);
+  }, [showHypernodes, selectedObject, flatGraph, connectedPersonsForNode, setSelectedObject]);
 
   const onNodeClick = useCallback<NodeMouseHandler<GraphRfNode>>(
     (_event, node) => {

packages/app-builder/src/components/Graph/GraphSettingsPanel.tsx

@@ -325,7 +325,7 @@ export function GraphSettingsPanel() {
     refreshGraph,
     isGeneratingGraph,
   } = useGraphSession();
-  const { showRiskScore, setShowRiskScore, showTags, setShowTags, hideHypernodes, setHideHypernodes } =
+  const { showRiskScore, setShowRiskScore, showTags, setShowTags, showHypernodes, setShowHypernodes } =
     useGraphViewSettings();
   const selectedObject = useSelectedObject();
   const { restoreHiddenNodes } = useGraphStructureActions();
@@ -498,9 +498,9 @@ export function GraphSettingsPanel() {
         </div>
         <div className="flex items-center justify-between gap-sm">
           <label htmlFor="hide-hyper-connected-nodes" className="text-grey-primary cursor-pointer text-sm">
-            {t('graph:panel.hide_hyper_connected_nodes')}
+            {t('graph:panel.show_hyper_connected_nodes')}
           </label>
-          <Switch id="hide-hyper-connected-nodes" checked={hideHypernodes} onCheckedChange={setHideHypernodes} />
+          <Switch id="hide-hyper-connected-nodes" checked={showHypernodes} onCheckedChange={setShowHypernodes} />
         </div>
         <ClusterThresholdControl />
       </div>

packages/app-builder/src/components/Graph/contexts/GraphSessionContext.tsx

@@ -97,7 +97,7 @@ export function GraphSessionProvider({
   );
   const [showRiskScore, setShowRiskScore] = useState(true);
   const [showTags, setShowTags] = useState(false);
-  const [hideHypernodes, setHideHypernodes] = useState(false);
+  const [showHypernodes, setShowHypernodes] = useState(true);
   const [showEdgeLabels, setShowEdgeLabels] = useState(false);
   const [clusterThreshold, setClusterThreshold] = useState<ClusterThreshold>(DEFAULT_CLUSTER_THRESHOLD);
   const [layoutMode, setLayoutMode] = useState<GraphLayoutMode>('polarPetal');
@@ -186,16 +186,16 @@ export function GraphSessionProvider({
       onShowRiskScoreChange: setShowRiskScore,
       showTags,
       onShowTagsChange: setShowTags,
-      hideHypernodes,
-      onHideHypernodesChange: setHideHypernodes,
+      showHypernodes,
+      onShowHypernodesChange: setShowHypernodes,
       showEdgeLabels,
       onShowEdgeLabelsChange: setShowEdgeLabels,
       clusterThreshold,
       onClusterThresholdChange: setClusterThreshold,
       layoutMode,
       onLayoutModeChange: setLayoutMode,
     }),
-    [showRiskScore, showTags, hideHypernodes, showEdgeLabels, clusterThreshold, layoutMode],
+    [showRiskScore, showTags, showHypernodes, showEdgeLabels, clusterThreshold, layoutMode],
   );
 
   const value = useMemo(

packages/app-builder/src/components/Graph/contexts/GraphViewSettingsContext.tsx

@@ -19,8 +19,8 @@ export type ControlledGraphSettings = {
   onShowRiskScoreChange: (value: boolean) => void;
   showTags: boolean;
   onShowTagsChange: (value: boolean) => void;
-  hideHypernodes: boolean;
-  onHideHypernodesChange: (value: boolean) => void;
+  showHypernodes: boolean;
+  onShowHypernodesChange: (value: boolean) => void;
   showEdgeLabels: boolean;
   onShowEdgeLabelsChange: (value: boolean) => void;
   clusterThreshold: ClusterThreshold;
@@ -42,8 +42,8 @@ export type GraphViewSettings = {
   maxRiskLevel: MaxRiskLevel | undefined;
   showTags: boolean;
   setShowTags: (value: boolean) => void;
-  hideHypernodes: boolean;
-  setHideHypernodes: (value: boolean) => void;
+  showHypernodes: boolean;
+  setShowHypernodes: (value: boolean) => void;
   showEdgeLabels: boolean;
   setShowEdgeLabels: (value: boolean) => void;
   layoutMode: GraphLayoutMode;
@@ -63,8 +63,8 @@ export function GraphViewSettingsProvider({
   onShowRiskScoreChange,
   showTags: controlledShowTags,
   onShowTagsChange,
-  hideHypernodes: controlledHideHypernodes,
-  onHideHypernodesChange,
+  showHypernodes: controlledShowHypernodes,
+  onShowHypernodesChange,
   showEdgeLabels: controlledShowEdgeLabels,
   onShowEdgeLabelsChange,
   clusterThreshold: controlledClusterThreshold,
@@ -78,10 +78,10 @@ export function GraphViewSettingsProvider({
   const rawMaxRiskLevel = scoringSettings?.maxRiskLevel;
   const maxRiskLevel = rawMaxRiskLevel != null && isMaxRiskLevelInRange(rawMaxRiskLevel) ? rawMaxRiskLevel : undefined;
   const [showTags, setShowTags] = useControllableState(false, controlledShowTags, onShowTagsChange);
-  const [hideHypernodes, setHideHypernodes] = useControllableState(
-    false,
-    controlledHideHypernodes,
-    onHideHypernodesChange,
+  const [showHypernodes, setShowHypernodes] = useControllableState(
+    true,
+    controlledShowHypernodes,
+    onShowHypernodesChange,
   );
   const [showEdgeLabels, setShowEdgeLabels] = useControllableState(
     false,
@@ -107,8 +107,8 @@ export function GraphViewSettingsProvider({
       maxRiskLevel,
       showTags,
       setShowTags,
-      hideHypernodes,
-      setHideHypernodes,
+      showHypernodes,
+      setShowHypernodes,
       showEdgeLabels,
       setShowEdgeLabels,
       layoutMode,
@@ -123,8 +123,8 @@ export function GraphViewSettingsProvider({
       maxRiskLevel,
       showTags,
       setShowTags,
-      hideHypernodes,
-      setHideHypernodes,
+      showHypernodes,
+      setShowHypernodes,
       showEdgeLabels,
       setShowEdgeLabels,
       layoutMode,

packages/app-builder/src/components/Graph/lib/use-laid-out-graph.spec.ts

@@ -56,25 +56,26 @@ describe('applyVisibilityFilters', () => {
     expect(visible.edges).toEqual([]);
   });
 
-  it('drops hypernodes and their edges when hideHypernodes is set', () => {
+  it('drops hypernodes and their edges when showHypernodes is unset', () => {
     const visible = applyVisibilityFilters(
       [person('start', true), hypernode('h1'), person('a')],
       [edge('start', 'h1'), edge('start', 'a')],
       new Set(),
       'start',
-      true,
+      false,
     );
 
     expect(visible.nodes.map((node) => node.id)).toEqual(['start', 'a']);
     expect(visible.edges.map((item) => item.id)).toEqual(['start->a']);
   });
 
-  it('keeps hypernodes when hideHypernodes is unset', () => {
+  it('keeps hypernodes when showHypernodes is set', () => {
     const visible = applyVisibilityFilters(
       [person('start', true), hypernode('h1')],
       [edge('start', 'h1')],
       new Set(),
       'start',
+      true,
     );
 
     expect(visible.nodes.map((node) => node.id)).toEqual(['start', 'h1']);

packages/app-builder/src/components/Graph/lib/use-laid-out-graph.ts

@@ -30,9 +30,9 @@ function resolveStartKey(nodes: GraphRfNode[], fallback: string): string {
   return start?.id ?? fallback;
 }
 
-function isNodeVisible(node: GraphRfNode, hiddenNodeIds: Set<string>, hideHypernodes: boolean) {
+function isNodeVisible(node: GraphRfNode, hiddenNodeIds: Set<string>, showHypernodes: boolean) {
   if (node.type === 'person' && node.data.isStart) return true;
-  if (hideHypernodes && node.type === 'hypernode') return false;
+  if (!showHypernodes && node.type === 'hypernode') return false;
   return !hiddenNodeIds.has(node.id);
 }
 
@@ -41,9 +41,9 @@ export function applyVisibilityFilters(
   edges: GraphRfEdge[],
   hiddenNodeIds: Set<string>,
   startKey: string,
-  hideHypernodes = false,
+  showHypernodes = true,
 ) {
-  const typeVisibleNodes = nodes.filter((node) => isNodeVisible(node, hiddenNodeIds, hideHypernodes));
+  const typeVisibleNodes = nodes.filter((node) => isNodeVisible(node, hiddenNodeIds, showHypernodes));
   const typeVisibleIds = new Set(typeVisibleNodes.map((node) => node.id));
   const typeVisibleEdges = edges.filter((edge) => typeVisibleIds.has(edge.source) && typeVisibleIds.has(edge.target));
 
@@ -62,15 +62,15 @@ export function applyVisibilityFilters(
 
 export function useLaidOutGraph({ data, dataModel }: { data: GraphData; dataModel: DataModel }) {
   const { hiddenNodeIds, expandedRootIds } = useGraphStructure();
-  const { clusterThreshold, layoutMode, hideHypernodes } = useGraphViewSettings();
+  const { clusterThreshold, layoutMode, showHypernodes } = useGraphViewSettings();
 
   const typeHelpers = useMemo(() => createGraphTypeHelpers(dataModel), [dataModel]);
 
   const flatGraph = useMemo(() => toFlatFlowElements(data, typeHelpers), [data, typeHelpers]);
 
   const visibleGraph = useMemo(
-    () => applyVisibilityFilters(flatGraph.nodes, flatGraph.edges, hiddenNodeIds, flatGraph.startKey, hideHypernodes),
-    [flatGraph, hiddenNodeIds, hideHypernodes],
+    () => applyVisibilityFilters(flatGraph.nodes, flatGraph.edges, hiddenNodeIds, flatGraph.startKey, showHypernodes),
+    [flatGraph, hiddenNodeIds, showHypernodes],
   );
 
   const filteredLayout = useMemo(() => {

packages/app-builder/src/locales/ar/graph.json

@@ -33,7 +33,6 @@
   "node.too_many": "هذا الجزء من الرسم البياني متصل بشكل مفرط وتم تجاهله ≈ {{count}} عقد تم تجاهلها",
   "panel.connected_nodes": "العقد المتصلة",
   "panel.grouped_branch": "فرع مجمّع",
-  "panel.hide_hyper_connected_nodes": "إخفاء العقد فائقة الاتصال",
   "panel.hypernode": "عقدة فائقة",
   "panel.items_one": "عنصر {{count}}",
   "panel.items_other": "{{count}} عناصر",
@@ -43,6 +42,7 @@
   "panel.select_node": "حدد عقدة لعرض التفاصيل.",
   "panel.show_hidden_nodes_one": "إظهار عقدة مخفية واحدة",
   "panel.show_hidden_nodes_other": "إظهار {{count}} عقد مخفية",
+  "panel.show_hyper_connected_nodes": "إظهار العقد المتصلة بشكل مفرط",
   "panel.show_less": "عرض أقل",
   "panel.show_more": "عرض المزيد",
   "panel.show_risk_score": "إظهار درجة المخاطر",

packages/app-builder/src/locales/en/graph.json

@@ -25,7 +25,6 @@
   "node.too_many": "This part of the graph is hyperconnected and has been discarded ≈ {{count}} nodes ignored",
   "panel.connected_nodes": "Connected nodes",
   "panel.grouped_branch": "Grouped branch",
-  "panel.hide_hyper_connected_nodes": "Hide hyper connected nodes",
   "panel.hypernode": "Hypernode",
   "panel.items_one": "{{count}} item",
   "panel.items_other": "{{count}} items",
@@ -35,6 +34,7 @@
   "panel.select_node": "Select a node to see details.",
   "panel.show_hidden_nodes_one": "Show {{count}} hidden node",
   "panel.show_hidden_nodes_other": "Show {{count}} hidden nodes",
+  "panel.show_hyper_connected_nodes": "Show hyper connected nodes",
   "panel.show_less": "Show less",
   "panel.show_more": "Show more",
   "panel.show_risk_score": "Show risk score",

packages/app-builder/src/locales/fr/graph.json

@@ -25,7 +25,6 @@
   "node.too_many": "Cette partie du graphe est hyperconnectée et a été ignorée ≈ {{count}} nœuds ignorés",
   "panel.connected_nodes": "Nœuds connectés",
   "panel.grouped_branch": "Branche regroupée",
-  "panel.hide_hyper_connected_nodes": "Masquer les nœuds hyperconnectés",
   "panel.hypernode": "Hypernœud",
   "panel.items_one": "{{count}} élément",
   "panel.items_other": "{{count}} éléments",
@@ -35,6 +34,7 @@
   "panel.select_node": "Sélectionnez un nœud pour voir les détails.",
   "panel.show_hidden_nodes_one": "Afficher {{count}} nœud masqué",
   "panel.show_hidden_nodes_other": "Afficher {{count}} nœuds masqués",
+  "panel.show_hyper_connected_nodes": "Afficher les nœuds hyper connectés",
   "panel.show_less": "Afficher moins",
   "panel.show_more": "Afficher plus",
   "panel.show_risk_score": "Afficher le score de risque",