[FEATURE] Add Support for Fastplotlib Component in Preswald

[amrutha97]

Summary

This feature request proposes adding a Fastplotlib component to Preswald to support high-performance scientific plotting. Fastplotlib is a plotting library built on pygfx, which utilizes modern GPU APIs (Vulkan, DX12, Metal) via WGPU for fast rendering.

This integration will enable users to incorporate interactive, high-performance plots into Preswald applications.

Why This is Important

• Performance: Fastplotlib is optimized for large-scale, real-time visualizations.
• Expressiveness: It provides an easy-to-use API for complex scientific plotting.
• Compatibility: Fits well within Preswald’s interactive data app framework.

---

Implementation Plan

1. Modify Backend (components.py)

Add a new function in preswald/preswald/interfaces/components.py to define the Fastplotlib component:

import hashlib
from typing import Optional, Any, Dict
from preswald.service import PreswaldService

def fastplotlib(
    label: str,
    data: Any,
    size: float = 1.0,
    config: Optional[Dict] = None
) -> str:
    """Create a Fastplotlib component with a unique ID"""
    
    service = PreswaldService.get_instance()
    
    # Generate a consistent ID for the component
    component_id = f"fastplotlib-{hashlib.md5(label.encode()).hexdigest()[:8]}"
    
    component = {
        "type": "fastplotlib_component",
        "id": component_id,
        "label": label,
        "data": data,  # Data for plotting
        "size": size,
        "config": config or {},  # Optional configuration
    }
    
    service.append_component(component)
    return component_id

---

2. Register the Component in __init__.py

Modify preswald/preswald/interfaces/__init__.py to make fastplotlib available:

from .components import fastplotlib

---

3. Create the Frontend Component

Create a new file:
preswald/frontend/src/components/widgets/FastplotlibWidget.jsx

import React, { useEffect, useRef } from 'react';
import { Card } from '@/components/ui/card';
import { cn } from '@/lib/utils';

// Import Fastplotlib
import { figure } from 'fastplotlib';

const FastplotlibWidget = ({ _label, data, className, config }) => {
    const plotRef = useRef(null);

    useEffect(() => {
        if (plotRef.current) {
            const fig = figure();
            plotRef.current.appendChild(fig.canvas);

            // Assume data is passed as a structured array or object
            fig.plot(data, config);
        }
    }, [data, config]);

    return (
        <Card className={cn('w-full', className)}>
            <div ref={plotRef} />
        </Card>
    );
};

export default FastplotlibWidget;

---

4. Register in DynamicComponents.jsx

Modify preswald/frontend/src/components/DynamicComponents.jsx to include the new component:

import FastplotlibWidget from '@/components/widgets/FastplotlibWidget';

case 'fastplotlib_component':
    return (
        <FastplotlibWidget
            {...commonProps}
            data={component.data}
            config={component.config}
            className={component.className}
        />
    );

---

5. Test the Integration

Modify examples/iris/hello.py to test the new component:

from preswald import fastplotlib
import numpy as np

# Generate some test data
x = np.linspace(0, 10, 100)
y = np.sin(x)

# Call the component
fastplotlib(label="Sine Wave", data={"x": x.tolist(), "y": y.tolist()})

Run the example:

cd examples/iris
preswald run

Expected result: The Fastplotlib component should render an interactive sine wave plot.

[BloggerBust]

Hey Amrutha,

I started working on the Fastplotlib integration for Preswald and noticed that Fastplotlib does not have a JavaScript implementation. This means we would need to render plots on the backend and send them to the frontend as images.

I wanted to check with you before proceeding because:

• Backend GPU Acceleration: Fastplotlib relies on GPU acceleration (Vulkan, Metal, DX12). Does the backend support GPU rendering?
• Increased Backend Load: Instead of rendering in the browser, all Fastplotlib visualizations will run on the server, which may impact performance.
• Alternative Options: Would you prefer using a WebGL-based plotting library for the frontend instead?

Let me know your thoughts—happy to explore the best approach! Also, I am not able to assign this task to myself. I don't seem to have the permission to do that.

Best,
Trevor

[BloggerBust]

Hey Amrutha,

After digging deeper, I realized that my initial assumption may have been incorrect. The original implementation plan actually suggests that Fastplotlib should be handled entirely on the backend, meaning there shouldn't be a need for a frontend JavaScript integration after all.

The error I ran into during the frontend build might not be related to Fastplotlib itself—I think I may have misdiagnosed the issue. I'm currently re-evaluating the implementation to ensure that the backend registration is correct and that the frontend is expecting the right data format.

I'll keep you posted once I verify that everything is working as expected! Sorry for the premature concern, and thanks for your time!

Best,
Trevor

[yatharthk2]

Hey Amrutha,
Thank you for the comprehensive feature request. I was working on building the module but encountered several errors along the way. I'd really appreciate it if you could provide some documentation on how to set up and build the module locally.

Best,
Yatharth

[BloggerBust]

Future Improvement Suggestion
Currently, label-to-color mapping in fastplotlib ( see linked PR ) uses a hardcoded RGBA palette and cycles through a small set of colors. To support a broader set of label inputs (e.g., arbitrary categories or named colors like "magenta"), we could consider adding matplotlib as a dependency.

This would give us access to its robust color handling utilities — such as matplotlib.colors.to_rgba — and built-in colormaps like tab10, Set2, Paired, etc. That would enable more intuitive and expressive color mapping, especially for larger or user-defined label sets.

@amrutha If you like this idea, let me know if you want me to create a task for this.