@datawheel/bespoke 0.2.2 → 0.2.3

package/dist/index.js

@@ -16,7 +16,7 @@ import { Notifications, notifications } from '@mantine/notifications';
 import React, { forwardRef, useMemo, useState, useCallback, useContext, useEffect, createContext, memo, useRef, Fragment as Fragment$1, createElement } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { useDispatch, useSelector } from 'react-redux';
-import { Stack, Text, Badge, Group, useMantineTheme, Flex, packSx, Tooltip, ActionIcon, Modal, Button, SegmentedControl, Select, MultiSelect, Center, Grid, Card, Image, Title, Radio, NumberInput, TextInput, Switch, Box, List, Menu, Anchor, MantineProvider, Divider, Burger, Navbar, ScrollArea, Avatar, AppShell, UnstyledButton, ThemeIcon, LoadingOverlay, Skeleton, Container, Loader, Alert, Collapse, Space, Code, Textarea, rem, Paper, Input, Popover, Checkbox, Drawer, Overlay, SimpleGrid, Autocomplete, Tabs, Header, px, FileInput, Accordion, HoverCard, CopyButton, Col } from '@mantine/core';
+import { Stack, Text, Badge, Group, useMantineTheme, Flex, packSx, Tooltip, ActionIcon, Modal, Button, SegmentedControl, Select, MultiSelect, Center, Grid, Title, Radio, NumberInput, TextInput, Switch, Box, List, Menu, Anchor, MantineProvider, Divider, Burger, Navbar, ScrollArea, Avatar, AppShell, UnstyledButton, ThemeIcon, LoadingOverlay, Skeleton, Image, Card, Container, Loader, Alert, Collapse, Space, Code, Textarea, rem, Paper, Input, Popover, Checkbox, Drawer, Overlay, SimpleGrid, Autocomplete, Tabs, Header, px, FileInput, Accordion, HoverCard, CopyButton, Col } from '@mantine/core';
 import { dataConcat } from 'd3plus-viz';
 import * as d3plus from 'd3plus-react';
 import Router, { useRouter } from 'next/router';
@@ -333,7 +333,8 @@ var init_cms = __esm({
     });
     ALLOWED = {
       ALLOWED: "allowed",
-      ALLOWED_LOGIC: "allowedLogic"
+      ALLOWED_LOGIC: "allowedLogic",
+      IGNORE_CASCADE: "ignoreCascade"
     };
     ACCESS = {
       ACCESS: "access",
@@ -1123,7 +1124,7 @@ async function runSingleBlock(block, formatterFunctions, blockContext, readMembe
     return {
       outputVariables: {},
       renderVariables: {},
-      status: { allowed: false }
+      status: { allowed: false, hiddenByCascade: block.id }
     };
   }
   if (unswappedAPI) {
@@ -1427,13 +1428,20 @@ var init_runConsumers = __esm({
           const runningTask = dependenciesDone.then(async () => {
             const variables = block.inputs.reduce((acc, d) => ({ ...acc, ...variablesById[d] }), attributes);
             const inputNotAllowed = block.inputs.find(
-              (iid) => !statusById[iid].allowed || statusById[iid].hiddenByCascade
+              (iid) => {
+                const ignoreInputs = block.settings?.ignoreCascade ? block.settings?.ignoreCascade : [];
+                if (ignoreInputs.includes(iid)) {
+                  return false;
+                }
+                return !statusById[iid].allowed || statusById[iid].hiddenByCascade;
+              }
             );
             if (inputNotAllowed) {
               statusById[bid2] = {
                 allowed: false,
                 hiddenByCascade: statusById[inputNotAllowed].hiddenByCascade || inputNotAllowed
               };
+              variablesById[bid2] = {};
               return;
             }
             const startBlock = /* @__PURE__ */ new Date();
@@ -1442,7 +1450,8 @@ var init_runConsumers = __esm({
               formatterFunctions,
               {
                 ...parsedBlockContext,
-                variables
+                variables,
+                locale: variables.locale
               },
               readMemberFn
             ).then(({ outputVariables, status }) => {
@@ -1454,13 +1463,17 @@ var init_runConsumers = __esm({
                     allowed: false,
                     error: status.error
                   };
+                  variablesById[bid2] = {};
                 }
               }
               if (
                 // store output variables for block that:
                 (block.consumers.length > 0 || [BLOCK_TYPES.GENERATOR, BLOCK_TYPES.RELATED].includes(block.type)) && status.allowed && Object.keys(outputVariables).length > 0
-              )
+              ) {
                 variablesById[bid2] = outputVariables;
+              } else {
+                variablesById[bid2] = {};
+              }
               if (mode === "report") {
                 statusById[bid2] = { allowed: status.allowed };
                 if (block.type === BLOCK_TYPES.GENERATOR && status.api) {
@@ -3566,57 +3579,98 @@ init_esm_shims();
 // frontend/components/explore/ExploreTile.tsx
 init_esm_shims();
 init_store2();
-function ExploreTile({ profile, profilePrefix, onSelect }) {
-  const currentLocale = useAppSelector((state) => state.status.currentLocale);
-  const localeDefault9 = useAppSelector((state) => state.status.localeDefault);
-  const localePrefix = currentLocale === localeDefault9 ? "" : `/${currentLocale}`;
-  const url = `${localePrefix}${profilePrefix}${profile.path}`;
-  const router = useRouter();
-  const images = profile.members.map((m) => /* @__PURE__ */ jsx(
+
+// frontend/hooks/useBespokeStyles.ts
+init_esm_shims();
+function useBespokeStyles() {
+  const theme = useMantineTheme();
+  return theme.other.bespokeStyles ?? {};
+}
+function ReportTile({ reportName, members, href, onClick }) {
+  const images = members.map((m) => /* @__PURE__ */ jsx(
     Image,
     {
-      src: `/api/cms/member/image.png?member=${m.id}&size=thumb`,
+      src: m.image.src,
       height: 160,
       imageProps: { loading: "lazy" },
       alt: m.name
     },
     m.id
   ));
-  const names = profile.members.map((m) => /* @__PURE__ */ jsxs(Stack, { children: [
+  const names = members.map((m) => /* @__PURE__ */ jsxs(Stack, { children: [
     /* @__PURE__ */ jsx(Text, { weight: 500, children: m.name }),
-    /* @__PURE__ */ jsx(Badge, { color: "green", variant: "light", children: m.metadata.variant.name })
+    /* @__PURE__ */ jsx(Badge, { color: "green", variant: "light", children: m.variant })
   ] }, m.id));
+  return /* @__PURE__ */ jsxs(Card, { shadow: "sm", p: "lg", radius: "md", withBorder: true, children: [
+    /* @__PURE__ */ jsx(Card.Section, { children: /* @__PURE__ */ jsx(Group, { grow: true, spacing: 0, children: images }) }),
+    /* @__PURE__ */ jsx(Group, { position: "apart", mt: "md", mb: "xs", children: names }),
+    /* @__PURE__ */ jsx("a", { href, onClick, children: /* @__PURE__ */ jsx(Button, { variant: "light", color: "blue", fullWidth: true, mt: "md", radius: "md", children: `See ${reportName} Report` }) })
+  ] });
+}
+var useCustomTile = (reportTile) => {
+  const { components } = useBespokeStyles();
+  let Tile = ReportTile;
+  if (components?.ReportTile) {
+    Tile = components?.ReportTile;
+  }
+  if (reportTile) {
+    Tile = reportTile;
+  }
+  return Tile;
+};
+function ExploreTile({ profile, profilePrefix, onSelect, reportTile }) {
+  const currentLocale = useAppSelector((state) => state.status.currentLocale);
+  const localeDefault9 = useAppSelector((state) => state.status.localeDefault);
+  const localePrefix = currentLocale === localeDefault9 ? "" : `/${currentLocale}`;
+  const url = `${localePrefix}${profilePrefix}${profile.path}`;
+  const router = useRouter();
+  const members = profile.members.map((m) => ({
+    name: m.name,
+    id: m.id,
+    variant: m.metadata.variant.name,
+    image: {
+      src: `/api/cms/member/image.png?member=${m.id}&size=thumb`,
+      alt: m.name
+    }
+  }));
   const onItemSubmit = (innerUrl) => {
     router.push(`${innerUrl}`);
     if (onSelect)
       onSelect();
   };
-  return /* @__PURE__ */ jsx(Grid.Col, { xs: 12, sm: 6, md: 4, lg: 4, xl: 3, children: /* @__PURE__ */ jsxs(Card, { shadow: "sm", p: "lg", radius: "md", withBorder: true, children: [
-    /* @__PURE__ */ jsx(Card.Section, { children: /* @__PURE__ */ jsx(Group, { grow: true, spacing: 0, children: images }) }),
-    /* @__PURE__ */ jsx(Group, { position: "apart", mt: "md", mb: "xs", children: names }),
-    /* @__PURE__ */ jsx(
-      "a",
-      {
-        href: url,
-        onClick: (evt) => {
-          evt.preventDefault();
-          onItemSubmit(url);
-        },
-        children: /* @__PURE__ */ jsx(Button, { variant: "light", color: "blue", fullWidth: true, mt: "md", radius: "md", children: `See ${profile.report.name} Report` })
-      }
-    )
-  ] }) }, profile.id);
+  const handleClick = (evt) => {
+    evt.preventDefault();
+    onItemSubmit(url);
+  };
+  const Tile = useCustomTile(reportTile);
+  return /* @__PURE__ */ jsx(Grid.Col, { xs: 12, sm: 6, md: 4, lg: 4, xl: 3, children: /* @__PURE__ */ jsx(
+    Tile,
+    {
+      reportName: profile.report.name,
+      members,
+      href: url,
+      onClick: handleClick
+    }
+  ) }, profile.id);
 }
 var ExploreTile_default = ExploreTile;
-function ExploreResults({ results = [], profilePrefix, onSelect = () => {
-} }) {
+function ExploreResults({ results = [], profilePrefix, onSelect = () => void 0, reportTile }) {
   const [scrollSize, setScrollSize] = useState(500);
   useEffect(() => {
     const { innerHeight } = window;
     setScrollSize(innerHeight - 200);
   }, []);
   return /* @__PURE__ */ jsx(ScrollArea, { offsetScrollbars: true, type: "always", style: { height: scrollSize }, children: /* @__PURE__ */ jsx(Grid, { align: "stretch", children: results.map(
-    (item) => /* @__PURE__ */ jsx(ExploreTile_default, { profile: item, profilePrefix, onSelect }, item.id)
+    (item) => /* @__PURE__ */ jsx(
+      ExploreTile_default,
+      {
+        profile: item,
+        profilePrefix,
+        reportTile,
+        onSelect
+      },
+      item.id
+    )
   ) }) });
 }
 var ExploreResults_default = ExploreResults;
@@ -3628,7 +3682,8 @@ function BespokeExplore({
   profilePrefix,
   initialReportId,
   initialVariantId,
-  onSelect
+  onSelect,
+  reportTile
 }) {
   const dispatch = useAppDispatch();
   const defaultFilters = {
@@ -3726,7 +3781,7 @@ function BespokeExplore({
     ),
     /* @__PURE__ */ jsx(LoadingOverlay, { visible: loading }),
     !loading && results.length === 0 && /* @__PURE__ */ jsx(Alert, { title: "No results", color: "blue", children: "Try another search or filter." }),
-    !loading && /* @__PURE__ */ jsx(ExploreResults_default, { results, profilePrefix, onSelect })
+    !loading && /* @__PURE__ */ jsx(ExploreResults_default, { results, profilePrefix, onSelect, reportTile })
   ] });
 }
 var Explore_default = BespokeExplore;
@@ -3787,16 +3842,29 @@ var SearchItem = forwardRef(
   }, ref) => {
     const names = members.map((m) => /* @__PURE__ */ jsxs(Stack, { align: "center", children: [
       /* @__PURE__ */ jsx(Text, { weight: 500, children: m.name }),
-      /* @__PURE__ */ jsx(Badge, { color: "green", variant: "light", children: m.metadata.variant.name })
+      /* @__PURE__ */ jsx(Badge, { color: "green", variant: "light", children: m.variant })
     ] }, m.id));
     return /* @__PURE__ */ jsx("div", { ref, children: /* @__PURE__ */ jsx(Group, { position: "apart", grow: true, ...others, children: names }) }, uniqueKey);
   }
 );
 var SearchItem_default = SearchItem;
+var useCustomItem = (reportItem) => {
+  const { components } = useBespokeStyles();
+  let Tile = SearchItem_default;
+  if (components?.ReportItem) {
+    Tile = components?.ReportItem;
+  }
+  if (reportItem) {
+    Tile = reportItem;
+  }
+  return Tile;
+};
 function BespokeSearch({ locale, profilePrefix, autocompleteProps = {}, children }) {
   const dispatch = useAppDispatch();
   const currentLocale = useAppSelector((state) => state.status.currentLocale);
   const localeDefault9 = useAppSelector((state) => state.status.localeDefault);
+  const localePrefix = currentLocale === localeDefault9 ? "" : `/${currentLocale}`;
+  const ItemRenderer = useCustomItem(autocompleteProps ? autocompleteProps.itemComponent : null);
   const router = useRouter();
   const [query, setQuery] = useState("");
   const [debouncedQuery, cancel] = useDebouncedValue(query, 500);
@@ -3824,8 +3892,22 @@ function BespokeSearch({ locale, profilePrefix, autocompleteProps = {}, children
     dispatch(actions_exports.reportSearch(params)).then((value) => {
       if (value && value.results) {
         setResults(value.results.map((r) => {
-          r.value = `VALUE: ${r.id}`;
-          return r;
+          return {
+            id: r.id,
+            reportName: r.report.name,
+            href: `${localePrefix}${profilePrefix}${r.path}`,
+            value: `VALUE: ${r.id}`,
+            // Required for Autocomplete to generate keys.
+            members: r.members.map((m) => ({
+              name: m.name,
+              id: m.id,
+              variant: m.metadata.variant.name,
+              image: {
+                src: `/api/cms/member/image.png?member=${m.id}&size=thumb`,
+                alt: m.name
+              }
+            }))
+          };
         }));
       }
       setLoading(false);
@@ -3862,9 +3944,7 @@ function BespokeSearch({ locale, profilePrefix, autocompleteProps = {}, children
   const onItemSubmit = (item) => {
     setRedirecting(true);
     setVisible(false);
-    const localePrefix = currentLocale === localeDefault9 ? "" : `/${currentLocale}`;
-    const url = `${localePrefix}${profilePrefix}${item.path}`;
-    router.push(url);
+    router.push(item.href);
   };
   const onChange = (searchTerm) => {
     if (!searchTerm.includes("VALUE:")) {
@@ -3882,7 +3962,7 @@ function BespokeSearch({ locale, profilePrefix, autocompleteProps = {}, children
     Autocomplete,
     {
       value: query,
-      itemComponent: SearchItem_default,
+      itemComponent: ItemRenderer,
       onItemSubmit,
       onChange,
       filter: () => true,
@@ -4274,7 +4354,7 @@ function useInitialState(pathSegmentsKey) {
     const hasParams = Object.keys(query).some((key) => key !== pathSegmentsKey);
     if ((hasParams || privateBlocks.blocks.length > 0) && privateBlocks.resolved) {
       const selectorIds = Object.keys(query).map((d) => Number(d.match(/\d+/)));
-      const revalidateBlocks = selectorIds.concat(privateBlocks.blocks);
+      const revalidateBlocks = selectorIds.filter((id) => id !== 0).concat(privateBlocks.blocks);
       Promise.all(
         revalidateBlocks.map((bid) => {
           const block = blockRecords[bid];
@@ -4518,41 +4598,30 @@ function RelatedView(props) {
   const localeDefault9 = useAppSelector((state) => state.status.localeDefault);
   const profilePrefix = useProfilePrefix();
   const router = useRouter();
+  const { components } = useBespokeStyles();
   if (!related_reports?.length)
     return;
   const localePrefix = currentLocale === localeDefault9 ? "" : `/${currentLocale}`;
   const onItemSubmit = (innerUrl) => {
     router.push(`${innerUrl}`);
   };
+  const Tile = components?.ReportTile ? components?.ReportTile : ReportTile;
   return /* @__PURE__ */ jsx(Grid, { children: related_reports.map((report) => {
     const url = `${localePrefix}${profilePrefix}/${report.variant_slug}/${report.slug}`;
-    return /* @__PURE__ */ jsx(Grid.Col, { xs: 12, sm: 6, md: 4, lg: 4, xl: 3, children: /* @__PURE__ */ jsxs(Card, { shadow: "sm", p: "lg", radius: "md", withBorder: true, children: [
-      /* @__PURE__ */ jsx(Card.Section, { children: /* @__PURE__ */ jsx(Group, { grow: true, spacing: 0, children: /* @__PURE__ */ jsx(
-        Image,
-        {
-          src: `/api/cms/member/image.png?member=${report.content_id}&size=thumb`,
-          height: 160,
-          imageProps: { loading: "lazy" },
-          alt: report.name
-        },
-        report.content_id
-      ) }) }),
-      /* @__PURE__ */ jsx(Group, { position: "apart", mt: "md", mb: "xs", children: /* @__PURE__ */ jsxs(Stack, { children: [
-        /* @__PURE__ */ jsx(Text, { weight: 500, children: report.name }),
-        /* @__PURE__ */ jsx(Badge, { color: "green", variant: "light", children: report.variant_name })
-      ] }, report.content_id) }),
-      /* @__PURE__ */ jsx(
-        "a",
-        {
-          href: url,
-          onClick: (evt) => {
-            evt.preventDefault();
-            onItemSubmit(url);
-          },
-          children: /* @__PURE__ */ jsx(Button, { variant: "light", color: "blue", fullWidth: true, mt: "md", radius: "md", children: `See ${report.name} Report` })
-        }
-      )
-    ] }) }, report.content_id);
+    const members = [{
+      name: report.name,
+      id: report.content_id,
+      variant: report.variant_name,
+      image: {
+        src: `/api/cms/member/image.png?member=${report.content_id}&size=thumb`,
+        alt: report.name
+      }
+    }];
+    const handleClick = (evt) => {
+      evt.preventDefault();
+      onItemSubmit(url);
+    };
+    return /* @__PURE__ */ jsx(Grid.Col, { xs: 12, sm: 6, md: 4, lg: 4, xl: 3, children: /* @__PURE__ */ jsx(Tile, { reportName: report.report_name, members, href: url, onClick: handleClick }) }, report.content_id);
   }) });
 }
 
@@ -6088,7 +6157,6 @@ function DataTab(props) {
   const sourcesOptions = useAppSelector((state) => {
     const dataInformation = [];
     blocksIds.map((blockId) => state.records.entities.block[blockId]).filter((block) => [BLOCK_TYPES.GENERATOR, BLOCK_TYPES.VIZ].includes(block.type)).map((block) => {
-      console.log(state.variables.status[block.id]);
       if (block.type === BLOCK_TYPES.GENERATOR) {
         const api = state.variables.variables[block.id]._api || state.variables.status[block.id].api;
         if (api) {
@@ -6758,13 +6826,6 @@ function Options(props) {
   ] });
 }
 
-// frontend/hooks/useBespokeStyles.ts
-init_esm_shims();
-function useBespokeStyles() {
-  const theme = useMantineTheme();
-  return theme.other.bespokeStyles || {};
-}
-
 // components/sections/SectionMenu.tsx
 init_esm_shims();
 
@@ -9540,13 +9601,13 @@ function BlockPreview(props) {
     width: "100%",
     height: "100%",
     position: "absolute",
-    top: -1,
-    left: -1,
-    opacity: 0.3,
-    zIndex: 5,
+    top: 0,
+    left: 0,
+    opacity: 0.9,
+    zIndex: 4,
     pointerEvents: "none"
   };
-  const allowedOverlay = /* @__PURE__ */ jsx("div", { style: { ...overlayStyle, backgroundColor: "pink" } });
+  const allowedOverlay = /* @__PURE__ */ jsx("div", { style: { ...overlayStyle, backgroundColor: "pink" }, children: /* @__PURE__ */ jsx(Center, { h: "100%", children: /* @__PURE__ */ jsx(Text, { size: "sm", tt: "capitalize", italic: true, children: blockStatus.hiddenByCascade === block.id ? `${block.type} not allowed` : `${block.type} hidden by block ${blockStatus.hiddenByCascade}` }) }) });
   if (!content)
     return null;
   const { error, log } = status;
@@ -9637,35 +9698,6 @@ var BlockPreview_default = withFetcher(BlockPreview, useBlockRef);
 // components/blocks/BlockSettings.tsx
 init_esm_shims();
 init_cms();
-
-// components/blocks/VizSettings.tsx
-init_esm_shims();
-init_getBlockContent();
-init_store2();
-function VizSettings({ id, onChange }) {
-  const block = useBlockRef(id).data;
-  const content = getBlockContent(block);
-  const logic = content?.logic || "";
-  const handleChange = (value) => {
-    onChange({ logic: value });
-  };
-  return /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsx("span", { children: "Viz Options" }),
-    /* @__PURE__ */ jsx(
-      MonacoWrapper_default,
-      {
-        monacoOptions: {
-          onChange: handleChange,
-          value: logic
-        }
-      },
-      "code-editor"
-    )
-  ] });
-}
-var VizSettings_default = VizSettings;
-
-// components/blocks/BlockSettings.tsx
 init_store2();
 init_hooks();
 function BlockSettings({ id, setBlockSettings, setBlockContent }) {
@@ -9676,9 +9708,9 @@ function BlockSettings({ id, setBlockSettings, setBlockContent }) {
   const [roles, setRoles] = useState([]);
   const variables = useInputVariablesFlat(id);
   const allowedOptions = useMemo(() => [
-    { value: "always", label: "always" },
-    { value: "never", label: "never" }
-  ].concat(Object.keys(variables).map((d) => ({ value: d, label: `${d}: ${variables[d]}` }))), [variables]);
+    { value: "always", label: "always", group: "Static" },
+    { value: "never", label: "never", group: "Static" }
+  ].concat(Object.keys(variables).map((d) => ({ value: d, label: `${d}: ${variables[d]}`, group: "Based on variable" }))), [variables]);
   const accessOptions = useMemo(() => [
     { value: "public", label: "Public block, (all visitors)", group: "Exclusive" },
     { value: "guest", label: "Guest only block, (non logged visitors)", group: "Exclusive" },
@@ -9741,6 +9773,9 @@ function BlockSettings({ id, setBlockSettings, setBlockContent }) {
       [BLOCK_SETTINGS.ALLOWED_LOGIC]: allowedLogic
     });
   };
+  const handleChangeCascadeDropdown = (value) => {
+    setBlockSettings({ [BLOCK_SETTINGS.IGNORE_CASCADE]: value });
+  };
   const blocks = useAppSelector((state) => state.records.entities.block);
   const consumers = block.consumers.filter((cid) => blocks[cid].section_id !== block.section_id);
   const isShared = Boolean(consumers.length);
@@ -9751,27 +9786,44 @@ function BlockSettings({ id, setBlockSettings, setBlockContent }) {
       i < consumers.length - 1 && consumers.length > 1 ? ", " : ""
     ] })
   );
+  const ignoreOptions = block.inputs.map((blockId) => ({
+    label: `${blocks[blockId]?.type} - ${blocks[blockId]?.id}`,
+    value: blockId
+  }));
   return /* @__PURE__ */ jsxs(Group, { grow: true, align: "flex-start", children: [
     /* @__PURE__ */ jsxs(Stack, { justify: "flex-start", children: [
-      /* @__PURE__ */ jsx(Title, { order: 4, children: "Allowed" }),
+      /* @__PURE__ */ jsx(Title, { order: 4, children: "Visibility" }),
       /* @__PURE__ */ jsx(
         Select,
         {
+          label: "Show",
+          description: "Set visibility setting for this block. A hidden block will not run or export variables to its consumers. As a result, all its consumers will be hidden too.",
           defaultValue: block.settings[BLOCK_SETTINGS.ALLOWED] || "always",
           onChange: handleChangeAllowedDropdown,
           data: allowedOptions
         }
       ),
-      /* @__PURE__ */ jsx(Title, { order: 4, children: "Access" }),
+      [BLOCK_TYPES.GENERATOR, BLOCK_TYPES.VIZ].includes(block.type) && /* @__PURE__ */ jsx(
+        MultiSelect,
+        {
+          label: "Ignore cascade",
+          description: "Set block as visible even if the selected inputs are hidden.",
+          defaultValue: block.settings[BLOCK_SETTINGS.IGNORE_CASCADE] || [],
+          data: ignoreOptions,
+          onChange: handleChangeCascadeDropdown
+        }
+      ),
       /* @__PURE__ */ jsx(
         MultiSelect,
         {
+          label: "Privacy",
+          description: "This block will be shown based on the selected auth0 roles.",
           data: [...accessOptions, ...rolesOptions],
           value: accessSelected,
           onChange: handleAccessChange
         }
       ),
-      /* @__PURE__ */ jsx(Title, { order: 4, children: "Sharing" }),
+      /* @__PURE__ */ jsx(Title, { order: 4, children: "Output" }),
       isShared && block.shared && /* @__PURE__ */ jsxs(Text, { size: "xs", color: "red.4", sx: { display: "flex", alignItems: "flex-start", gap: "0.4rem" }, children: [
         /* @__PURE__ */ jsx(IconAlertCircle, { size: "1.2rem" }),
         /* @__PURE__ */ jsxs(Text, { color: "black", span: true, inherit: true, children: [
@@ -9782,8 +9834,10 @@ function BlockSettings({ id, setBlockSettings, setBlockContent }) {
         ] })
       ] }),
       /* @__PURE__ */ jsx(
-        SegmentedControl,
+        Select,
         {
+          label: "Block scope",
+          description: "Select the scope for the variables exported by this block. Section-wide (available only to blocks in the same section) or Report-wide (available to any block inside the report).",
           defaultValue: String(block.shared),
           disabled: isShared && block.shared,
           onChange: (e) => handleChange("shared", e === "true"),
@@ -9791,8 +9845,7 @@ function BlockSettings({ id, setBlockSettings, setBlockContent }) {
         }
       ),
       /* @__PURE__ */ jsx(Title, { order: 4, children: "Danger zone" }),
-      /* @__PURE__ */ jsx(Button, { variant: "outline", color: "red", onClick: maybeDelete, children: "Delete Block" }),
-      block.type === BLOCK_TYPES.VIZ && /* @__PURE__ */ jsx(VizSettings_default, { id, onChange: setBlockContent })
+      /* @__PURE__ */ jsx(Button, { variant: "outline", color: "red", onClick: maybeDelete, children: "Delete Block" })
     ] }),
     /* @__PURE__ */ jsxs(Stack, { justify: "flex-start", children: [
       /* @__PURE__ */ jsx(Title, { order: 4, children: "Block settings (all locales)" }),
@@ -10129,7 +10182,7 @@ function VariableList({ id, setInlineId }) {
           /* @__PURE__ */ jsx(
             Divider,
             {
-              label: block ? titleCase(block.type) : "Dimension Attributes",
+              label: block ? `${titleCase(block.type)} ${block.id} Variables` : "Dimension Variables",
               labelPosition: "center",
               mt: "lg"
             }
@@ -10783,7 +10836,7 @@ function BlockElement({
                 top: px(theme.spacing.xs) / 2,
                 backgroundColor: theme.colors.gray[2],
                 borderRadius: theme.radius.sm,
-                zIndex: 2
+                zIndex: 5
               },
               children: [
                 isInput || isConsumer ? /* @__PURE__ */ jsx(ActionIcon, { children: isInput ? /* @__PURE__ */ jsx(IconLogout, { size: 20, color: theme.colors.red[5] }) : /* @__PURE__ */ jsx(IconLogin, { size: 20, color: theme.colors.green[5] }) }, "globe") : null,

package/dist/server.js

@@ -4267,7 +4267,7 @@ async function runSingleBlock(block, formatterFunctions, blockContext, readMembe
     return {
       outputVariables: {},
       renderVariables: {},
-      status: { allowed: false }
+      status: { allowed: false, hiddenByCascade: block.id }
     };
   }
   if (unswappedAPI) {
@@ -4538,13 +4538,20 @@ var runConsumersV2 = async (blocks, sections, bid, formatterFunctions, blockCont
       const runningTask = dependenciesDone.then(async () => {
         const variables = block.inputs.reduce((acc, d) => ({ ...acc, ...variablesById[d] }), attributes);
         const inputNotAllowed = block.inputs.find(
-          (iid) => !statusById[iid].allowed || statusById[iid].hiddenByCascade
+          (iid) => {
+            const ignoreInputs = block.settings?.ignoreCascade ? block.settings?.ignoreCascade : [];
+            if (ignoreInputs.includes(iid)) {
+              return false;
+            }
+            return !statusById[iid].allowed || statusById[iid].hiddenByCascade;
+          }
         );
         if (inputNotAllowed) {
           statusById[bid2] = {
             allowed: false,
             hiddenByCascade: statusById[inputNotAllowed].hiddenByCascade || inputNotAllowed
           };
+          variablesById[bid2] = {};
           return;
         }
         const startBlock = /* @__PURE__ */ new Date();
@@ -4553,7 +4560,8 @@ var runConsumersV2 = async (blocks, sections, bid, formatterFunctions, blockCont
           formatterFunctions,
           {
             ...parsedBlockContext,
-            variables
+            variables,
+            locale: variables.locale
           },
           readMemberFn
         ).then(({ outputVariables, status }) => {
@@ -4565,13 +4573,17 @@ var runConsumersV2 = async (blocks, sections, bid, formatterFunctions, blockCont
                 allowed: false,
                 error: status.error
               };
+              variablesById[bid2] = {};
             }
           }
           if (
             // store output variables for block that:
             (block.consumers.length > 0 || [BLOCK_TYPES.GENERATOR, BLOCK_TYPES.RELATED].includes(block.type)) && status.allowed && Object.keys(outputVariables).length > 0
-          )
+          ) {
             variablesById[bid2] = outputVariables;
+          } else {
+            variablesById[bid2] = {};
+          }
           if (mode === "report") {
             statusById[bid2] = { allowed: status.allowed };
             if (block.type === BLOCK_TYPES.GENERATOR && status.api) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@datawheel/bespoke",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "description": "Content management system for creating automated data reports",
   "exports": {
     ".": {