<!DOCTYPE html>
<html>
    <head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <meta name="description" content="Dash Extensions is a collection of utility functions, syntax extensions, and Dash components that aim to improve the Dash development experience">
      <meta property="twitter:card" content="summary_large_image">
      <meta property="twitter:url" content="https://www.dash-extensions.com/">
      <meta property="twitter:title" content="Dash Extensions">
      <meta property="twitter:description" content="Dash Extensions is a collection of utility functions, syntax extensions, and Dash components that aim to improve the Dash development experience">
      <meta property="twitter:image" content="">
      <meta property="og:title" content="Dash Extensions">
      <meta property="og:type" content="website">
      <meta property="og:description" content="Dash Extensions is a collection of utility functions, syntax extensions, and Dash components that aim to improve the Dash development experience">
      <meta property="og:image" >
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Dash</title>
	<link rel="canonical" href="https://www.dash-extensions.com" />
        <link rel="icon" type="image/x-icon" href="_favicon_v-3.0.2.ico">
        <link rel="stylesheet" href="-mantine/code-highlight-7.17.2/styles.css">
<link rel="stylesheet" href="-mantine/notifications-7.17.2/styles.css">
<link rel="stylesheet" href="assets/m2d_m-1743970470.0.css">
<link rel="stylesheet" href="assets/styles_m-1743970470.0.css">
    </head>
    <body>
        <!--[if IE]><script>
        alert("Dash v2.7+ does not support Internet Explorer. Please use a newer browser.");
        </script><![endif]-->
<div id="react-entry-point">
    <div class="_dash-loading">
        Loading...
    </div>
</div>
        <footer>
            <script id="_dash-config" type="application/json">{"url_base_pathname":null,"requests_pathname_prefix":"\u002f","ui":false,"props_check":false,"disable_version_check":false,"show_undo_redo":false,"suppress_callback_exceptions":true,"update_title":null,"children_props":{"dash_core_components":{"Checklist":["options[].label"],"Clipboard":[],"ConfirmDialog":[],"ConfirmDialogProvider":[],"DatePickerRange":[],"DatePickerSingle":[],"Download":[],"Dropdown":["options[].label"],"Geolocation":[],"Graph":[],"Input":[],"Interval":[],"Link":[],"Loading":["custom_spinner"],"Location":[],"Markdown":[],"RadioItems":["options[].label"],"RangeSlider":[],"Slider":[],"Store":[],"Tab":[],"Tabs":[],"Textarea":[],"Tooltip":[],"Upload":[]},"dash_html_components":{"A":[],"Abbr":[],"Acronym":[],"Address":[],"Area":[],"Article":[],"Aside":[],"Audio":[],"B":[],"Base":[],"Basefont":[],"Bdi":[],"Bdo":[],"Big":[],"Blink":[],"Blockquote":[],"Br":[],"Button":[],"Canvas":[],"Caption":[],"Center":[],"Cite":[],"Code":[],"Col":[],"Colgroup":[],"Content":[],"Data":[],"Datalist":[],"Dd":[],"Del":[],"Details":[],"Dfn":[],"Dialog":[],"Div":[],"Dl":[],"Dt":[],"Em":[],"Embed":[],"Fieldset":[],"Figcaption":[],"Figure":[],"Font":[],"Footer":[],"Form":[],"Frame":[],"Frameset":[],"H1":[],"H2":[],"H3":[],"H4":[],"H5":[],"H6":[],"Header":[],"Hgroup":[],"Hr":[],"I":[],"Iframe":[],"Img":[],"Ins":[],"Kbd":[],"Keygen":[],"Label":[],"Legend":[],"Li":[],"Link":[],"Main":[],"MapEl":[],"Mark":[],"Marquee":[],"Meta":[],"Meter":[],"Nav":[],"Nobr":[],"Noscript":[],"ObjectEl":[],"Ol":[],"Optgroup":[],"Option":[],"Output":[],"P":[],"Param":[],"Picture":[],"Plaintext":[],"Pre":[],"Progress":[],"Q":[],"Rb":[],"Rp":[],"Rt":[],"Rtc":[],"Ruby":[],"S":[],"Samp":[],"Script":[],"Section":[],"Select":[],"Shadow":[],"Slot":[],"Small":[],"Source":[],"Spacer":[],"Span":[],"Strike":[],"Strong":[],"Sub":[],"Summary":[],"Sup":[],"Table":[],"Tbody":[],"Td":[],"Template":[],"Textarea":[],"Tfoot":[],"Th":[],"Thead":[],"Time":[],"Title":[],"Tr":[],"Track":[],"U":[],"Ul":[],"Var":[],"Video":[],"Wbr":[],"Xmp":[]},"dash_table":{"DataTable":[]},"dash_mantine_components":{"AreaChart":[],"BarChart":[],"BubbleChart":[],"CompositeChart":[],"DonutChart":[],"LineChart":[],"PieChart":[],"RadarChart":[],"ScatterChart":[],"Sparkline":[],"Accordion":["chevron"],"AccordionControl":["chevron","icon"],"AccordionItem":[],"AccordionPanel":[],"AppShell":[],"AppShellAside":[],"AppShellFooter":[],"AppShellHeader":[],"AppShellMain":[],"AppShellNavbar":[],"AppShellSection":[],"Avatar":[],"AvatarGroup":[],"ActionIcon":["loaderProps.children"],"ActionIconGroup":[],"Button":["leftSection","rightSection","loaderProps.children"],"ButtonGroup":[],"UnstyledButton":[],"Card":[],"CardSection":[],"Checkbox":["label","description","error","icon","indeterminateIcon"],"CheckboxCard":[],"CheckboxGroup":["label","description","error"],"CheckboxIndicator":["icon","indeterminateIcon"],"Chip":["icon"],"ChipGroup":[],"ChipGroupContext":[],"ColorInput":["popoverProps.children","popoverProps.middlewares.flip.boundary","eyeDropperIcon","label","description","error","leftSection","rightSection"],"ColorPicker":[],"Autocomplete":["label","description","error","leftSection","rightSection","comboboxProps.children","comboboxProps.middlewares.flip.boundary"],"MultiSelect":["nothingFoundMessage","clearButtonProps.children","clearButtonProps.icon","label","description","error","leftSection","rightSection","comboboxProps.children","comboboxProps.middlewares.flip.boundary"],"Select":["nothingFoundMessage","clearButtonProps.children","clearButtonProps.icon","label","description","error","leftSection","rightSection","comboboxProps.children","comboboxProps.middlewares.flip.boundary"],"TagsInput":["clearButtonProps.children","clearButtonProps.icon","label","description","error","leftSection","rightSection","comboboxProps.children","comboboxProps.middlewares.flip.boundary"],"Grid":[],"GridCol":[],"HoverCard":["middlewares.flip.boundary"],"HoverCardDropdown":[],"HoverCardTarget":[],"BackgroundImage":[],"Image":[],"InputWrapper":["label","description","error"],"JsonInput":["validationError","label","description","error","leftSection","rightSection"],"NumberInput":["label","description","error","leftSection","rightSection"],"PasswordInput":["label","description","error","leftSection","rightSection"],"PinInput":[],"TextInput":["label","description","error","leftSection","rightSection"],"Textarea":["label","description","error","leftSection","rightSection"],"List":["icon"],"ListItem":["icon"],"Menu":["middlewares.flip.boundary"],"MenuDivider":[],"MenuDropdown":[],"MenuItem":["leftSection","rightSection"],"MenuLabel":[],"MenuTarget":[],"Popover":["middlewares.flip.boundary"],"PopoverDropdown":[],"PopoverTarget":[],"Progress":[],"ProgressLabel":[],"ProgressRoot":[],"ProgressSection":[],"Radio":["label","description","error"],"RadioCard":[],"RadioGroup":["label","description","error"],"RadioGroupContext":[],"RadioIndicator":[],"RangeSlider":["marks[].label","label","thumbChildren"],"Slider":["marks[].label","label","thumbChildren"],"Stepper":["icon","completedIcon","progressIcon"],"StepperCompleted":[],"StepperStep":["icon","completedIcon","progressIcon","label","description"],"Table":["data.head","data.foot"],"TableCaption":[],"TableTbody":[],"TableTd":[],"TableTfoot":[],"TableTh":[],"TableThead":[],"TableTr":[],"Tabs":[],"TabsList":[],"TabsPanel":[],"TabsTab":["rightSection","leftSection"],"Timeline":[],"TimelineItem":["title","bullet"],"FloatingTooltip":["label"],"Tooltip":["label"],"Affix":[],"Alert":["title","icon"],"Anchor":[],"AspectRatio":[],"Badge":["leftSection","rightSection"],"Blockquote":["icon","cite"],"Box":[],"Breadcrumbs":["separator"],"Burger":[],"Center":[],"Code":[],"Collapse":[],"Container":[],"Divider":["label"],"Drawer":["title","overlayProps.children"],"Fieldset":["legend"],"Flex":[],"Group":[],"Highlight":[],"Indicator":["label"],"Kbd":[],"Loader":[],"LoadingOverlay":["loaderProps.children","overlayProps.children"],"Mark":[],"Modal":["title","overlayProps.children","closeButtonProps.children","closeButtonProps.icon"],"NavLink":["label","description","leftSection","rightSection"],"NumberFormatter":[],"Overlay":[],"Pagination":[],"Paper":[],"Rating":["emptySymbol","fullSymbol"],"RingProgress":["label","sections[].tooltip"],"ScrollArea":[],"SegmentedControl":[],"SemiCircleProgress":["label"],"SimpleGrid":[],"Skeleton":[],"Space":[],"Spoiler":["hideLabel","showLabel"],"Stack":[],"Switch":["label","offLabel","onLabel","thumbIcon","description","error"],"Text":[],"ThemeIcon":[],"Title":[],"Tree":["data[].label","expandedIcon","collapsedIcon"],"VisuallyHidden":[],"DateInput":["popoverProps.middlewares.flip.boundary","clearButtonProps.children","clearButtonProps.icon","leftSection","rightSection","label","description","error","nextIcon","previousIcon"],"DatePicker":["popoverProps.middlewares.flip.boundary","modalProps.overlayProps.children","modalProps.title","modalProps.closeButtonProps.children","modalProps.closeButtonProps.icon","clearButtonProps.children","clearButtonProps.icon","leftSection","rightSection","label","description","error","nextIcon","previousIcon"],"DatePickerInput":["popoverProps.middlewares.flip.boundary","modalProps.overlayProps.children","modalProps.title","modalProps.closeButtonProps.children","modalProps.closeButtonProps.icon","clearButtonProps.children","clearButtonProps.icon","leftSection","rightSection","label","description","error","nextIcon","previousIcon"],"DateTimePicker":["timeInputProps.label","timeInputProps.description","timeInputProps.error","timeInputProps.leftSection","timeInputProps.rightSection","leftSection","rightSection","label","description","error","popoverProps.middlewares.flip.boundary","clearButtonProps.children","clearButtonProps.icon","modalProps.overlayProps.children","modalProps.title","modalProps.closeButtonProps.children","modalProps.closeButtonProps.icon","nextIcon","previousIcon"],"DatesProvider":[],"MonthPickerInput":["popoverProps.middlewares.flip.boundary","modalProps.overlayProps.children","modalProps.title","modalProps.closeButtonProps.children","modalProps.closeButtonProps.icon","clearButtonProps.children","clearButtonProps.icon","leftSection","rightSection","label","description","error","nextIcon","previousIcon"],"TimeInput":["label","description","error","leftSection","rightSection"],"YearPickerInput":["popoverProps.middlewares.flip.boundary","modalProps.overlayProps.children","modalProps.title","modalProps.closeButtonProps.children","modalProps.closeButtonProps.icon","clearButtonProps.children","clearButtonProps.icon","leftSection","rightSection","label","description","error","nextIcon","previousIcon"],"Carousel":["nextControlIcon","previousControlIcon"],"CarouselSlide":[],"CodeHighlight":[],"CodeHighlightTabs":[],"InlineCodeHighlight":[],"Notification":["icon","title","message"],"NotificationProvider":[],"NavigationProgress":[],"NavigationProgressProvider":[],"RichTextEditor":[],"MantineProvider":[],"TypographyStylesProvider":[]},"dash_extensions":{"BeforeAfter":[],"CycleBreaker":[],"DeferScript":[],"EventListener":[],"EventSource":[],"Keyboard":[],"Loading":[],"Lottie":[],"Mermaid":[],"Purify":[],"SSE":[],"WebSocket":[]},"dash_iconify":{"DashIconify":null}},"serve_locally":true,"dash_version":"3.0.2","python_version":"3.12.0 (main, Jul 24 2024, 15:51:22) [GCC 12.2.0]","dash_version_url":"https:\u002f\u002f\u002fweb\u002f20250711091707\u002fhttps:\u002f\u002fdash-version.plotly.com:8080\u002fcurrent_version","ddk_version":null,"plotly_version":"6.0.1"}</script>
            <script src="_dash-component-suites/dash/deps/polyfill-7.v3_0_2m1743970541.12.1.min.js"></script>
<script src="_dash-component-suites/dash/deps/react-18.v3_0_2m1743970541.3.1.min.js"></script>
<script src="_dash-component-suites/dash/deps/react-dom-18.v3_0_2m1743970541.3.1.min.js"></script>
<script src="_dash-component-suites/dash/deps/prop-types-15.v3_0_2m1743970541.8.1.min.js"></script>
<script src="https://www.googletagmanager.com/gtag/js?id=G-XR24S2TSM7"></script>
<script src="_dash-component-suites/dash_mantine_components/dash_mantine_components.v1_1_1m1743970541.js"></script>
<script src="_dash-component-suites/dash_extensions/dash_extensions.v2_0_1m1743970542.js"></script>
<script src="_dash-component-suites/dash_iconify/dash_iconify.v0_1_2m1743970519.min.js"></script>
<script src="_dash-component-suites/dash/dash-renderer/build/dash_renderer.v3_0_2m1743970541.min.js"></script>
<script src="_dash-component-suites/dash/dcc/dash_core_components.v3_0_4m1743970541.js"></script>
<script src="_dash-component-suites/dash/dcc/dash_core_components-shared.v3_0_4m1743970541.js"></script>
<script src="_dash-component-suites/dash/html/dash_html_components.v3_0_1m1743970541.min.js"></script>
<script src="_dash-component-suites/dash/dash_table/bundle.v6_0_1m1743970541.js"></script>
<script>
(function() {
    var clientside = window.dash_clientside = window.dash_clientside || {};
    var ns = clientside["_dashprivate_clientside_funcs"] = clientside["_dashprivate_clientside_funcs"] || {};
    ns["e66b39e103fabaafd65fe438824e11720cfbefa9e0714286e1cc2ef7a2fdf2ac"] = function(x){return x;};
})();
</script>
<script>
(function() {
    var clientside = window.dash_clientside = window.dash_clientside || {};
    var ns = clientside["_dashprivate_clientside_funcs"] = clientside["_dashprivate_clientside_funcs"] || {};
    ns["97d67e9fe4120b1f8caed095be78b25d3b65f3b367152c3a3edcfcb875d349e1"] = function()
            {
                const start = arguments[arguments.length-3];
                const end = arguments[arguments.length-2];
                let ctx = arguments[arguments.length-1];
                const now = new Date().getTime();
                const trigger = dash_clientside.callback_context.triggered[0];
                const no = window.dash_clientside.no_update
                // Update context.
                if(trigger !== undefined){
                    if(!trigger.prop_id.startsWith('dc9416a1-5a7f-41fb-a055-12ce229ad1c1_end_blocked')){
                        ctx = {}
                        keys = ["inputs", "inputs_list", "triggered"];
                        for (let i = 0; i < keys.length; i++) {
                            let key = keys[i];
                            ctx[key] = dash_clientside.callback_context[key];
                        }
                    }
                }
                // First run => INVOKE.
                if(!end & !start){
                    return [now, null, ctx];
                }
                // Timeout reached  => INVOKE (but don't refresh context).
                if((now - start)/1000 > 10){
                    return [now, null, ctx];
                }
                // Not completed first time => BLOCK.
                if(!end){
                    return [no, now, no];
                }
                // Previous invoke ended => INVOKE (but don't update context).
                if(end > start){
                    return [now, null, ctx];
                }
                // Callback running.
                return [no, now, no];
            };
})();
</script>
<script>
(function() {
    var clientside = window.dash_clientside = window.dash_clientside || {};
    var ns = clientside["_dashprivate_clientside_funcs"] = clientside["_dashprivate_clientside_funcs"] || {};
    ns["d6eb94a8d89a0c6e8910d12d9170d04a0212e8fb0903cebc8feb4b1ef3bff992"] = function(endServerId, startBlockedId)
            {
                const now = new Date().getTime();
                if(startBlockedId){
                    return [now, now];
                }
                return [now, window.dash_clientside.no_update];
            };
})();
</script>
<script>
(function() {
    var clientside = window.dash_clientside = window.dash_clientside || {};
    var ns = clientside["_dashprivate_clientside_funcs"] = clientside["_dashprivate_clientside_funcs"] || {};
    ns["eccfc81d533040f9ac568f3c3c328c8f848039919a5e6f679553c44c6232b9a2"] = function(x){return x};;
})();
</script>
<script>
(function() {
    var clientside = window.dash_clientside = window.dash_clientside || {};
    var ns = clientside["_dashprivate_clientside_funcs"] = clientside["_dashprivate_clientside_funcs"] || {};
    ns["1a0559670aa2398cd9e5eee65300545bfbbdeace31ddfcbfe406bc92c65fa0c0"] = 
        function(dummy_value) {
            setTimeout(function(){
                const match = document.getElementById(window.location.hash.substring(1))
                if (match) {
                    match.scrollIntoView();
                }
            }, 500);
        }
        ;
})();
</script>
<script>
(function() {
    var clientside = window.dash_clientside = window.dash_clientside || {};
    var ns = clientside["_dashprivate_clientside_funcs"] = clientside["_dashprivate_clientside_funcs"] || {};
    ns["c74c433cb4d3b595e17a17042619125fa4aa20228787d85ed0ed375b2cabca33"] = function(colorScheme) {return colorScheme};
})();
</script>
<script>
(function() {
    var clientside = window.dash_clientside = window.dash_clientside || {};
    var ns = clientside["_dashprivate_clientside_funcs"] = clientside["_dashprivate_clientside_funcs"] || {};
    ns["f8dd389ef7390fdd73d468bc1c1d04855391ab027294ecb061ff81ec62f6491c"] = function(n_clicks, theme) {return theme === "dark" ? "light" : "dark"};
})();
</script>
<script>
(function() {
    var clientside = window.dash_clientside = window.dash_clientside || {};
    var ns = clientside["_dashprivate_clientside_funcs"] = clientside["_dashprivate_clientside_funcs"] || {};
    ns["3ac2bd69e99ff5fb39345fe00a2e1a05d408588ff0173927e6a78b5a0f83671c"] = 
        function(value) { 
            if (value) {
                return value
            }
        }
        ;
})();
</script>
<script>
(function() {
    var clientside = window.dash_clientside = window.dash_clientside || {};
    var ns = clientside["_dashprivate_clientside_funcs"] = clientside["_dashprivate_clientside_funcs"] || {};
    ns["8014a28f5d91aad9e53e9e0e3b6039a6592b8929d5080aa2471a2a045e7fe936"] = function(n_clicks) { return true };
})();
</script>
<script>
(function() {
    var clientside = window.dash_clientside = window.dash_clientside || {};
    var ns = clientside["_dashprivate_clientside_funcs"] = clientside["_dashprivate_clientside_funcs"] || {};
    ns["bb2b4a9715ac494d656ed7c7d8e26163f0d7179ac3f9e435d4d31104ca133c0c"] = function(pathname) {
            const lists = dash_clientside.callback_context.states_list;
            const active = lists.map(l => l.map(i => i["id"]["index"] === pathname));
            return active;
        };
})();
</script>
<script>
(function() {
    var clientside = window.dash_clientside = window.dash_clientside || {};
    var ns = clientside["_dashprivate_clientside_funcs"] = clientside["_dashprivate_clientside_funcs"] || {};
    ns["9ba0e378d70e04121963984e9caca4a10a432128ca6ea6167a9f1228f4a8c4da"] = 
                function(data) {{
                    document.title = data.title
                }}
                ;
})();
</script>
            <script id="_dash-renderer" type="application/javascript">var renderer = new DashRenderer();</script>
        </footer>
    </body>
</html>