app.py

import datetime as dt
import gradio as gr
import json
import numpy as np
import os
from datetime import timedelta, date, datetime
from gradio_vistimeline import VisTimeline, VisTimelineData

# --- Region: Handlers for demo tab 1 ---
def pull_from_timeline(timeline):
    """Convert timeline data to JSON string for display"""
    if hasattr(timeline, "model_dump"):
        data = timeline.model_dump(exclude_none=True)
    else:
        data = timeline
    return json.dumps(data, indent=2)

def push_to_timeline(json_str):
    """Convert JSON string to timeline data"""
    try:
        return VisTimelineData.model_validate_json(json_str)
    except Exception as e:
        print(f"Error parsing JSON: {e}")
        return VisTimelineData(groups=[], items=[])

def on_timeline_change():
    return f"Most recent value change event:\n{get_now()}"

def on_timeline_input(event_data: gr.EventData):
    return f"Most recent input event:\nAction: '{event_data._data}' at {get_now()}"

def on_timeline_select():
    return f"Most recent timeline selected event::\n{get_now()}"

def on_item_select(timeline, event_data: gr.EventData):
    selected_ids = event_data._data # A collection of selected item IDs that can be str or int: ["example", 0, "example2"]
    items = timeline.items

    if selected_ids:
        first_id = selected_ids[0]
        for item in items:
            if item.id == first_id:
                content = getattr(item, 'content', 'Unknown')
                return f"Currently selected item:\nContent: \"{content}\"\nID: \"{first_id}\""
    
    return "Currently selected item:\nNone"

# --- Region: Handlers for demo tab 1 ---
def update_table(timeline):
    if hasattr(timeline, "model_dump"):
        data = timeline.model_dump(exclude_none=True)
    else:
        data = timeline
    
    items = data["items"]
    track_length_ms = get_grouped_item_end_in_ms(items, "track-length")

    rows = []
    for item in items:
        if item["content"] != "":
            duration = calculate_and_format_duration(item["start"], item.get("end"), track_length_ms)
            rows.append([
                item["content"],
                format_date_to_milliseconds(item["start"]),
                duration
            ])
    
    return gr.DataFrame(
        value=rows,
        headers=["Item Name", "Start Time", "Duration"]
    )

# --- Region: Handlers for demo tab 2 ---
def update_audio(timeline):
    """

    Handler function for generating audio from timeline data.

    Returns audio data in format expected by Gradio's Audio component.

    """
    audio_data, sample_rate = generate_audio_from_timeline(timeline)
    # Convert to correct shape and data type for Gradio Audio
    # Gradio expects a 2D array with shape (samples, channels)
    audio_data = audio_data.reshape(-1, 1)  # Make it 2D with 1 channel
    return (sample_rate, audio_data)

def generate_audio_from_timeline(timeline_data, sample_rate=44100):
    """

    Generate audio from timeline items containing frequency information.

    

    Args:

        timeline_data: Timeline data containing items with start/end times in milliseconds

        sample_rate: Audio sample rate in Hz (default 44100)

        

    Returns:

        Tuple of (audio_data: np.ndarray, sample_rate: int)

    """
    # Get all items from the timeline
    if hasattr(timeline_data, "model_dump"):
        data = timeline_data.model_dump(exclude_none=True)
    else:
        data = timeline_data
    
    items = data["items"]
    
    # Find the track length from the background item
    track_length_ms = get_grouped_item_end_in_ms(items, "track-length")
    
    # Convert milliseconds to samples
    total_samples = int((track_length_ms / 1000) * sample_rate)
    
    # Initialize empty audio buffer
    audio_buffer = np.zeros(total_samples)
    
    # Frequency mapping
    freq_map = {
        1: 440.0,
        2: 554.37,
        3: 659.26
    }
    # Generate sine waves for each item
    for item in items:
        id = item.get("id", 0)
        start_time = parse_date_to_milliseconds(item["start"])
        end_time = parse_date_to_milliseconds(item["end"])

        # Skip items that are completely outside the valid range
        if end_time <= 0 or start_time >= track_length_ms or start_time >= end_time:
            continue
            
        # Clamp times to valid range
        start_time = max(0, min(start_time, track_length_ms))
        end_time = max(0, min(end_time, track_length_ms))

        if id in freq_map:
            freq = freq_map[id]
            
            # Convert millisecond timestamps to sample indices
            start_sample = int((start_time / 1000) * sample_rate)
            end_sample = int((end_time / 1000) * sample_rate)
            
            # Generate time array for this segment
            t = np.arange(start_sample, end_sample)
            
            # Generate sine wave
            duration = end_sample - start_sample
            envelope = np.ones(duration)
            fade_samples = min(int(0.10 * sample_rate), duration // 2)  # 100ms fade or half duration
            envelope[:fade_samples] = np.linspace(0, 1, fade_samples)
            envelope[-fade_samples:] = np.linspace(1, 0, fade_samples)
            
            wave = 0.2 * envelope * np.sin(2 * np.pi * freq * t / sample_rate)
            
            # Add to buffer
            audio_buffer[start_sample:end_sample] += wave
    
    # Normalize to prevent clipping
    max_val = np.max(np.abs(audio_buffer))
    if max_val > 0:
        audio_buffer = audio_buffer / max_val
    
    return (audio_buffer, sample_rate)

# Helper function to get hard-coded track-length from timeline value
def get_grouped_item_end_in_ms(items, group_id):
    default_length = 6000
    for item in items:
        if item.get("group") == group_id:
            return parse_date_to_milliseconds(item.get("end", default_length))
    return default_length

# --- Region: Demo specific datetime helper functions ---
def calculate_and_format_duration(start_date, end_date, max_range):
    """Calculate the seconds between two datetime inputs and format the result with up to 2 decimals."""
    if not end_date:
        return "0s"

    # Convert dates to milliseconds
    start_ms = max(0, parse_date_to_milliseconds(start_date))
    end_ms = min(max_range, parse_date_to_milliseconds(end_date))

    if end_ms < start_ms:
        return "0s"

    # Calculate duration in seconds
    duration = (end_ms - start_ms) / 1000

    # Format to remove trailing zeroes after rounding to 2 decimal places
    formatted_duration = f"{duration:.2f}".rstrip("0").rstrip(".")
    return f"{formatted_duration}s"

def format_date_to_milliseconds(date):
    """Format input (ISO8601 string or milliseconds) to mm:ss.SSS."""
    date_in_milliseconds = max(0, parse_date_to_milliseconds(date))
    time = timedelta(milliseconds=date_in_milliseconds)

    # Format timedelta into mm:ss.SSS
    minutes, seconds = divmod(time.seconds, 60)
    milliseconds_part = time.microseconds // 1000
    return f"{minutes:02}:{seconds:02}.{milliseconds_part:03}"

def parse_date_to_milliseconds(date):
    """Convert input (ISO8601 string or milliseconds) milliseconds"""
    if isinstance(date, int):  # Input is already in milliseconds (Unix timestamp)
        return date
    elif isinstance(date, str):  # Input is ISO8601 datetime string
        dt = datetime.fromisoformat(date.replace("Z", "+00:00"))
        epoch = datetime(1970, 1, 1, tzinfo=dt.tzinfo) # Calculate difference from Unix epoch
        return int((dt - epoch).total_seconds() * 1000)
    else:
        return 0  # Fallback for unsupported types

def get_now():
    """Returns current time in HH:MM:SS format"""
    return datetime.now().strftime("%H:%M:%S")

TIMELINE_ID = "dateless_timeline"
AUDIO_ID = "timeline-audio"

# Example for how to access the timeline through JavaScript
# In this case, to bind the custom time bar of the timeline to be in sync with the audio component
# Read the JavaScript file
js_path = os.path.join(os.path.dirname(os.path.abspath(__file__)), 'custom_time_control.js')
with open(js_path, 'r') as f:
    js_content = f.read()
script = f"""<script>{js_content}</script>"""
style = f"""<style>.vis-custom-time.{TIMELINE_ID} {{pointer-events: none !important;}}</style>"""
head = script + style

# --- Region: Gradio ---
with gr.Blocks(head=head) as demo:
    today = date.today()
    day_offset = lambda days: (today + dt.timedelta(days=days)).isoformat()

    gr.Markdown("# Vis.js Timeline Component Demo")
    
    with gr.Tabs():
        # --- Tab 1: Basic Timeline with Events ---
        with gr.Tab("Basic Timeline Demo"):
            # Timeline component
            basic_timeline = VisTimeline(
                value={
                    "groups": [{"id": 0, "content": ""}],
                    "items": []
                },
                options= {
                    "start": day_offset(-1),
                    "end": day_offset(20),
                    "editable": True,
                    "format": { # You don't need to define this as these are the default values, but for this demo it is necessary because of two timelines with different formats on one page
                        "minorLabels": { 
                            "millisecond": "SSS",
                            "second": "ss",
                            "minute": "HH:mm",
                            "hour": "HH:mm",
                        }
                    }
                },
                label="Interactive Timeline",
                interactive=True
            )
            
            gr.Markdown("### Events")

            # Event listener outputs
            with gr.Row():
                change_textbox = gr.Textbox(value="Most recent value change event:", label="Change:", lines=3, interactive=False)
                input_textbox = gr.Textbox(value="Most recent user input event:", label="Input:", lines=3, interactive=False)
                select_textbox = gr.Textbox(value="Most recent timeline selected event:", label="Select:", lines=3, interactive=False)
                item_select_textbox = gr.Textbox(value="Currently selected item:\nNone", label="Currently selected item:", lines=3, interactive=False)
            
            # Examples and JSON area in two columns
            with gr.Row():
                # Left column: Examples
                with gr.Column():
                    gr.Markdown("### Timeline Examples")
                    gr.Examples(
                        examples=[
                            {
                                "groups": [{"id": 0, "content": ""}],
                                "items": [
                                    {"content": "Working", "group": 0, "start": day_offset(1), "end": day_offset(5)},
                                    {"content": "Resting", "group": 0, "start": day_offset(5), "end": day_offset(7)},
                                    {"content": "Working", "group": 0, "start": day_offset(7), "end": day_offset(11)},
                                    {"content": "Resting", "group": 0, "start": day_offset(11), "end": day_offset(13)},
                                    {"content": "Working", "group": 0, "start": day_offset(13), "end": day_offset(17)},
                                    {"content": "Resting", "group": 0, "start": day_offset(17), "end": day_offset(19)},
                                    {"content": "Working", "group": 0, "start": day_offset(19), "end": day_offset(23)},
                                ],
                                "description": "DateTime ranges"
                            },
                            {
                                "groups": [{"id": 0, "content": "Group"}],
                                "items": [
                                    {"id": 0, "content": "Simple item", "group": 0, "start": day_offset(9)}
                                ]
                            },
                            {
                                "groups": [{"id": 0, "content": "Worker 1"}, {"id": 1, "content": "Worker 2"}],
                                "items": [
                                    {"content": "Working", "group": 0, "start": day_offset(1), "end": day_offset(5)},
                                    {"content": "Resting", "group": 0, "start": day_offset(5), "end": day_offset(7)},
                                    {"content": "Working", "group": 0, "start": day_offset(7), "end": day_offset(11)},
                                    {"content": "Resting", "group": 0, "start": day_offset(11), "end": day_offset(13)},
                                    {"content": "Working", "group": 0, "start": day_offset(13), "end": day_offset(17)},
                                    {"content": "Resting", "group": 0, "start": day_offset(17), "end": day_offset(19)},
                                    {"content": "Working", "group": 0, "start": day_offset(19), "end": day_offset(23)},
                                    {"content": "Working", "group": 1, "start": day_offset(-3), "end": day_offset(2)},
                                    {"content": "Resting", "group": 1, "start": day_offset(2), "end": day_offset(4)},
                                    {"content": "Working", "group": 1, "start": day_offset(4), "end": day_offset(8)},
                                    {"content": "Resting", "group": 1, "start": day_offset(8), "end": day_offset(10)},
                                    {"content": "Working", "group": 1, "start": day_offset(10), "end": day_offset(14)},
                                    {"content": "Resting", "group": 1, "start": day_offset(14), "end": day_offset(16)},
                                    {"content": "Working", "group": 1, "start": day_offset(16), "end": day_offset(20)}
                                ],
                                "description": "DateTime ranges in groups"
                            },
                            {
                                "groups": [{"id": 1, "content": "Group 1"}, {"id": 2, "content": "Group 2"}],
                                "items": [
                                    {"id": "A", "content": "Period A", "start": day_offset(1), "end": day_offset(7), "type": "background", "group": 1 },
                                    {"id": "B", "content": "Period B", "start": day_offset(8), "end": day_offset(11), "type": "background", "group": 2 },
                                    {"id": "C", "content": "Period C", "start": day_offset(12), "end": day_offset(17), "type": "background" },
                                    {"content": "Range inside period A", "start": day_offset(2), "end": day_offset(6), "group": 1 },
                                    {"content": "Item inside period C", "group": 2, "start": day_offset(14) }
                                ],
                                "description": "Background type example"
                            },
                            {
                                "groups": [{"id": 1, "content": "Group 1"}, {"id": 2, "content": "Group 2"}],
                                "items": [
                                    {"content": "Range item", "group": 1, "start": day_offset(7), "end": day_offset(14) },
                                    {"content": "Point item", "group": 2, "start": day_offset(7), "type": "point" },
                                    {"content": "Point item with a longer name", "group": 2, "start": day_offset(7), "type": "point" },
                                ],
                                "description": "Point type example"
                            },
                            {
                                "groups": [{"id": 1, "content": "Group 1", "subgroupStack": {"A": True, "B": True}}, {"id": 2, "content": "Group 2" }],
                                "items": [
                                    {"content": "Subgroup 2 Background", "start": day_offset(0), "end": day_offset(4), "type": "background", "group": 1, "subgroup": "A", "subgroupOrder": 0},
                                    {"content": "Subgroup 2 Item", "start": day_offset(5), "end": day_offset(7), "group": 1, "subgroup": "A", "subgroupOrder": 0},
                                    {"content": "Subgroup 1 Background", "start": day_offset(0), "end": day_offset(4), "type": "background", "group": 1, "subgroup": "B", "subgroupOrder": 1},
                                    {"content": "Subgroup 1 Item", "start": day_offset(8), "end": day_offset(10), "group": 1, "subgroup": "B", "subgroupOrder": 1},
                                    {"content": "Full group background", "start": day_offset(5), "end": day_offset(9), "type": "background", "group": 2},
                                    {"content": "No subgroup item 1", "start": day_offset(10), "end": day_offset(12), "group": 2},
                                    {"content": "No subgroup item 2", "start": day_offset(13), "end": day_offset(15), "group": 2}
                                    
                                ],
                                "description": "Subgroups with backgrounds and items"
                            },
                            {
                                "groups": [{"id": 1, "content": "Group 1", "subgroupStack": {"A": True, "B": True}}, {"id": 2, "content": "Group 2" }],
                                "items": [
                                    {"content": "Subgroup 2 background", "start": day_offset(0), "end": day_offset(4), "type": "background", "group": 1, "subgroup": "A", "subgroupOrder": 0},
                                    {"content": "Subgroup 2 range", "start": day_offset(5), "end": day_offset(7), "group": 1, "subgroup": "A", "subgroupOrder": 0},
                                    {"content": "Subgroup 2 item", "start": day_offset(10), "group": 1, "subgroup": "A" },
                                    {"content": "Subgroup 1 background", "start": day_offset(0), "end": day_offset(4), "type": "background", "group": 1, "subgroup": "B", "subgroupOrder": 1},
                                    {"content": "Subgroup 1 range", "start": day_offset(8), "end": day_offset(10), "group": 1, "subgroup": "B", "subgroupOrder": 1},
                                    {"content": "Subgroup 1 item", "start": day_offset(14), "group": 1, "subgroup": "B" },
                                    {"content": "No subgroup item", "start": day_offset(12), "group": 1},
                                    {"content": "Full group background", "start": day_offset(5), "end": day_offset(9), "type": "background", "group": 2},
                                    {"content": "No subgroup range 1", "start": day_offset(11), "end": day_offset(13), "group": 2},
                                    {"content": "No subgroup range 2", "start": day_offset(15), "end": day_offset(17), "group": 2},
                                    {"content": "No subgroup point", "start": day_offset(1), "group": 2, "type": "point" }
                                    
                                ],
                                "description": "Combination of item and group types"
                            }
                        ],
                        inputs=basic_timeline
                    )
                
                # Right column: JSON staging area
                with gr.Column():
                    gr.Markdown("### Serialized Timeline Value")
                    json_textbox = gr.Textbox(label="JSON", lines=4)
                    with gr.Row():
                        pull_button = gr.Button("Pull Timeline into JSON")
                        push_button = gr.Button("Push JSON onto Timeline", variant="primary")
            
            # Event handlers
            basic_timeline.change(fn=on_timeline_change, outputs=[change_textbox]) # Triggered when the value of the timeline changes by any means
            basic_timeline.input(fn=on_timeline_input, outputs=[input_textbox]) # Triggered when the value of the timeline changes, caused directly by a user input on the component (dragging, adding & removing items)
            basic_timeline.select(fn=on_timeline_select, outputs=[select_textbox]) # Triggered when the timeline is clicked
            basic_timeline.item_select(fn=on_item_select, inputs=[basic_timeline], outputs=[item_select_textbox]) # Triggered when items are selected or unselected
            
            pull_button.click(fn=pull_from_timeline, inputs=[basic_timeline], outputs=[json_textbox]) # Example of using the timeline as an input
            push_button.click(fn=push_to_timeline, inputs=[json_textbox], outputs=[basic_timeline]) # Example of using the timeline as an output
        
        # --- Tab 2: Timeline without date ---
        with gr.Tab("Timeline Without Date"):
            audio_output = gr.Audio(label="Generated Audio", type="numpy", elem_id=AUDIO_ID)

            dateless_timeline = VisTimeline(
                value={
                    "groups": [{"id": "track-length", "content": ""}, {"id": 1, "content": ""}, {"id": 2, "content": ""}, {"id": 3, "content": ""}],
                    "items": [
                        {"content": "", "group": "track-length", "selectable": False, "type": "background", "start": 0, "end": 6000, "className": "color-primary-600"},
                        {"id": 1, "content": "440.00Hz", "group": 1, "selectable": False, "start": 0, "end": 1500},
                        {"id": 2, "content": "554.37Hz", "group": 2, "selectable": False, "start": 2000, "end": 3500},
                        {"id": 3, "content": "659.26Hz", "group": 3, "selectable": False, "start": 4000, "end": 5500}
                    ]},
                options={
                    "moment": "+00:00", # Force the timeline into a certain UTC offset timezone
                    "showCurrentTime": False,
                    "editable": {
                        "add": False,
                        "remove": False,
                        "updateGroup": False,
                        "updateTime": True
                    },
                    "itemsAlwaysDraggable": { # So dragging does not require selection first
                        "item": True,
                        "range": True
                    },
                    "showMajorLabels": False, # This hides the month & year labels
                    "format": {
                        "minorLabels": { # Force the minor labels into a format that does not include weekdays or months
                            "millisecond": "mm:ss.SSS",
                            "second": "mm:ss",
                            "minute": "mm:ss",
                            "hour": "HH:mm:ss"
                        }
                    },
                    "start": 0,      # Timeline will start at unix epoch
                    "end": 6000,     # Initial timeline range will end at 1 minute (unix timestamp in milliseconds)
                    "min": 0,        # Restrict timeline navigation, timeline can not be scrolled further to the left than 0 seconds
                    "max": 7000,     # Restrict timeline navigation, timeline can not be scrolled further to the right than 70 seconds
                    "zoomMin": 1000, # Allow zoom in up until the entire timeline spans 1000 milliseconds
                },
                label="Timeline without date labels, with restrictions on navigation and zoom. You can drag and resize items without having to select them first.",
                elem_id=TIMELINE_ID  # This will also make the timeline instance accessible in JavaScript via 'window.visTimelineInstances["your elem_id"]'
            )
            
            table = gr.DataFrame(
                headers=["Item Name", "Start Time", "Duration"],
                label="Timeline Items",
                interactive=False
            )

            generate_audio_button = gr.Button("Generate Audio")
            
            # Event handlers
            dateless_timeline.change(fn=update_table, inputs=[dateless_timeline], outputs=[table])
            dateless_timeline.load(fn=update_table, inputs=[dateless_timeline], outputs=[table])
            generate_audio_button.click(fn=update_audio, inputs=[dateless_timeline], outputs=[audio_output])

            generate_audio_button.click(
                fn=update_audio, 
                inputs=[dateless_timeline], 
                outputs=[audio_output],
            ).then(
                fn=None,
                inputs=None,
                outputs=None,
                js=f'() => initAudioSync("{TIMELINE_ID}", "{AUDIO_ID}", 6000)'
            )
        
        # --- Tab 3: Links to documentation and examples ---
        with gr.Tab("Documentation & More Examples"):
            gr.Markdown("""

                ## Vis.js Timeline Examples  

                A collection of HTML/CSS/JavaScript snippets displaying various properties and use-cases:  

                [https://visjs.github.io/vis-timeline/examples/timeline/](https://visjs.github.io/vis-timeline/examples/timeline/)

                <br><br>

                ## Vis.js Timeline Documentation  

                The official documentation of the timeline:  

                [https://visjs.github.io/vis-timeline/docs/timeline/](https://visjs.github.io/vis-timeline/docs/timeline/)

                <br><br>

                ## Vis.js DataSet Documentation  

                The official documentation of the DataSet model:  

                [https://visjs.github.io/vis-data/data/dataset.html](https://visjs.github.io/vis-data/data/dataset.html)

            """)

if __name__ == "__main__":
    demo.launch(show_api=False)