@cyvest/cyvest-vis 4.0.0 → 4.1.0

package/src/components/Icons.tsx

@@ -0,0 +1,730 @@
+/**
+ * Professional SVG icons for the visualization components.
+ * Hand-crafted icons optimized for small sizes and clear recognition.
+ */
+
+import React from "react";
+
+export interface IconProps {
+  size?: number;
+  color?: string;
+  className?: string;
+}
+
+const defaultSize = 16;
+const defaultColor = "currentColor";
+
+/**
+ * Network/Globe icon for IP addresses
+ */
+export const GlobeIcon: React.FC<IconProps> = ({
+  size = defaultSize,
+  color = defaultColor,
+  className,
+}) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke={color}
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    className={className}
+  >
+    <circle cx="12" cy="12" r="10" />
+    <path d="M2 12h20" />
+    <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" />
+  </svg>
+);
+
+/**
+ * Home/Domain icon for domain names
+ */
+export const DomainIcon: React.FC<IconProps> = ({
+  size = defaultSize,
+  color = defaultColor,
+  className,
+}) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke={color}
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    className={className}
+  >
+    <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
+    <polyline points="9,22 9,12 15,12 15,22" />
+  </svg>
+);
+
+/**
+ * Link icon for URLs
+ */
+export const LinkIcon: React.FC<IconProps> = ({
+  size = defaultSize,
+  color = defaultColor,
+  className,
+}) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke={color}
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    className={className}
+  >
+    <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" />
+    <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" />
+  </svg>
+);
+
+/**
+ * Mail icon for email addresses
+ */
+export const MailIcon: React.FC<IconProps> = ({
+  size = defaultSize,
+  color = defaultColor,
+  className,
+}) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke={color}
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    className={className}
+  >
+    <rect x="2" y="4" width="20" height="16" rx="2" />
+    <path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7" />
+  </svg>
+);
+
+/**
+ * Envelope icon for email messages
+ */
+export const EnvelopeIcon: React.FC<IconProps> = ({
+  size = defaultSize,
+  color = defaultColor,
+  className,
+}) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke={color}
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    className={className}
+  >
+    <path d="M22 12h-6l-2 3h-4l-2-3H2" />
+    <path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z" />
+  </svg>
+);
+
+/**
+ * File icon
+ */
+export const FileIcon: React.FC<IconProps> = ({
+  size = defaultSize,
+  color = defaultColor,
+  className,
+}) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke={color}
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    className={className}
+  >
+    <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
+    <polyline points="14,2 14,8 20,8" />
+  </svg>
+);
+
+/**
+ * Hash/Fingerprint icon for file hashes
+ */
+export const HashIcon: React.FC<IconProps> = ({
+  size = defaultSize,
+  color = defaultColor,
+  className,
+}) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke={color}
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    className={className}
+  >
+    <line x1="4" y1="9" x2="20" y2="9" />
+    <line x1="4" y1="15" x2="20" y2="15" />
+    <line x1="10" y1="3" x2="8" y2="21" />
+    <line x1="16" y1="3" x2="14" y2="21" />
+  </svg>
+);
+
+/**
+ * User icon
+ */
+export const UserIcon: React.FC<IconProps> = ({
+  size = defaultSize,
+  color = defaultColor,
+  className,
+}) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke={color}
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    className={className}
+  >
+    <circle cx="12" cy="8" r="5" />
+    <path d="M20 21a8 8 0 1 0-16 0" />
+  </svg>
+);
+
+/**
+ * ID Card icon for identity
+ */
+export const IdCardIcon: React.FC<IconProps> = ({
+  size = defaultSize,
+  color = defaultColor,
+  className,
+}) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke={color}
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    className={className}
+  >
+    <rect x="2" y="5" width="20" height="14" rx="2" />
+    <circle cx="8" cy="12" r="2" />
+    <path d="M14 10h4" />
+    <path d="M14 14h4" />
+  </svg>
+);
+
+/**
+ * Gear/Cog icon for processes
+ */
+export const GearIcon: React.FC<IconProps> = ({
+  size = defaultSize,
+  color = defaultColor,
+  className,
+}) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke={color}
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    className={className}
+  >
+    <circle cx="12" cy="12" r="3" />
+    <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z" />
+  </svg>
+);
+
+/**
+ * Software/App icon
+ */
+export const AppIcon: React.FC<IconProps> = ({
+  size = defaultSize,
+  color = defaultColor,
+  className,
+}) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke={color}
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    className={className}
+  >
+    <rect x="3" y="3" width="18" height="18" rx="2" />
+    <path d="M9 3v18" />
+    <path d="M3 9h18" />
+  </svg>
+);
+
+/**
+ * Registry key icon
+ */
+export const RegistryIcon: React.FC<IconProps> = ({
+  size = defaultSize,
+  color = defaultColor,
+  className,
+}) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke={color}
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    className={className}
+  >
+    <path d="m21 2-2 2m-7.61 7.61a5.5 5.5 0 1 1-7.778 7.778 5.5 5.5 0 0 1 7.777-7.777zm0 0L15.5 7.5m0 0 3 3L22 7l-3-3m-3.5 3.5L19 4" />
+  </svg>
+);
+
+/**
+ * Skull icon for threat actors
+ */
+export const ThreatActorIcon: React.FC<IconProps> = ({
+  size = defaultSize,
+  color = defaultColor,
+  className,
+}) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke={color}
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    className={className}
+  >
+    <circle cx="12" cy="10" r="7" />
+    <circle cx="9" cy="9" r="1.5" fill={color} />
+    <circle cx="15" cy="9" r="1.5" fill={color} />
+    <path d="M9 17v-2" />
+    <path d="M12 17v-2" />
+    <path d="M15 17v-2" />
+  </svg>
+);
+
+/**
+ * Bug icon for malware
+ */
+export const BugIcon: React.FC<IconProps> = ({
+  size = defaultSize,
+  color = defaultColor,
+  className,
+}) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke={color}
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    className={className}
+  >
+    <path d="m8 2 1.88 1.88" />
+    <path d="M14.12 3.88 16 2" />
+    <path d="M9 7.13v-1a3.003 3.003 0 1 1 6 0v1" />
+    <path d="M12 20c-3.3 0-6-2.7-6-6v-3a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v3c0 3.3-2.7 6-6 6" />
+    <path d="M12 20v-9" />
+    <path d="M6.53 9C4.6 8.8 3 7.1 3 5" />
+    <path d="M6 13H2" />
+    <path d="M3 21c0-2.1 1.7-3.9 3.8-4" />
+    <path d="M20.97 5c0 2.1-1.6 3.8-3.5 4" />
+    <path d="M22 13h-4" />
+    <path d="M17.2 17c2.1.1 3.8 1.9 3.8 4" />
+  </svg>
+);
+
+/**
+ * Sword icon for attack patterns
+ */
+export const SwordIcon: React.FC<IconProps> = ({
+  size = defaultSize,
+  color = defaultColor,
+  className,
+}) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke={color}
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    className={className}
+  >
+    <polyline points="14.5,17.5 3,6 3,3 6,3 17.5,14.5" />
+    <line x1="13" y1="19" x2="19" y2="13" />
+    <line x1="16" y1="16" x2="20" y2="20" />
+    <line x1="19" y1="21" x2="21" y2="19" />
+  </svg>
+);
+
+/**
+ * Target icon for campaigns
+ */
+export const TargetIcon: React.FC<IconProps> = ({
+  size = defaultSize,
+  color = defaultColor,
+  className,
+}) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke={color}
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    className={className}
+  >
+    <circle cx="12" cy="12" r="10" />
+    <circle cx="12" cy="12" r="6" />
+    <circle cx="12" cy="12" r="2" />
+  </svg>
+);
+
+/**
+ * Alert icon for indicators
+ */
+export const AlertIcon: React.FC<IconProps> = ({
+  size = defaultSize,
+  color = defaultColor,
+  className,
+}) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke={color}
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    className={className}
+  >
+    <path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" />
+    <line x1="12" y1="9" x2="12" y2="13" />
+    <line x1="12" y1="17" x2="12.01" y2="17" />
+  </svg>
+);
+
+/**
+ * Flask icon for artifacts
+ */
+export const FlaskIcon: React.FC<IconProps> = ({
+  size = defaultSize,
+  color = defaultColor,
+  className,
+}) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke={color}
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    className={className}
+  >
+    <path d="M10 2v7.527a2 2 0 0 1-.211.896L4.72 20.55a1 1 0 0 0 .9 1.45h12.76a1 1 0 0 0 .9-1.45l-5.069-10.127A2 2 0 0 1 14 9.527V2" />
+    <path d="M8.5 2h7" />
+    <path d="M7 16h10" />
+  </svg>
+);
+
+/**
+ * Certificate icon
+ */
+export const CertificateIcon: React.FC<IconProps> = ({
+  size = defaultSize,
+  color = defaultColor,
+  className,
+}) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke={color}
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    className={className}
+  >
+    <path d="M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z" />
+    <path d="M2 6a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6Z" />
+    <path d="m9.5 15.5-3 3v3l3.5-1.5 3.5 1.5v-3l-3-3" />
+  </svg>
+);
+
+/**
+ * MAC address/Wifi icon
+ */
+export const WifiIcon: React.FC<IconProps> = ({
+  size = defaultSize,
+  color = defaultColor,
+  className,
+}) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke={color}
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    className={className}
+  >
+    <path d="M5 12.55a11 11 0 0 1 14.08 0" />
+    <path d="M1.42 9a16 16 0 0 1 21.16 0" />
+    <path d="M8.53 16.11a6 6 0 0 1 6.95 0" />
+    <line x1="12" y1="20" x2="12.01" y2="20" />
+  </svg>
+);
+
+/**
+ * Autonomous System/World icon
+ */
+export const WorldIcon: React.FC<IconProps> = ({
+  size = defaultSize,
+  color = defaultColor,
+  className,
+}) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke={color}
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    className={className}
+  >
+    <circle cx="12" cy="12" r="10" />
+    <path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20" />
+    <path d="M2 12h20" />
+  </svg>
+);
+
+/**
+ * Question mark icon for unknown types
+ */
+export const QuestionIcon: React.FC<IconProps> = ({
+  size = defaultSize,
+  color = defaultColor,
+  className,
+}) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke={color}
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    className={className}
+  >
+    <circle cx="12" cy="12" r="10" />
+    <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" />
+    <path d="M12 17h.01" />
+  </svg>
+);
+
+/**
+ * Checkmark icon for checks
+ */
+export const CheckIcon: React.FC<IconProps> = ({
+  size = defaultSize,
+  color = defaultColor,
+  className,
+}) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke={color}
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    className={className}
+  >
+    <path d="M20 6 9 17l-5-5" />
+  </svg>
+);
+
+/**
+ * Box icon for containers
+ */
+export const BoxIcon: React.FC<IconProps> = ({
+  size = defaultSize,
+  color = defaultColor,
+  className,
+}) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke={color}
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    className={className}
+  >
+    <path d="M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z" />
+    <path d="m3.3 7 8.7 5 8.7-5" />
+    <path d="M12 22V12" />
+  </svg>
+);
+
+/**
+ * Crosshair icon for root/target
+ */
+export const CrosshairIcon: React.FC<IconProps> = ({
+  size = defaultSize,
+  color = defaultColor,
+  className,
+}) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke={color}
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    className={className}
+  >
+    <circle cx="12" cy="12" r="10" />
+    <line x1="22" y1="12" x2="18" y2="12" />
+    <line x1="6" y1="12" x2="2" y2="12" />
+    <line x1="12" y1="6" x2="12" y2="2" />
+    <line x1="12" y1="22" x2="12" y2="18" />
+  </svg>
+);
+
+/**
+ * Map observable types to icon components
+ */
+export const OBSERVABLE_ICON_MAP: Record<
+  string,
+  React.FC<IconProps>
+> = {
+  // Network
+  "ipv4-addr": GlobeIcon,
+  "ipv6-addr": GlobeIcon,
+  "domain-name": DomainIcon,
+  url: LinkIcon,
+  "autonomous-system": WorldIcon,
+  "mac-addr": WifiIcon,
+
+  // Email
+  "email-addr": MailIcon,
+  "email-message": EnvelopeIcon,
+
+  // File
+  file: FileIcon,
+  "file-hash": HashIcon,
+  "file:hash:md5": HashIcon,
+  "file:hash:sha1": HashIcon,
+  "file:hash:sha256": HashIcon,
+
+  // User/Identity
+  user: UserIcon,
+  "user-account": UserIcon,
+  identity: IdCardIcon,
+
+  // Process/System
+  process: GearIcon,
+  software: AppIcon,
+  "windows-registry-key": RegistryIcon,
+
+  // Threat Intelligence
+  "threat-actor": ThreatActorIcon,
+  malware: BugIcon,
+  "attack-pattern": SwordIcon,
+  campaign: TargetIcon,
+  indicator: AlertIcon,
+
+  // Artifacts
+  artifact: FlaskIcon,
+  certificate: CertificateIcon,
+  "x509-certificate": CertificateIcon,
+
+  // Default
+  unknown: QuestionIcon,
+};
+
+/**
+ * Map investigation node types to icons
+ */
+export const INVESTIGATION_ICON_MAP: Record<
+  string,
+  React.FC<IconProps>
+> = {
+  root: CrosshairIcon,
+  check: CheckIcon,
+  container: BoxIcon,
+};
+
+/**
+ * Get the icon component for an observable type.
+ */
+export function getObservableIcon(
+  observableType: string
+): React.FC<IconProps> {
+  const normalized = observableType.toLowerCase().trim();
+  return OBSERVABLE_ICON_MAP[normalized] ?? OBSERVABLE_ICON_MAP.unknown;
+}
+
+/**
+ * Get the icon component for an investigation node type.
+ */
+export function getInvestigationIcon(
+  nodeType: string
+): React.FC<IconProps> {
+  return INVESTIGATION_ICON_MAP[nodeType] ?? QuestionIcon;
+}
+