Skip to main content

Frontend Enhanced Features - Options Integration

Date: October 15, 2025 Status: ✅ Implemented

Enhanced UX Features​

1. Options Dropdown with Action Buttons ✅​

The Scenario Edit form now features a sophisticated options selection interface:

┌─────────────────────────────────────────────────────┐
│ Options Preset ▼          [👁️ View] [➕ New]       │
│ > Default (Default chip)                           │
└─────────────────────────────────────────────────────┘

Features:

  • Dropdown - Select from existing options presets
  • View Details Button (eye icon) - Opens full options configuration modal
  • Create New Button (plus icon) - Opens dialog to create new preset inline
  • Both buttons have tooltips for clarity

2. Live Preview Panel ✅​

Below the dropdown, a preview panel automatically updates when selection changes:

┌─────────────────────────────────────────────────────┐
│ 📋 Selected Options: PDA Standard                   │
│ Standard PDA configuration with typical settings    │
├─────────────────────────────────────────────────────┤
│ Demand Model: PDA        Units: GPM                │
│ Headloss: H-W            Pressure: PSI             │
│ Min Pressure: 20         Req Pressure: 50          │
│ Exponent: 0.5                                      │
└─────────────────────────────────────────────────────┘

Features:

  • Shows selected preset name and description
  • Displays key options (Demand Model, Units, Headloss)
  • Shows PDA parameters if PDA mode
  • Color-coded border (primary.main)
  • Auto-updates on dropdown change

3. Inline Options Creation ✅​

Clicking the "➕" button opens a full options creation form:

Workflow:

  1. User clicks "➕ New Preset" button
  2. OptionsCreateDialog opens with full EPANET options form
  3. User fills in:
    • Name (required)
    • Description
    • IsDefault checkbox
    • All EPANET options (Units, Headloss, Demand Model, PDA params, etc.)
  4. User clicks "Create"
  5. New preset is created via API
  6. Options list refreshes automatically
  7. New preset is auto-selected in the dropdown
  8. Dialog closes, user returns to scenario form with new option selected

Benefits:

  • No need to leave scenario form
  • Immediate feedback
  • Auto-selection saves extra clicks
  • Can create options on-the-fly

4. Full Options Viewer ✅​

Clicking the "👁️" button opens a detailed read-only view:

Shows:

  • All EPANET options in organized sections:
    • Basic Information (name, description, default flag)
    • Units (flow, pressure)
    • Hydraulic Analysis (headloss, viscosity, gravity)
    • Demand Model (DDA/PDA with parameters)
    • Convergence Parameters (trials, accuracy, tolerance, etc.)
    • Quality Analysis (type, diffusivity)
    • Demand Settings (pattern, multiplier)
    • Emitter Settings (exponent, backflow)

Benefits:

  • See complete configuration without editing
  • Better understanding of what preset does
  • Professional presentation with sections

5. Improved Details View Styling ✅​

ScenarioDetailsDialog now uses consistent TextField styling:

Before: White Paper box with white text (hard to read) After: Standard TextFields matching rest of form

Features:

  • Options preset name in TextField (read-only)
  • Demand model in TextField (read-only)
  • PDA parameters in indented section with colored border
  • Consistent with other sections (Basic Info, Analysis Options, etc.)
  • Chip indicator for "Using Default"

Component Architecture​

New Components​

  1. OptionsCreateDialog.jsx

    • Full options creation form
    • Organized in sections (Units, Hydraulic, Demand Model, etc.)
    • Grid layout for better space usage
    • Validation-ready structure
    • Default values pre-populated

  2. OptionsViewDialog.jsx

    • Read-only view of all options fields
    • Same sectioned layout as create dialog
    • Shows all parameters including advanced settings
    • Displays default badge if applicable

Updated Components​

  1. ScenarioEditDialog.jsx (Enhanced)

    • Added View and Create buttons next to dropdown
    • Integrated both new dialogs
    • Handles dialog open/close state
    • Passes selectedOption to view dialog

  2. ScenariosList.jsx (Enhanced)

    • Added handleCreateOptions function
    • Auto-selects newly created option
    • Refreshes options list after creation
    • Passes handlers to ScenarioEditDialog

  3. ScenarioDetailsDialog.jsx (Restyled)

    • Replaced Paper component with TextFields
    • Better visual consistency
    • Clearer hierarchy with indented PDA section
    • Better contrast and readability

User Workflows​

Create Scenario with New Options​

  1. Click "Create New Scenario"
  2. Fill in basic info
  3. In EPANET Options section, click "➕" button
  4. Fill out options form (name, demand model, etc.)
  5. Click "Create"
  6. New option auto-selected in scenario form
  7. Preview shows new option details
  8. Submit scenario

Result: Scenario created with custom options in one smooth flow

View Options Details While Editing​

  1. Edit existing scenario
  2. Select different option from dropdown
  3. Click "👁️" button to see full configuration
  4. Review all parameters
  5. Close dialog
  6. Continue editing scenario

Result: Informed decision-making without leaving context

View Scenario with Options Info​

  1. Click scenario to view details
  2. See "Options Preset" field with name
  3. See "Demand Model" field
  4. If PDA, see indented parameters section
  5. All fields properly styled and readable

Result: Clear understanding of scenario configuration

Technical Details​

State Management​

ScenariosList.jsx:

const [optionsPresets, setOptionsPresets] = useState([]);
const [selectedOption, setSelectedOption] = useState(null);

const loadOptionsPresets = async () => {
  const options = await getOptions();
  setOptionsPresets(options);
};

const handleCreateOptions = async (optionsData) => {
  const newOption = await createOption(optionsData);
  await loadOptionsPresets(); // Refresh list
  setFormData(prev => ({ ...prev, optionsId: newOption.id })); // Auto-select
  setSelectedOption(newOption); // Update preview
};

ScenarioEditDialog.jsx:

const [createOptionsOpen, setCreateOptionsOpen] = useState(false);
const [viewOptionsOpen, setViewOptionsOpen] = useState(false);

// Opens create dialog
<IconButton onClick={() => setCreateOptionsOpen(true)}>
  <AddIcon />
</IconButton>

// Opens view dialog
<IconButton onClick={handleViewDetails} disabled={!selectedOption}>
  <ViewIcon />
</IconButton>

API Integration​

Options Creation:

// In optionsService.js
export const createOption = async (data) => {
  const response = await fetch(`${API_BASE_URL}/api/options`, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(data)
  });
  return await response.json();
};

Workflow:

  1. User fills form → OptionsCreateDialog
  2. onSave callback → handleCreateOptions in ScenariosList
  3. API POST → /api/options
  4. Refresh list → loadOptionsPresets()
  5. Auto-select → setFormData({ optionsId: newOption.id })
  6. Update preview → setSelectedOption(newOption)

Styling Improvements​

ScenarioDetailsDialog - EPANET Options Section​

Previous Issue:

  • White Paper background with potentially invisible text
  • Inconsistent with rest of form

Solution:

  • Use standard TextField components (read-only)
  • Match styling of other sections
  • Use border-left for visual hierarchy on PDA params
  • Proper text contrast with MUI theme

Implementation:

<TextField
  fullWidth
  label="Options Preset"
  value={scenario.optionsName || 'Default'}
  InputProps={{ readOnly: true }}
/>

{scenario.demandModel === 'PDA' && (
  <Box sx={{ pl: 2, borderLeft: 3, borderColor: 'primary.main' }}>
    <Typography variant="caption" color="text.secondary">
      PDA Parameters
    </Typography>
    <TextField label="Minimum Pressure" ... />
    <TextField label="Required Pressure" ... />
    <TextField label="Pressure Exponent" ... />
  </Box>
)}

Files Created/Modified​

New Files ✅​

  • dwd-frontend-react/src/components/scenarios/OptionsCreateDialog.jsx
  • dwd-frontend-react/src/components/scenarios/OptionsViewDialog.jsx

Modified Files ✅​

  • dwd-frontend-react/src/components/scenarios/ScenarioEditDialog.jsx - Added buttons and dialogs
  • dwd-frontend-react/src/pages/ScenariosList.jsx - Added create handler
  • dwd-frontend-react/src/components/scenarios/ScenarioDetailsDialog.jsx - Fixed styling

Benefits Summary​

For Users​

  • ✅ Create options without leaving scenario form
  • ✅ View full options details before committing
  • ✅ Visual preview of selected configuration
  • ✅ Consistent, readable styling
  • ✅ Clear visual hierarchy

For Developers​

  • ✅ Reusable dialog components
  • ✅ Clean separation of concerns
  • ✅ Easy to extend with more features
  • ✅ Good error handling
  • ✅ Follows MUI design patterns

For System​

  • ✅ Encourages creating reusable presets
  • ✅ Reduces duplicate configurations
  • ✅ Better data consistency
  • ✅ Easier maintenance

Next Steps​

These enhancements are ready to test along with the rest of Phase 1!

Test Scenarios:

  1. Create scenario → Click "➕" → Create new options → Verify auto-selection
  2. Edit scenario → Click "👁️" → View full options details → Close
  3. View scenario details → Check EPANET Options section styling
  4. Create PDA options → Verify preview shows PDA params
  5. Switch between options → Verify preview updates

Status: ✅ Complete and ready for integration testing

Last updated on by Jake, Cursor