08 - Interactive Editing Guide

08 - Interactive Editing Guide

✏️ Refine AI-Generated Insights in Real-Time
⏱️ Time Estimate: 10 minutes
📋 What You’ll Learn: Click-to-edit functionality, cross-visualization updates, saving custom edits

---

Table of Contents

• Interactive Editing Overview
• What Can Be Edited
• Basic Editing Operations
• Cross-Visualization Updates
• Participant Management
• Decision Editing
• Action Item Management
• Undo/Redo System
• Saving & Persistence
• Best Practices

---

Interactive Editing Overview

Feature: F004 - Interactive Visual Editor

Selfoss allows you to edit AI-generated content directly in the visualization interface without reprocessing.

Why Edit?

✅ Correct AI mistakes - Fix misinterpreted names or dates
✅ Add missing information - Include action items not extracted
✅ Refine insights - Improve clarity or specificity
✅ Update assignments - Change owners, deadlines, priorities
✅ Customize for audience - Remove sensitive details

Edit Modes

Display Mode: (Default)

• Clean, read-only view
• Hover to see edit icons
• Click to enter edit mode

Edit Mode:

• Inline editing fields
• Save with Enter, cancel with Esc
• Changes sync immediately

---

What Can Be Edited

Editable Elements

Element	Location	Edit Type
Meeting Title	Metadata section	Text input
Participants	Metadata section	Add/remove/rename
Decisions	Flowchart, list	Text input
Action Tasks	Matrix, flowchart	Text input
Action Owners	Matrix	Dropdown selection
Action Deadlines	Matrix	Date picker
Action Priorities	Matrix	Dropdown (high/medium/low)
Concepts	Mind map	Text input

Non-Editable Elements

❌ Original transcript text - Preserved as-is
❌ Temporal data - Extracted from VTT/SRT
❌ Processing metadata - Model used, token count
❌ Upload date - Historical record

💡 Pro Tip: Export original results before major edits for comparison.

---

Basic Editing Operations

Click-to-Edit Pattern

Step 1: Enter Edit Mode

Display:  [Budget approved for Q4]
              ↓ (click)
Edit:     [Budget approved for Q4_]
              ↑ cursor appears

Step 2: Make Changes

Type new text:
[Q4 marketing budget approved: $500K]

Step 3: Save or Cancel

• Enter: Save changes
• Esc: Cancel and revert
• Click outside: Auto-save

Hover Interactions

When you hover over editable elements:

[Decision: Approve budget] ✏️
                          ↑ edit icon appears

Visual indicators:

• ✏️ Edit icon: Appears on hover
• 🟦 Highlight: Light blue background
• 🖱️ Cursor: Changes to pointer

Keyboard Shortcuts

Shortcut	Action
Click	Enter edit mode
Enter	Save changes
Esc	Cancel editing
Ctrl+Z / Cmd+Z	Undo last change
Ctrl+Y / Cmd+Y	Redo change
Tab	Move to next field (in forms)

---

Cross-Visualization Updates

Automatic Propagation

When you edit in one view, changes appear everywhere:

Edit Decision in Flowchart
         ↓
    ┌────┴────┐
    │         │
Matrix      Mind Map
updates     updates

Example Workflow

1. Edit decision in flowchart:

Before: [Approve budget]
After:  [Approve Q4 marketing budget: $500K]

2. Automatic updates:

• ✅ Action matrix: Source decision updated
• ✅ Mind map: Concept text updated (if linked)
• ✅ Database: Processed JSON updated

3. Real-time sync:

• No manual save needed
• Changes visible immediately
• All views stay consistent

Update Scope

What updates automatically:

• Text content
• Relationships (decision → actions)
• Display in all visualizations

What doesn’t update:

• Original transcript text
• Processing metadata
• Historical versions (no version control yet)

💡 Pro Tip: Edit in the view that shows the element most clearly (e.g., use matrix for action deadlines).

---

Participant Management

Viewing Participants

Participants appear in metadata section:

┌─────────────────────────────┐
│ Meeting: Q4 Planning        │
│ Date: October 16, 2024      │
│                             │
│ Participants:               │
│  • John Smith               │
│  • Sarah Johnson            │
│  • Mike Chen                │
│  [+ Add Participant]        │
└─────────────────────────────┘

Adding Participants

Step 1: Click “Add Participant”

[+ Add Participant]
      ↓
[ Enter name... ] [Add]

Step 2: Enter Name

[ Lisa Martinez ]

Step 3: Save

• Click “Add” or press Enter
• ✅ Participant appears in list
• ✅ Available in action owner dropdowns

Editing Participant Names

Why edit?

• Fix spelling mistakes
• Use full names instead of first names
• Standardize naming (e.g., “John S.” → “John Smith”)

How to edit:

1. Click participant name
2. Edit inline
3. Press Enter to save

Impact:

• ✅ All action assignments update (ID-based system)
• ✅ References preserved across visualizations
• ❌ Original transcript unchanged

Removing Participants

Step 1: Hover over name

• John Smith  [×]
             ↑ delete button

Step 2: Click delete (×)

⚠️ Warning: 3 actions assigned to John Smith.
   Reassign to: [Sarah Johnson ▼]
   [Cancel]  [Remove & Reassign]

Step 3: Reassign or confirm

• Choose new owner for orphaned actions
• Or cancel to keep participant

ID-Based System

Selfoss uses internal IDs for participants:

Participant: {
  id: "p1",
  name: "John Smith"  ← Can be changed
}

Action: {
  owner_id: "p1"  ← Reference preserved
}

Benefits:

• ✅ Rename participants without breaking references
• ✅ Merge duplicate participants
• ✅ Maintain data integrity

---

Decision Editing

Inline Decision Editing

In Flowchart:

┌──────────────────────────┐
│ Approve marketing budget │ ✏️
└──────────────────────────┘
       ↓ (click)
┌─────────────────────────────────┐
│ Approve marketing budget: $500K │_
└─────────────────────────────────┘

In Decision List:

🎯 Decision 1: Approve marketing budget
              ↓ (click to expand)
┌─────────────────────────────────┐
│ Text: [Approve marketing...]_   │
│ Time: 00:15:30                  │
│ Flows to: Action 1, Action 2   │
│                                 │
│ [Save]  [Cancel]                │
└─────────────────────────────────┘

Adding New Decisions

Step 1: Click “Add Decision”

[+ Add Decision]
      ↓
┌─────────────────────────────┐
│ Decision text: [________]   │
│ Timestamp: [00:30:00]       │
│ [Cancel]  [Add Decision]    │
└─────────────────────────────┘

Step 2: Fill in details

Decision text: [Postpone product launch to November 15]
Timestamp: [00:42:30] (optional)

Step 3: Save

• New decision appears in flowchart
• Automatically assigned ID (D6, D7, etc.)
• Can now link to action items

Deleting Decisions

Step 1: Hover and click delete

[Approve budget] [×]
                 ↑ delete button

Step 2: Confirm deletion

⚠️ Warning: This decision has 3 linked actions.
   What should happen to linked actions?

   ○ Delete actions too
   ○ Keep actions (remove link)

   [Cancel]  [Delete Decision]

Step 3: Choose action fate

• Delete actions: Clean removal
• Keep actions: Actions become unlinked (appear in “Other” section)

---

Action Item Management

Comprehensive Action Editing

Actions have multiple editable fields:

┌─────────────────────────────────┐
│ Action Details                  │
├─────────────────────────────────┤
│ Task:     [Finalize contracts_] │
│ Owner:    [John Smith      ▼]  │
│ Deadline: [Oct 20, 2024    📅] │
│ Priority: [High            ▼]  │
│                                 │
│ [Save Changes]  [Cancel]        │
└─────────────────────────────────┘

Editing Task Text

In Matrix (inline):

| Task                    |
|-------------------------|
| Finalize contracts      | ✏️
    ↓ (click)
| [Finalize vendor...___] |

Press Enter to save, Esc to cancel.

Changing Owners

Dropdown populated from participants:

Owner: [John Smith        ▼]
       ├─ John Smith      ✓
       ├─ Sarah Johnson
       ├─ Mike Chen
       └─ Lisa Martinez

Features:

• ✅ Only shows current participants
• ✅ Add new participant first if needed
• ✅ Can assign to multiple people (comma-separated)

Setting Deadlines

Date picker with dark theme support:

Deadline: [Oct 20, 2024  📅]
           ↓ (click)
┌────────────────────┐
│   October 2024     │
│ Su Mo Tu We Th Fr Sa│
│        1  2  3  4  5│
│  6  7  8  9 10 11 12│
│ 13 14 15 16 17 18 19│
│ 20 21 22 23 24 25 26│ ← Oct 20
│ 27 28 29 30 31      │
└────────────────────┘

Deadline features:

• ✅ Visual calendar picker
• ✅ Keyboard navigation (arrow keys)
• ✅ Quick select (today, +1 week, +1 month)
• ✅ Clear deadline (set to “No deadline”)

Color coding after save:

• 🔴 Overdue: Past deadline
• 🟠 Due soon: Within 3 days
• 🟢 On track: More than 3 days
• ⚪ No deadline: Not set

Setting Priority

Dropdown with visual indicators:

Priority: [High           ▼]
          ├─ 🔴 High      ✓
          ├─ 🟠 Medium
          └─ 🔵 Low

Priority meanings:

• 🔴 High: Urgent, critical path
• 🟠 Medium: Important but not urgent
• 🔵 Low: Nice-to-have, backlog

Visual indicators:

• Matrix row highlighted with priority color
• Flowchart node border colored
• Sort/filter options available

Adding New Actions

Step 1: Click “Add Action”

[+ Add Action Item]

Step 2: Fill form

┌─────────────────────────────────┐
│ New Action Item                 │
├─────────────────────────────────┤
│ Task:     [_______________]     │
│ Owner:    [John Smith     ▼]    │
│ Deadline: [Oct 25, 2024   📅]   │
│ Priority: [Medium         ▼]    │
│ Source:   [Approve budget ▼]    │
│                                 │
│ [Cancel]  [Add Action]          │
└─────────────────────────────────┘

Step 3: Save

• Action appears in matrix
• Linked to source decision in flowchart
• Assigned auto-generated ID (A1, A2, etc.)

Deleting Actions

Step 1: Right-click action row

| Task              | Owner |
|-------------------|-------|
| Finalize contracts| John  | [Right-click]
                              ↓
                         ┌─────────────┐
                         │ Edit        │
                         │ Delete      │ ←
                         └─────────────┘

Step 2: Confirm

⚠️ Delete action "Finalize contracts"?
   This cannot be undone.

   [Cancel]  [Delete]

---

Undo/Redo System

Keyboard Shortcuts

Undo: Ctrl+Z (Windows/Linux) or Cmd+Z (macOS)
Redo: Ctrl+Y (Windows/Linux) or Cmd+Y (macOS)

What Can Be Undone

✅ Text edits - Decision/action text changes
✅ Field updates - Owner, deadline, priority changes
✅ Additions - New participants, decisions, actions
✅ Deletions - Removed items (within session)

❌ Database operations - External changes
❌ Cross-session - Changes from previous sessions
❌ Reprocessing - AI regeneration

Undo History

Scope: Current session only

• History cleared on page reload
• Up to 50 operations tracked
• Oldest operations dropped automatically

Best practice:

• Export before major changes
• Undo immediately if mistake
• Reload page to “reset” if needed

---

Saving & Persistence

Automatic Saves

All edits auto-save:

• ✅ No “Save” button needed
• ✅ Changes persist across sessions
• ✅ Database updated immediately
• ✅ No risk of losing work

Save triggers:

• Press Enter in text field
• Change dropdown selection
• Pick date in calendar
• Click outside edit area

Save indicators:

Saving... ⏳
     ↓
Saved ✓

Manual Save (Form Editing)

Some complex edits use forms:

┌─────────────────────────────────┐
│ Edit Action Details             │
├─────────────────────────────────┤
│ [... form fields ...]           │
│                                 │
│ [Cancel]  [Save Changes] ←      │
└─────────────────────────────────┘

Click “Save Changes” to commit all form edits at once.

Data Integrity

How edits are stored:

1. Local state updates (immediate UI feedback)
2. Global state propagates (cross-view sync)
3. Database write (persistence)
4. Confirmation toast (user feedback)

Error handling:

❌ "Failed to save changes"
   → Retry automatically (3 attempts)
   → Show error message if all fail
   → Local state reverts to last saved

Backup Before Editing

Recommended workflow:

1. Export current transcript (JSON or PDF)
2. Make edits
3. Compare if needed
4. Keep original as reference

👉 Learn More: See 09_DATA_MANAGEMENT_GUIDE.md

---

Best Practices

When to Edit

✅ Good reasons to edit:

• Fix obvious AI mistakes (wrong names, dates)
• Add missing action items mentioned verbally
• Clarify vague decisions
• Update assignments after meeting
• Remove sensitive information

❌ Avoid editing when:

• Trying to hide mistakes (keep for records)
• Changing meaning significantly (reprocess instead)
• Removing important context
• Making subjective “improvements”

Editing Workflow

1. Review first:

• Read all AI-generated content
• Identify errors or omissions
• Plan edits before starting

2. Edit systematically:

• Start with participants (affects owners)
• Then decisions (affects flowchart)
• Then actions (most granular)

3. Verify updates:

• Check all visualizations updated
• Ensure relationships preserved
• Test filters/sorts work

4. Document changes:

• Add notes if making major edits
• Export edited version
• Share with team if collaborative

Editing for Clarity

Before:

Decision: Approve the thing we discussed
Action: John handles the follow-up

After:

Decision: Approve Q4 marketing budget of $500K
Action: John finalizes vendor contracts by Oct 20

Improvements:

• ✅ Specific amounts and details
• ✅ Clear ownership and deadlines
• ✅ Actionable language

Preserving Context

Don’t remove:

• Original decision rationale
• Dissenting opinions (if noted)
• Timeline/sequence information
• Attribution (who said what)

Do clarify:

• Ambiguous pronouns → proper names
• Acronyms → full terms (first use)
• Relative dates → absolute dates
• Implied actions → explicit tasks

Collaborative Editing

If sharing access (future):

• Use comment system (planned) instead of edits
• Track who made changes (version history)
• Discuss major changes before applying
• Export versions for comparison

---

Troubleshooting

Edits Not Saving

Symptoms:

• Changes disappear after reload
• “Failed to save” error
• Spinner stuck on “Saving…”

Solutions:

✅ Check internet connection (if cloud sync)
✅ Verify database is writable
✅ Check disk space (need > 100MB)
✅ Restart application
✅ Export data and reimport if needed

Changes Not Propagating

Symptoms:

• Edit in flowchart, matrix unchanged
• Update owner, dropdown shows old value

Solutions:

✅ Refresh page to force sync
✅ Check for JavaScript errors (F12 console)
✅ Clear browser cache
✅ Verify React state is updating (dev tools)

Undo Not Working

Symptoms:

• Ctrl+Z does nothing
• Undo history empty

Solutions:

✅ Ensure focus is on main app (not browser UI)
✅ Check if undo history was cleared (page reload)
✅ Try Ctrl+Shift+Z instead (some browsers)
✅ Manual revert: close and reopen transcript

Lost Edits

If you accidentally:

• Deleted important content → Restore from backup
• Overwrote decisions → Reprocess transcript
• Made wrong changes → Export current, reimport backup

Prevention:

✅ Export before major editing sessions
✅ Use undo immediately if mistake
✅ Keep backups of important transcripts

---

Next Steps

🎉 You’re now an interactive editing master!

Recommended Actions:

1. ✏️ Practice editing - Try small changes first
2. 🔄 Test cross-updates - Verify sync across views
3. 💾 Export originals - Backup before major edits
4. 🎨 Customize visualizations → 07_VISUALIZATION_DEEP_DIVE_GUIDE.md
5. 💾 Set up backups → 09_DATA_MANAGEMENT_GUIDE.md

Advanced Topics:

• Bulk editing (planned)
• Edit templates for common changes
• Collaborative editing with version control
• API-based editing for automation

---

✏️ Refine, improve, perfect - all in real-time.