Web-Frontend/client/src/constants/widgetRegistry.jsx

// config/widgetRegistry.js
import { lazy } from 'react';

// We assume a 12-column grid.
// w: 12 = full screen width
// w: 6 = half screen width
// w: 4 = one-third screen width
// w: 3 = one-quarter screen width

export const WIDGET_REGISTRY = {
    "vaa_activity": {
        name: "VAA 7 Day Activity",
        category: "Aviation",
        description: "Displays 7-day flight level timelines across multiple volcanoes.",
        component: lazy(() => import('../components/widgets/VaaActivity7Day')),

        // The specific settings UI for this widget
        settingsComponent: lazy(() => import('../components/widgets/settings/VaaActivitySettings')),

        // The baseline data every new VAA widget starts with
        defaultSettings: {
            yAxisScale: 'normal' // Options: 'normal' | 'symlog'
        },

        allowedSizes: {
            xlarge: { w: 12, h: 12 },
        }
    },

    "db_cache_health": {
        name: "DB Cache Health",
        category: "Computer Science",
        description: "Bar chart showing cache table operational status.",
        allowedSizes: {
            small: { w: 3, h: 12 },
            medium:  { w: 6, h: 12 }
        }
    },

    "ivans_alerts": {
        name: "IVANS",
        category: "Communications",
        description: "Feed of recent IVANS reports and reviewer statuses.",
        allowedSizes: {
            small:  { w: 3, h: 12 },
            medium: { w: 6, h: 24 }
        }
    },

    "remote_sensing": {
        name: "Remote Sensing",
        category: "Remote Sensing",
        description: "Feed of recent remote sensing reports.",
        allowedSizes: {
            small: { w: 3, h: 12 },
        }
    },

    "alert_levels": {
        name: "Alert Level Changes",
        category: "Daily Alerts",
        description: "List of 7-day alert level changes with trend arrows.",
        allowedSizes: {
            small: { w: 3, h: 12 },
            large: { w: 9, h: 12 }
        }
    }
};