Function Header

src/components/graph/analysis_window/header/Header.tsx:209–299

({
  onExit,
  setAnalysisMode,
  analysisMode,
}: HeaderProps)

}

const Header: FC<HeaderProps> = ({
  onExit,
  setAnalysisMode,
  analysisMode,
}: HeaderProps) => {
  // Extract analysisData from context
  const { deleteNodes } = useContext(GraphContext);
  const { analysisData, address } = useContext(AnalysisContext);

  // When minimized, the address hash should be sliced off
  const displayedAddress =
    address.slice(0, analysisData?.labels.length ? 4 : 8) +
    ".." +
    address.slice(-2);
  const risk = analysisData!.risk;

  return (
    <span className="flex cursor-move flex-row items-center justify-between gap-x-2">
      <span className="flex flex-row items-center space-x-2">
        {/* Address Risk inside a badge */}
        <RiskIndicator risk={risk} isLoading={false} />

        {/* Address information */}
        <div className="flex flex-col gap-y-0.5">
          <span className="flex flex-row items-center gap-x-1 gap-y-1">
            {/* Address Hash - Sliced when in non-expanded mode*/}
            <h1 className="font-xs flex flex-row gap-1 font-semibold tracking-tight text-gray-800">
              {analysisData?.labels.length && analysisData.labels[0]}
              <span className="mt-[0.1rem] font-mono font-normal">
                {analysisData?.labels.length && "("}
                {displayedAddress}
                {analysisData?.labels.length && ")"}
              </span>

              <EntityLogo
                entity={analysisData!.labels[0]}
                className="h-7 w-7 rounded-full"
              />
            </h1>

            {/* Clipboard and Block Explorer icons - only shown in expanded mode */}
            <CopyToClipboardIcon textToCopy={address} />
            {analysisData && (
              <BlockExplorerAddressIcon
                blockchain={analysisData.blockchain}
                address={address}
              />
            )}
          </span>
          <span className="flex flex-row items-center justify-start gap-x-1.5">
            {/* List of labels using Badges shown underneath the address. */}
            <LabelsAndTagsWithAuth />
          </span>
        </div>
      </span>

      {/* Exit button */}
      <span className="flex flex-row items-center gap-x-1.5">