chihlasm/resolutionflow
1
0
Fork 0
Code Issues 23 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

refactor(network): simplify diagram node visuals

Browse Source
This commit is contained in:
chihlasm
2026-04-14 02:42:47 +00:00
parent ed763d1cea
commit 3cd4084f78
3 changed files with 51 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
frontend/src/components/network/nodes/DeviceNode.tsx
View File

@@ -1,6 +1,5 @@
import { memo, useState, useRef, useEffect } from 'react' import { memo, useState, useRef, useEffect } from 'react'
import { Position, NodeResizer, useReactFlow, type NodeProps } from '@xyflow/react' import { Position, NodeResizer, useReactFlow, type NodeProps } from '@xyflow/react'
import { HardDrive, Network, ShieldCheck } from 'lucide-react'
import { BaseNode, BaseNodeHeader, BaseNodeContent } from '../ui/base-node' import { BaseNode, BaseNodeHeader, BaseNodeContent } from '../ui/base-node'
import { BaseHandle } from '../ui/base-handle' import { BaseHandle } from '../ui/base-handle'
import { NodeStatusIndicator, type NodeStatus } from '../ui/node-status-indicator' import { NodeStatusIndicator, type NodeStatus } from '../ui/node-status-indicator'
@@ -31,48 +30,9 @@ const NODE_DEFAULT = 120 // default square side in px
const NODE_MIN = 80 // minimum square side in px const NODE_MIN = 80 // minimum square side in px
const NODE_MAX = 280 // maximum square side in px const NODE_MAX = 280 // maximum square side in px
function DeviceNodeChrome({
category,
accentClass,
glyph,
}: {
category: string
accentClass: string
glyph: string
}) {
const MetaIcon = category === 'network'
? Network
: category === 'security'
? ShieldCheck
: HardDrive
return (
<>
<div className="pointer-events-none absolute inset-x-0 top-0 flex items-center justify-between px-2 py-1">
<span className={cn('rounded-full border px-1.5 py-0.5 text-[8px] font-semibold tracking-[0.18em]', accentClass)}>
{glyph}
</span>
<span className="text-[8px] font-medium uppercase tracking-[0.16em] text-muted-foreground/80">
{CATEGORY_LABELS[category] ?? category}
</span>
</div>
<div className="pointer-events-none absolute inset-x-3 top-6 h-px bg-gradient-to-r from-transparent via-border-default to-transparent" />
<div className="pointer-events-none absolute bottom-2 left-2 flex items-center gap-1 rounded-full border border-default bg-page/80 px-1.5 py-0.5 text-[8px] uppercase tracking-[0.14em] text-muted-foreground">
<MetaIcon size={9} />
<span>Asset</span>
</div>
<div className="pointer-events-none absolute bottom-2 right-2 flex gap-1">
<span className="h-1.5 w-1.5 rounded-full bg-border-default" />
<span className="h-1.5 w-1.5 rounded-full bg-border-default/80" />
<span className="h-1.5 w-1.5 rounded-full bg-border-default/60" />
</div>
</>
)
}
function DeviceNodeComponent({ id, data, selected, width, height }: NodeProps) { function DeviceNodeComponent({ id, data, selected, width, height }: NodeProps) {
const nodeData = data as unknown as DeviceNodeData const nodeData = data as unknown as DeviceNodeData
const { icon: Icon, color, accentClass, surfaceClass, category, glyph } = getDeviceRenderConfig(nodeData.deviceType, nodeData.category) const { icon: Icon, color, accentClass, surfaceClass, category } = getDeviceRenderConfig(nodeData.deviceType, nodeData.category)
const status = (nodeData.properties?.status || 'unknown') as NodeStatus const status = (nodeData.properties?.status || 'unknown') as NodeStatus
const ip = nodeData.properties?.ip const ip = nodeData.properties?.ip
const props = nodeData.properties || {} const props = nodeData.properties || {}
@@ -87,8 +47,8 @@ function DeviceNodeComponent({ id, data, selected, width, height }: NodeProps) {
const labelPx = Math.max(9, Math.min(20, Math.round(scale * 11))) const labelPx = Math.max(9, Math.min(20, Math.round(scale * 11)))
// IP font: 9px at default, clamped to [8, 16] // IP font: 9px at default, clamped to [8, 16]
const ipPx = Math.max(8, Math.min(16, Math.round(scale * 9))) const ipPx = Math.max(8, Math.min(16, Math.round(scale * 9)))
const typePx = Math.max(8, Math.min(13, Math.round(scale * 8.5))) const metaPx = Math.max(8, Math.min(11, Math.round(scale * 8)))
const iconPlateSize = Math.round(Math.max(36, Math.min(92, scale * 56))) const iconPlateSize = Math.round(Math.max(34, Math.min(82, scale * 50)))
const [editing, setEditing] = useState(false) const [editing, setEditing] = useState(false)
const [labelValue, setLabelValue] = useState(nodeData.label ?? '') const [labelValue, setLabelValue] = useState(nodeData.label ?? '')
@@ -124,19 +84,17 @@ function DeviceNodeComponent({ id, data, selected, width, height }: NodeProps) {
<NodeStatusIndicator status={status}> <NodeStatusIndicator status={status}>
<NodeTooltip> <NodeTooltip>
<NodeTooltipTrigger> <NodeTooltipTrigger>
<BaseNode className="group h-full w-full bg-gradient-to-b from-card via-card to-page/80"> <BaseNode className="group h-full w-full bg-gradient-to-b from-card via-card to-page/70">
<div className={cn('pointer-events-none absolute inset-x-0 top-0 h-14 bg-gradient-to-b', surfaceClass)} /> <div className={cn('pointer-events-none absolute inset-x-0 top-0 h-10 bg-gradient-to-b opacity-80', surfaceClass)} />
<DeviceNodeChrome category={category} accentClass={accentClass} glyph={glyph} /> <BaseNodeHeader className="flex h-full flex-col items-center justify-center gap-2 px-2 py-3">
<BaseNodeHeader className="flex h-full flex-col items-center justify-center gap-2 px-2 pt-8 pb-3">
<div <div
className={cn( className={cn(
'relative flex items-center justify-center rounded-2xl border shadow-inner', 'relative flex items-center justify-center rounded-xl border transition-colors',
accentClass, accentClass,
)} )}
style={{ width: iconPlateSize, height: iconPlateSize }} style={{ width: iconPlateSize, height: iconPlateSize }}
> >
<div className="absolute inset-[5px] rounded-[14px] border border-white/8 bg-page/65" /> <div className="absolute inset-[4px] rounded-[10px] border border-white/6 bg-page/55" />
<div className="absolute inset-x-2 top-2 h-px bg-gradient-to-r from-transparent via-white/20 to-transparent" />
<div className="relative z-10"> <div className="relative z-10">
<Icon size={iconPx} style={{ color }} /> <Icon size={iconPx} style={{ color }} />
</div> </div>
@@ -176,16 +134,16 @@ function DeviceNodeComponent({ id, data, selected, width, height }: NodeProps) {
</span> </span>
)} )}
<span <span
style={{ fontSize: typePx }} style={{ fontSize: metaPx }}
className="rounded-full border border-default bg-page/70 px-2 py-0.5 text-[9px] uppercase tracking-[0.18em] text-muted-foreground" className="text-[9px] uppercase tracking-[0.16em] text-muted-foreground/80"
> >
{nodeData.deviceType.replace(/-/g, ' ')} {CATEGORY_LABELS[category] ?? nodeData.deviceType.replace(/-/g, ' ')}
</span> </span>
</BaseNodeHeader> </BaseNodeHeader>
{ip && ( {ip && (
<BaseNodeContent className="items-center pt-0 pb-3"> <BaseNodeContent className="items-center pt-0 pb-2">
<span <span
className="rounded-full border border-default bg-page/80 px-2 py-0.5 font-mono text-muted-foreground" className="rounded-full border border-default bg-page/70 px-2 py-0.5 font-mono text-muted-foreground"
style={{ fontSize: ipPx }} style={{ fontSize: ipPx }}
> >
{ip} {ip}

77
frontend/src/components/network/nodes/deviceRegistry.ts
View File

@@ -12,7 +12,6 @@ export interface DeviceRenderConfig {
accentClass: string accentClass: string
surfaceClass: string surfaceClass: string
category: string category: string
glyph: string
} }
// Category-semantic color palette — each color carries meaning: // Category-semantic color palette — each color carries meaning:
@@ -66,13 +65,11 @@ function makeConfig(
icon: LucideIcon, icon: LucideIcon,
color: string, color: string,
category: string, category: string,
glyph: string,
): DeviceRenderConfig { ): DeviceRenderConfig {
return { return {
icon, icon,
color, color,
category, category,
glyph,
accentClass: CATEGORY_STYLES[category]?.accentClass ?? CATEGORY_STYLES.infrastructure.accentClass, accentClass: CATEGORY_STYLES[category]?.accentClass ?? CATEGORY_STYLES.infrastructure.accentClass,
surfaceClass: CATEGORY_STYLES[category]?.surfaceClass ?? CATEGORY_STYLES.infrastructure.surfaceClass, surfaceClass: CATEGORY_STYLES[category]?.surfaceClass ?? CATEGORY_STYLES.infrastructure.surfaceClass,
} }
@@ -80,60 +77,60 @@ function makeConfig(
const SYSTEM_DEVICE_ICONS: Record<string, DeviceRenderConfig> = { const SYSTEM_DEVICE_ICONS: Record<string, DeviceRenderConfig> = {
// Network layer // Network layer
'router': makeConfig(Router, NETWORK_COLOR, 'network', 'RTR'), 'router': makeConfig(Router, NETWORK_COLOR, 'network'),
'switch': makeConfig(Network, NETWORK_COLOR, 'network', 'SW'), 'switch': makeConfig(Network, NETWORK_COLOR, 'network'),
'access-point': makeConfig(Wifi, NETWORK_COLOR, 'network', 'AP'), 'access-point': makeConfig(Wifi, NETWORK_COLOR, 'network'),
'load-balancer': makeConfig(Gauge, NETWORK_COLOR, 'network', 'LB'), 'load-balancer': makeConfig(Gauge, NETWORK_COLOR, 'network'),
// Security // Security
'firewall': makeConfig(BrickWallFire, SECURITY_COLOR, 'security', 'FW'), 'firewall': makeConfig(BrickWallFire, SECURITY_COLOR, 'security'),
'badge-reader': makeConfig(KeyRound, SECURITY_COLOR, 'security', 'BR'), 'badge-reader': makeConfig(KeyRound, SECURITY_COLOR, 'security'),
// Compute // Compute
'server': makeConfig(Server, COMPUTE_COLOR, 'compute', 'SRV'), 'server': makeConfig(Server, COMPUTE_COLOR, 'compute'),
'vm': makeConfig(Boxes, COMPUTE_COLOR, 'compute', 'VM'), 'vm': makeConfig(Boxes, COMPUTE_COLOR, 'compute'),
'container': makeConfig(Package, COMPUTE_COLOR, 'compute', 'CTR'), 'container': makeConfig(Package, COMPUTE_COLOR, 'compute'),
// Storage // Storage
'nas': makeConfig(Database, STORAGE_COLOR, 'storage', 'NAS'), 'nas': makeConfig(Database, STORAGE_COLOR, 'storage'),
'san': makeConfig(HardDrive, STORAGE_COLOR, 'storage', 'SAN'), 'san': makeConfig(HardDrive, STORAGE_COLOR, 'storage'),
'cloud-storage': makeConfig(CloudCog, STORAGE_COLOR, 'storage', 'CS'), 'cloud-storage': makeConfig(CloudCog, STORAGE_COLOR, 'storage'),
// Cloud / Internet // Cloud / Internet
'cloud': makeConfig(Cloud, CLOUD_COLOR, 'cloud', 'CLD'), 'cloud': makeConfig(Cloud, CLOUD_COLOR, 'cloud'),
'aws': makeConfig(Cloud, CLOUD_COLOR, 'cloud', 'AWS'), 'aws': makeConfig(Cloud, CLOUD_COLOR, 'cloud'),
'azure': makeConfig(Cloud, CLOUD_COLOR, 'cloud', 'AZ'), 'azure': makeConfig(Cloud, CLOUD_COLOR, 'cloud'),
'gcp': makeConfig(Cloud, CLOUD_COLOR, 'cloud', 'GCP'), 'gcp': makeConfig(Cloud, CLOUD_COLOR, 'cloud'),
'isp': makeConfig(Globe, CLOUD_COLOR, 'cloud', 'WAN'), 'isp': makeConfig(Globe, CLOUD_COLOR, 'cloud'),
// Endpoints // Endpoints
'workstation': makeConfig(Monitor, ENDPOINT_COLOR, 'endpoint', 'WS'), 'workstation': makeConfig(Monitor, ENDPOINT_COLOR, 'endpoint'),
'laptop': makeConfig(Laptop, ENDPOINT_COLOR, 'endpoint', 'LTP'), 'laptop': makeConfig(Laptop, ENDPOINT_COLOR, 'endpoint'),
'tablet': makeConfig(Tablet, ENDPOINT_COLOR, 'endpoint', 'TAB'), 'tablet': makeConfig(Tablet, ENDPOINT_COLOR, 'endpoint'),
'phone': makeConfig(Smartphone, ENDPOINT_COLOR, 'endpoint', 'PH'), 'phone': makeConfig(Smartphone, ENDPOINT_COLOR, 'endpoint'),
'printer': makeConfig(Printer, ENDPOINT_COLOR, 'endpoint', 'PRN'), 'printer': makeConfig(Printer, ENDPOINT_COLOR, 'endpoint'),
// Infrastructure / physical // Infrastructure / physical
'ups': makeConfig(BatteryCharging, INFRA_COLOR, 'infrastructure', 'UPS'), 'ups': makeConfig(BatteryCharging, INFRA_COLOR, 'infrastructure'),
'pdu': makeConfig(PlugZap, INFRA_COLOR, 'infrastructure', 'PDU'), 'pdu': makeConfig(PlugZap, INFRA_COLOR, 'infrastructure'),
'rack': makeConfig(RectangleVertical, INFRA_COLOR, 'infrastructure', 'RCK'), 'rack': makeConfig(RectangleVertical, INFRA_COLOR, 'infrastructure'),
'patch-panel': makeConfig(Cable, INFRA_COLOR, 'infrastructure', 'PP'), 'patch-panel': makeConfig(Cable, INFRA_COLOR, 'infrastructure'),
'camera': makeConfig(Camera, INFRA_COLOR, 'infrastructure', 'CAM'), 'camera': makeConfig(Camera, INFRA_COLOR, 'infrastructure'),
'nvr': makeConfig(Video, INFRA_COLOR, 'infrastructure', 'NVR'), 'nvr': makeConfig(Video, INFRA_COLOR, 'infrastructure'),
'iot': makeConfig(Radio, INFRA_COLOR, 'infrastructure', 'IOT'), 'iot': makeConfig(Radio, INFRA_COLOR, 'infrastructure'),
} }
const CATEGORY_DEFAULTS: Record<string, DeviceRenderConfig> = { const CATEGORY_DEFAULTS: Record<string, DeviceRenderConfig> = {
'network': makeConfig(Router, NETWORK_COLOR, 'network', 'NET'), 'network': makeConfig(Router, NETWORK_COLOR, 'network'),
'compute': makeConfig(Server, COMPUTE_COLOR, 'compute', 'CPU'), 'compute': makeConfig(Server, COMPUTE_COLOR, 'compute'),
'storage': makeConfig(Database, STORAGE_COLOR, 'storage', 'DB'), 'storage': makeConfig(Database, STORAGE_COLOR, 'storage'),
'cloud': makeConfig(Cloud, CLOUD_COLOR, 'cloud', 'CLD'), 'cloud': makeConfig(Cloud, CLOUD_COLOR, 'cloud'),
'endpoint': makeConfig(Monitor, ENDPOINT_COLOR, 'endpoint', 'END'), 'endpoint': makeConfig(Monitor, ENDPOINT_COLOR, 'endpoint'),
'infrastructure': makeConfig(PlugZap, INFRA_COLOR, 'infrastructure', 'INF'), 'infrastructure': makeConfig(PlugZap, INFRA_COLOR, 'infrastructure'),
'security': makeConfig(BrickWallFire, SECURITY_COLOR, 'security', 'SEC'), 'security': makeConfig(BrickWallFire, SECURITY_COLOR, 'security'),
} }
const FALLBACK: DeviceRenderConfig = makeConfig(Cpu, INFRA_COLOR, 'infrastructure', 'DEV') const FALLBACK: DeviceRenderConfig = makeConfig(Cpu, INFRA_COLOR, 'infrastructure')
export function getDeviceRenderConfig(slug: string, category?: string): DeviceRenderConfig { export function getDeviceRenderConfig(slug: string, category?: string): DeviceRenderConfig {
if (SYSTEM_DEVICE_ICONS[slug]) return SYSTEM_DEVICE_ICONS[slug] if (SYSTEM_DEVICE_ICONS[slug]) return SYSTEM_DEVICE_ICONS[slug]

2
frontend/src/components/network/ui/base-node.tsx
View File

@@ -6,7 +6,7 @@ export function BaseNode({ className, ...props }: ComponentProps<'div'>) {
<div <div
className={cn( className={cn(
'bg-card text-heading relative overflow-hidden rounded-xl border border-default', 'bg-card text-heading relative overflow-hidden rounded-xl border border-default',
'transition-colors hover:border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50', 'transition-colors hover:border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/40',
'in-[.selected]:border-accent', 'in-[.selected]:border-accent',
className, className,
)} )}