refactor(web): improve UX across entity detail and graph panels

- Change "Select fields" to "Fields shown" for clearer terminology
- Change "default (all fields)" to "All fields" for consistency
- Enhance empty state in GraphAlgorithmsPanel with actionable messaging
- Add collapsible sections to EntityDataDisplay (Basic Information and
  Identifiers expanded by default, others collapsed)

Author: Mearman

apps/web/src/components/EntityDataDisplay.tsx

@@ -11,17 +11,21 @@ import {
   Badge,
   Box,
   Code,
+  Collapse,
   Divider,
   Group,
   Paper,
   Stack,
   Text,
   Title,
+  UnstyledButton,
 } from "@mantine/core";
 import {
   IconCalendar,
   IconChartBar,
   IconCheck,
+  IconChevronDown,
+  IconChevronUp,
   IconClipboard,
   IconExternalLink,
   IconFile,
@@ -33,6 +37,7 @@ import {
   IconX,
 } from "@tabler/icons-react";
 import { Link } from "@tanstack/react-router";
+import { useState } from "react";
 
 import { ICON_SIZE } from "@/config/style-constants";
 import { useVersionComparison } from "@/hooks/use-version-comparison";
@@ -442,6 +447,30 @@ export const EntityDataDisplay = ({ data, title }: EntityDataDisplayProps) => {
   // Group and prepare data
   const sections = groupFields(data);
 
+  // Track collapsed state for each section
+  // Basic Information and Identifiers are expanded by default, others collapsed
+  const [collapsedSections, setCollapsedSections] = useState<Set<string>>(() => {
+    const initial = new Set<string>();
+    sections.forEach(section => {
+      if (section.name !== "Basic Information" && section.name !== "Identifiers") {
+        initial.add(section.name);
+      }
+    });
+    return initial;
+  });
+
+  const toggleSection = (sectionName: string) => {
+    setCollapsedSections(prev => {
+      const next = new Set(prev);
+      if (next.has(sectionName)) {
+        next.delete(sectionName);
+      } else {
+        next.add(sectionName);
+      }
+      return next;
+    });
+  };
+
   // Version comparison for Works
   const workId = typeof data.id === 'string' && data.id.startsWith('W') ? data.id : undefined;
   const shouldShowComparison = Boolean(workId && isDataVersionSelectorVisible());
@@ -463,32 +492,50 @@ export const EntityDataDisplay = ({ data, title }: EntityDataDisplayProps) => {
       )}
 
       {/* Render sections */}
-      {sections.map((section) => (
-        <Paper key={section.name} withBorder p="md" radius="md">
-          {/* Section header */}
-          <Group gap="sm" mb="md">
-            {section.icon}
-            <Text size="lg" fw={600}>{section.name}</Text>
-            <Badge variant="light" color="gray" size="sm">
-              {section.fields.length} {section.fields.length === 1 ? "field" : "fields"}
-            </Badge>
-          </Group>
-
-          <Divider mb="md" />
-
-          {/* Section fields */}
-          <Stack gap="md">
-            {section.fields.map((field) => (
-              <Box key={field.key}>
-                <Text size="sm" fw={600} c="blue.7" mb="xs">
-                  {humanizeFieldName(field.key)}
-                </Text>
-                {renderValueContent(field.value)}
-              </Box>
-            ))}
-          </Stack>
-        </Paper>
-      ))}
+      {sections.map((section) => {
+        const isCollapsed = collapsedSections.has(section.name);
+        return (
+          <Paper key={section.name} withBorder p="md" radius="md">
+            {/* Clickable section header */}
+            <UnstyledButton
+              onClick={() => toggleSection(section.name)}
+              style={{ width: '100%' }}
+              mb="sm"
+            >
+              <Group gap="sm" justify="space-between" pr="xs">
+                <Group gap="sm">
+                  {section.icon}
+                  <Text size="lg" fw={600}>{section.name}</Text>
+                  <Badge variant="light" color="gray" size="sm">
+                    {section.fields.length} {section.fields.length === 1 ? "field" : "fields"}
+                  </Badge>
+                </Group>
+                {isCollapsed ? (
+                  <IconChevronDown size={ICON_SIZE.MD} color="var(--mantine-color-dimmed)" />
+                ) : (
+                  <IconChevronUp size={ICON_SIZE.MD} color="var(--mantine-color-dimmed)" />
+                )}
+              </Group>
+            </UnstyledButton>
+
+            <Collapse in={!isCollapsed}>
+              <Divider mb="md" />
+
+              {/* Section fields */}
+              <Stack gap="md">
+                {section.fields.map((field) => (
+                  <Box key={field.key}>
+                    <Text size="sm" fw={600} c="blue.7" mb="xs">
+                      {humanizeFieldName(field.key)}
+                    </Text>
+                    {renderValueContent(field.value)}
+                  </Box>
+                ))}
+              </Stack>
+            </Collapse>
+          </Paper>
+        );
+      })}
     </Stack>
   );
 };

apps/web/src/components/algorithms/GraphAlgorithmsPanel.tsx

@@ -308,10 +308,19 @@ export const GraphAlgorithmsPanel = ({
 
   if (nodes.length === 0) {
     return (
-      <Card style={{ border: BORDER_STYLE_GRAY_3 }} p="md">
-        <Alert icon={<IconAlertCircle size={ICON_SIZE.MD} />} title="No Graph Data" color="gray">
-          Add nodes and edges to the graph to run algorithms.
-        </Alert>
+      <Card style={{ border: BORDER_STYLE_GRAY_3 }} p="lg">
+        <Stack align="center" gap="md" mih="200px" justify="center">
+          <IconGraph size={ICON_SIZE.XL} color="var(--mantine-color-gray-4)" style={{ opacity: 0.5 }} />
+          <Stack gap="xs" ta="center">
+            <Title order={4} c="dimmed">Build Your Graph</Title>
+            <Text size="sm" c="dimmed">
+              Add entities from search results or entity detail pages to start analyzing connections.
+            </Text>
+            <Text size="xs" c="dimmed" mt="sm">
+              Use the graph icon button on any entity to add it here.
+            </Text>
+          </Stack>
+        </Stack>
       </Card>
     );
   }

apps/web/src/components/entity-detail/EntityDetailLayout.tsx

@@ -403,12 +403,12 @@ export const EntityDetailLayout = ({
                   </Group>
                   <Group align="flex-start" gap="sm" wrap="nowrap">
                     <Text size="sm" fw={600} c="dimmed" miw={isMobile() ? "80px" : "100px"}>
-                      Select fields:
+                      Fields shown:
                     </Text>
                     <Text size="sm" c="dimmed" flex={1}>
                       {selectParam && typeof selectParam === 'string'
                         ? selectParam
-                        : `default (all fields)`}
+                        : `All fields`}
                     </Text>
                   </Group>
                 </Stack>