@topconsultnpm/sdkui-react 6.20.0-dev2.9 → 6.20.0-dev3.1

package/lib/components/features/documents/TMRelationViewer.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { DcmtTypeListCacheService, SDK_Globals, DataColumnTypes, MetadataFormats, SystemMIDs, MetadataDataDomains, RelationCacheService, RelationTypes } from "@topconsultnpm/sdk-ts";
-import { genUniqueId, IconFolder, IconBackhandIndexPointingRight } from '../../../helper';
+import { genUniqueId, IconFolder, IconBackhandIndexPointingRight, IconCircleInfo } from '../../../helper';
 import { TMColors } from '../../../utils/theme';
 import { StyledDivHorizontal, StyledBadge } from '../../base/Styled';
 import TMTreeView from '../../base/TMTreeView';
@@ -136,7 +136,7 @@ export const searchResultToDataSource = async (searchResult, hideSysMetadata) =>
     }
     return output;
 };
-const TMRelationViewer = ({ inputDcmts, isForMaster = false, showCurrentDcmtIndicator = true, allowShowZeroDcmts = true, initialShowZeroDcmts = false, allowedTIDs, allowMultipleSelection = false, focusedItem, selectedItems, onFocusedItemChanged, onSelectedItemsChanged, onDocumentDoubleClick, customItemRender, customDocumentStyle, customMainContainerContent, customDocumentContent, showMetadataNames = false, maxDepthLevel = 2, invertMasterNavigation = true, additionalStaticItems, showMainDocument = true, labelMainContainer, }) => {
+const TMRelationViewer = ({ inputDcmts, isForMaster = false, showCurrentDcmtIndicator = true, allowShowZeroDcmts = true, initialShowZeroDcmts = false, allowedTIDs, allowMultipleSelection = false, focusedItem, selectedItems, onFocusedItemChanged, onSelectedItemsChanged, onDocumentDoubleClick, customItemRender, customDocumentStyle, customMainContainerContent, customDocumentContent, showMetadataNames = false, maxDepthLevel = 2, invertMasterNavigation = true, additionalStaticItems, showMainDocument = true, labelMainContainer, onNoRelationsFound, }) => {
     // State
     const [dcmtTypes, setDcmtTypes] = useState([]);
     const [treeData, setTreeData] = useState([]);
@@ -154,8 +154,12 @@ const TMRelationViewer = ({ inputDcmts, isForMaster = false, showCurrentDcmtIndi
     const [expansionAbortController, setExpansionAbortController] = useState(undefined);
     // Ref to track last loaded input to prevent unnecessary reloads
     const lastLoadedInputRef = React.useRef('');
+    // State to track loaded input key - triggers re-render for focus selection
+    const [loadedInputKey, setLoadedInputKey] = React.useState('');
     // Ref to track if user has manually expanded/collapsed static items
     const userInteractedWithStaticItemsRef = React.useRef(false);
+    // Ref to track the last inputKey for which we set the focused item
+    const lastFocusedInputRef = React.useRef('');
     /**
      * Generate a stable key from inputDcmts to detect real changes
      */
@@ -219,20 +223,27 @@ const TMRelationViewer = ({ inputDcmts, isForMaster = false, showCurrentDcmtIndi
                 const source = await searchResultToDataSource(searchResult);
                 if (source && source.length > 0) {
                     const dcmtDetails = [];
+                    // Check once if this document type can have detail relations
+                    // (optimization: avoid checking for each document)
+                    const canHaveDetails = await hasDetailRelations(searchResult.fromTID);
                     for (const row of source) {
                         const rowGUID = genUniqueId();
                         const tid = row?.TID?.value;
                         const did = row?.DID?.value;
+                        const isLogDel = row?.ISLOGDEL?.value;
                         dcmtDetails.push({
                             tid: tid,
                             did: did,
+                            isLogDel: isLogDel,
                             key: `${tid}_${did}_${searchResult.relationID}_${mTID}_${mDID}_${rowGUID}`,
                             isDcmt: true,
                             isContainer: false,
                             isZero: false, // Documents are never zero (they exist)
+                            isExpandible: canHaveDetails, // Can this doc be expanded?
                             values: row,
                             searchResult: [searchResult],
-                            itemsCount: 0,
+                            // Leave items and itemsCount undefined so TMTreeView shows expand arrow based on isExpandible
+                            // Children will be loaded lazily by calculateItemsForNode when expanded
                             expanded: false,
                             hidden: false,
                             name: row?.SYS_Abstract?.value || row?.SYS_SUBJECT?.value || `Documento ${did}`
@@ -293,20 +304,30 @@ const TMRelationViewer = ({ inputDcmts, isForMaster = false, showCurrentDcmtIndi
                 const source = await searchResultToDataSource(searchResult);
                 if (source && source.length > 0) {
                     const dcmtMasters = [];
+                    // Check once if this document type can have master relations (for inverted mode)
+                    // or detail relations (for standard mode when expanding masters)
+                    // (optimization: avoid checking for each document)
+                    const canExpand = isForMaster && invertMasterNavigation
+                        ? await hasMasterRelations(searchResult.fromTID)
+                        : await hasDetailRelations(searchResult.fromTID);
                     for (const row of source) {
                         const rowGUID = genUniqueId();
                         const tid = row?.TID?.value;
                         const did = row?.DID?.value;
+                        const isLogDel = row?.ISLOGDEL?.value;
                         dcmtMasters.push({
                             tid: tid,
                             did: did,
+                            isLogDel: isLogDel,
                             key: `${tid}_${did}_${searchResult.relationID}_${dTID}_${dDID}_${rowGUID}`,
                             isDcmt: true,
                             isContainer: false,
                             isZero: false, // Documents are never zero (they exist)
+                            isExpandible: canExpand, // Can this doc be expanded?
                             values: row,
                             searchResult: [searchResult],
-                            itemsCount: 0,
+                            // Leave items and itemsCount undefined so TMTreeView shows expand arrow based on isExpandible
+                            // Children will be loaded lazily by calculateItemsForNode when expanded
                             expanded: false,
                             hidden: false,
                             name: row?.SYS_Abstract?.value || row?.SYS_SUBJECT?.value || `Documento ${did}`
@@ -324,17 +345,128 @@ const TMRelationViewer = ({ inputDcmts, isForMaster = false, showCurrentDcmtIndi
         return items;
     }, [allowedTIDs]);
     /**
-     * Update hidden property based on showZeroDcmts (original simple logic)
+     * Update hidden property based on showZeroDcmts
+     * Updates items in-place without resetting isLoaded (no API calls needed)
      */
     const updateHiddenProperty = useCallback((nodes) => {
+        // Safety check: if nodes is undefined or not an array, return empty array
+        if (!nodes || !Array.isArray(nodes)) {
+            return [];
+        }
         return nodes.map(node => {
-            const updatedNode = { ...node, hidden: !showZeroDcmts && node.isZero };
-            if (node.items) {
-                updatedNode.items = updateHiddenProperty(node.items);
+            let shouldHide = false;
+            let updatedItems = undefined;
+            if (node.items && Array.isArray(node.items)) {
+                // Recursively update children first - this creates a new array
+                let updatedChildren = updateHiddenProperty(node.items);
+                // Remove any existing auto-generated info messages (with key starting with __info__)
+                const filteredChildren = updatedChildren.filter(child => !(child.isInfoMessage && child.key?.startsWith('__info__')));
+                // Check if all real children (excluding info messages) are hidden
+                const realChildren = filteredChildren.filter(child => !child.isInfoMessage);
+                const allChildrenHidden = realChildren.length > 0 && realChildren.every(child => child.hidden);
+                // If node is expanded AND showZeroDcmts is false AND all children are hidden, add info message
+                // This applies to both containers and document nodes with children
+                if (node.expanded && !showZeroDcmts && allChildrenHidden) {
+                    // Add info message at the beginning, keep original children (hidden but preserved)
+                    updatedItems = [
+                        {
+                            key: `__info__${node.key}`,
+                            name: 'Nessun documento correlato da visualizzare',
+                            isContainer: false,
+                            isDcmt: false,
+                            isInfoMessage: true,
+                            isExpandible: false
+                        },
+                        ...filteredChildren
+                    ];
+                    // Don't hide the node itself if it's showing an info message
+                    shouldHide = false;
+                }
+                else {
+                    updatedItems = filteredChildren;
+                    // Hide zero-item containers when showZeroDcmts is false (only if not showing info message)
+                    shouldHide = !showZeroDcmts && (node.isZero ?? false);
+                }
+            }
+            else {
+                // No items, apply normal hide logic
+                shouldHide = !showZeroDcmts && (node.isZero ?? false);
             }
-            return updatedNode;
+            // IMPORTANT: Always create new object to trigger React re-render
+            return { ...node, hidden: shouldHide, items: updatedItems };
         });
     }, [showZeroDcmts]);
+    /**
+     * Helper function to set up initial tree expansion state.
+     * Called after all data is loaded but before setTreeData.
+     * Ensures: root container expanded, first document expanded with isRoot=true (for focus), first correlation folder expanded
+     * Returns a NEW tree with the modifications (immutable approach)
+     */
+    const setupInitialTreeExpansion = (tree) => {
+        if (tree.length === 0)
+            return tree;
+        // ALWAYS expand the first container (even if empty, to show infoMessage)
+        const firstRootContainer = tree[0];
+        if (!firstRootContainer)
+            return tree;
+        // Create a deep copy of the first container with expanded=true, isRoot=true
+        let newFirstContainer = {
+            ...firstRootContainer,
+            expanded: true,
+            isRoot: true
+        };
+        // 2. Find first document/container and expand it
+        const firstRootItems = newFirstContainer.items;
+        if (firstRootItems && firstRootItems.length > 0) {
+            const firstDocOrContainer = firstRootItems[0];
+            if (firstDocOrContainer.isDcmt) {
+                // First item is a document - expand it and mark as root for focus
+                let newFirstDoc = {
+                    ...firstDocOrContainer,
+                    expanded: true,
+                    isRoot: true
+                };
+                // 3. Expand first correlation folder (child of the document)
+                const docItems = newFirstDoc.items;
+                if (docItems && docItems.length > 0 && docItems[0].isContainer) {
+                    const newFirstCorrelation = { ...docItems[0], expanded: true };
+                    newFirstDoc = {
+                        ...newFirstDoc,
+                        items: [newFirstCorrelation, ...docItems.slice(1)]
+                    };
+                }
+                // Update the container's items
+                newFirstContainer = {
+                    ...newFirstContainer,
+                    items: [newFirstDoc, ...firstRootItems.slice(1)]
+                };
+            }
+            else if (firstDocOrContainer.isContainer) {
+                // First item is a container (correlation folder) - expand it
+                let newFirstCorrelation = {
+                    ...firstDocOrContainer,
+                    expanded: true
+                };
+                // Find first document inside this container and mark for focus
+                const containerItems = newFirstCorrelation.items;
+                if (containerItems && containerItems.length > 0 && containerItems[0].isDcmt) {
+                    const newFirstDoc = { ...containerItems[0], isRoot: true };
+                    newFirstCorrelation = {
+                        ...newFirstCorrelation,
+                        items: [newFirstDoc, ...containerItems.slice(1)]
+                    };
+                }
+                // Update the container's items
+                newFirstContainer = {
+                    ...newFirstContainer,
+                    items: [newFirstCorrelation, ...firstRootItems.slice(1)]
+                };
+            }
+        }
+        // If firstRootItems is empty/undefined, the container is still expanded (will show infoMessage)
+        // Return new tree with the modified first container
+        return [newFirstContainer, ...tree.slice(1)];
+    };
     /**
      * Main data loading function
      */
@@ -405,13 +537,12 @@ const TMRelationViewer = ({ inputDcmts, isForMaster = false, showCurrentDcmtIndi
                         tid: dcmt.TID,
                         dtd,
                         isContainer: true,
-                        isRoot: true,
                         isLoaded: true,
                         isZero: false,
                         searchResult: result ? [result] : [],
                         items: relatedDocs, // Directly show detail containers
                         itemsCount: relatedDocs.length,
-                        expanded: tree.length === 0,
+                        expanded: false,
                         hidden: false
                     };
                     tree.push(typeContainer);
@@ -426,10 +557,9 @@ const TMRelationViewer = ({ inputDcmts, isForMaster = false, showCurrentDcmtIndi
                         did: dcmt.DID,
                         isDcmt: true,
                         isContainer: false,
-                        expanded: tree.length === 0,
+                        expanded: false,
                         isZero: dcmt.DID === 0,
                         isMaster: !isForMaster,
-                        isRoot: true,
                         isLoaded: true,
                         hidden: false,
                         values: docRow,
@@ -444,13 +574,12 @@ const TMRelationViewer = ({ inputDcmts, isForMaster = false, showCurrentDcmtIndi
                         tid: dcmt.TID,
                         dtd,
                         isContainer: true,
-                        isRoot: true,
                         isLoaded: true,
                         isZero: false, // Type container is never zero (contains documents)
                         searchResult: result ? [result] : [],
                         items: [docNode],
                         itemsCount: 1,
-                        expanded: tree.length === 0,
+                        expanded: false,
                         hidden: false
                     };
                     tree.push(typeContainer);
@@ -460,8 +589,55 @@ const TMRelationViewer = ({ inputDcmts, isForMaster = false, showCurrentDcmtIndi
             processedCount++;
             setWaitPanelValuePrimary(processedCount);
         }
-        setTreeData(updateHiddenProperty(tree));
-    }, [inputDcmts, dcmtTypes, maxDepthLevel, isForMaster, invertMasterNavigation, getDetailDcmtsAsync, getMasterDcmtsAsync, abortController, updateHiddenProperty, showMainDocument, labelMainContainer]);
+        /**
+         * Helper function to check if a node has any actual correlated documents
+         * Returns true if there are NO documents (relations are empty)
+         */
+        const hasNoActualDocuments = (items) => {
+            if (!items || items.length === 0)
+                return true;
+            // Check each item
+            return items.every(item => {
+                // If it's a container, check if it's zero or has no documents
+                if (item.isContainer) {
+                    // Container with isZero=true has no documents
+                    if (item.isZero)
+                        return true;
+                    // Container with no items has no documents
+                    if (!item.items || item.items.length === 0)
+                        return true;
+                    // Otherwise, it has documents
+                    return false;
+                }
+                // If it's a document node, check its children (relation containers)
+                if (item.isDcmt) {
+                    // Check if all child containers are empty
+                    return hasNoActualDocuments(item.items);
+                }
+                // For other types, assume no documents
+                return true;
+            });
+        };
+        // Check if there are no relations for any document
+        const hasNoRelations = tree.length === 0 || tree.every(container => {
+            // Check if container has no items
+            if (!container.items || container.items.length === 0)
+                return true;
+            // Check recursively if there are any actual documents
+            return hasNoActualDocuments(container.items);
+        });
+        // If no relations found, notify parent
+        if (hasNoRelations && onNoRelationsFound) {
+            onNoRelationsFound();
+        }
+        // FIRST setup initial expansion state (root container expanded, first document expanded with focus, first correlation folder expanded)
+        // This must run BEFORE updateHiddenProperty so that infoMessage logic sees expanded=true
+        const expandedTree = setupInitialTreeExpansion(tree);
+        // THEN apply hidden property transformations (creates new objects, adds infoMessage where needed)
+        // Now it will correctly detect expanded nodes and add infoMessage if all children are hidden
+        const processedTree = updateHiddenProperty(expandedTree);
+        setTreeData(processedTree);
+    }, [inputDcmts, dcmtTypes, maxDepthLevel, isForMaster, invertMasterNavigation, getDetailDcmtsAsync, getMasterDcmtsAsync, abortController, updateHiddenProperty, showMainDocument, labelMainContainer, onNoRelationsFound]);
     /**
      * Merge main tree data with additional static items
      */
@@ -483,16 +659,18 @@ const TMRelationViewer = ({ inputDcmts, isForMaster = false, showCurrentDcmtIndi
         if (!inputDcmts || inputDcmts.length === 0 || dcmtTypes.length === 0) {
             setTreeData([]);
             lastLoadedInputRef.current = '';
+            lastFocusedInputRef.current = '';
+            setLoadedInputKey('');
             userInteractedWithStaticItemsRef.current = false; // Reset interaction flag
             return;
         }
         // Generate current input key
         const currentKey = getInputKey();
-        // Skip if we already loaded this exact data
+        // Skip if we already loaded or are loading this exact data
         if (currentKey === lastLoadedInputRef.current && treeData.length > 0) {
             return;
         }
-        // Mark as loading this key
+        // Mark as loading this key to prevent duplicate loads
         lastLoadedInputRef.current = currentKey;
         // Reset interaction flag when loading new data
         userInteractedWithStaticItemsRef.current = false;
@@ -501,6 +679,9 @@ const TMRelationViewer = ({ inputDcmts, isForMaster = false, showCurrentDcmtIndi
         setWaitPanelValuePrimary(0);
         // Call loadData and use .then() instead of await to allow React to render
         loadData().then(() => {
+            // Mark as loaded AFTER data is ready - state update triggers re-render for focus selection
+            lastLoadedInputRef.current = currentKey;
+            setLoadedInputKey(currentKey);
             setShowWaitPanel(false);
             setWaitPanelTextPrimary('');
             setWaitPanelMaxValuePrimary(0);
@@ -509,10 +690,53 @@ const TMRelationViewer = ({ inputDcmts, isForMaster = false, showCurrentDcmtIndi
     }, [inputDcmts, dcmtTypes, maxDepthLevel, getInputKey, loadData, treeData.length]);
     /**
      * Update tree when showZeroDcmts changes
+     * Updates the visualization without re-fetching data (isLoaded stays true)
      */
     useEffect(() => {
         setTreeData(prevData => updateHiddenProperty(prevData));
     }, [showZeroDcmts, updateHiddenProperty]);
+    /**
+     * Set focused item when data finishes loading
+     * Focuses on the first document (under root) every time new data is loaded
+     * Works both on initial load and on navigation (onPrev/onNext)
+     */
+    useEffect(() => {
+        const currentInputKey = getInputKey();
+        // Ensure data has finished loading for current input
+        if (loadedInputKey !== currentInputKey) {
+            return;
+        }
+        if (!showMainDocument || !onFocusedItemChanged || !treeData.length || !inputDcmts?.length) {
+            return;
+        }
+        // Skip if we already focused for this inputKey
+        if (lastFocusedInputRef.current === currentInputKey) {
+            return;
+        }
+        // Helper function to recursively find the first document with isRoot=true
+        const findFirstRootDocument = (items) => {
+            for (const item of items) {
+                // Check if this item is a document with isRoot=true
+                if (item.isDcmt && item.isRoot) {
+                    return item;
+                }
+                // Recursively search in children
+                if (item.items && Array.isArray(item.items)) {
+                    const found = findFirstRootDocument(item.items);
+                    if (found)
+                        return found;
+                }
+            }
+            return null;
+        };
+        // Find the first document marked as root (set by setupInitialTreeExpansion)
+        const docNode = findFirstRootDocument(treeData);
+        if (docNode) {
+            // Set the focused item and mark this inputKey as focused
+            onFocusedItemChanged(docNode);
+            lastFocusedInputRef.current = currentInputKey;
+        }
+    }, [treeData, loadedInputKey, showMainDocument, onFocusedItemChanged, inputDcmts, getInputKey]);
     /**
      * Sync static items state when additionalStaticItems change
      * IMPORTANT: Only update if user hasn't manually interacted with the tree,
@@ -548,6 +772,10 @@ const TMRelationViewer = ({ inputDcmts, isForMaster = false, showCurrentDcmtIndi
     /**
      * Calculate items for node when expanded (lazy loading)
      * Note: additionalStaticItems are already fully loaded, so skip calculation for them
+     *
+     * PERFORMANCE OPTIMIZATION:
+     * - Containers: Return items immediately (no API calls) - items are already loaded
+     * - Documents: Load children lazily only when the specific document is expanded (1 API call)
      */
     const calculateItemsForNode = useCallback(async (node) => {
         // Skip calculation for separator (it has no children)
@@ -558,62 +786,129 @@ const TMRelationViewer = ({ inputDcmts, isForMaster = false, showCurrentDcmtIndi
         if (node.isStaticItem || node.isAdditionalContainer || node.isAdditional) {
             return node.items;
         }
-        // If it's a document, return existing items
-        if (node.isDcmt)
-            return node.items;
-        // If container is already loaded, return items
-        if (node.isLoaded)
-            return node.items;
-        const newAbortController = new AbortController();
-        setExpansionAbortController(newAbortController);
-        const itemsToLoad = node.items?.length ?? 0;
-        setShowExpansionWaitPanel(true);
-        setExpansionWaitPanelMaxValue(itemsToLoad);
-        setExpansionWaitPanelValue(0);
-        setExpansionWaitPanelText(`Caricamento documenti correlati...`);
-        try {
-            const newItems = [];
-            let processedCount = 0;
-            for (const dcmt of node.items ?? []) {
-                if (newAbortController.signal.aborted) {
-                    console.log('Folder expansion aborted by user');
-                    return node.items;
-                }
-                const item = { ...dcmt };
-                if (item.tid && item.did && !item.isLoaded) {
-                    // Update progress
-                    processedCount++;
-                    setExpansionWaitPanelValue(processedCount);
-                    setExpansionWaitPanelText(`Caricamento ${processedCount} di ${itemsToLoad}...`);
-                    // Nella modalità originale (invertMasterNavigation=false), 
-                    // i documenti detail non devono caricare i master come figli
-                    if (isForMaster && !invertMasterNavigation) {
-                        // Carica i detail dei detail (navigazione naturale detail→detail)
-                        const loadedItems = await getDetailDcmtsAsync(item.tid, item.did, 1);
-                        item.items = updateHiddenProperty(loadedItems);
-                    }
-                    else {
-                        // Modalità standard o invertita
-                        const loadedItems = isForMaster
-                            ? await getMasterDcmtsAsync(item.tid, item.did, 1)
-                            : await getDetailDcmtsAsync(item.tid, item.did, 1);
-                        item.items = updateHiddenProperty(loadedItems);
-                    }
-                    item.isLoaded = true;
+        // If already loaded, apply current visualization logic without re-fetching
+        if (node.isLoaded && node.items) {
+            // Apply current show/hide logic based on showZeroDcmts
+            const updatedItems = updateHiddenProperty(node.items);
+            // If this is a container, check if we need to show info message
+            if (node.isContainer) {
+                // Remove any existing info messages
+                const filteredItems = updatedItems.filter(child => !(child.isInfoMessage && child.key?.startsWith('__info__')));
+                // Check if all real children are hidden
+                const realChildren = filteredItems.filter(child => !child.isInfoMessage);
+                const allChildrenHidden = realChildren.length > 0 && realChildren.every(child => child.hidden);
+                // If showZeroDcmts is false and all items are hidden, show info message + keep hidden containers
+                if (!showZeroDcmts && allChildrenHidden) {
+                    return [
+                        {
+                            key: `__info__${node.key}`,
+                            name: 'Nessun documento correlato da visualizzare',
+                            isContainer: false,
+                            isDcmt: false,
+                            isInfoMessage: true,
+                            isExpandible: false
+                        },
+                        ...filteredItems // Keep hidden containers so they can be shown when toggling
+                    ];
                 }
-                newItems.push(item);
             }
-            return newItems;
+            return updatedItems;
         }
-        catch (error) {
-            console.error('Error loading folder contents:', error);
-            return node.items;
+        // ============================================
+        // CONTAINER: Show items immediately (no API calls)
+        // Items are already loaded from initial load or parent expansion
+        // ============================================
+        if (node.isContainer) {
+            // No API calls needed - just return existing items
+            // Children of these items will be loaded lazily when user expands each document
+            // Apply updateHiddenProperty to respect current showZeroDcmts setting
+            // If node has no items, return empty array
+            if (!node.items)
+                return [];
+            const updatedItems = updateHiddenProperty(node.items);
+            // If showZeroDcmts is false and all items are hidden, add info message + keep hidden containers
+            if (!showZeroDcmts && updatedItems.length > 0 && updatedItems.every(item => item.hidden)) {
+                return [
+                    {
+                        key: `__info__${node.key}`,
+                        name: 'Nessun documento correlato da visualizzare',
+                        isContainer: false,
+                        isDcmt: false,
+                        isInfoMessage: true,
+                        isExpandible: false
+                    },
+                    ...updatedItems // Keep hidden containers so they can be shown when toggling
+                ];
+            }
+            return updatedItems;
         }
-        finally {
-            setShowExpansionWaitPanel(false);
-            setExpansionAbortController(undefined);
+        // ============================================
+        // DOCUMENT: Load its children (relation containers) lazily
+        // Only makes ONE API call for this specific document
+        // ============================================
+        if (node.isDcmt && node.tid && node.did) {
+            const newAbortController = new AbortController();
+            setExpansionAbortController(newAbortController);
+            setShowExpansionWaitPanel(true);
+            setExpansionWaitPanelMaxValue(1);
+            setExpansionWaitPanelValue(0);
+            setExpansionWaitPanelText(`Caricamento documenti correlati...`);
+            try {
+                // Check for abort
+                if (newAbortController.signal.aborted) {
+                    return [];
+                }
+                // Determine which load function to use based on mode
+                let loadedItems = [];
+                if (isForMaster && !invertMasterNavigation) {
+                    // Original mode: detail documents load detail documents (natural detail→detail navigation)
+                    loadedItems = await getDetailDcmtsAsync(node.tid, node.did, 1);
+                }
+                else if (isForMaster) {
+                    // Inverted master mode: load master documents
+                    loadedItems = await getMasterDcmtsAsync(node.tid, node.did, 1);
+                }
+                else {
+                    // Standard mode: load detail documents
+                    loadedItems = await getDetailDcmtsAsync(node.tid, node.did, 1);
+                }
+                // Espandi automaticamente il primo container se ci sono documenti correlati
+                if (loadedItems.length > 0 && loadedItems[0].isContainer) {
+                    loadedItems[0].expanded = true;
+                }
+                // Apply updateHiddenProperty to respect current showZeroDcmts setting
+                // This ensures that dynamically loaded nodes respect the visibility rules:
+                // - Relation type containers are always visible (even if empty)
+                // - Other containers with zero items can be hidden based on showZeroDcmts
+                const updatedItems = updateHiddenProperty(loadedItems);
+                // If showZeroDcmts is false and all items are hidden, add info message + keep hidden containers
+                if (!showZeroDcmts && updatedItems.length > 0 && updatedItems.every(item => item.hidden)) {
+                    return [
+                        {
+                            key: `__info__${node.key}`,
+                            name: 'Nessun documento correlato da visualizzare',
+                            isContainer: false,
+                            isDcmt: false,
+                            isInfoMessage: true,
+                            isExpandible: false
+                        },
+                        ...updatedItems // Keep hidden containers so they can be shown when toggling
+                    ];
+                }
+                return updatedItems;
+            }
+            catch (error) {
+                console.error('Error loading document relations:', error);
+                return [];
+            }
+            finally {
+                setShowExpansionWaitPanel(false);
+                setExpansionAbortController(undefined);
+            }
         }
-    }, [isForMaster, invertMasterNavigation, getDetailDcmtsAsync, getMasterDcmtsAsync, updateHiddenProperty]);
+        // Default: return existing items
+        return node.items;
+    }, [isForMaster, invertMasterNavigation, getDetailDcmtsAsync, getMasterDcmtsAsync, updateHiddenProperty, showZeroDcmts]);
     /**
      * Default item renderer with metadata display (adapted from TMMasterDetailDcmts.tsx)
      */
@@ -626,6 +921,18 @@ const TMRelationViewer = ({ inputDcmts, isForMaster = false, showCurrentDcmtIndi
             e.stopPropagation();
             onDocumentDoubleClick?.(item.tid, item.did, item.name);
         };
+        // Info message rendering
+        if (item.isInfoMessage) {
+            return (_jsxs("div", { style: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: '10px',
+                    height: '32px',
+                    padding: '6px 0',
+                    color: '#666',
+                    fontStyle: 'italic'
+                }, children: [_jsx(IconCircleInfo, { fontSize: 20, color: TMColors.iconLight }), _jsx("span", { children: item.name })] }));
+        }
         // Container rendering
         if (item.isContainer || !item.isDcmt) {
             const defaultContainerStyle = {
@@ -634,7 +941,7 @@ const TMRelationViewer = ({ inputDcmts, isForMaster = false, showCurrentDcmtIndi
                 gap: '10px',
                 height: '32px',
                 padding: '6px 0',
-                opacity: item.isZero ? 0.4 : 1,
+                opacity: item.isZero ? 0.99 : 1,
                 transition: 'opacity 0.2s ease-in-out'
             };
             // Se è il container principale (root) e showMainDocument è false,
@@ -653,6 +960,7 @@ const TMRelationViewer = ({ inputDcmts, isForMaster = false, showCurrentDcmtIndi
             return (_jsx("div", { style: defaultContainerStyle, children: content }));
         }
         // Document rendering with full metadata display
+        const isLogicallyDeleted = Number(item.isLogDel) === 1;
         const defaultDocumentStyle = {
             minWidth: '90px',
             width: '100%',
@@ -664,18 +972,23 @@ const TMRelationViewer = ({ inputDcmts, isForMaster = false, showCurrentDcmtIndi
             alignItems: 'center',
             cursor: 'pointer',
             userSelect: 'none',
-            opacity: item.isZero ? 0.4 : 1,
-            transition: 'opacity 0.2s ease-in-out'
+            opacity: item.isZero ? 0.99 : 1,
+            transition: 'opacity 0.2s ease-in-out',
+            textDecoration: isLogicallyDeleted ? 'line-through' : 'none'
         };
         const documentStyle = customDocumentStyle
             ? { ...defaultDocumentStyle, ...customDocumentStyle(item) }
             : defaultDocumentStyle;
+        const textDecoration = isLogicallyDeleted ? 'line-through' : 'none';
+        const textColor = isLogicallyDeleted ? 'gray' : undefined;
         const defaultMetadataContent = item.values && (_jsx(StyledDivHorizontal, { style: {
                 fontSize: '1rem',
                 overflow: 'hidden',
                 flex: 1,
                 minWidth: 0,
-                whiteSpace: 'nowrap'
+                whiteSpace: 'nowrap',
+                textDecoration: textDecoration,
+                color: textColor
             }, children: getDcmtDisplayValue(item.values).map((key, index) => {
                 const md = item.values?.[key]?.md;
                 const value = item.values?.[key]?.value;
@@ -684,12 +997,16 @@ const TMRelationViewer = ({ inputDcmts, isForMaster = false, showCurrentDcmtIndi
                 return (_jsxs(StyledDivHorizontal, { style: {
                         flexShrink: isLast ? 1 : 0,
                         minWidth: isLast ? 0 : 'auto',
-                        overflow: isLast ? 'hidden' : 'visible'
-                    }, children: [index > 0 && _jsx("span", { style: { margin: '0 5px', color: '#999' }, children: "\u2022" }), showMetadataNames && (_jsxs("span", { style: { color: '#666', marginRight: '5px' }, children: [md?.name || key, ":"] })), md?.dataDomain === MetadataDataDomains.DataList ? (_jsx(TMDataListItemViewer, { dataListId: md.dataListID, viewMode: md.dataListViewMode, value: value })) : md?.dataDomain === MetadataDataDomains.UserID ? (_jsx(TMDataUserIdItemViewer, { userId: value, showIcon: true })) : (_jsx("span", { style: {
+                        overflow: isLast ? 'hidden' : 'visible',
+                        textDecoration: textDecoration,
+                        color: textColor
+                    }, children: [index > 0 && _jsx("span", { style: { margin: '0 5px', color: textColor || '#999', textDecoration: textDecoration }, children: "\u2022" }), showMetadataNames && (_jsxs("span", { style: { color: textColor || '#666', marginRight: '5px', textDecoration: textDecoration }, children: [md?.name || key, ":"] })), md?.dataDomain === MetadataDataDomains.DataList ? (_jsx("span", { style: { textDecoration: textDecoration, color: textColor }, children: _jsx(TMDataListItemViewer, { dataListId: md.dataListID, viewMode: md.dataListViewMode, value: value }) })) : md?.dataDomain === MetadataDataDomains.UserID ? (_jsx("span", { style: { textDecoration: textDecoration, color: textColor }, children: _jsx(TMDataUserIdItemViewer, { userId: value, showIcon: true }) })) : (_jsx("span", { style: {
                                 fontWeight: 500,
                                 overflow: isLast ? 'hidden' : 'visible',
                                 textOverflow: isLast ? 'ellipsis' : 'clip',
-                                whiteSpace: 'nowrap'
+                                whiteSpace: 'nowrap',
+                                textDecoration: textDecoration,
+                                color: textColor
                             }, children: value }))] }, `${key}_${index}`));
             }) }));
         const metadataContent = customDocumentContent
@@ -744,7 +1061,7 @@ const TMRelationViewer = ({ inputDcmts, isForMaster = false, showCurrentDcmtIndi
     if (mergedTreeData.length === 0) {
         return _jsx("div", { style: { padding: '20px', textAlign: 'center', color: '#666' }, children: "Nessuna relazione disponibile." });
     }
-    return (_jsxs(_Fragment, { children: [_jsx(TMTreeView, { dataSource: mergedTreeData, itemRender: finalItemRender, calculateItemsForNode: calculateItemsForNode, onDataChanged: handleDataChanged, focusedItem: focusedItem, onFocusedItemChanged: handleFocusedItemChanged, allowMultipleSelection: allowMultipleSelection, selectedItems: selectedItems, onSelectionChanged: handleSelectedItemsChanged }), showExpansionWaitPanel && (_jsx(TMWaitPanel, { title: isForMaster ? 'Caricamento documenti master' : 'Caricamento documenti dettaglio', showPrimary: true, textPrimary: expansionWaitPanelText, valuePrimary: expansionWaitPanelValue, maxValuePrimary: expansionWaitPanelMaxValue, isCancelable: true, abortController: expansionAbortController, onAbortClick: (abortController) => {
+    return (_jsxs(_Fragment, { children: [_jsx(TMTreeView, { dataSource: mergedTreeData, itemRender: finalItemRender, calculateItemsForNode: calculateItemsForNode, onDataChanged: handleDataChanged, focusedItem: focusedItem, onFocusedItemChanged: handleFocusedItemChanged, allowMultipleSelection: allowMultipleSelection, selectedItems: selectedItems, itemsPerPage: 100, onSelectionChanged: handleSelectedItemsChanged }), showExpansionWaitPanel && (_jsx(TMWaitPanel, { title: isForMaster ? 'Caricamento documenti master' : 'Caricamento documenti dettaglio', showPrimary: true, textPrimary: expansionWaitPanelText, valuePrimary: expansionWaitPanelValue, maxValuePrimary: expansionWaitPanelMaxValue, isCancelable: true, abortController: expansionAbortController, onAbortClick: (abortController) => {
                     setTimeout(() => {
                         abortController?.abort();
                     }, 100);