@weng-lab/visualization 2.4.0-beta.4 → 2.4.0-beta.5

package/dist/visualization.es8.js.map

@@ -1 +1 @@
-{"version":3,"file":"visualization.es8.js","sources":["../src/components/ScatterPlot/scatterplot.tsx"],"sourcesContent":["import React, { useCallback, useImperativeHandle, useMemo } from 'react';\nimport { ChartProps, ZoomType } from './types';\nimport { Tooltip as VisxTooltip, TooltipProps, Portal, defaultStyles as visxTooltipStyles } from '@visx/tooltip';\nimport { scaleLinear } from '@visx/scale';\nimport ControlButtons from './controls';\nimport { IconButton, Stack, Tooltip, useTheme } from '@mui/material';\nimport { HighlightAlt } from '@mui/icons-material';\nimport { downloadDivAsPNG, downloadDivAsSVG } from '../../utility';\nimport { ResponsiveContainer, useResponsiveParentSize } from '../../responsive';\nimport { getDomains, getPointExtents, isSameTransform } from './helpers';\nimport ScatterPlotViewport from './ScatterPlotViewport';\nimport MiniMap from './minimap';\nimport PlotZoom from './PlotZoom';\nimport ScatterTooltip from './tooltip';\nimport { useSelectionMode } from './hooks/useSelectionMode';\nimport { useMiniMapToggle } from './hooks/useMiniMapToggle';\nimport { useHoverTooltip } from './hooks/useHoverTooltip';\nimport { useCrosshair } from './hooks/useCrosshair';\n\nconst MARGIN = { top: 20, right: 20, bottom: 70, left: 70 };\n\n/**\n * The point tooltip is portalled to document.body, so it leaves the plot's stacking\n * context and cannot be layered against the plot's own overlays by DOM order alone.\n * visx ships no z-index of its own, which leaves it below the controls and the minimap\n * toggle (z-index 10) - those sit in the root stacking context, so they win against an\n * auto z-index no matter where the portal lands. Lifting the tooltip to the theme's\n * tooltip layer keeps it above them, and matches the MUI tooltips on the same controls.\n */\nconst useTooltipStyle = () => {\n    const theme = useTheme();\n    return useMemo(\n        () => ({ ...visxTooltipStyles, zIndex: theme.zIndex.tooltip }),\n        [theme.zIndex.tooltip]\n    );\n};\n\nconst ScatterPlot = <T extends object, S extends boolean | undefined = undefined, Z extends boolean | undefined = undefined>(\n    props: ChartProps<T, S, Z>\n) => {\n    /**\n * Hacky workaround for complex type compatability issues. Hopefully this will fix itself when ugrading to React 19 - Jonathan 12/11/24\n * @todo remove this when possible\n */\n    const VisTooltip = VisxTooltip as unknown as React.FC<TooltipProps>;\n\n    const tooltipStyle = useTooltipStyle();\n\n    const initialSelectionMode = props.initialState?.controls?.selectionType ?? (props.selectable ? \"select\" : \"pan\");\n    const initialMiniMapOpen = props.initialState?.minimap?.open ?? false;\n\n    const { parentRef, containerStyle, width: parentWidth, height: parentHeight } = useResponsiveParentSize({ width: props.width, height: props.height });\n    const size = Math.min(parentHeight, parentWidth)\n\n    const divRef = React.useRef<HTMLDivElement>(null);\n    const selectable = props.selectable ?? false;\n    const boundedWidth = size * 0.9 - MARGIN.left;\n    const boundedHeight = boundedWidth;\n    const downloadButton = props.downloadButton ?? false\n\n    const { selectMode, handleSelectionModeChange } = useSelectionMode({ initialSelectionMode });\n\n    const { showMiniMap, toggleMiniMap } = useMiniMapToggle({ initialOpen: initialMiniMapOpen });\n\n    const pointExtents = useMemo(() => getPointExtents(props.pointData), [props.pointData]);\n    const dataDomains = useMemo(() => getDomains(pointExtents), [pointExtents]);\n\n    // Depend on the bounds rather than the arrays so a consumer passing a fresh domain array on\n    // every render doesn't rebuild the scales (and with them every derived scale and canvas draw).\n    const [xDomainMin, xDomainMax] = props.xDomain ?? dataDomains.xDomain;\n    const [yDomainMin, yDomainMax] = props.yDomain ?? dataDomains.yDomain;\n\n    const xScale = useMemo(() => {\n        return scaleLinear({\n            domain: [xDomainMin, xDomainMax],\n            range: [0, boundedWidth],\n        });\n    }, [boundedWidth, xDomainMin, xDomainMax]);\n\n    const yScale = useMemo(() => {\n        return scaleLinear({\n            domain: [yDomainMin, yDomainMax],\n            range: [boundedHeight, 0],\n        });\n    }, [boundedHeight, yDomainMin, yDomainMax]);\n\n    const { hoveredPoint, tooltipData, tooltipOpen, mouseX, mouseY, handleMouseMove, handleMouseLeave } =\n        useHoverTooltip({\n            pointData: props.pointData,\n            margin: MARGIN,\n            xScale,\n            yScale,\n            onHoveredPointChange: props.onHoveredPointChange,\n        });\n\n    const crosshairEnabled = props.crosshair ?? false;\n\n    const { crosshairPosition, handleCrosshairMove, handleCrosshairLeave } = useCrosshair({\n        enabled: crosshairEnabled,\n        margin: MARGIN,\n        boundedWidth,\n        boundedHeight,\n        xScale,\n        yScale,\n        onCrosshairChange: props.onCrosshairChange,\n    });\n\n    // Our own pointer wins over an externally supplied position, so that leaving this plot for a\n    // sibling hands the crosshair over rather than leaving both plots claiming it.\n    const crosshair = crosshairEnabled ? crosshairPosition ?? props.crosshairPosition ?? null : null;\n\n    const handlePointerMove = useCallback((event: React.MouseEvent<SVGElement>, zoom: ZoomType) => {\n        handleMouseMove(event, zoom);\n        handleCrosshairMove(event, zoom);\n    }, [handleCrosshairMove, handleMouseMove]);\n\n    const handlePointerLeave = useCallback(() => {\n        handleMouseLeave();\n        handleCrosshairLeave();\n    }, [handleCrosshairLeave, handleMouseLeave]);\n\n    //Download the plot as svg or png using the passed ref from the parent\n    useImperativeHandle(props.ref, () => ({\n        downloadSVG: () => {\n            if (divRef.current) downloadDivAsSVG(divRef.current, props.downloadFileName ?? \"scatter_plot.svg\");\n        },\n        downloadPNG: () => {\n            if (divRef.current) downloadDivAsPNG(divRef.current, props.downloadFileName ?? \"scatter_plot.png\");\n        },\n    }));\n\n    const handleDownload = () => {\n        if (divRef.current) downloadDivAsSVG(divRef.current, props.downloadFileName ?? \"scatter_plot.svg\");\n    };\n\n    const renderPlot = (zoom: ZoomType) => {\n        // Anchor the buttons on the plot area explicitly - a shared zoom is sized by whoever owns\n        // it, so visx's own default anchor (the centre of that size) isn't this plot's centre.\n        const zoomCenter = { x: boundedWidth / 2, y: boundedHeight / 2 };\n        const handleZoomIn = () => { zoom.scale({ scaleX: 1.2, scaleY: 1.2, point: zoomCenter }); }\n        const handleZoomOut = () => { zoom.scale({ scaleX: 0.8, scaleY: 0.8, point: zoomCenter }); }\n        const handleZoomReset = () => { zoom.reset(); }\n\n        const controlsPosition = props.controlsPosition ?? \"left\";\n\n        return (\n            <>\n                {!props.disableZoom && (\n                    <Stack\n                        direction=\"column\"\n                        sx={{\n                            position: 'absolute',\n                            ...(controlsPosition === \"right\"\n                                ? { right: `max(10px, calc(45% - ${size / 2}px))` }\n                                : { left: `max(10px, calc(45% - ${size / 2}px))` }),\n                            top: `calc(50% - ${size / 2}px + ${MARGIN.top}px)`,\n                            zIndex: 10\n                        }}\n                    >\n                        <ControlButtons\n                            selectable={selectable}\n                            resetable={!isSameTransform(zoom.transformMatrix, zoom.initialTransformMatrix)}\n                            handleSelectionModeChange={handleSelectionModeChange}\n                            selectMode={selectMode}\n                            zoomIn={handleZoomIn}\n                            zoomOut={handleZoomOut}\n                            zoomReset={handleZoomReset}\n                            highlight={props.controlsHighlight}\n                            downloadButton={downloadButton}\n                            downloadPlot={handleDownload}\n                        />\n                    </Stack>\n                )}\n                <ScatterPlotViewport\n                    size={size}\n                    margin={MARGIN}\n                    boundedWidth={boundedWidth}\n                    boundedHeight={boundedHeight}\n                    loading={props.loading}\n                    pointData={props.pointData}\n                    animation={props.animation}\n                    animationGroupSize={props.animationGroupSize}\n                    animationBuffer={props.animationBuffer}\n                    xScale={xScale}\n                    yScale={yScale}\n                    zoom={zoom}\n                    selectMode={selectMode}\n                    selectable={selectable}\n                    disableZoom={props.disableZoom}\n                    groupPointsAnchor={props.groupPointsAnchor}\n                    hoveredPoint={hoveredPoint}\n                    hoveredPoints={props.hoveredPoints}\n                    handleMouseMove={handlePointerMove}\n                    handleMouseLeave={handlePointerLeave}\n                    onDisplayedPointsChange={props.onDisplayedPointsChange}\n                    onSelectionChange={props.onSelectionChange}\n                    onPointClicked={props.onPointClicked}\n                    leftAxisLabel={props.leftAxisLabel}\n                    bottomAxisLabel={props.bottomAxisLabel}\n                    border={props.border ?? false}\n                    originLine={props.originLine}\n                    backgroundGradient={props.backgroundGradient}\n                    crosshair={crosshair}\n                    divRef={divRef}\n                />\n                {props.miniMap && !props.disableZoom && (\n                    <Tooltip title=\"Toggle Minimap\">\n                        <IconButton\n                            sx={{\n                                position: \"absolute\",\n                                right: 10,\n                                bottom: 10,\n                                zIndex: 10,\n                                width: \"auto\",\n                                height: \"auto\",\n                                color: showMiniMap ? props.controlsHighlight ?? \"primary.main\" : \"default\",\n                            }}\n                            size=\"small\"\n                            onClick={toggleMiniMap}\n                        >\n                            <HighlightAlt />\n                        </IconButton>\n                    </Tooltip>\n                )}\n                {showMiniMap && props.miniMap && !props.disableZoom && !props.loading && (\n                    <MiniMap\n                        miniMap={props.miniMap}\n                        width={size}\n                        height={size}\n                        pointData={props.pointData}\n                        xScale={xScale}\n                        yScale={yScale}\n                        zoom={zoom}\n                        crosshair={crosshair}\n                    />\n                )}\n                {!props.disableTooltip && tooltipOpen && tooltipData && (\n                    <Portal>\n                        <VisTooltip left={mouseX + 10} top={mouseY} style={tooltipStyle}>\n                            <ScatterTooltip tooltipBody={props.tooltipBody} tooltipData={tooltipData} />\n                        </VisTooltip>\n                    </Portal>\n                )}\n            </>\n        )\n    };\n\n    return (\n        <ResponsiveContainer parentRef={parentRef} containerStyle={containerStyle}>\n            {props.zoom\n                ? renderPlot(props.zoom)\n                : (\n                    <PlotZoom width={boundedWidth} height={boundedHeight}>\n                        {renderPlot}\n                    </PlotZoom>\n                )}\n        </ResponsiveContainer>\n    );\n}\n\nexport default ScatterPlot;\n"],"names":["MARGIN","top","right","bottom","left","useTooltipStyle","$","_c","theme","useTheme","t0","zIndex","tooltip","visxTooltipStyles","ScatterPlot","props","VisTooltip","VisxTooltip","tooltipStyle","initialSelectionMode","initialState","controls","selectionType","selectable","initialMiniMapOpen","minimap","open","parentRef","containerStyle","width","parentWidth","height","parentHeight","useResponsiveParentSize","size","Math","min","divRef","React","useRef","boundedWidth","boundedHeight","downloadButton","selectMode","handleSelectionModeChange","useSelectionMode","showMiniMap","toggleMiniMap","useMiniMapToggle","initialOpen","pointExtents","useMemo","getPointExtents","pointData","dataDomains","getDomains","xDomainMin","xDomainMax","xDomain","yDomainMin","yDomainMax","yDomain","xScale","scaleLinear","domain","range","yScale","hoveredPoint","tooltipData","tooltipOpen","mouseX","mouseY","handleMouseMove","handleMouseLeave","useHoverTooltip","margin","onHoveredPointChange","crosshairEnabled","crosshair","crosshairPosition","handleCrosshairMove","handleCrosshairLeave","useCrosshair","enabled","onCrosshairChange","handlePointerMove","useCallback","event","zoom","handlePointerLeave","useImperativeHandle","ref","downloadSVG","current","downloadDivAsSVG","downloadFileName","downloadPNG","downloadDivAsPNG","handleDownload","renderPlot","zoomCenter","x","y","handleZoomIn","scale","scaleX","scaleY","point","handleZoomOut","handleZoomReset","reset","controlsPosition","jsxs","Fragment","disableZoom","jsx","Stack","position","ControlButtons","isSameTransform","transformMatrix","initialTransformMatrix","controlsHighlight","ScatterPlotViewport","loading","animation","animationGroupSize","animationBuffer","groupPointsAnchor","hoveredPoints","onDisplayedPointsChange","onSelectionChange","onPointClicked","leftAxisLabel","bottomAxisLabel","border","originLine","backgroundGradient","miniMap","Tooltip","IconButton","color","HighlightAlt","MiniMap","disableTooltip","Portal","ScatterTooltip","tooltipBody","ResponsiveContainer","PlotZoom"],"mappings":"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"}
+{"version":3,"file":"visualization.es8.js","sources":["../src/components/ScatterPlot/scatterplot.tsx"],"sourcesContent":["import React, { useCallback, useImperativeHandle, useMemo } from 'react';\nimport { ChartProps, ZoomType } from './types';\nimport { Tooltip as VisxTooltip, TooltipProps, Portal, defaultStyles as visxTooltipStyles } from '@visx/tooltip';\nimport { scaleLinear } from '@visx/scale';\nimport ControlButtons from './controls';\nimport { IconButton, Stack, Tooltip, useTheme } from '@mui/material';\nimport { HighlightAlt } from '@mui/icons-material';\nimport { downloadDivAsPNG, downloadDivAsSVG } from '../../utility';\nimport { ResponsiveContainer, useResponsiveParentSize } from '../../responsive';\nimport { getDomains, getPointExtents, isSameTransform } from './helpers';\nimport ScatterPlotViewport from './ScatterPlotViewport';\nimport MiniMap from './minimap';\nimport PlotZoom from './PlotZoom';\nimport ScatterTooltip from './tooltip';\nimport { useSelectionMode } from './hooks/useSelectionMode';\nimport { useMiniMapToggle } from './hooks/useMiniMapToggle';\nimport { useHoverTooltip } from './hooks/useHoverTooltip';\nimport { useCrosshair } from './hooks/useCrosshair';\n\nconst MARGIN = { top: 20, right: 20, bottom: 70, left: 70 };\n\n/**\n * The point tooltip is portalled to document.body, so it leaves the plot's stacking\n * context and cannot be layered against the plot's own overlays by DOM order alone.\n * visx ships no z-index of its own, which leaves it below the controls and the minimap\n * toggle (z-index 10) - those sit in the root stacking context, so they win against an\n * auto z-index no matter where the portal lands. Lifting the tooltip to the theme's\n * tooltip layer keeps it above them, and matches the MUI tooltips on the same controls.\n */\nconst useTooltipStyle = () => {\n    const theme = useTheme();\n    return useMemo(\n        () => ({ ...visxTooltipStyles, zIndex: theme.zIndex.tooltip }),\n        [theme.zIndex.tooltip]\n    );\n};\n\nconst ScatterPlot = <T extends object, S extends boolean | undefined = undefined, Z extends boolean | undefined = undefined>(\n    props: ChartProps<T, S, Z>\n) => {\n    /**\n * Hacky workaround for complex type compatability issues. Hopefully this will fix itself when ugrading to React 19 - Jonathan 12/11/24\n * @todo remove this when possible\n */\n    const VisTooltip = VisxTooltip as unknown as React.FC<TooltipProps>;\n\n    const tooltipStyle = useTooltipStyle();\n\n    const initialSelectionMode = props.initialState?.controls?.selectionType ?? (props.selectable ? \"select\" : \"pan\");\n    const initialMiniMapOpen = props.initialState?.minimap?.open ?? false;\n\n    const { parentRef, containerStyle, width: parentWidth, height: parentHeight } = useResponsiveParentSize({ width: props.width, height: props.height });\n    // The square path is kept exactly as it was, so turning `square` on is a no-op against\n    // previous versions. Unsquared, the plot takes the whole container and only the axis\n    // margins are held back.\n    const square = props.square ?? false;\n    const size = Math.min(parentHeight, parentWidth)\n    const plotWidth = square ? size : parentWidth;\n    const plotHeight = square ? size : parentHeight;\n\n    const divRef = React.useRef<HTMLDivElement>(null);\n    const selectable = props.selectable ?? false;\n    const boundedWidth = square\n        ? size * 0.9 - MARGIN.left\n        : Math.max(0, plotWidth - MARGIN.left - MARGIN.right);\n    const boundedHeight = square\n        ? size * 0.9 - MARGIN.left\n        : Math.max(0, plotHeight - MARGIN.top - MARGIN.bottom);\n    const downloadButton = props.downloadButton ?? false\n\n    const { selectMode, handleSelectionModeChange } = useSelectionMode({ initialSelectionMode });\n\n    const { showMiniMap, toggleMiniMap } = useMiniMapToggle({ initialOpen: initialMiniMapOpen });\n\n    const pointExtents = useMemo(() => getPointExtents(props.pointData), [props.pointData]);\n    const dataDomains = useMemo(() => getDomains(pointExtents), [pointExtents]);\n\n    // Depend on the bounds rather than the arrays so a consumer passing a fresh domain array on\n    // every render doesn't rebuild the scales (and with them every derived scale and canvas draw).\n    const [xDomainMin, xDomainMax] = props.xDomain ?? dataDomains.xDomain;\n    const [yDomainMin, yDomainMax] = props.yDomain ?? dataDomains.yDomain;\n\n    const xScale = useMemo(() => {\n        return scaleLinear({\n            domain: [xDomainMin, xDomainMax],\n            range: [0, boundedWidth],\n        });\n    }, [boundedWidth, xDomainMin, xDomainMax]);\n\n    const yScale = useMemo(() => {\n        return scaleLinear({\n            domain: [yDomainMin, yDomainMax],\n            range: [boundedHeight, 0],\n        });\n    }, [boundedHeight, yDomainMin, yDomainMax]);\n\n    const { hoveredPoint, tooltipData, tooltipOpen, mouseX, mouseY, handleMouseMove, handleMouseLeave } =\n        useHoverTooltip({\n            pointData: props.pointData,\n            margin: MARGIN,\n            xScale,\n            yScale,\n            onHoveredPointChange: props.onHoveredPointChange,\n        });\n\n    const crosshairEnabled = props.crosshair ?? false;\n\n    const { crosshairPosition, handleCrosshairMove, handleCrosshairLeave } = useCrosshair({\n        enabled: crosshairEnabled,\n        margin: MARGIN,\n        boundedWidth,\n        boundedHeight,\n        xScale,\n        yScale,\n        onCrosshairChange: props.onCrosshairChange,\n    });\n\n    // Our own pointer wins over an externally supplied position, so that leaving this plot for a\n    // sibling hands the crosshair over rather than leaving both plots claiming it.\n    const crosshair = crosshairEnabled ? crosshairPosition ?? props.crosshairPosition ?? null : null;\n\n    const handlePointerMove = useCallback((event: React.MouseEvent<SVGElement>, zoom: ZoomType) => {\n        handleMouseMove(event, zoom);\n        handleCrosshairMove(event, zoom);\n    }, [handleCrosshairMove, handleMouseMove]);\n\n    const handlePointerLeave = useCallback(() => {\n        handleMouseLeave();\n        handleCrosshairLeave();\n    }, [handleCrosshairLeave, handleMouseLeave]);\n\n    //Download the plot as svg or png using the passed ref from the parent\n    useImperativeHandle(props.ref, () => ({\n        downloadSVG: () => {\n            if (divRef.current) downloadDivAsSVG(divRef.current, props.downloadFileName ?? \"scatter_plot.svg\");\n        },\n        downloadPNG: () => {\n            if (divRef.current) downloadDivAsPNG(divRef.current, props.downloadFileName ?? \"scatter_plot.png\");\n        },\n    }));\n\n    const handleDownload = () => {\n        if (divRef.current) downloadDivAsSVG(divRef.current, props.downloadFileName ?? \"scatter_plot.svg\");\n    };\n\n    const renderPlot = (zoom: ZoomType) => {\n        // Anchor the buttons on the plot area explicitly - a shared zoom is sized by whoever owns\n        // it, so visx's own default anchor (the centre of that size) isn't this plot's centre.\n        const zoomCenter = { x: boundedWidth / 2, y: boundedHeight / 2 };\n        const handleZoomIn = () => { zoom.scale({ scaleX: 1.2, scaleY: 1.2, point: zoomCenter }); }\n        const handleZoomOut = () => { zoom.scale({ scaleX: 0.8, scaleY: 0.8, point: zoomCenter }); }\n        const handleZoomReset = () => { zoom.reset(); }\n\n        const controlsPosition = props.controlsPosition ?? \"left\";\n\n        return (\n            <>\n                {!props.disableZoom && (\n                    <Stack\n                        direction=\"column\"\n                        sx={{\n                            position: 'absolute',\n                            ...(controlsPosition === \"right\"\n                                ? { right: square ? `max(10px, calc(45% - ${size / 2}px))` : \"10px\" }\n                                : { left: square ? `max(10px, calc(45% - ${size / 2}px))` : \"10px\" }),\n                            top: square ? `calc(50% - ${size / 2}px + ${MARGIN.top}px)` : `${MARGIN.top}px`,\n                            zIndex: 10\n                        }}\n                    >\n                        <ControlButtons\n                            selectable={selectable}\n                            resetable={!isSameTransform(zoom.transformMatrix, zoom.initialTransformMatrix)}\n                            handleSelectionModeChange={handleSelectionModeChange}\n                            selectMode={selectMode}\n                            zoomIn={handleZoomIn}\n                            zoomOut={handleZoomOut}\n                            zoomReset={handleZoomReset}\n                            highlight={props.controlsHighlight}\n                            downloadButton={downloadButton}\n                            downloadPlot={handleDownload}\n                        />\n                    </Stack>\n                )}\n                <ScatterPlotViewport\n                    width={plotWidth}\n                    height={plotHeight}\n                    margin={MARGIN}\n                    boundedWidth={boundedWidth}\n                    boundedHeight={boundedHeight}\n                    loading={props.loading}\n                    pointData={props.pointData}\n                    animation={props.animation}\n                    animationGroupSize={props.animationGroupSize}\n                    animationBuffer={props.animationBuffer}\n                    xScale={xScale}\n                    yScale={yScale}\n                    zoom={zoom}\n                    selectMode={selectMode}\n                    selectable={selectable}\n                    disableZoom={props.disableZoom}\n                    groupPointsAnchor={props.groupPointsAnchor}\n                    hoveredPoint={hoveredPoint}\n                    hoveredPoints={props.hoveredPoints}\n                    handleMouseMove={handlePointerMove}\n                    handleMouseLeave={handlePointerLeave}\n                    onDisplayedPointsChange={props.onDisplayedPointsChange}\n                    onSelectionChange={props.onSelectionChange}\n                    onPointClicked={props.onPointClicked}\n                    leftAxisLabel={props.leftAxisLabel}\n                    bottomAxisLabel={props.bottomAxisLabel}\n                    border={props.border ?? false}\n                    originLine={props.originLine}\n                    backgroundGradient={props.backgroundGradient}\n                    crosshair={crosshair}\n                    divRef={divRef}\n                />\n                {props.miniMap && !props.disableZoom && (\n                    <Tooltip title=\"Toggle Minimap\">\n                        <IconButton\n                            sx={{\n                                position: \"absolute\",\n                                right: 10,\n                                bottom: 10,\n                                zIndex: 10,\n                                width: \"auto\",\n                                height: \"auto\",\n                                color: showMiniMap ? props.controlsHighlight ?? \"primary.main\" : \"default\",\n                            }}\n                            size=\"small\"\n                            onClick={toggleMiniMap}\n                        >\n                            <HighlightAlt />\n                        </IconButton>\n                    </Tooltip>\n                )}\n                {showMiniMap && props.miniMap && !props.disableZoom && !props.loading && (\n                    <MiniMap\n                        miniMap={props.miniMap}\n                        width={plotWidth}\n                        height={plotHeight}\n                        pointData={props.pointData}\n                        xScale={xScale}\n                        yScale={yScale}\n                        zoom={zoom}\n                        crosshair={crosshair}\n                    />\n                )}\n                {!props.disableTooltip && tooltipOpen && tooltipData && (\n                    <Portal>\n                        <VisTooltip left={mouseX + 10} top={mouseY} style={tooltipStyle}>\n                            <ScatterTooltip tooltipBody={props.tooltipBody} tooltipData={tooltipData} />\n                        </VisTooltip>\n                    </Portal>\n                )}\n            </>\n        )\n    };\n\n    return (\n        <ResponsiveContainer parentRef={parentRef} containerStyle={containerStyle}>\n            {props.zoom\n                ? renderPlot(props.zoom)\n                : (\n                    <PlotZoom width={boundedWidth} height={boundedHeight}>\n                        {renderPlot}\n                    </PlotZoom>\n                )}\n        </ResponsiveContainer>\n    );\n}\n\nexport default ScatterPlot;\n"],"names":["MARGIN","top","right","bottom","left","useTooltipStyle","$","_c","theme","useTheme","t0","zIndex","tooltip","visxTooltipStyles","ScatterPlot","props","VisTooltip","VisxTooltip","tooltipStyle","initialSelectionMode","initialState","controls","selectionType","selectable","initialMiniMapOpen","minimap","open","parentRef","containerStyle","width","parentWidth","height","parentHeight","useResponsiveParentSize","square","size","Math","min","plotWidth","plotHeight","divRef","React","useRef","boundedWidth","max","boundedHeight","downloadButton","selectMode","handleSelectionModeChange","useSelectionMode","showMiniMap","toggleMiniMap","useMiniMapToggle","initialOpen","pointExtents","useMemo","getPointExtents","pointData","dataDomains","getDomains","xDomainMin","xDomainMax","xDomain","yDomainMin","yDomainMax","yDomain","xScale","scaleLinear","domain","range","yScale","hoveredPoint","tooltipData","tooltipOpen","mouseX","mouseY","handleMouseMove","handleMouseLeave","useHoverTooltip","margin","onHoveredPointChange","crosshairEnabled","crosshair","crosshairPosition","handleCrosshairMove","handleCrosshairLeave","useCrosshair","enabled","onCrosshairChange","handlePointerMove","useCallback","event","zoom","handlePointerLeave","useImperativeHandle","ref","downloadSVG","current","downloadDivAsSVG","downloadFileName","downloadPNG","downloadDivAsPNG","handleDownload","renderPlot","zoomCenter","x","y","handleZoomIn","scale","scaleX","scaleY","point","handleZoomOut","handleZoomReset","reset","controlsPosition","jsxs","Fragment","disableZoom","jsx","Stack","position","ControlButtons","isSameTransform","transformMatrix","initialTransformMatrix","controlsHighlight","ScatterPlotViewport","loading","animation","animationGroupSize","animationBuffer","groupPointsAnchor","hoveredPoints","onDisplayedPointsChange","onSelectionChange","onPointClicked","leftAxisLabel","bottomAxisLabel","border","originLine","backgroundGradient","miniMap","Tooltip","IconButton","color","HighlightAlt","MiniMap","disableTooltip","Portal","ScatterTooltip","tooltipBody","ResponsiveContainer","PlotZoom"],"mappings":"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"}

package/dist/visualization.es81.js

@@ -0,0 +1,134 @@
+import { jsx as t, jsxs as d, Fragment as q } from "react/jsx-runtime";
+import { c as E } from "react/compiler-runtime";
+import { useState as H } from "react";
+import m from "@mui/material/Button";
+import N from "./visualization.es117.js";
+import X from "./visualization.es118.js";
+import Y from "@mui/icons-material/KeyboardDoubleArrowRight";
+import $ from "@mui/icons-material/KeyboardDoubleArrowLeft";
+import K from "@mui/material/Stack";
+import { Typography as G } from "@mui/material";
+import J from "@mui/icons-material/Download";
+import M from "@mui/icons-material/Shuffle";
+import Q from "@mui/icons-material/Label";
+import U from "@mui/icons-material/LabelOff";
+import V from "@mui/icons-material/Insights";
+import f from "@mui/material/Tooltip";
+import Z from "@mui/material/Paper";
+const xe = (P) => {
+  const e = E(38), {
+    toggles: g,
+    onToggle: h,
+    simpleCategories: y,
+    edgeType: x,
+    colorFunc: b,
+    elements: u,
+    edges: w,
+    scales: C,
+    scaleWidth: S,
+    downloadScreenshot: L,
+    randomize: I,
+    organize: z,
+    toggleLabels: k,
+    labelsOn: T,
+    legendToggle: W,
+    legendNodeLabel: v,
+    legendEdgeLabel: j,
+    uniqueCat: D,
+    scaleLabel: R
+  } = P, [o, _] = H(!1), O = o ? "40px" : "250px";
+  let s;
+  e[0] !== O ? (s = {
+    position: "absolute",
+    top: "0",
+    right: "0",
+    width: O,
+    backgroundColor: "white",
+    transition: "width 0.3s",
+    zIndex: 1e3,
+    overflowX: "hidden",
+    marginRight: "5px",
+    marginTop: "5px",
+    overflowY: "auto",
+    maxHeight: "100vh"
+  }, e[0] = O, e[1] = s) : s = e[1];
+  const A = s, B = o ? "0px" : "10px";
+  let a;
+  e[2] !== B ? (a = {
+    width: B,
+    height: "40px",
+    display: "inline-block",
+    alignItems: "left",
+    justifyContent: "left",
+    cursor: "pointer",
+    padding: "0px"
+  }, e[2] = B, e[3] = a) : a = e[3];
+  const F = a;
+  let l;
+  e[4] !== o ? (l = () => _(!o), e[4] = o, e[5] = l) : l = e[5];
+  let p;
+  e[6] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (p = {
+    typography: "body2",
+    textTransform: "none"
+  }, e[6] = p) : p = e[6];
+  let i;
+  e[7] !== o ? (i = o ? /* @__PURE__ */ t($, { style: {
+    marginLeft: "-27px"
+  } }) : /* @__PURE__ */ t(Y, { style: {
+    marginRight: "30px"
+  } }), e[7] = o, e[8] = i) : i = e[8];
+  let n;
+  e[9] !== F || e[10] !== l || e[11] !== i ? (n = /* @__PURE__ */ t(m, { onClick: l, fullWidth: !0, sx: p, style: F, children: i }), e[9] = F, e[10] = l, e[11] = i, e[12] = n) : n = e[12];
+  let r;
+  e[13] !== o || e[14] !== b || e[15] !== L || e[16] !== x || e[17] !== w || e[18] !== u || e[19] !== T || e[20] !== j || e[21] !== v || e[22] !== W || e[23] !== h || e[24] !== z || e[25] !== I || e[26] !== R || e[27] !== S || e[28] !== C || e[29] !== y || e[30] !== k || e[31] !== g || e[32] !== D ? (r = !o && /* @__PURE__ */ d(q, { children: [
+    /* @__PURE__ */ t(G, { variant: "body2", style: {
+      fontSize: "20px",
+      marginLeft: "22px",
+      marginTop: "5px",
+      justifyContent: "center",
+      alignItems: "center",
+      display: "inline-block"
+    }, children: "Controls" }),
+    /* @__PURE__ */ d(K, { spacing: 1, children: [
+      /* @__PURE__ */ t(N, { toggles: g, onToggle: h, simpleCategories: y, edgeType: x, colorFunc: b, elements: u, edges: w, legendToggle: W, legendNodeLabel: v, legendEdgeLabel: j, uniqueCat: D }),
+      /* @__PURE__ */ t(X, { scales: C, width: S, scaleLabel: R }),
+      /* @__PURE__ */ d(K, { direction: "row", spacing: 2, style: {
+        marginBottom: "5px"
+      }, children: [
+        /* @__PURE__ */ t(m, { onClick: L, style: {
+          fontSize: "small",
+          minWidth: "40px"
+        }, children: /* @__PURE__ */ t(f, { title: "Download", color: "primary", sx: {
+          ml: 1
+        }, placement: "bottom", children: /* @__PURE__ */ t(J, {}) }) }),
+        /* @__PURE__ */ t(m, { onClick: I, style: {
+          fontSize: "small",
+          minWidth: "40px"
+        }, children: /* @__PURE__ */ t(f, { title: "Randomize", color: "primary", sx: {
+          ml: 1
+        }, placement: "bottom", children: /* @__PURE__ */ t(M, {}) }) }),
+        /* @__PURE__ */ t(m, { onClick: z, style: {
+          fontSize: "small",
+          minWidth: "40px"
+        }, children: /* @__PURE__ */ t(f, { title: "Organize", color: "primary", sx: {
+          ml: 1
+        }, placement: "bottom", children: /* @__PURE__ */ t(V, {}) }) }),
+        /* @__PURE__ */ t(m, { onClick: k, style: {
+          fontSize: "small",
+          minWidth: "40px"
+        }, children: /* @__PURE__ */ t(f, { title: "Toggle Labels", color: "primary", sx: {
+          ml: 1
+        }, placement: "bottom", children: T ? /* @__PURE__ */ t(U, {}) : /* @__PURE__ */ t(Q, {}) }) })
+      ] })
+    ] })
+  ] }), e[13] = o, e[14] = b, e[15] = L, e[16] = x, e[17] = w, e[18] = u, e[19] = T, e[20] = j, e[21] = v, e[22] = W, e[23] = h, e[24] = z, e[25] = I, e[26] = R, e[27] = S, e[28] = C, e[29] = y, e[30] = k, e[31] = g, e[32] = D, e[33] = r) : r = e[33];
+  let c;
+  return e[34] !== A || e[35] !== n || e[36] !== r ? (c = /* @__PURE__ */ d(Z, { style: A, elevation: 3, children: [
+    n,
+    r
+  ] }), e[34] = A, e[35] = n, e[36] = r, e[37] = c) : c = e[37], c;
+};
+export {
+  xe as default
+};
+//# sourceMappingURL=visualization.es81.js.map

package/dist/visualization.es81.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"visualization.es81.js","sources":["../src/components/Graph/ControlPanel.tsx"],"sourcesContent":["import React, { CSSProperties, useState } from 'react';\nimport { Node, Edge } from './types';\nimport Button from '@mui/material/Button';\nimport Legend from './Legend';\nimport ScaleLegend from './ScaleLegend';\nimport KeyboardDoubleArrowRightIcon from '@mui/icons-material/KeyboardDoubleArrowRight';\nimport KeyboardDoubleArrowLeftIcon from '@mui/icons-material/KeyboardDoubleArrowLeft';\nimport Stack from '@mui/material/Stack';\nimport { Typography } from '@mui/material';\nimport DownloadIcon from '@mui/icons-material/Download';\nimport ShuffleIcon from '@mui/icons-material/Shuffle';\nimport LabelIcon from '@mui/icons-material/Label';\nimport LabelOffIcon from '@mui/icons-material/LabelOff';\nimport InsightsIcon from '@mui/icons-material/Insights';\nimport Tooltip from '@mui/material/Tooltip';\nimport Paper from '@mui/material/Paper';\n\ninterface ControlPanelProps {\n  toggles: { [key: string]: boolean };\n  onToggle: (category: string) => void;\n  simpleCategories: string[];\n  edgeType: boolean;\n  colorFunc?: (node: Node | Edge) => string;\n  elements: Node[];\n  edges: Edge[];\n  scales: number[];\n  scaleWidth: (n: number) => number;\n  downloadScreenshot: () => void;\n  randomize: () => void;\n  organize: () => void;\n  toggleLabels: () => void;\n  labelsOn: boolean;\n  legendToggle?: (node: Node | Edge) => string;\n  legendNodeLabel?: string;\n  legendEdgeLabel?: string;\n  uniqueCat?: string[];\n  scaleLabel?: string;\n}\n\nconst ControlPanel: React.FC<ControlPanelProps> = ({\n  toggles,\n  onToggle,\n  simpleCategories,\n  edgeType,\n  colorFunc,\n  elements,\n  edges,\n  scales,\n  scaleWidth,\n  downloadScreenshot,\n  randomize,\n  organize,\n  toggleLabels,\n  labelsOn,\n  legendToggle,\n  legendNodeLabel,\n  legendEdgeLabel,\n  uniqueCat,\n  scaleLabel,\n}) => {\n  const [collapsed, setCollapsed] = useState(false);\n\n  const panelStyle: CSSProperties = {\n    position: 'absolute',\n    top: '0',\n    right: '0',\n    width: collapsed ? '40px' : '250px',\n    backgroundColor: 'white',\n    transition: 'width 0.3s',\n    zIndex: 1000,\n    overflowX: 'hidden',\n    marginRight: '5px',\n    marginTop: '5px',\n    overflowY: 'auto',\n    maxHeight: '100vh',\n  };\n\n  const buttonStyle: CSSProperties = {\n    width: collapsed ? '0px' : '10px',\n    height: '40px',\n    display: 'inline-block',\n    alignItems: 'left',\n    justifyContent: 'left',\n    cursor: 'pointer',\n    padding: '0px',\n  };\n\n  return (\n    <Paper style={panelStyle} elevation={3}>\n      <Button\n        onClick={() => setCollapsed(!collapsed)}\n        fullWidth\n        sx={{ typography: 'body2', textTransform: 'none' }}\n        style={buttonStyle}\n      >\n        {collapsed ? (\n          <KeyboardDoubleArrowLeftIcon style={{ marginLeft: '-27px' }} />\n        ) : (\n          <KeyboardDoubleArrowRightIcon style={{ marginRight: '30px' }} />\n        )}\n      </Button>\n\n      {!collapsed && (\n        <>\n          <Typography\n            variant=\"body2\"\n            style={{\n              fontSize: '20px',\n              marginLeft: '22px',\n              marginTop: '5px',\n              justifyContent: 'center',\n              alignItems: 'center',\n              display: 'inline-block',\n            }}\n          >\n            Controls\n          </Typography>\n          <Stack spacing={1}>\n            <Legend\n              toggles={toggles}\n              onToggle={onToggle}\n              simpleCategories={simpleCategories}\n              edgeType={edgeType}\n              colorFunc={colorFunc}\n              elements={elements}\n              edges={edges}\n              legendToggle={legendToggle}\n              legendNodeLabel={legendNodeLabel}\n              legendEdgeLabel={legendEdgeLabel}\n              uniqueCat={uniqueCat}\n            />\n\n            <ScaleLegend\n              scales={scales}\n              width={scaleWidth}\n              scaleLabel={scaleLabel}\n            />\n\n            <Stack direction=\"row\" spacing={2} style={{ marginBottom: '5px' }}>\n              <Button\n                onClick={downloadScreenshot}\n                style={{ fontSize: 'small', minWidth: '40px' }}\n              >\n                <Tooltip\n                  title=\"Download\"\n                  color=\"primary\"\n                  sx={{ ml: 1 }}\n                  placement=\"bottom\"\n                >\n                  <DownloadIcon />\n                </Tooltip>\n              </Button>\n              <Button\n                onClick={randomize}\n                style={{ fontSize: 'small', minWidth: '40px' }}\n              >\n                <Tooltip\n                  title=\"Randomize\"\n                  color=\"primary\"\n                  sx={{ ml: 1 }}\n                  placement=\"bottom\"\n                >\n                  <ShuffleIcon />\n                </Tooltip>\n              </Button>\n              <Button\n                onClick={organize}\n                style={{ fontSize: 'small', minWidth: '40px' }}\n              >\n                <Tooltip\n                  title=\"Organize\"\n                  color=\"primary\"\n                  sx={{ ml: 1 }}\n                  placement=\"bottom\"\n                >\n                  <InsightsIcon />\n                </Tooltip>\n              </Button>\n              <Button\n                onClick={toggleLabels}\n                style={{ fontSize: 'small', minWidth: '40px' }}\n              >\n                <Tooltip\n                  title=\"Toggle Labels\"\n                  color=\"primary\"\n                  sx={{ ml: 1 }}\n                  placement=\"bottom\"\n                >\n                  {labelsOn ? <LabelOffIcon /> : <LabelIcon />}\n                </Tooltip>\n              </Button>\n            </Stack>\n          </Stack>\n        </>\n      )}\n    </Paper>\n  );\n};\n\nexport default ControlPanel;\n"],"names":["ControlPanel","t0","$","_c","toggles","onToggle","simpleCategories","edgeType","colorFunc","elements","edges","scales","scaleWidth","downloadScreenshot","randomize","organize","toggleLabels","labelsOn","legendToggle","legendNodeLabel","legendEdgeLabel","uniqueCat","scaleLabel","collapsed","setCollapsed","useState","t1","t2","position","top","right","width","backgroundColor","transition","zIndex","overflowX","marginRight","marginTop","overflowY","maxHeight","panelStyle","t3","t4","height","display","alignItems","justifyContent","cursor","padding","buttonStyle","t5","t6","Symbol","for","typography","textTransform","t7","jsx","KeyboardDoubleArrowLeftIcon","marginLeft","KeyboardDoubleArrowRightIcon","t8","Button","t9","jsxs","Fragment","Typography","fontSize","Stack","Legend","ScaleLegend","marginBottom","minWidth","Tooltip","ml","DownloadIcon","ShuffleIcon","InsightsIcon","LabelOffIcon","LabelIcon","t10","Paper"],"mappings":"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"}

package/dist/visualization.es82.js

@@ -1,134 +1,69 @@
-import { jsx as t, jsxs as d, Fragment as q } from "react/jsx-runtime";
-import { c as E } from "react/compiler-runtime";
-import { useState as H } from "react";
-import m from "@mui/material/Button";
-import N from "./visualization.es123.js";
-import X from "./visualization.es124.js";
-import Y from "@mui/icons-material/KeyboardDoubleArrowRight";
-import $ from "@mui/icons-material/KeyboardDoubleArrowLeft";
-import K from "@mui/material/Stack";
-import { Typography as G } from "@mui/material";
-import J from "@mui/icons-material/Download";
-import M from "@mui/icons-material/Shuffle";
-import Q from "@mui/icons-material/Label";
-import U from "@mui/icons-material/LabelOff";
-import V from "@mui/icons-material/Insights";
-import f from "@mui/material/Tooltip";
-import Z from "@mui/material/Paper";
-const xe = (P) => {
-  const e = E(38), {
-    toggles: g,
-    onToggle: h,
-    simpleCategories: y,
-    edgeType: x,
-    colorFunc: b,
-    elements: u,
-    edges: w,
-    scales: C,
-    scaleWidth: S,
-    downloadScreenshot: L,
-    randomize: I,
-    organize: z,
-    toggleLabels: k,
-    labelsOn: T,
-    legendToggle: W,
-    legendNodeLabel: v,
-    legendEdgeLabel: j,
-    uniqueCat: D,
-    scaleLabel: R
-  } = P, [o, _] = H(!1), O = o ? "40px" : "250px";
-  let s;
-  e[0] !== O ? (s = {
-    position: "absolute",
-    top: "0",
-    right: "0",
-    width: O,
-    backgroundColor: "white",
-    transition: "width 0.3s",
-    zIndex: 1e3,
-    overflowX: "hidden",
-    marginRight: "5px",
-    marginTop: "5px",
-    overflowY: "auto",
-    maxHeight: "100vh"
-  }, e[0] = O, e[1] = s) : s = e[1];
-  const A = s, B = o ? "0px" : "10px";
-  let a;
-  e[2] !== B ? (a = {
-    width: B,
-    height: "40px",
-    display: "inline-block",
-    alignItems: "left",
-    justifyContent: "left",
-    cursor: "pointer",
-    padding: "0px"
-  }, e[2] = B, e[3] = a) : a = e[3];
-  const F = a;
-  let l;
-  e[4] !== o ? (l = () => _(!o), e[4] = o, e[5] = l) : l = e[5];
+import { jsxs as E, jsx as e, Fragment as D } from "react/jsx-runtime";
+import { c as R } from "react/compiler-runtime";
+import { useEffect as I } from "react";
+import { Stack as L, Tooltip as i, IconButton as a } from "@mui/material";
+import { BackHand as Z, Edit as j, Add as F, Remove as P, SettingsBackupRestore as T, Download as $ } from "@mui/icons-material";
+import { useTheme as K } from "@mui/material/styles";
+const V = (x) => {
+  const t = R(7), {
+    selectable: n,
+    resetable: k,
+    handleSelectionModeChange: l,
+    selectMode: o,
+    zoomIn: w,
+    zoomOut: S,
+    zoomReset: y,
+    highlight: g,
+    downloadButton: z,
+    downloadPlot: C
+  } = x, c = K(), b = g ?? c.palette.primary.main, d = {
+    borderRadius: 0,
+    color: c.palette.text.primary,
+    padding: c.spacing(1)
+  };
+  let s, m;
+  t[0] !== l || t[1] !== o || t[2] !== n ? (s = () => {
+    const r = (v) => {
+      if (v.key === "Shift" && n && o === "select") {
+        l("pan");
+        const u = (B) => {
+          B.key === "Shift" && n && l("select");
+        };
+        return window.addEventListener("keyup", u), () => {
+          window.removeEventListener("keyup", u);
+        };
+      }
+    };
+    return window.addEventListener("keydown", r), () => {
+      window.removeEventListener("keydown", r);
+    };
+  }, m = [l, o, n], t[0] = l, t[1] = o, t[2] = n, t[3] = s, t[4] = m) : (s = t[3], m = t[4]), I(s, m);
+  const f = (r) => ({
+    ...d,
+    color: o === r ? g || "primary.main" : c.palette.text.primary,
+    backgroundColor: o === r ? `color-mix(in srgb, ${b} 15%, transparent)` : "transparent",
+    "&:hover": {
+      backgroundColor: o === r ? `color-mix(in srgb, ${b} 25%, transparent)` : c.palette.action.hover
+    }
+  }), h = o !== "none" && /* @__PURE__ */ E(L, { direction: "column", alignItems: "flex-start", justifyContent: "center", sx: {
+    background: "rgba(255, 255, 255, 0.6)",
+    backdropFilter: "blur(2px)",
+    WebkitBackdropFilter: "blur(2px)",
+    border: "1px solid rgba(255, 255, 255, 0.3)",
+    boxShadow: "0 2px 8px rgba(0, 0, 0, 0.1)",
+    overflow: "hidden"
+  }, children: [
+    n && /* @__PURE__ */ e(i, { title: "Drag to pan, or hold Shift and drag", placement: "right", children: /* @__PURE__ */ e(a, { "aria-label": "pan", onClick: () => l("pan"), sx: f("pan"), children: /* @__PURE__ */ e(Z, { fontSize: "small" }) }) }),
+    n && /* @__PURE__ */ e(i, { title: "Drag to select", placement: "right", children: /* @__PURE__ */ e(a, { "aria-label": "edit", onClick: () => l("select"), sx: f("select"), children: /* @__PURE__ */ e(j, { fontSize: "small" }) }) }),
+    /* @__PURE__ */ e(i, { title: "Zoom In", placement: "right", children: /* @__PURE__ */ e(a, { "aria-label": "zoom-in", onClick: w, sx: d, children: /* @__PURE__ */ e(F, { fontSize: "small" }) }) }),
+    /* @__PURE__ */ e(i, { title: "Zoom Out", placement: "right", children: /* @__PURE__ */ e(a, { "aria-label": "zoom-out", onClick: S, sx: d, children: /* @__PURE__ */ e(P, { fontSize: "small" }) }) }),
+    /* @__PURE__ */ e(i, { title: "Reset Zoom and Pan", placement: "right", children: /* @__PURE__ */ e(a, { "aria-label": "resetZoom", onClick: y, disabled: !k, sx: d, children: /* @__PURE__ */ e(T, { fontSize: "small" }) }) }),
+    z && /* @__PURE__ */ e(i, { title: "Download Plot as SVG", placement: "right", children: /* @__PURE__ */ e(a, { "aria-label": "download", onClick: () => C(), sx: d, children: /* @__PURE__ */ e($, { fontSize: "small" }) }) })
+  ] });
   let p;
-  e[6] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (p = {
-    typography: "body2",
-    textTransform: "none"
-  }, e[6] = p) : p = e[6];
-  let i;
-  e[7] !== o ? (i = o ? /* @__PURE__ */ t($, { style: {
-    marginLeft: "-27px"
-  } }) : /* @__PURE__ */ t(Y, { style: {
-    marginRight: "30px"
-  } }), e[7] = o, e[8] = i) : i = e[8];
-  let n;
-  e[9] !== F || e[10] !== l || e[11] !== i ? (n = /* @__PURE__ */ t(m, { onClick: l, fullWidth: !0, sx: p, style: F, children: i }), e[9] = F, e[10] = l, e[11] = i, e[12] = n) : n = e[12];
-  let r;
-  e[13] !== o || e[14] !== b || e[15] !== L || e[16] !== x || e[17] !== w || e[18] !== u || e[19] !== T || e[20] !== j || e[21] !== v || e[22] !== W || e[23] !== h || e[24] !== z || e[25] !== I || e[26] !== R || e[27] !== S || e[28] !== C || e[29] !== y || e[30] !== k || e[31] !== g || e[32] !== D ? (r = !o && /* @__PURE__ */ d(q, { children: [
-    /* @__PURE__ */ t(G, { variant: "body2", style: {
-      fontSize: "20px",
-      marginLeft: "22px",
-      marginTop: "5px",
-      justifyContent: "center",
-      alignItems: "center",
-      display: "inline-block"
-    }, children: "Controls" }),
-    /* @__PURE__ */ d(K, { spacing: 1, children: [
-      /* @__PURE__ */ t(N, { toggles: g, onToggle: h, simpleCategories: y, edgeType: x, colorFunc: b, elements: u, edges: w, legendToggle: W, legendNodeLabel: v, legendEdgeLabel: j, uniqueCat: D }),
-      /* @__PURE__ */ t(X, { scales: C, width: S, scaleLabel: R }),
-      /* @__PURE__ */ d(K, { direction: "row", spacing: 2, style: {
-        marginBottom: "5px"
-      }, children: [
-        /* @__PURE__ */ t(m, { onClick: L, style: {
-          fontSize: "small",
-          minWidth: "40px"
-        }, children: /* @__PURE__ */ t(f, { title: "Download", color: "primary", sx: {
-          ml: 1
-        }, placement: "bottom", children: /* @__PURE__ */ t(J, {}) }) }),
-        /* @__PURE__ */ t(m, { onClick: I, style: {
-          fontSize: "small",
-          minWidth: "40px"
-        }, children: /* @__PURE__ */ t(f, { title: "Randomize", color: "primary", sx: {
-          ml: 1
-        }, placement: "bottom", children: /* @__PURE__ */ t(M, {}) }) }),
-        /* @__PURE__ */ t(m, { onClick: z, style: {
-          fontSize: "small",
-          minWidth: "40px"
-        }, children: /* @__PURE__ */ t(f, { title: "Organize", color: "primary", sx: {
-          ml: 1
-        }, placement: "bottom", children: /* @__PURE__ */ t(V, {}) }) }),
-        /* @__PURE__ */ t(m, { onClick: k, style: {
-          fontSize: "small",
-          minWidth: "40px"
-        }, children: /* @__PURE__ */ t(f, { title: "Toggle Labels", color: "primary", sx: {
-          ml: 1
-        }, placement: "bottom", children: T ? /* @__PURE__ */ t(U, {}) : /* @__PURE__ */ t(Q, {}) }) })
-      ] })
-    ] })
-  ] }), e[13] = o, e[14] = b, e[15] = L, e[16] = x, e[17] = w, e[18] = u, e[19] = T, e[20] = j, e[21] = v, e[22] = W, e[23] = h, e[24] = z, e[25] = I, e[26] = R, e[27] = S, e[28] = C, e[29] = y, e[30] = k, e[31] = g, e[32] = D, e[33] = r) : r = e[33];
-  let c;
-  return e[34] !== A || e[35] !== n || e[36] !== r ? (c = /* @__PURE__ */ d(Z, { style: A, elevation: 3, children: [
-    n,
-    r
-  ] }), e[34] = A, e[35] = n, e[36] = r, e[37] = c) : c = e[37], c;
+  return t[5] !== h ? (p = /* @__PURE__ */ e(D, { children: h }), t[5] = h, t[6] = p) : p = t[6], p;
 };
 export {
-  xe as default
+  V as default
 };
 //# sourceMappingURL=visualization.es82.js.map

package/dist/visualization.es82.js.map

@@ -1 +1 @@
-{"version":3,"file":"visualization.es82.js","sources":["../src/components/Graph/ControlPanel.tsx"],"sourcesContent":["import React, { CSSProperties, useState } from 'react';\nimport { Node, Edge } from './types';\nimport Button from '@mui/material/Button';\nimport Legend from './Legend';\nimport ScaleLegend from './ScaleLegend';\nimport KeyboardDoubleArrowRightIcon from '@mui/icons-material/KeyboardDoubleArrowRight';\nimport KeyboardDoubleArrowLeftIcon from '@mui/icons-material/KeyboardDoubleArrowLeft';\nimport Stack from '@mui/material/Stack';\nimport { Typography } from '@mui/material';\nimport DownloadIcon from '@mui/icons-material/Download';\nimport ShuffleIcon from '@mui/icons-material/Shuffle';\nimport LabelIcon from '@mui/icons-material/Label';\nimport LabelOffIcon from '@mui/icons-material/LabelOff';\nimport InsightsIcon from '@mui/icons-material/Insights';\nimport Tooltip from '@mui/material/Tooltip';\nimport Paper from '@mui/material/Paper';\n\ninterface ControlPanelProps {\n  toggles: { [key: string]: boolean };\n  onToggle: (category: string) => void;\n  simpleCategories: string[];\n  edgeType: boolean;\n  colorFunc?: (node: Node | Edge) => string;\n  elements: Node[];\n  edges: Edge[];\n  scales: number[];\n  scaleWidth: (n: number) => number;\n  downloadScreenshot: () => void;\n  randomize: () => void;\n  organize: () => void;\n  toggleLabels: () => void;\n  labelsOn: boolean;\n  legendToggle?: (node: Node | Edge) => string;\n  legendNodeLabel?: string;\n  legendEdgeLabel?: string;\n  uniqueCat?: string[];\n  scaleLabel?: string;\n}\n\nconst ControlPanel: React.FC<ControlPanelProps> = ({\n  toggles,\n  onToggle,\n  simpleCategories,\n  edgeType,\n  colorFunc,\n  elements,\n  edges,\n  scales,\n  scaleWidth,\n  downloadScreenshot,\n  randomize,\n  organize,\n  toggleLabels,\n  labelsOn,\n  legendToggle,\n  legendNodeLabel,\n  legendEdgeLabel,\n  uniqueCat,\n  scaleLabel,\n}) => {\n  const [collapsed, setCollapsed] = useState(false);\n\n  const panelStyle: CSSProperties = {\n    position: 'absolute',\n    top: '0',\n    right: '0',\n    width: collapsed ? '40px' : '250px',\n    backgroundColor: 'white',\n    transition: 'width 0.3s',\n    zIndex: 1000,\n    overflowX: 'hidden',\n    marginRight: '5px',\n    marginTop: '5px',\n    overflowY: 'auto',\n    maxHeight: '100vh',\n  };\n\n  const buttonStyle: CSSProperties = {\n    width: collapsed ? '0px' : '10px',\n    height: '40px',\n    display: 'inline-block',\n    alignItems: 'left',\n    justifyContent: 'left',\n    cursor: 'pointer',\n    padding: '0px',\n  };\n\n  return (\n    <Paper style={panelStyle} elevation={3}>\n      <Button\n        onClick={() => setCollapsed(!collapsed)}\n        fullWidth\n        sx={{ typography: 'body2', textTransform: 'none' }}\n        style={buttonStyle}\n      >\n        {collapsed ? (\n          <KeyboardDoubleArrowLeftIcon style={{ marginLeft: '-27px' }} />\n        ) : (\n          <KeyboardDoubleArrowRightIcon style={{ marginRight: '30px' }} />\n        )}\n      </Button>\n\n      {!collapsed && (\n        <>\n          <Typography\n            variant=\"body2\"\n            style={{\n              fontSize: '20px',\n              marginLeft: '22px',\n              marginTop: '5px',\n              justifyContent: 'center',\n              alignItems: 'center',\n              display: 'inline-block',\n            }}\n          >\n            Controls\n          </Typography>\n          <Stack spacing={1}>\n            <Legend\n              toggles={toggles}\n              onToggle={onToggle}\n              simpleCategories={simpleCategories}\n              edgeType={edgeType}\n              colorFunc={colorFunc}\n              elements={elements}\n              edges={edges}\n              legendToggle={legendToggle}\n              legendNodeLabel={legendNodeLabel}\n              legendEdgeLabel={legendEdgeLabel}\n              uniqueCat={uniqueCat}\n            />\n\n            <ScaleLegend\n              scales={scales}\n              width={scaleWidth}\n              scaleLabel={scaleLabel}\n            />\n\n            <Stack direction=\"row\" spacing={2} style={{ marginBottom: '5px' }}>\n              <Button\n                onClick={downloadScreenshot}\n                style={{ fontSize: 'small', minWidth: '40px' }}\n              >\n                <Tooltip\n                  title=\"Download\"\n                  color=\"primary\"\n                  sx={{ ml: 1 }}\n                  placement=\"bottom\"\n                >\n                  <DownloadIcon />\n                </Tooltip>\n              </Button>\n              <Button\n                onClick={randomize}\n                style={{ fontSize: 'small', minWidth: '40px' }}\n              >\n                <Tooltip\n                  title=\"Randomize\"\n                  color=\"primary\"\n                  sx={{ ml: 1 }}\n                  placement=\"bottom\"\n                >\n                  <ShuffleIcon />\n                </Tooltip>\n              </Button>\n              <Button\n                onClick={organize}\n                style={{ fontSize: 'small', minWidth: '40px' }}\n              >\n                <Tooltip\n                  title=\"Organize\"\n                  color=\"primary\"\n                  sx={{ ml: 1 }}\n                  placement=\"bottom\"\n                >\n                  <InsightsIcon />\n                </Tooltip>\n              </Button>\n              <Button\n                onClick={toggleLabels}\n                style={{ fontSize: 'small', minWidth: '40px' }}\n              >\n                <Tooltip\n                  title=\"Toggle Labels\"\n                  color=\"primary\"\n                  sx={{ ml: 1 }}\n                  placement=\"bottom\"\n                >\n                  {labelsOn ? <LabelOffIcon /> : <LabelIcon />}\n                </Tooltip>\n              </Button>\n            </Stack>\n          </Stack>\n        </>\n      )}\n    </Paper>\n  );\n};\n\nexport default ControlPanel;\n"],"names":["ControlPanel","t0","$","_c","toggles","onToggle","simpleCategories","edgeType","colorFunc","elements","edges","scales","scaleWidth","downloadScreenshot","randomize","organize","toggleLabels","labelsOn","legendToggle","legendNodeLabel","legendEdgeLabel","uniqueCat","scaleLabel","collapsed","setCollapsed","useState","t1","t2","position","top","right","width","backgroundColor","transition","zIndex","overflowX","marginRight","marginTop","overflowY","maxHeight","panelStyle","t3","t4","height","display","alignItems","justifyContent","cursor","padding","buttonStyle","t5","t6","Symbol","for","typography","textTransform","t7","jsx","KeyboardDoubleArrowLeftIcon","marginLeft","KeyboardDoubleArrowRightIcon","t8","Button","t9","jsxs","Fragment","Typography","fontSize","Stack","Legend","ScaleLegend","marginBottom","minWidth","Tooltip","ml","DownloadIcon","ShuffleIcon","InsightsIcon","LabelOffIcon","LabelIcon","t10","Paper"],"mappings":"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"}
+{"version":3,"file":"visualization.es82.js","sources":["../src/components/ScatterPlot/controls.tsx"],"sourcesContent":["import { useEffect } from \"react\";\nimport { ControlButtonsProps } from \"./types\";\nimport { IconButton, Stack, Tooltip } from \"@mui/material\";\nimport { Add, Remove, BackHand, Edit, SettingsBackupRestore, Download } from \"@mui/icons-material\"\nimport { useTheme } from \"@mui/material/styles\";\n\nconst ControlButtons = ({\n    selectable,\n    resetable,\n    handleSelectionModeChange,\n    selectMode,\n    zoomIn,\n    zoomOut,\n    zoomReset,\n    highlight,\n    downloadButton,\n    downloadPlot\n}: ControlButtonsProps) => {\n    const theme = useTheme();\n    const color = highlight ?? theme.palette.primary.main;\n    const tooltipPlacement = \"right\";\n    \n    const buttonSx = {\n        borderRadius: 0,\n        color: theme.palette.text.primary,\n        padding: theme.spacing(1),\n    };\n\n    useEffect(() => {\n        // Function to handle key press\n        const handleKeyDown = (e: KeyboardEvent) => {\n            if (e.key === 'Shift' && selectable && selectMode === \"select\") {\n                handleSelectionModeChange('pan'); // Switch to pan mode when Shift is pressed\n\n                // Function to handle key release\n                const handleKeyUp = (e: KeyboardEvent) => {\n                    if (e.key === 'Shift' && selectable) {\n                        handleSelectionModeChange('select'); // Switch back to select mode when Shift is released\n                    }\n                };\n\n                window.addEventListener('keyup', handleKeyUp);\n                return () => {\n                    window.removeEventListener('keyup', handleKeyUp);\n                };\n            }\n        };\n\n        // Add event listeners for key press and release\n        window.addEventListener('keydown', handleKeyDown);\n\n        // Clean up event listeners on unmount\n        return () => {\n            window.removeEventListener('keydown', handleKeyDown);\n        };\n    }, [handleSelectionModeChange, selectMode, selectable]);\n\n    const getToggleButtonSx = (mode: \"pan\" | \"select\") => ({\n        ...buttonSx,\n        color: selectMode === mode ? highlight || \"primary.main\" : theme.palette.text.primary,\n        backgroundColor: selectMode === mode\n            ? `color-mix(in srgb, ${color} 15%, transparent)`\n            : \"transparent\",\n        '&:hover': {\n            backgroundColor: selectMode === mode\n                ? `color-mix(in srgb, ${color} 25%, transparent)`\n                : theme.palette.action.hover,\n        },\n    });\n\n    return (\n        <>\n            {selectMode !== \"none\" && (\n                <Stack\n                    direction=\"column\"\n                    alignItems=\"flex-start\"\n                    justifyContent={\"center\"}\n                    sx={{\n                        background: \"rgba(255, 255, 255, 0.6)\",\n                        backdropFilter: \"blur(2px)\",\n                        WebkitBackdropFilter: \"blur(2px)\",\n                        border: \"1px solid rgba(255, 255, 255, 0.3)\",\n                        boxShadow: \"0 2px 8px rgba(0, 0, 0, 0.1)\",\n                        overflow: \"hidden\",\n                    }}\n                >\n                    {\n                        selectable && (\n                            <Tooltip title=\"Drag to pan, or hold Shift and drag\" placement={tooltipPlacement}>\n                                <IconButton\n                                    aria-label=\"pan\"\n                                    onClick={() => handleSelectionModeChange('pan')}\n                                    sx={getToggleButtonSx(\"pan\")}\n                                >\n                                    <BackHand fontSize=\"small\" />\n                                </IconButton>\n                            </Tooltip>\n                        )\n                    }\n                    {\n                        selectable && (\n                            <Tooltip title=\"Drag to select\" placement={tooltipPlacement}>\n                                <IconButton\n                                    aria-label=\"edit\"\n                                    onClick={() => handleSelectionModeChange('select')}\n                                    sx={getToggleButtonSx(\"select\")}\n                                >\n                                    <Edit fontSize=\"small\" />\n                                </IconButton>\n                            </Tooltip>\n                        )\n                    }\n                    <Tooltip title=\"Zoom In\" placement={tooltipPlacement}>\n                        <IconButton aria-label=\"zoom-in\" onClick={zoomIn} sx={buttonSx}>\n                            <Add fontSize=\"small\" />\n                        </IconButton>\n                    </Tooltip>\n                    <Tooltip title=\"Zoom Out\" placement={tooltipPlacement}>\n                        <IconButton aria-label=\"zoom-out\" onClick={zoomOut} sx={buttonSx}>\n                            <Remove fontSize=\"small\" />\n                        </IconButton>\n                    </Tooltip>\n                    <Tooltip title=\"Reset Zoom and Pan\" placement={tooltipPlacement}>\n                        <IconButton aria-label=\"resetZoom\" onClick={zoomReset} disabled={!resetable} sx={buttonSx}>\n                            <SettingsBackupRestore fontSize=\"small\" />\n                        </IconButton>\n                    </Tooltip>\n                    {downloadButton && (\n                        <Tooltip title=\"Download Plot as SVG\" placement={tooltipPlacement}>\n                            <IconButton aria-label=\"download\" onClick={() => downloadPlot()} sx={buttonSx}>\n                                <Download fontSize=\"small\" />\n                            </IconButton>\n                        </Tooltip>\n                    )}\n                </Stack>\n            )}\n        </>\n\n    );\n}\n\nexport default ControlButtons;\n"],"names":["ControlButtons","t0","$","_c","selectable","resetable","handleSelectionModeChange","selectMode","zoomIn","zoomOut","zoomReset","highlight","downloadButton","downloadPlot","theme","useTheme","color","palette","primary","main","buttonSx","borderRadius","text","padding","spacing","t1","t2","handleKeyDown","e","key","handleKeyUp","e_0","window","addEventListener","removeEventListener","useEffect","getToggleButtonSx","mode","backgroundColor","action","hover","t3","jsxs","Stack","background","backdropFilter","WebkitBackdropFilter","border","boxShadow","overflow","jsx","Tooltip","tooltipPlacement","IconButton","BackHand","Edit","Add","Remove","SettingsBackupRestore","Download","t4"],"mappings":"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"}