jan-henrik/constellation-analyzer
1
0
Fork 0
mirror of https://github.com/OFFIS-ESC/constellation-analyzer synced 2026-01-27 07:43:41 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix: dont show description in node visualization

Browse source
This commit is contained in:
Jan-Henrik Bruhn 2025-10-14 10:26:22 +02:00
parent 9d3dfff64a
commit ba6606d8b9
1 changed files with 37 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

71
src/components/Nodes/CustomNode.tsx
View file

@ -1,10 +1,13 @@
import { memo, useMemo } from 'react';
import { Handle, Position, NodeProps, useStore } from 'reactflow';
import { useGraphStore } from '../../stores/graphStore';
import { useSearchStore } from '../../stores/searchStore';
import { getContrastColor, adjustColorBrightness } from '../../utils/colorUtils';
import { getIconComponent } from '../../utils/iconUtils';
import type { ActorData } from '../../types';
import { memo, useMemo } from "react";
import { Handle, Position, NodeProps, useStore } from "reactflow";
import { useGraphStore } from "../../stores/graphStore";
import { useSearchStore } from "../../stores/searchStore";
import {
getContrastColor,
adjustColorBrightness,
} from "../../utils/colorUtils";
import { getIconComponent } from "../../utils/iconUtils";
import type { ActorData } from "../../types";
/**
* CustomNode - Represents an actor in the constellation graph
@ -27,13 +30,15 @@ const CustomNode = ({ data, selected }: NodeProps<ActorData>) => {
// Find the node type configuration
const nodeTypeConfig = nodeTypes.find((nt) => nt.id === data.type);
const nodeColor = nodeTypeConfig?.color || '#6b7280';
const nodeLabel = nodeTypeConfig?.label || 'Unknown';
const nodeColor = nodeTypeConfig?.color || "#6b7280";
const nodeLabel = nodeTypeConfig?.label || "Unknown";
const IconComponent = getIconComponent(nodeTypeConfig?.icon);
// Determine text color based on background
const textColor = getContrastColor(nodeColor);
const borderColor = selected ? adjustColorBrightness(nodeColor, -20) : nodeColor;
const borderColor = selected
? adjustColorBrightness(nodeColor, -20)
: nodeColor;
// Show handles when selected or when connecting
const showHandles = selected || isConnecting;
@ -49,8 +54,8 @@ const CustomNode = ({ data, selected }: NodeProps<ActorData>) => {
// Check search text match
if (searchText.trim()) {
const searchLower = searchText.toLowerCase();
const label = data.label?.toLowerCase() || '';
const description = data.description?.toLowerCase() || '';
const label = data.label?.toLowerCase() || "";
const description = data.description?.toLowerCase() || "";
const typeName = nodeLabel.toLowerCase();
return (
@ -61,11 +66,19 @@ const CustomNode = ({ data, selected }: NodeProps<ActorData>) => {
}
return true;
}, [searchText, visibleActorTypes, data.type, data.label, data.description, nodeLabel]);
}, [
searchText,
visibleActorTypes,
data.type,
data.label,
data.description,
nodeLabel,
]);
// Determine if filters are active
const hasActiveFilters = searchText.trim() !== '' ||
Object.values(visibleActorTypes).some(v => v === false);
const hasActiveFilters =
searchText.trim() !== "" ||
Object.values(visibleActorTypes).some((v) => v === false);
// Calculate opacity based on match status
const nodeOpacity = hasActiveFilters && !isMatch ? 0.2 : 1.0;
@ -76,20 +89,20 @@ const CustomNode = ({ data, selected }: NodeProps<ActorData>) => {
className={`
px-4 py-3 rounded-lg shadow-md min-w-[120px]
transition-all duration-200
${selected ? 'shadow-xl' : 'shadow-md'}
${selected ? "shadow-xl" : "shadow-md"}
`}
style={{
backgroundColor: nodeColor,
borderWidth: '3px', // Keep consistent border width
borderStyle: 'solid',
borderWidth: "3px", // Keep consistent border width
borderStyle: "solid",
borderColor: borderColor,
color: textColor,
opacity: nodeOpacity,
boxShadow: selected
? `0 0 0 3px ${nodeColor}40` // Add outer glow when selected (40 = ~25% opacity)
: isHighlighted
? `0 0 0 3px ${nodeColor}80, 0 0 12px ${nodeColor}60` // Highlight glow for search matches
: undefined,
? `0 0 0 3px ${nodeColor}80, 0 0 12px ${nodeColor}60` // Highlight glow for search matches
: undefined,
}}
>
{/* Connection handles - shown only when selected or connecting */}
@ -157,7 +170,10 @@ const CustomNode = ({ data, selected }: NodeProps<ActorData>) => {
<div className="space-y-1">
{/* Icon (if available) */}
{IconComponent && (
<div className="flex justify-center mb-1" style={{ color: textColor, fontSize: '2rem' }}>
<div
className="flex justify-center mb-1"
style={{ color: textColor, fontSize: "2rem" }}
>
<IconComponent />
</div>
)}
@ -177,19 +193,6 @@ const CustomNode = ({ data, selected }: NodeProps<ActorData>) => {
>
{nodeLabel}
</div>
{/* Description (if available) */}
{data.description && (
<div
className="text-xs text-center opacity-60 pt-2 mt-1 border-t"
style={{
color: textColor,
borderColor: `${textColor}40`, // 40 is hex for ~25% opacity
}}
>
{data.description}
</div>
)}
</div>
</div>
);