@truedat/dd 8.11.4 → 8.11.7

package/src/components/LineageGraphToolbar.js

@@ -0,0 +1,896 @@
+import _ from "lodash/fp";
+import PropTypes from "prop-types";
+import { useState } from "react";
+import { useIntl } from "react-intl";
+import { Dropdown, Input, Popup } from "semantic-ui-react";
+import {
+  ArrowLeftRight,
+  Award,
+  CheckCircle2,
+  ChevronLeft,
+  ChevronRight,
+  ClipboardList,
+  Copy,
+  Database,
+  Eye,
+  Grid3x3,
+  GripVertical,
+  Info,
+  KeyRound,
+  Layers,
+  Link2,
+  List,
+  Maximize2,
+  Minimize2,
+  MousePointer2,
+  Network,
+  Pin,
+  RefreshCw,
+  Search,
+  Settings,
+  Table2,
+  X,
+} from "lucide-react";
+import { ControlButton } from "@truedat/core/components/graph/FlowPorts";
+import LineageDownloadButton from "./LineageDownloadButton";
+import LineageInspectorPanel from "./LineageInspectorPanel";
+
+const ALL_SYSTEM_TYPES_VALUE = "";
+const TOOLTIP_DELAY = 120;
+const DOCK_ICON_SIZE = 20;
+const DOCK_ICON_STROKE = 2;
+
+const stopGraphInteraction = (event) => event.stopPropagation();
+
+export const DOCK_ICONS = {
+  database: Database,
+  table: Table2,
+  sitemap: Network,
+  "grip vertical": GripVertical,
+  copy: Copy,
+  "sync alternate": RefreshCw,
+  tasks: ClipboardList,
+  th: Grid3x3,
+  eye: Eye,
+  exchange: ArrowLeftRight,
+  search: Search,
+  "list ul": List,
+  "info circle": Info,
+  "check circle outline": CheckCircle2,
+  key: KeyRound,
+  linkify: Link2,
+  certificate: Award,
+  "mouse pointer": MousePointer2,
+  compress: Minimize2,
+  "expand arrows alternate": Maximize2,
+  "chevron right": ChevronRight,
+  "chevron left": ChevronLeft,
+  pin: Pin,
+  close: X,
+};
+
+const DockIcon = ({ name }) => {
+  const IconComponent = DOCK_ICONS[name] || Database;
+
+  return (
+    <span className="lineage-graph__dock-button-icon">
+      <IconComponent
+        aria-hidden="true"
+        size={DOCK_ICON_SIZE}
+        strokeWidth={DOCK_ICON_STROKE}
+      />
+    </span>
+  );
+};
+
+DockIcon.propTypes = {
+  name: PropTypes.string,
+};
+
+const LineageToolButton = ({
+  active = false,
+  children,
+  className,
+  disabled = false,
+  icon,
+  label,
+  showTooltip = true,
+  ...buttonProps
+}) => {
+  const button = (
+    <ControlButton
+      {...buttonProps}
+      aria-label={label}
+      className={[
+        "lineage-graph__dock-button",
+        active ? "lineage-graph__dock-button--active" : "",
+        className,
+      ]
+        .filter(Boolean)
+        .join(" ")}
+      disabled={disabled}
+      title={showTooltip ? label : undefined}
+    >
+      {icon ? (
+        typeof icon === "string" ? (
+          <DockIcon name={icon} />
+        ) : (
+          <span className="lineage-graph__dock-button-icon">{icon}</span>
+        )
+      ) : null}
+      {children}
+    </ControlButton>
+  );
+
+  if (!showTooltip) return button;
+
+  return (
+    <Popup
+      content={label}
+      mouseEnterDelay={TOOLTIP_DELAY}
+      mouseLeaveDelay={0}
+      position="left center"
+      trigger={
+        <span className="lineage-graph__dock-tooltip-trigger">{button}</span>
+      }
+    />
+  );
+};
+
+LineageToolButton.propTypes = {
+  active: PropTypes.bool,
+  children: PropTypes.node,
+  className: PropTypes.string,
+  disabled: PropTypes.bool,
+  icon: PropTypes.string,
+  label: PropTypes.string.isRequired,
+  showTooltip: PropTypes.bool,
+};
+
+const PanelHeader = ({ icon, onClose, title }) => {
+  const { formatMessage } = useIntl();
+
+  return (
+    <div className="lineage-graph__tool-panel-header">
+      <span>
+        <DockIcon name={icon} />
+        {title}
+      </span>
+      <button
+        aria-label={formatMessage({
+          id: "lineage.graph.toolbar.panel.close",
+          defaultMessage: "Close panel",
+        })}
+        className="lineage-graph__tool-panel-close"
+        onClick={onClose}
+        type="button"
+      >
+        <DockIcon name="close" />
+      </button>
+    </div>
+  );
+};
+
+PanelHeader.propTypes = {
+  icon: PropTypes.string.isRequired,
+  onClose: PropTypes.func.isRequired,
+  title: PropTypes.string.isRequired,
+};
+
+const SearchPanel = ({
+  onClose,
+  onSearchInputChange,
+  onSearchResultSelect,
+  onSystemTypeFilterChange,
+  searchInput,
+  searchResults,
+  searchResultsTotal,
+  selectedGraphNodeId,
+  systemTypeFilter,
+  systemTypeOptions,
+}) => {
+  const { formatMessage } = useIntl();
+  const hasFilter = Boolean(searchInput.trim() || systemTypeFilter);
+  const dropdownOptions = [
+    {
+      key: ALL_SYSTEM_TYPES_VALUE,
+      value: ALL_SYSTEM_TYPES_VALUE,
+      text: formatMessage({
+        id: "lineage.graph.toolbar.system_filter.all",
+        defaultMessage: "All systems",
+      }),
+    },
+    ...systemTypeOptions.map((option) => ({
+      key: option.key,
+      value: option.key,
+      text: option.label,
+    })),
+  ];
+
+  return (
+    <section
+      aria-label={formatMessage({
+        id: "lineage.graph.toolbar.search.label",
+        defaultMessage: "Search graph nodes",
+      })}
+      className="lineage-graph__tool-panel lineage-graph__tool-panel--search"
+    >
+      <PanelHeader
+        icon="search"
+        onClose={onClose}
+        title={formatMessage({
+          id: "lineage.graph.toolbar.search.header",
+          defaultMessage: "Search nodes",
+        })}
+      />
+      <div className="lineage-graph__search-fields">
+        <Input
+          aria-label={formatMessage({
+            id: "lineage.graph.toolbar.search.label",
+            defaultMessage: "Search graph nodes",
+          })}
+          className="lineage-graph__search-input"
+          icon="search"
+          iconPosition="left"
+          onChange={(event) => onSearchInputChange(event.target.value)}
+          placeholder={formatMessage({
+            id: "lineage.graph.toolbar.search.placeholder",
+            defaultMessage: "Search by name or identifier…",
+          })}
+          value={searchInput}
+        />
+        <Dropdown
+          aria-label={formatMessage({
+            id: "lineage.graph.toolbar.system_filter.label",
+            defaultMessage: "Filter by system type",
+          })}
+          className="lineage-graph__search-system-filter"
+          fluid
+          onChange={(_event, { value }) => onSystemTypeFilterChange(value)}
+          options={dropdownOptions}
+          selection
+          value={systemTypeFilter || ALL_SYSTEM_TYPES_VALUE}
+        />
+      </div>
+      {!hasFilter ? (
+        <div className="lineage-graph__search-empty">
+          <DockIcon name="mouse pointer" />
+          {formatMessage({
+            id: "lineage.graph.toolbar.search.hint",
+            defaultMessage: "Type a node name or choose a system.",
+          })}
+        </div>
+      ) : null}
+      {hasFilter && _.isEmpty(searchResults) ? (
+        <div className="lineage-graph__search-empty">
+          <DockIcon name="search" />
+          {formatMessage({
+            id: "lineage.graph.toolbar.search.empty",
+            defaultMessage: "No matching nodes",
+          })}
+        </div>
+      ) : null}
+      {!_.isEmpty(searchResults) ? (
+        <>
+          <div className="lineage-graph__search-count">
+            {formatMessage(
+              {
+                id: "lineage.graph.toolbar.search.results",
+                defaultMessage: "{count} results",
+              },
+              { count: searchResultsTotal },
+            )}
+          </div>
+          <div
+            aria-label={formatMessage({
+              id: "lineage.graph.toolbar.search.results.label",
+              defaultMessage: "Matching graph nodes",
+            })}
+            className="lineage-graph__search-results"
+            role="listbox"
+          >
+            {searchResults.map((result) => (
+              <button
+                aria-selected={selectedGraphNodeId === result.graphNodeId}
+                className="lineage-graph__search-result"
+                key={result.graphNodeId}
+                onClick={() => onSearchResultSelect(result.graphNodeId)}
+                role="option"
+                type="button"
+              >
+                <span className="lineage-graph__search-result-icon">
+                  <DockIcon name={result.iconName} />
+                </span>
+                <span className="lineage-graph__search-result-copy">
+                  <span title={result.label}>{result.label}</span>
+                  <small>{result.contextLabel}</small>
+                </span>
+              </button>
+            ))}
+          </div>
+        </>
+      ) : null}
+    </section>
+  );
+};
+
+SearchPanel.propTypes = {
+  onClose: PropTypes.func.isRequired,
+  onSearchInputChange: PropTypes.func.isRequired,
+  onSearchResultSelect: PropTypes.func.isRequired,
+  onSystemTypeFilterChange: PropTypes.func.isRequired,
+  searchInput: PropTypes.string,
+  searchResults: PropTypes.array,
+  searchResultsTotal: PropTypes.number,
+  selectedGraphNodeId: PropTypes.string,
+  systemTypeFilter: PropTypes.string,
+  systemTypeOptions: PropTypes.array,
+};
+
+export const visibleLegendKeys = (
+  nodes = [],
+  edges = [],
+  graphType = "impact",
+) => {
+  const visible = nodes.filter((node) => !node.hidden);
+  const classes = (node) => node.className || "";
+  const fields = visible.flatMap(({ data = {} }) =>
+    data.fieldLike
+      ? [{ ...data.lineageNode, ...data.lineageNode?.metadata }]
+      : (data.fields || []).slice(0, data.fieldHandleLimit),
+  );
+  const features = {
+    system: visible.some(
+      (node) =>
+        classes(node).includes("td-lineage-catalog--present") &&
+        (classes(node).includes("--entity-system") ||
+          classes(node).includes("td-lineage-entity-color--system")),
+    ),
+    types: visible.some(
+      (node) =>
+        !node.data?.fieldLike &&
+        node.data?.entityType &&
+        node.data.entityType !== "system",
+    ),
+    absent: visible.some((node) =>
+      classes(node).includes("td-lineage-catalog--absent"),
+    ),
+    deleted: visible.some((node) =>
+      classes(node).includes("td-lineage-catalog--deleted"),
+    ),
+    selection: visible.some(
+      (node) => node.data?.isActive || node.data?.focusSelected,
+    ),
+    [graphType === "impact" ? "impact" : "lineage"]: edges.some(
+      (edge) => !edge.hidden && !edge.data?.containment,
+    ),
+    PK: fields.some(
+      (field) => field?.isPK || field?.is_pk || field?.primary_key,
+    ),
+    FK: fields.some(
+      (field) => field?.isFK || field?.is_fk || field?.foreign_key,
+    ),
+    CDE: fields.some(
+      (field) =>
+        field?.isCDE ||
+        field?.is_cde ||
+        field?.critical_data_element ||
+        field?.metadata?.isCDE ||
+        field?.metadata?.is_cde,
+    ),
+  };
+  return Object.keys(features).filter((key) => features[key]);
+};
+
+const BASIC_LEGEND = [
+  ["system", "SYSTEM in TrueDat"],
+  ["types", "Other node colors identify their type"],
+  ["absent", "Not in TrueDat · gray dashed border"],
+  ["deleted", "Deleted structure · red dashed border"],
+  ["selection", "Orange outline · selected node"],
+  ["impact", "Impact dependencies"],
+  ["lineage", "Traceability dependencies"],
+];
+
+const LegendPanel = ({ onClose, visibleKeys }) => {
+  const { formatMessage } = useIntl();
+  return (
+    <section
+      aria-label={formatMessage({
+        id: "lineage.graph.legend.header",
+        defaultMessage: "Lineage legend",
+      })}
+      className="lineage-graph__tool-panel lineage-graph__tool-panel--legend"
+    >
+      <PanelHeader
+        icon="list ul"
+        onClose={onClose}
+        title={formatMessage({
+          id: "lineage.graph.legend.header",
+          defaultMessage: "Lineage legend",
+        })}
+      />
+      <div className="lineage-graph__legend-section">
+        {BASIC_LEGEND.filter(([key]) => visibleKeys.includes(key)).map(
+          ([key, defaultMessage]) => (
+            <div className="lineage-graph__legend-item" key={key}>
+              <span
+                aria-hidden="true"
+                className={`lineage-graph__basic-legend-swatch lineage-graph__basic-legend-swatch--${key}`}
+              />
+              <span>
+                {formatMessage({
+                  id: `lineage.graph.legend.basic.${key}`,
+                  defaultMessage,
+                })}
+              </span>
+            </div>
+          ),
+        )}
+      </div>
+      <div className="lineage-graph__legend-section">
+        {[
+          ["PK", "Primary key"],
+          ["FK", "Foreign key"],
+          ["CDE", "Critical data element"],
+        ]
+          .filter(([badge]) => visibleKeys.includes(badge))
+          .map(([badge, defaultMessage]) => (
+            <div className="lineage-graph__legend-item" key={badge}>
+              <span className="lineage-graph__basic-legend-badge">{badge}</span>
+              <span>
+                {formatMessage({
+                  id: `lineage.graph.legend.basic.${badge}`,
+                  defaultMessage,
+                })}
+              </span>
+            </div>
+          ))}
+      </div>
+    </section>
+  );
+};
+LegendPanel.propTypes = {
+  onClose: PropTypes.func.isRequired,
+  visibleKeys: PropTypes.array.isRequired,
+};
+
+const contextLabel = (context) => {
+  if (context?.type === "node") return context.node?.name || context.node?.id;
+  if (context?.type === "edge") {
+    return `${context.edge?.sourceName || context.edge?.source} → ${
+      context.edge?.targetName || context.edge?.target
+    }`;
+  }
+
+  return "";
+};
+
+const contextIcon = (context) =>
+  context?.type === "node"
+    ? context.node?.iconName || "database"
+    : context?.iconName || "exchange";
+
+const normalizeEntityType = (value) => {
+  if (value === undefined || value === null) return undefined;
+
+  const normalized = `${value}`
+    .trim()
+    .toLowerCase()
+    .replace(/^lineage[\s_-]*/, "")
+    .replace(/[\s_]+/g, "-");
+
+  return normalized || undefined;
+};
+
+const capitalize = (value = "") =>
+  value ? value.charAt(0).toUpperCase() + value.slice(1) : value;
+
+const contextTypeLabel = (context, formatMessage) => {
+  if (context?.type === "edge") {
+    return formatMessage({
+      id: "lineage.inspector.edge",
+      defaultMessage: "Connection metadata",
+    });
+  }
+
+  const entityType =
+    normalizeEntityType(context?.node?.entityType) ||
+    normalizeEntityType(context?.node?.type);
+
+  if (entityType) {
+    return formatMessage({
+      id: `lineage.graph.entity_type.${entityType}`,
+      defaultMessage: capitalize(entityType),
+    });
+  }
+
+  const resourceSelected = context?.node?.lineageKind === "resource";
+
+  return formatMessage({
+    id: resourceSelected
+      ? "lineage.inspector.resource"
+      : "lineage.inspector.group",
+    defaultMessage: resourceSelected ? "Data structure" : "Group",
+  });
+};
+
+export const LineageGraphToolbar = ({
+  activePanel,
+  canCollapseAll = true,
+  canExpandAll = true,
+  collapsible,
+  context,
+  doubleClickExpandsNodes = false,
+  legendItems = [],
+  visibleLegend = [],
+  onClosePanel,
+  onClearContext,
+  onCollapseAll,
+  onDoubleClickExpandsNodesChange,
+  onExpandAll,
+  onExpansionDepthChange,
+  onMinimizeInspector,
+  onPanelChange,
+  onSearchInputChange,
+  onSearchResultSelect,
+  onSystemTypeFilterChange,
+  onTogglePin,
+  onUnpin,
+  onCenterNode,
+  pinned,
+  expansionDepth = 4,
+  maxExpansionDepth = expansionDepth,
+  searchInput = "",
+  searchResults = [],
+  searchResultsTotal = 0,
+  selectedGraphNodeId,
+  simplified = false,
+  systemTypeFilter = "",
+}) => {
+  const { formatMessage } = useIntl();
+  const [depthPopoverOpen, setDepthPopoverOpen] = useState(false);
+  const [settingsPopoverOpen, setSettingsPopoverOpen] = useState(false);
+  const hasContext = Boolean(context);
+  const inspectorOpen =
+    !simplified && hasContext && activePanel === "inspector";
+  const selectedLabel = contextLabel(context);
+  const selectedTypeLabel = hasContext
+    ? contextTypeLabel(context, formatMessage)
+    : "";
+  const togglePanel = (panel) =>
+    onPanelChange(activePanel === panel ? null : panel);
+  const clearContextLabel = formatMessage(
+    {
+      id: "lineage.graph.toolbar.context.clear",
+      defaultMessage: "Clear selection for {name}",
+    },
+    { name: selectedLabel },
+  );
+  const visibleLevelsLabel = formatMessage({
+    id: "lineage.graph.controls.visible_levels",
+    defaultMessage: "Visible levels",
+  });
+  const settingsLabel = formatMessage({
+    id: "lineage.graph.settings.header",
+    defaultMessage: "Graph settings",
+  });
+  const doubleClickInfoLabel = formatMessage({
+    id: "lineage.graph.settings.double_click_info",
+    defaultMessage: "Double-click expands or collapses nodes",
+  });
+
+  return (
+    <div
+      className="lineage-graph__dock nodrag nopan nowheel"
+      onClick={stopGraphInteraction}
+      onMouseDown={stopGraphInteraction}
+      onPointerDown={stopGraphInteraction}
+      onWheel={stopGraphInteraction}
+    >
+      <div
+        className={`lineage-graph__dock-context${
+          hasContext ? " lineage-graph__dock-context--selected" : ""
+        }${
+          inspectorOpen ? " lineage-graph__dock-context--inspector-open" : ""
+        }${pinned ? " lineage-graph__dock-context--pinned" : ""}`}
+      >
+        {inspectorOpen ? (
+          <LineageInspectorPanel
+            context={context}
+            onClose={onClosePanel}
+            onMinimize={onMinimizeInspector}
+            onTogglePin={onTogglePin}
+            onCenterNode={onCenterNode}
+            pinned={pinned}
+            showHeader={false}
+          />
+        ) : null}
+        {hasContext ? (
+          <div
+            className={`lineage-graph__dock-context-bar${
+              inspectorOpen ? " lineage-graph__dock-context-bar--expanded" : ""
+            }${
+              context?.type === "edge"
+                ? " lineage-graph__dock-context-bar--edge"
+                : ""
+            }`}
+          >
+            {pinned ? (
+              <button
+                aria-label={formatMessage({
+                  id: "lineage.context_menu.unpin_focus",
+                  defaultMessage: "Unpin focus",
+                })}
+                aria-pressed="true"
+                className="lineage-graph__dock-context-unpin"
+                onClick={onUnpin}
+                type="button"
+              >
+                <DockIcon name="pin" />
+              </button>
+            ) : null}
+            <div
+              aria-live="polite"
+              className="lineage-graph__dock-context-reopen lineage-graph__dock-context-button"
+            >
+              <span
+                aria-live="polite"
+                className="lineage-graph__dock-context-summary"
+              >
+                <span
+                  aria-hidden="true"
+                  className="lineage-graph__dock-context-summary-icon"
+                >
+                  <DockIcon name={contextIcon(context)} />
+                </span>
+                <span className="lineage-graph__dock-context-copy">
+                  <span className="lineage-graph__dock-context-label">
+                    {selectedLabel}
+                  </span>
+                  <span className="lineage-graph__dock-context-type">
+                    {selectedTypeLabel}
+                  </span>
+                </span>
+              </span>
+            </div>
+            <button
+              aria-label={clearContextLabel}
+              className="lineage-graph__dock-context-clear"
+              onClick={onClearContext}
+              type="button"
+            >
+              <DockIcon name="close" />
+            </button>
+          </div>
+        ) : (
+          <LineageToolButton
+            active={activePanel === "legend"}
+            aria-expanded={activePanel === "legend"}
+            className="lineage-graph__dock-context-button"
+            icon="list ul"
+            label={formatMessage({
+              id: "lineage.graph.legend.header",
+              defaultMessage: "Lineage legend",
+            })}
+            onClick={() => togglePanel("legend")}
+          />
+        )}
+      </div>
+      {!simplified && (
+        <LineageToolButton
+          active={activePanel === "search"}
+          aria-expanded={activePanel === "search"}
+          disabled={pinned}
+          icon="search"
+          label={formatMessage({
+            id: "lineage.graph.toolbar.search.header",
+            defaultMessage: "Search nodes",
+          })}
+          onClick={() => togglePanel("search")}
+        />
+      )}
+      <LineageDownloadButton
+        basic
+        className="lineage-graph__dock-button lineage-graph__dock-download"
+        compact
+        size="mini"
+        tooltipPosition="left center"
+      />
+      {collapsible && !simplified ? (
+        <>
+          <span className="lineage-graph__dock-divider" aria-hidden="true" />
+          <Popup
+            on="click"
+            onClose={() => setSettingsPopoverOpen(false)}
+            onOpen={() => setSettingsPopoverOpen(true)}
+            open={settingsPopoverOpen}
+            position="left center"
+            trigger={
+              <LineageToolButton
+                active={settingsPopoverOpen}
+                aria-expanded={settingsPopoverOpen}
+                aria-haspopup="dialog"
+                className="lineage-graph__dock-settings-button"
+                icon={
+                  <Settings
+                    size={DOCK_ICON_SIZE}
+                    strokeWidth={DOCK_ICON_STROKE}
+                  />
+                }
+                label={settingsLabel}
+                showTooltip={false}
+              />
+            }
+            content={
+              <div
+                aria-label={settingsLabel}
+                className="lineage-graph__settings-popover"
+                role="dialog"
+              >
+                <span className="lineage-graph__settings-popover-header">
+                  {settingsLabel}
+                </span>
+                <label className="lineage-graph__settings-toggle">
+                  <input
+                    checked={doubleClickExpandsNodes}
+                    onChange={(event) =>
+                      onDoubleClickExpandsNodesChange?.(event.target.checked)
+                    }
+                    type="checkbox"
+                  />
+                  <span>{doubleClickInfoLabel}</span>
+                </label>
+              </div>
+            }
+            className="lineage-graph__settings-popup"
+          />
+          <Popup
+            on="click"
+            onClose={() => setDepthPopoverOpen(false)}
+            onOpen={() => setDepthPopoverOpen(true)}
+            open={depthPopoverOpen}
+            position="left center"
+            trigger={
+              <LineageToolButton
+                active={depthPopoverOpen}
+                aria-expanded={depthPopoverOpen}
+                aria-haspopup="dialog"
+                className="lineage-graph__dock-depth-button"
+                icon={
+                  <Layers
+                    size={DOCK_ICON_SIZE}
+                    strokeWidth={DOCK_ICON_STROKE}
+                  />
+                }
+                label={visibleLevelsLabel}
+                showTooltip={false}
+              >
+                <span className="lineage-graph__dock-depth-value">
+                  {expansionDepth}
+                </span>
+              </LineageToolButton>
+            }
+            content={
+              <div
+                aria-label={visibleLevelsLabel}
+                className="lineage-graph__depth-popover"
+                role="dialog"
+              >
+                <div className="lineage-graph__depth-popover-header">
+                  <span>{visibleLevelsLabel}</span>
+                </div>
+                <input
+                  aria-label={visibleLevelsLabel}
+                  className="lineage-graph__depth-slider"
+                  type="range"
+                  min={0}
+                  max={maxExpansionDepth}
+                  value={expansionDepth}
+                  onChange={(event) =>
+                    onExpansionDepthChange(event.target.value)
+                  }
+                />
+                <div
+                  aria-hidden="true"
+                  className="lineage-graph__depth-popover-scale"
+                >
+                  {Array.from({ length: maxExpansionDepth + 1 }, (_, depth) => (
+                    <span
+                      key={depth}
+                      className={`${
+                        expansionDepth >= depth ? "is-active" : ""
+                      }${expansionDepth === depth ? " is-current" : ""}`}
+                    >
+                      {depth}
+                    </span>
+                  ))}
+                </div>
+              </div>
+            }
+            className="lineage-graph__depth-popup"
+          />
+        </>
+      ) : null}
+      {(collapsible || simplified) && (canCollapseAll || canExpandAll) ? (
+        <>
+          <span className="lineage-graph__dock-divider" aria-hidden="true" />
+          {canCollapseAll ? (
+            <LineageToolButton
+              icon="compress"
+              label={formatMessage({
+                id: "lineage.graph.controls.collapse_all",
+                defaultMessage: "Collapse all",
+              })}
+              onClick={onCollapseAll}
+            />
+          ) : null}
+          {canExpandAll ? (
+            <LineageToolButton
+              icon="expand arrows alternate"
+              label={formatMessage({
+                id: "lineage.graph.controls.expand_all",
+                defaultMessage: "Expand all",
+              })}
+              onClick={onExpandAll}
+            />
+          ) : null}
+        </>
+      ) : null}
+      <span className="lineage-graph__dock-divider" aria-hidden="true" />
+      {!simplified && activePanel === "search" ? (
+        <SearchPanel
+          onClose={onClosePanel}
+          onSearchInputChange={onSearchInputChange}
+          onSearchResultSelect={onSearchResultSelect}
+          onSystemTypeFilterChange={onSystemTypeFilterChange}
+          searchInput={searchInput}
+          searchResults={searchResults}
+          searchResultsTotal={searchResultsTotal}
+          selectedGraphNodeId={selectedGraphNodeId}
+          systemTypeFilter={systemTypeFilter}
+          systemTypeOptions={legendItems}
+        />
+      ) : null}
+      {!hasContext && activePanel === "legend" ? (
+        <LegendPanel onClose={onClosePanel} visibleKeys={visibleLegend} />
+      ) : null}
+    </div>
+  );
+};
+
+LineageGraphToolbar.propTypes = {
+  activePanel: PropTypes.oneOf(["search", "legend", "inspector"]),
+  canCollapseAll: PropTypes.bool,
+  canExpandAll: PropTypes.bool,
+  collapsible: PropTypes.bool,
+  context: PropTypes.object,
+  doubleClickExpandsNodes: PropTypes.bool,
+  legendItems: PropTypes.array,
+  visibleLegend: PropTypes.array,
+  onClosePanel: PropTypes.func.isRequired,
+  onClearContext: PropTypes.func.isRequired,
+  onCollapseAll: PropTypes.func,
+  onDoubleClickExpandsNodesChange: PropTypes.func,
+  onExpandAll: PropTypes.func,
+  onExpansionDepthChange: PropTypes.func.isRequired,
+  onMinimizeInspector: PropTypes.func.isRequired,
+  onPanelChange: PropTypes.func.isRequired,
+  onSearchInputChange: PropTypes.func.isRequired,
+  onSearchResultSelect: PropTypes.func.isRequired,
+  onSystemTypeFilterChange: PropTypes.func.isRequired,
+  onTogglePin: PropTypes.func,
+  onUnpin: PropTypes.func,
+  onCenterNode: PropTypes.func,
+  pinned: PropTypes.bool,
+  expansionDepth: PropTypes.number,
+  maxExpansionDepth: PropTypes.number,
+  searchInput: PropTypes.string,
+  searchResults: PropTypes.array,
+  searchResultsTotal: PropTypes.number,
+  selectedGraphNodeId: PropTypes.string,
+  simplified: PropTypes.bool,
+  systemTypeFilter: PropTypes.string,
+};
+
+export default LineageGraphToolbar;