Dynamic Cost Visualization

Purpose

Within the broader context of Real-Time Meeting Cost Tracking (79640), the Dynamic Cost Visualization subtopic specifically addresses the need to present ongoing meeting cost and elapsed time data in the user interface in real time. While the parent topic deals with calculating meeting costs and managing meeting lifecycle events, this subtopic focuses on translating those continuously updated data points into a clear, readable visual format that updates dynamically as the meeting progresses. This feature ensures users receive immediate, understandable feedback on the cost impact of their meetings without manual refresh or delay.

Functionality

The core responsibility of Dynamic Cost Visualization is to render and refresh the current meeting cost, burn rate, and elapsed time directly within the UI, updating this information at a frequent interval (every 100 milliseconds in the implementation) to reflect the latest meeting state.

Key aspects include:

• Formatting elapsed time into human-readable units (seconds, minutes, hours, days, months, years) with a cascading reduction method to display time succinctly (e.g., "2h 15m 30s").

• Rendering cost values with precision (e.g., total cost to two decimals, burn rates per minute and per second to four decimals).

• Efficient DOM updates using window.requestAnimationFrame to minimize layout thrashing and optimize browser repaint performance.

• Clear handling of reset states to empty the display when a meeting is reset.

• Integration with the meeting model to fetch computed values like total cost, burn per minute, burn per second, and total elapsed time.

The visualization is encapsulated in a view function (found in lib/views/meeting.js) that accepts a Meeting instance and a clear flag. When invoked regularly (via an interval timer controlled by UI event handlers), it computes formatted strings and updates a designated .cost container in the DOM.

Time Formatting Algorithm

The time formatting is noteworthy for its iterative division by standard time units (60 seconds in a minute, 60 minutes in an hour, 24 hours in a day, 30 days in a month, 12 months in a year) to produce a compact, multi-unit string:

const conversionFactors = [{ s: 60 }, { m: 60 }, { h: 24 }, { d: 30 }, { m: 12 }];
// Reduces timeInSeconds into formatted string like "1h 15m 30s"

This approach avoids verbose or fixed-format time displays and adapts dynamically to long meeting durations.

Interaction with UI Event Loop

In index.js, the visualization function is triggered by starting a timer interval when the meeting starts:

interval = setInterval(updateMeetingCost, 100);

Where updateMeetingCost calls the visualization with the current meeting instance:

const updateMeetingCost = (clear=false) => {
    MeetingTemplate(meeting, clear);
    if (clear) costHeader.classList.add('d-none');
};

Stopping or resetting the meeting appropriately stops the timer and clears or updates the display accordingly, ensuring the visualization always reflects the current state.

Integration

The Dynamic Cost Visualization subtopic is tightly coupled with but distinct from several other subtopics under the parent topic:

• Meeting Lifecycle Management: As meeting states change (start, pause, stop, reset), visualization updates respond accordingly to display or clear cost/time data.

• Incremental Cost Calculation: The visualization relies on the calculations performed by the meeting model and increments to present accurate, up-to-date monetary values.

• User Interaction and Interface (79639): The visualization complements UI controls by providing immediate feedback on user inputs and meeting progress, enhancing usability.

The separation of concerns allows the visualization to focus purely on rendering and updating the UI, while delegating cost/time calculation and meeting state management to other modules.

The .cost container in the HTML structure acts as the rendering target, which is controlled by the MeetingTemplate view. The view updates this container independently of other UI elements such as form controls or past meetings lists.

sequenceDiagram
participant UI as User Interface
participant Timer as Interval Timer
participant View as MeetingTemplate (Dynamic Cost Visualization)
participant Model as Meeting Model
UI->>Model: Start Meeting
UI->>Timer: Start Interval (100ms)
Timer->>View: Request Update
View->>Model: Get Cost & Time Data
Model-->>View: Return Current Cost & Time
View->>UI: Update .cost Display
UI->>Model: Stop or Reset Meeting
UI->>Timer: Stop Interval
View->>UI: Clear or Final Update of .cost

This flow diagram shows the constant update loop driven by the timer, querying the model for data and refreshing the UI accordingly. It also shows how user actions start and stop this process.

This focused visualization capability ensures that cost and time data are not only calculated but also communicated effectively to users as the meeting unfolds, fulfilling a critical real-time feedback role within the overall meeting cost tracking system.