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

const getStartDate = () => (new Date(Date.now() - 604800000)).toLocaleDateString('en-CA'); // 7 days = 604800000 = 7*24*60*60*1000
const getEndDate = () => (new Date()).toLocaleDateString('en-CA'); // 'en-CA' formats the date as YYYY-MM-DD

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: {
            // startDate: getStartDate(),
            // endDate: getEndDate(),
            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.",
        component: lazy(() => import('../components/Widgets/IvansAlerts.jsx')),
        settingsComponent: lazy(() => import('../components/Widgets/settings/IvansAlertsSettings.jsx')),
        defaultSettings: {
            startDate: getStartDate(),
            endDate: getEndDate(),
            copyToClipboard: false,
            activeSorts: {
                timeSort: "desc",
                volcanoSort: false
            }
        },
        allowedSizes: {
            small: { w: 3, h: 6 },
            medium: { w: 3, h: 9 },
            large: { w: 3, h: 12 },
        }
    },

    "remote_sensing": {
        name: "Remote Sensing",
        category: "Remote Sensing",
        description: "Feed of recent remote sensing reports.",
        component: lazy(() => import('../components/Widgets/RemoteSensing.jsx')),
        settingsComponent: lazy(() => import('../components/Widgets/Settings/RemoteSensingSettings.jsx')),
        defaultSettings: {
            startDate: getStartDate(),
            endDate: getEndDate(),
            copyToClipboard: false,
            activeSorts: {
                timeSort: "desc",
                volcanoSort: false
            }
        },
        allowedSizes: {
            small: { w: 3, h: 6 },
            medium: { w: 3, h: 9 },
            large: { w: 3, h: 12 },
        }
    },

    "alert_levels": {
        name: "Alert Level Changes",
        category: "Daily Alerts",
        description: "List of 7-day alert level changes with trend arrows.",
        component: lazy(() => import('../components/Widgets/AlertChanges.jsx')),
        settingsComponent: lazy(() => import('../components/Widgets/settings/AlertChangeSettings.jsx')),
        defaultSettings: {
            startDate: getStartDate(),
            endDate: getEndDate(),
        },
        allowedSizes: {
            small: { w: 3, h: 6 },
            large: { w: 3, h: 12 }
        }
    },

    "explosion_events": {
        name: "Explosion Events",
        category: "Daily Volcanic Activity",
        description: "List of explosion events over a specified time period.",

        component: lazy(() => import('../components/Widgets/ExplosionEvents.jsx')),

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

        // The baseline data every new VAA widget starts with
        defaultSettings: {
            startDate: getStartDate(),
            endDate: getEndDate(),
            yAxisScale: 'normal' // Options: 'normal' | 'symlog'
        },
        allowedSizes: {
            medium:  { w: 6, h: 12 }
        }
    },

    "plume_events": {
        name: "Plume Events",
        category: "Daily Volcanic Activity",
        description: "Plot of explosion heights over a weeks time.",
        component: lazy(() => import('../components/Widgets/PlumeEvents.jsx')),
        settingsComponent: lazy(() => import('../components/Widgets/settings/PlumeEventsSettings.jsx')),
        defaultSettings: {
            startDate: getStartDate(),
            endDate: getEndDate(),
        },
        allowedSizes: {
            medium:  { w: 6, h: 12 }
        }
    },

    "seismic_events": {
        name: "Seismic Events",
        category: "Daily Volcanic Activity",
        description: "Plot of number of seismic events over a weeks time.",
        component: lazy(() => import('../components/Widgets/SeismicEvents.jsx')),
        settingsComponent: lazy(() => import('../components/Widgets/settings/SeismicEventsSettings.jsx')),
        defaultSettings: {
            startDate: getStartDate(),
            endDate: getEndDate(),
        },
        allowedSizes: {
            medium:  { w: 6, h: 12 }
        }
    },

    "llm_al_changes_quad_plot": {
        name: "Alert Level Changes Quad Plot",
        category: "Computer Science",
        description: "Percentage of TP, TN, FP, and FN changes in viable alert levels.",
        component: lazy(() => import('../components/Widgets/LlmAlChangesQuadPlot.jsx')),
        allowedSizes: {
            small: { w: 3, h: 12 }
        }
    }

};