Web-Frontend/client/src/components/layout/Canvas/views/DashboardCanvasNav/WidgetCanvas.jsx

// This component defines a generic Widget that can be dynamically resized and 
// dragged inside the canvas
// Content not included, must be populated using custom charts plots and notifications

import { useState } from 'react';
import GridLayout, { WidthProvider } from 'react-grid-layout';
import Widget from '../../components/Widget.jsx';
import { useSlotRecipe, chakra, Flex } from '@chakra-ui/react';

export default function WidgetCanvas({layout, onLayoutChange}) {
    // Define widgets initial position and size
    // TODO Add dynamic adding/deleting of widgets via options button 
    const recipe = useSlotRecipe({ key: "widget" });
    const styles = recipe(); // using root recipe for widget below
    const ResponsiveGridLayout = WidthProvider(GridLayout); // canvas width now adjusts to window size

    // don't allow text highlighting when dragging
    const handleDragStart = () => {
        document.body.style.userSelect = "none";
    };
    // allow text highlighting all other times
    const handleDragStop = () => {
        document.body.style.userSelect = "";
    };

    return (
        <chakra.div width="100%">
            <ResponsiveGridLayout
              className="layout"
              layout={layout}
              cols={12} // Total columns in grid
              rowHeight={30} //Height of a single row in px
              isBounded={true} // Total width of the grid
              margin={[10, 10]} // [horizontal, vertical] gap
              onLayoutChange={onLayoutChange}
              draggableHandle=".widget-handle" // Make only the header draggable
              onDragStart={handleDragStart}
              onDragStop={handleDragStop}
            >
                {layout.map((item) => (
                    // this flex wrapper allows the widget to shrink down to the header size, no less
                    <Flex key={item.i} css={styles.root} height="100%" >
                        <Widget title="VDAP Widget" />
                    </Flex>
                ))}
            </ResponsiveGridLayout>
        </chakra.div>
    );
}