backward compatibility for datasnapshots without target systems

Author: ddelpiano

applications/sckanner/frontend/src/components/ConnectivityGrid.tsx

@@ -276,6 +276,10 @@ function ConnectivityGrid() {
       setFilteredXOrgans(filteredOrgans);
       setFilteredXAxis(filteredHierarchicalX);
       setFilteredConnectionsMap(filteredConnectionsMap);
+    } else if (xAxis.length === 0 && yAxis.length > 0) {
+      // When xAxis is empty (e.g., datasnapshot without target systems), clear filtered state
+      setFilteredXAxis([]);
+      setFilteredXOrgans([]);
     }
   }, [yAxis, connectionsMap, xAxisOrgans, xAxis, filters.EndOrgan]);
 

applications/sckanner/frontend/src/components/common/Heatmap.tsx

@@ -322,6 +322,26 @@ const HeatmapGrid: FC<HeatmapGridProps> = ({
 
     if (!hasHierarchy || !heatmapContainerRef.current) {
       setHorizontalParents([]);
+      
+      // Clear any leftover data attributes from previous datasnapshot
+      if (heatmapContainerRef.current) {
+        const xLabelsContainer = heatmapContainerRef.current.querySelector(
+          '& > div:first-of-type > div:first-of-type',
+        );
+        if (xLabelsContainer) {
+          const labelElements = Array.from(
+            xLabelsContainer.querySelectorAll('& > div'),
+          ) as HTMLElement[];
+          
+          // Clear attributes from all X-axis labels
+          labelElements.slice(1).forEach((element) => {
+            element.removeAttribute('data-x-label-index');
+            element.removeAttribute('data-is-child');
+            element.removeAttribute('data-is-collapsed');
+          });
+        }
+      }
+      
       return;
     }
 

applications/sckanner/frontend/src/services/heatmapService.ts

@@ -60,34 +60,37 @@ export function getHierarchicalXAxis(
   // Get ordered target system IDs from endorgansOrder
   const orderedSystemIds = Object.keys(endorgansOrder);
 
-  // Build target system hierarchy
+  // Build target system hierarchy - only include systems with actual organ children
   orderedSystemIds.forEach((systemId) => {
     const systemOrgans = targetSystems[systemId];
-    if (systemOrgans && systemOrgans.length > 0) {
-      // Get the system name from targetSystemNames
-      const systemName =
-        targetSystemNames[systemId] ||
-        organs[systemId]?.name ||
-        systemId.split('/').pop() ||
-        systemId;
-
-      const children: HierarchicalItem[] = systemOrgans.map((organ) => {
-        organsInSystems.add(organ.id);
-        return {
-          id: organ.id,
-          label: organ.name,
-          children: [],
-          expanded: false,
-        };
-      });
-
-      result.push({
-        id: systemId,
-        label: systemName,
-        children,
-        expanded: false, // Start collapsed
-      });
+    // Skip if no organs exist for this target system or the array is empty
+    if (!systemOrgans || systemOrgans.length === 0) {
+      return;
     }
+
+    // Get the system name from targetSystemNames
+    const systemName =
+      targetSystemNames[systemId] ||
+      organs[systemId]?.name ||
+      systemId.split('/').pop() ||
+      systemId;
+
+    const children: HierarchicalItem[] = systemOrgans.map((organ) => {
+      organsInSystems.add(organ.id);
+      return {
+        id: organ.id,
+        label: organ.name,
+        children: [],
+        expanded: false,
+      };
+    });
+
+    result.push({
+      id: systemId,
+      label: systemName,
+      children,
+      expanded: false, // Start collapsed
+    });
   });
 
   // Add organs that are not part of any target system