Skip to main content

Stage Frequency Curve (SFC) Node

The Stage Frequency Curve node provides hydrological analysis capabilities for flood modeling within the React Flow workbench.

Architecture​

Types & Validation​

  • SFCData interface in apps/app/types/flow.ts extends BaseNodeData
  • Zod validation schema in apps/app/lib/validation/sfc-validation.ts
  • Supports nested data structure for analysis sections

Components​

  • SFCNode — React Flow node component with TrendingUp icon
  • SFCPanel — Properties panel with accordion structure
  • Uses @repo/design-system UI components

Data Structure​

interface SFCData extends BaseNodeData {
  datasets?: {
    name?: string;
    description?: string;
  };
  reservoirModel?: Record<string, unknown>;
  criticalDuration?: Record<string, unknown>;
  volumeFrequencyCurve?: Record<string, unknown>;
  floodSeasonality?: Record<string, unknown>;
  hydrographShapes?: Record<string, unknown>;
  startingStageDuration?: Record<string, unknown>;
  empiricalFrequency?: Record<string, unknown>;
  simulation?: Record<string, unknown>;
  results?: Record<string, unknown>;
}

Configuration Sections​

Implemented Sections​

  • Datasets — Name and description fields with validation
  • Basic Information — Node name and description

Placeholder Sections​

The following sections are structured placeholders ready for future implementation:

  • Reservoir Model
  • Critical Duration
  • Volume Frequency Curve
  • Flood Seasonality
  • Hydrograph Shapes
  • Starting Stage Duration
  • Empirical Frequency
  • Simulation
  • Results

Usage​

Add SFC nodes to the workbench:

const newSFCNode = {
  id: `sfc-${Date.now()}`,
  type: 'sfc',
  position: { x: 100, y: 100 },
  data: {
    name: 'New Stage Frequency Curve',
    description: '',
    datasets: { name: '', description: '' },
  },
};

Configure through properties panel:

// Properties panel automatically opens on node selection
// Accordion structure with Datasets section expanded by default
// Real-time validation and autosave via useAnalysis hook

Testing & Stories​

  • Unit tests in apps/app/__tests__/sfc-node.test.tsx
  • Storybook stories in apps/storybook/stories/sfc-node.stories.tsx
  • Multiple test scenarios including minimal data and edge cases