firmware-base/web/packages/modbus-ui/docs/profiles-multi.md

Enhanced Profile Editor with Multi-Plot Support

Overview

The Enhanced Profile Editor extends the existing ProfileEditorEx to allow editing pressure profiles alongside temperature profiles within the same interface. This provides a unified editing experience while keeping plot types isolated - the server handles all coordination based on profile associations.

Key Benefits

• Unified Editing: Edit temperature and pressure profiles in the same interface
• Server-Side Coordination: Plot coordination handled by server, not client
• Simplified Association: Simple slot references link profiles together
• Isolated Plot Types: Each plot type remains independent and focused

Feature Flag

The enhanced profile editor is controlled by the existing constant:

// In src/constants.ts
export const ENABLE_TEMPERATURE_PRESSURE_PROFILE = true;

This constant enables/disables the pressure profile editing within temperature profile editor.

Data Structure

The enhanced editor uses a single object literal with simple associations:

interface EnhancedProfileData {
  // Main temperature profile (existing structure)
  profile: TemperatureProfile;
  
  // Basic profile metadata
  name: string;
  slot: number;
  description?: string;
  duration: number;
  max: number;
  
  // Simple associations (server-coordinated)
  signalPlot: number;           // 0 = none, >0 = signal plot slot
  pressureProfile: number;      // 0 = none, >0 = pressure profile slot
  
  // Available options for editing
  availableSignalPlots: SignalPlotData[];
  availablePressureProfiles: PressureProfile[];
}

User Interface Enhancement

When ENABLE_TEMPERATURE_PRESSURE_PROFILE is enabled, the existing ProfileEditorEx gains an additional section:

Enhanced Sections

1. Existing Temperature Section (unchanged)

   • Bezier curve editor for temperature over time
   • Temperature control points list
   • Duration controls (MASTER duration)
   • All existing temperature functionality

2. Existing Signal Plot Section (unchanged)

   • Signal plot selector and editor
   • Signal control points timeline
   • All existing signal plot functionality
   • Note: Signal plot inherits temperature profile's duration when associated

3. New Pressure Profile Section (conditional)

   • Pressure profile selector dropdown
   • Pressure profile editor (when selected)
   • Independent pressure curve editing
   • Note: Pressure profile inherits temperature profile's duration when associated

Server-Side Coordination

The server automatically coordinates plot execution and duration based on associations:

• When signalPlot: 0 → No signal plot coordination
• When signalPlot: N → Server pauses/stops signal plot N with temperature profile
  • Signal plot runs for temperature profile's duration
• When pressureProfile: 0 → No pressure profile coordination
• When pressureProfile: N → Server pauses/stops pressure profile N with temperature profile
  • Pressure profile runs for temperature profile's duration

Technical Implementation

Minimal Component Changes

The implementation leverages the existing ProfileEditorEx with minimal modifications:

// Enhanced props for ProfileEditorEx
interface ProfileEditorProps {
  onSubmit: (data: ProfileSavePayload) => void;
  initialData?: EnhancedProfileData; // Enhanced data structure
  max: number;
  availableControllers: Controller[];
}

State Management Enhancement

Existing state gets enhanced with simple pressure profile selection:

// Add to existing ProfileEditorEx state
const [pressureProfileId, setPressureProfileId] = useState<number>(initialData?.pressureProfile || 0);
const [availablePressureProfiles, setAvailablePressureProfiles] = useState<PressureProfile[]>([]);
const [selectedPressureProfileData, setSelectedPressureProfileData] = useState<PressureProfile | null>(null);

Conditional Rendering

// In ProfileEditorEx render method - similar to existing signal plot section
{ENABLE_TEMPERATURE_PRESSURE_PROFILE && (
  <div className="border-t border-slate-300/30 dark:border-white/10 pt-4">
    <Label className="text-slate-700 dark:text-white">
      <T>Associated Pressure Profile (Optional)</T>
    </Label>
    <Select
      onValueChange={(value) => {
        const newId = value === "@none" ? 0 : parseInt(value, 10);
        setPressureProfileId(newId);
      }}
      value={pressureProfileId === 0 ? "@none" : pressureProfileId.toString()}
    >
      <SelectTrigger className="glass-input">
        <SelectValue placeholder={translate("Select a pressure profile to associate")} />
      </SelectTrigger>
      <SelectContent className="glass-panel border-0">
        <SelectItem value="@none"><T>None</T></SelectItem>
        {availablePressureProfiles.map((profile) => (
          <SelectItem key={profile.slot} value={profile.slot.toString()}>
            {profile.name} ({translate("Slot:")} {profile.slot})
          </SelectItem>
        ))}
      </SelectContent>
    </Select>
  </div>
)}

User Workflow

Creating Enhanced Profiles

1. Temperature Setup: Configure temperature profile using existing controls
2. Signal Plot Association (optional): Select signal plot from dropdown (existing functionality)
3. Pressure Profile Association (optional): Select pressure profile from dropdown
4. Save: Save profile with associations - server handles coordination

Object Literal Structure

The enhanced profile editor receives/outputs a single object with simple associations:

const enhancedProfileData = {
  // Core temperature profile data (existing)
  profile: temperatureProfile,
  name: "Heat Treatment Process",
  slot: 0,
  description: "Combined heating and pressure cycle",
  duration: 1800000, // 30 minutes - MASTER DURATION for all associated plots
  max: 250, // Max temperature
  
  // Simple associations (server-coordinated)
  signalPlot: 2,           // Associate with signal plot slot 2 (inherits duration)
  pressureProfile: 1,      // Associate with pressure profile slot 1 (inherits duration)
  
  // Available options for dropdowns
  availableSignalPlots: [...],
  availablePressureProfiles: [...]
};

Server Coordination Logic

When the temperature profile runs:

• If signalPlot: 0 → No signal coordination
• If signalPlot: N → Server automatically pauses/stops/resumes signal plot N
  • Duration: Signal plot uses temperature profile's duration
• If pressureProfile: 0 → No pressure coordination
• If pressureProfile: N → Server automatically pauses/stops/resumes pressure profile N
  • Duration: Pressure profile uses temperature profile's duration

Key Point: The temperature profile is the master timeline - associated signal plots and pressure profiles inherit its duration and execution timeline.

All plot types remain isolated in editing - only the server manages their lifecycle coordination and duration synchronization.

Process Control Benefits

Server-Managed Coordination

• Temperature profile controls associated plot lifecycles and duration
• Temperature profile acts as master timeline for all associated plots
• Independent plot editing with automatic server coordination
• Simplified client-side logic - no complex coordination code needed
• Reliable execution managed by server state machine

Clear Separation of Concerns

• Temperature profiles remain focused on temperature control
• Pressure profiles remain focused on pressure control
• Signal plots remain focused on discrete actions
• Server handles all inter-plot coordination logic

Implementation Approach

Single Component Enhancement

• Extend existing ProfileEditorEx component
• Add conditional pressure profile sections
• Enhance BezierEditor for dual-curve display
• Reuse existing CollapsibleSection patterns

Minimal Changes Required

• Add pressure profile selector to ProfileEditorEx (similar to signal plot selector)
• Add pressure profile state management (simple slot ID)
• Optional: Add pressure profile editing section when profile selected
• Conditional rendering based on ENABLE_TEMPERATURE_PRESSURE_PROFILE

Configuration

Feature Detection

import { ENABLE_TEMPERATURE_PRESSURE_PROFILE } from '@/constants';

const shouldShowPressureFeatures = () => {
  return ENABLE_TEMPERATURE_PRESSURE_PROFILE && 
         featureFlags.ENABLE_PROFILE_TEMPERATURE && 
         featureFlags.ENABLE_PROFILE_PRESSURE_PROFILE;
};

Usage in ProfileEditorEx

// In ProfileEditorEx component
import { ENABLE_TEMPERATURE_PRESSURE_PROFILE } from '@/constants';

// Conditional rendering for pressure profile selector (similar to signal plot selector)
{ENABLE_TEMPERATURE_PRESSURE_PROFILE && (
  <div className="border-t border-slate-300/30 dark:border-white/10 pt-4">
    <Label><T>Associated Pressure Profile (Optional)</T></Label>
    <Select value={pressureProfileId.toString()} onValueChange={setPressureProfileId}>
      <SelectItem value="0"><T>None</T></SelectItem>
      {availablePressureProfiles.map(profile => (
        <SelectItem key={profile.slot} value={profile.slot.toString()}>
          {profile.name}
        </SelectItem>
      ))}
    </Select>
  </div>
)}

Integration with Existing Code

ProfilePage Integration

// In ProfilePage.tsx - pass enhanced data to ProfileEditorEx
const enhancedInitialData = {
  ...initialData,                    // Existing temperature profile data
  signalPlot: initialData?.signalPlot || 0,     // Existing signal plot association
  pressureProfile: initialData?.pressureProfile || 0,  // New pressure profile association
  availableSignalPlots,              // Existing available signal plots
  availablePressureProfiles          // New available pressure profiles from context
};

<ProfileEditor
  onSubmit={handleEnhancedSubmit}    // Enhanced submit includes pressureProfile field
  initialData={enhancedInitialData}
  max={maxTemp}
  availableControllers={availableControllers}
/>

No New Routes Required

The existing routes continue to work:

• /profiles/new - Create new enhanced profile
• /profiles/:slot - Edit existing profile with enhancements

Future Enhancements

Advanced Features

1. Process Templates: Pre-defined temperature/pressure coordination patterns
2. Predictive Modeling: Suggest pressure curves based on temperature profiles
3. Process Validation: Automated checks for process safety and efficiency
4. Historical Analysis: Compare actual vs. planned temperature/pressure execution
5. Multi-Controller Coordination: Coordinate multiple temperature and pressure controllers

Integration Opportunities

1. Recipe Management: Integration with broader recipe/process management
2. Quality Control: Link profile execution to quality metrics
3. Energy Optimization: Optimize profiles for energy efficiency
4. Maintenance Scheduling: Coordinate profiles with maintenance windows

Conclusion

The Enhanced Profile Editor with Multi-Plot Support provides a clean, server-coordinated approach to associating different plot types. By extending the existing ProfileEditorEx component with simple associations, this design:

• Minimizes Code Changes: Adds simple pressure profile selector similar to existing signal plot selector
• Maintains Plot Isolation: Each plot type remains independent and focused
• Server-Side Coordination: All plot lifecycle coordination handled by server logic
• Simplified Client Logic: No complex linkage modes or client-side coordination needed
• Backward Compatible: Existing temperature and signal plot functionality unchanged

The implementation provides powerful multi-plot coordination while keeping the client-side architecture simple and maintainable.