@datawheel/bespoke 0.1.38 → 0.2.0

package/dist/index.js

@@ -16,11 +16,11 @@ import { Notifications, notifications } from '@mantine/notifications';
 import React, { forwardRef, useMemo, useState, useCallback, useContext, useEffect, createContext, 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, Title, Tooltip, ActionIcon, Center, Modal, Button, SegmentedControl, Select, MultiSelect, TextInput, Switch, Box, List, Menu, Anchor, MantineProvider, Divider, Burger, Navbar, ScrollArea, Avatar, AppShell, UnstyledButton, ThemeIcon, LoadingOverlay, Skeleton, Container, Loader, Alert, Collapse, Card, Space, Code, Textarea, rem, Paper, Grid, Input, Popover, Checkbox, Radio, Drawer, Overlay, SimpleGrid, Autocomplete, Tabs, Header, px, Image, FileInput, Accordion, HoverCard, CopyButton, NumberInput, Col } from '@mantine/core';
+import { Stack, Text, Badge, Group, useMantineTheme, Flex, packSx, Title, Tooltip, ActionIcon, Center, Modal, Button, SegmentedControl, Select, MultiSelect, Grid, Card, Image, 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 { dataConcat } from 'd3plus-viz';
 import * as d3plus from 'd3plus-react';
 import Router, { useRouter } from 'next/router';
-import { IconInfoCircle, IconRefresh, IconSearch, IconAlignLeft, IconAlignCenter, IconAlignRight, IconBoxMargin, IconTable, IconMathFunction, IconUsers, IconLogout, IconTrash, IconUserCircle, IconEdit, IconDatabase, IconServer, IconPencil, IconAlertCircle, IconCircleCheck, IconPlayerPlay, IconAlarmFilled, IconBox, IconLink, IconCircleX, IconFlag, IconCirclePlus, IconFileAnalytics, IconPlus, IconX, IconChevronDown, IconCamera, IconShare, IconCircleDashed, IconListSearch, IconExternalLink, IconSettings, IconFileOff, IconFilesOff, IconHierarchy3, IconMenu, IconApi, IconPolaroid, IconCircleMinus, IconEyeOff, IconChevronLeft, IconChevronRight, IconLogin, IconWorld, IconLock, IconVariable, IconArrowRightCircle, IconDownload, IconTemplate, IconChartBar, IconCode, IconUpload, IconCodePlus, IconClipboardCheck, IconClipboardCopy, IconPalette, IconEye, IconMinimize, IconMaximize, IconRss, IconGlobe, IconLinkOff } from '@tabler/icons-react';
+import { IconInfoCircle, IconRefresh, IconSearch, IconAlignLeft, IconAlignCenter, IconAlignRight, IconBoxMargin, IconTable, IconMathFunction, IconUsers, IconLogout, IconTrash, IconUserCircle, IconEdit, IconDatabase, IconServer, IconPencil, IconAlertCircle, IconCircleCheck, IconPlayerPlay, IconAlarmFilled, IconBox, IconLink, IconCircleX, IconFlag, IconCirclePlus, IconFileAnalytics, IconPlus, IconHome, IconX, IconChevronDown, IconCamera, IconShare, IconCircleDashed, IconListSearch, IconExternalLink, IconSettings, IconFileOff, IconFilesOff, IconHierarchy3, IconMenu, IconApi, IconPolaroid, IconCircleMinus, IconEyeOff, IconPhoto, IconChevronLeft, IconChevronRight, IconLogin, IconWorld, IconLock, IconVariable, IconArrowRightCircle, IconDownload, IconTemplate, IconChartBar, IconCode, IconUpload, IconCodePlus, IconClipboardCheck, IconClipboardCopy, IconPalette, IconEye, IconMinimize, IconMaximize, IconRss, IconGlobe, IconLinkOff } from '@tabler/icons-react';
 import { useMediaQuery, useDisclosure, useDebouncedValue, useHotkeys, useFullscreen, getHotkeyHandler } from '@mantine/hooks';
 import dynamic from 'next/dynamic';
 import Link from 'next/link';
@@ -205,6 +205,9 @@ var init_http = __esm({
         ).join(",");
         return { ...params, slugs };
       }
+      if (params.mode === "related") {
+        return { ...params };
+      }
       return { ...params, [params.mode]: params[params.mode].join(",") };
     };
   }
@@ -360,6 +363,7 @@ var init_cms = __esm({
     };
     BLOCK_LOGIC_TYPES = {
       GENERATOR: "generator",
+      RELATED: "related",
       VIZ: "visualization"
     };
     BLOCK_LOGIC_LOCALE = "logic";
@@ -1168,6 +1172,80 @@ async function runSingleBlock(block, formatterFunctions, blockContext, readMembe
       }
     };
   }
+  if (block.type === BLOCK_TYPES.RELATED) {
+    const relatedCompare = block.contentByLocale?.logic?.content?.simple?.compare || "variant";
+    const relatedLimit = block.contentByLocale?.logic?.content?.simple?.limit || 4;
+    const reportIds = Object.keys(variables).filter((key) => key.startsWith("report_id")).map((key) => variables[key]);
+    const dimensionIds = Object.keys(variables).filter((key) => key.startsWith("dimension_id")).map((key) => variables[key]);
+    const variantIds = Object.keys(variables).filter((key) => key.startsWith("variant_id")).map((key) => variables[key]);
+    const memberIds = Object.keys(variables).filter((key) => key.startsWith("id")).map((key) => variables[key]);
+    if (!memberIds.length)
+      return {
+        outputVariables: { related_reports: [] },
+        renderVariables: {},
+        status: {
+          log: [],
+          allowed: false
+        }
+      };
+    const membersContentIds = await readMemberFn({
+      mode: "ids",
+      locale,
+      ids: memberIds,
+      output: "lite"
+    }).then((response) => {
+      let data = [];
+      if (isResult(response)) {
+        if (response.ok) {
+          data = response.data.results;
+        }
+      } else {
+        data = response.results;
+      }
+      return data && Array.isArray(data) ? data : [];
+    }).catch((err) => {
+      console.log("Error getting related members", err);
+      return [];
+    });
+    const current_ids = membersContentIds.map((member) => member.content_id);
+    const memberParams = {
+      mode: "related",
+      locale,
+      related: relatedLimit ?? 4,
+      current_ids,
+      output: "full"
+    };
+    if (relatedCompare) {
+      if (relatedCompare === "report")
+        memberParams.report_ids = reportIds;
+      else if (relatedCompare === "dimension")
+        memberParams.dimension_ids = dimensionIds;
+      else
+        memberParams.variant_ids = variantIds;
+    }
+    const bespokeMembers = await readMemberFn(memberParams).then((response) => {
+      let data = [];
+      if (isResult(response)) {
+        if (response.ok) {
+          data = response.data.results;
+        }
+      } else {
+        data = response.results;
+      }
+      return data && Array.isArray(data) ? data : [];
+    }).catch((err) => {
+      console.log("Error getting related members", err);
+      return [];
+    });
+    return {
+      outputVariables: { related_reports: bespokeMembers },
+      renderVariables: {},
+      status: {
+        log: [],
+        allowed: bespokeMembers.length > 0
+      }
+    };
+  }
   const { logic } = getBlockContent(block, locale);
   const swappedLogic = varSwap_default(logic, formatterFunctions, blockContext);
   const evalResults = mortarEval_default("resp", resp || {}, swappedLogic, formatterFunctions, variables, blockContext);
@@ -1345,7 +1423,7 @@ var init_runConsumers = __esm({
             ).then(({ outputVariables, status }) => {
               if (
                 // store output variables for block that:
-                (block.consumers.length > 0 || block.type === BLOCK_TYPES.GENERATOR) && status.allowed && Object.keys(outputVariables).length > 0
+                (block.consumers.length > 0 || [BLOCK_TYPES.GENERATOR, BLOCK_TYPES.RELATED].includes(block.type)) && status.allowed && Object.keys(outputVariables).length > 0
               )
                 variablesById[bid2] = outputVariables;
               if (mode === "report") {
@@ -4276,9 +4354,11 @@ function useContentOutline(min = 1, max = 6, headings = []) {
           blocks.sort((a, b) => orderSort(a, b, "blockrow"))
         );
       });
+      if (!Object.keys(status).length)
+        return [];
       return titleBlocksNormalized.filter((title) => {
         const currentOrder = parseInt(title.settings.order || "1", 10);
-        return currentOrder >= min && currentOrder <= max && titleStatus[title.id] ? titleStatus[title.id].allowed : true;
+        return currentOrder >= min && currentOrder <= max && titleStatus[title.id]?.allowed && !titleStatus[title.id]?.hiddenByCascade;
       });
     }
   }, [headings, sectionList, titleBlocks, titleStatus]);
@@ -4399,6 +4479,54 @@ function NavView({ headings, settings }) {
   return smallerThanMd ? /* @__PURE__ */ jsx(MobileNav, { contentOutline }) : /* @__PURE__ */ jsx(DesktopNav, { contentOutline });
 }
 
+// frontend/components/report/blocks/Related.tsx
+init_esm_shims();
+init_store2();
+init_hooks();
+function RelatedView(props) {
+  const { related_reports } = props;
+  const currentLocale = useAppSelector((state) => state.status.currentLocale);
+  const localeDefault9 = useAppSelector((state) => state.status.localeDefault);
+  const profilePrefix = useProfilePrefix();
+  const router = useRouter();
+  if (!related_reports?.length)
+    return;
+  const localePrefix = currentLocale === localeDefault9 ? "" : `/${currentLocale}`;
+  const onItemSubmit = (innerUrl) => {
+    router.push(`${innerUrl}`);
+  };
+  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);
+  }) });
+}
+
 // frontend/components/report/blocks/ResetButton.tsx
 init_esm_shims();
 init_hooks();
@@ -4438,6 +4566,7 @@ var TypeRenderers = {
   [BLOCK_TYPES.GENERATOR]: Generator,
   [BLOCK_TYPES.IMAGE]: ImageView,
   [BLOCK_TYPES.NAV]: NavView,
+  [BLOCK_TYPES.RELATED]: RelatedView,
   [BLOCK_TYPES.RESET_BUTTON]: ResetButtonView
 };
 var blocks_default = TypeRenderers;
@@ -4870,6 +4999,46 @@ function NavUI() {
   return /* @__PURE__ */ jsx(Title, { order: 4, children: "Nav UI" });
 }
 
+// components/blocks/types/simpleEditors/RelatedUI.tsx
+init_esm_shims();
+function RelatedUI({ executeButton, onChange, simpleState }) {
+  const [compare, setCompare] = useState(simpleState?.compare ?? "variant");
+  const [limit, setLimit] = useState(simpleState?.limit ?? 4);
+  useEffect(() => {
+    const simpleState2 = {
+      compare,
+      limit
+    };
+    onChange(simpleState2);
+  }, [compare, limit]);
+  return /* @__PURE__ */ jsxs(Stack, { children: [
+    /* @__PURE__ */ jsx(
+      Radio.Group,
+      {
+        label: "Compare with members of",
+        onChange: setCompare,
+        value: compare,
+        children: /* @__PURE__ */ jsxs(Group, { children: [
+          /* @__PURE__ */ jsx(Radio, { label: "Same report", value: "report" }),
+          /* @__PURE__ */ jsx(Radio, { label: "Same dimension", value: "dimension" }),
+          /* @__PURE__ */ jsx(Radio, { label: "Same variant", value: "variant" })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      NumberInput,
+      {
+        label: "Related reports limit",
+        min: 1,
+        onChange: (value) => setLimit(value),
+        type: "number",
+        value: limit
+      }
+    ),
+    executeButton
+  ] });
+}
+
 // components/blocks/types/simpleEditors/ResetButtonUI.tsx
 init_esm_shims();
 function ResetButtonUI({ id, locale, executeButton, onChange, simpleState }) {
@@ -4930,6 +5099,7 @@ function ResetButtonUI({ id, locale, executeButton, onChange, simpleState }) {
 var simpleEditors_default = {
   [BLOCK_TYPES.SELECTOR]: SelectorUI_default,
   [BLOCK_TYPES.NAV]: NavUI,
+  [BLOCK_TYPES.RELATED]: RelatedUI,
   [BLOCK_TYPES.RESET_BUTTON]: ResetButtonUI
 };
 
@@ -5438,6 +5608,15 @@ function NavPreview({ headings, settings }) {
   ] });
 }
 
+// components/blocks/types/renderers/Related.tsx
+init_esm_shims();
+function RelatedPreview(props) {
+  const { related_reports } = props;
+  if (!related_reports?.length)
+    return /* @__PURE__ */ jsx(Text, { children: "There are no available members related to your current selection and report." });
+  return /* @__PURE__ */ jsx(List, { children: related_reports.map((report) => /* @__PURE__ */ jsx(List.Item, { children: report.name }, report.content_id)) });
+}
+
 // components/blocks/types/renderers/ResetButton.tsx
 init_esm_shims();
 init_hooks();
@@ -5478,6 +5657,7 @@ var renderersMap = {
   [BLOCK_TYPES.GENERATOR]: Generator_default,
   [BLOCK_TYPES.IMAGE]: ImagePreview,
   [BLOCK_TYPES.NAV]: NavPreview,
+  [BLOCK_TYPES.RELATED]: RelatedPreview,
   [BLOCK_TYPES.RESET_BUTTON]: ResetButtonPreview
 };
 var renderers_default = renderersMap;
@@ -5506,6 +5686,12 @@ var allBlocks = {
     renderPreviewOnEdit: true,
     evalWhenNonActive: true
   },
+  [BLOCK_TYPES.RELATED]: {
+    type: BLOCK_TYPES.RELATED,
+    renderer: renderers_default[BLOCK_TYPES.RELATED],
+    renderPreviewOnEdit: false,
+    evalWhenNonActive: true
+  },
   [BLOCK_TYPES.SELECTOR]: {
     type: BLOCK_TYPES.SELECTOR,
     renderer: renderers_default[BLOCK_TYPES.SELECTOR],
@@ -5633,6 +5819,11 @@ function Block({ blockId, active = true }) {
         });
         return;
       }
+      if (block.type === BLOCK_TYPES.RELATED) {
+        const { related_reports } = generatorVariables;
+        setContent({ related_reports });
+        return;
+      }
       if (block.type === BLOCK_TYPES.RESET_BUTTON) {
         setContent({ id: block.id, ...blockContent.simple });
         return;
@@ -7183,6 +7374,7 @@ function Section({ section }) {
   };
   const state = useAppSelector((state2) => state2);
   const status = useAppSelector((state2) => state2.variables.status);
+  const previews = useAppSelector((state2) => state2.status.previews);
   const sectionStyles = useBespokeStyles()["Section"];
   const blockRecords = selectBlockRecords(state);
   const sectionBlocks = Object.values(blockRecords || {}).filter((d) => d.section_id === id);
@@ -7206,6 +7398,7 @@ function Section({ section }) {
   const colsQty = Object.keys(columns).length;
   if (!displaySection)
     return null;
+  const showCredits = sectionSettings2.memberImageBg && previews.some(({ image }) => image && (image.url || image.author));
   return /* @__PURE__ */ jsxs(
     PositionWrapper,
     {
@@ -7227,53 +7420,82 @@ function Section({ section }) {
                 /* @__PURE__ */ jsx(SectionResetButton, { id: section.id }),
                 sectionSettings2.optionsMenu && /* @__PURE__ */ jsx(Options, { sectionId: section.id })
               ] }),
-              /* @__PURE__ */ jsx(
+              /* @__PURE__ */ jsxs(
                 StyleWrapper,
                 {
                   className: `bespoke-Section-${id} bespoke-Section-container`,
                   settings: sectionSettings2,
                   styles: sectionStyles?.content,
-                  children: /* @__PURE__ */ jsx(ColumnsWrapper, { children: Object.keys(columns).sort((a, b) => orderSort(a, b, "blockcol")).map((columnIndex) => {
-                    const column = columns[columnIndex];
-                    const columnSettings = settings.columnSettings ? settings.columnSettings[columnIndex] : {};
-                    const columnBlocks = Object.values(column).sort((a, b) => orderSort(a, b, "blockrow"));
-                    if (!columnBlocks.some((block) => status[block.id].allowed))
-                      return null;
-                    return /* @__PURE__ */ jsx(
-                      SectionColumn,
-                      {
-                        column,
-                        columnSettings,
-                        sx: { flexBasis: `${100 / colsQty}%` },
-                        children: columnBlocks.map((item) => {
-                          if (!item.id || !status[item.id]?.allowed && item.type !== BLOCK_TYPES.NAV)
-                            return null;
-                          const { settings: settings2, type } = blockRecords[item.id];
-                          const blockWidth = settings2.width && !settings2.width.stretch && settings2.width.unit ? formatters[settings2.width.unit](settings2.width.value) : settings2.display === "inline" ? "auto" : "100%";
-                          const blockStyles = {
-                            alignSelf: type === "visualization" ? "stretch" : "flex-start",
-                            flexGrow: 0,
-                            margin: "0",
-                            textAlign: settings2.align || blockSettings.align.defaultValue,
-                            width: blockWidth,
-                            minWidth: 300
-                          };
-                          return /* @__PURE__ */ jsx(
-                            Box,
-                            {
-                              className: "bespoke-Block-wrapper",
-                              id: `bespoke-Block-${item.id}`,
-                              sx: blockStyles,
-                              py: site_default.block.padding,
-                              children: /* @__PURE__ */ jsx(Block, { blockId: item.id }, item.id)
-                            },
-                            item.id
-                          );
-                        })
-                      },
-                      columnIndex
-                    );
-                  }) })
+                  children: [
+                    /* @__PURE__ */ jsx(ColumnsWrapper, { children: Object.keys(columns).sort((a, b) => orderSort(a, b, "blockcol")).map((columnIndex) => {
+                      const column = columns[columnIndex];
+                      const columnSettings = settings.columnSettings ? settings.columnSettings[columnIndex] : {};
+                      const columnBlocks = Object.values(column).sort((a, b) => orderSort(a, b, "blockrow"));
+                      if (!columnBlocks.some(
+                        (block) => status[block.id].allowed || block.type === BLOCK_TYPES.NAV
+                      ))
+                        return null;
+                      return /* @__PURE__ */ jsx(
+                        SectionColumn,
+                        {
+                          column,
+                          columnSettings,
+                          sx: { flexBasis: `${100 / colsQty}%` },
+                          children: columnBlocks.map((item) => {
+                            if (!item.id || !status[item.id]?.allowed && item.type !== BLOCK_TYPES.NAV)
+                              return null;
+                            const { settings: settings2, type } = blockRecords[item.id];
+                            const blockWidth = settings2.width && !settings2.width.stretch && settings2.width.unit ? formatters[settings2.width.unit](settings2.width.value) : settings2.display === "inline" ? "auto" : "100%";
+                            const blockStyles = {
+                              alignSelf: type === "visualization" ? "stretch" : "flex-start",
+                              flexGrow: 0,
+                              margin: "0",
+                              textAlign: settings2.align || blockSettings.align.defaultValue,
+                              width: blockWidth,
+                              minWidth: 300
+                            };
+                            return /* @__PURE__ */ jsx(
+                              Box,
+                              {
+                                className: "bespoke-Block-wrapper",
+                                id: `bespoke-Block-${item.id}`,
+                                sx: blockStyles,
+                                py: site_default.block.padding,
+                                children: /* @__PURE__ */ jsx(Block, { blockId: item.id }, item.id)
+                              },
+                              item.id
+                            );
+                          })
+                        },
+                        columnIndex
+                      );
+                    }) }),
+                    showCredits && /* @__PURE__ */ jsxs(Popover, { position: "right", children: [
+                      /* @__PURE__ */ jsx(Popover.Target, { children: /* @__PURE__ */ jsx(ActionIcon, { variant: "light", radius: "xl", children: /* @__PURE__ */ jsx(IconPhoto, { size: 20 }) }) }),
+                      /* @__PURE__ */ jsx(Popover.Dropdown, { children: previews.map(
+                        ({ image, name }, idx) => (image.author || image.url) && /* @__PURE__ */ jsxs("div", { children: [
+                          image.author && /* @__PURE__ */ jsxs(Text, { size: "xs", children: [
+                            name,
+                            " image by ",
+                            /* @__PURE__ */ jsx("strong", { children: image.author })
+                          ] }),
+                          image.url && /* @__PURE__ */ jsxs(Text, { size: "xs", children: [
+                            "URL: ",
+                            " ",
+                            /* @__PURE__ */ jsx(
+                              Anchor,
+                              {
+                                href: image.url,
+                                target: "_blank",
+                                children: image.url
+                              }
+                            )
+                          ] }),
+                          idx + 1 < previews.length && /* @__PURE__ */ jsx(Divider, {})
+                        ] }, image.image_id)
+                      ) })
+                    ] })
+                  ]
                 }
               )
             ]
@@ -7542,6 +7764,7 @@ function parseReadMemberParams(query) {
   const mode = normalizeList(query.mode)[0];
   const outputParam = normalizeList(query.output)[0] || "full";
   const output = outputParam === "lite" ? "lite" : "full";
+  const relatedLimit = parseInt(normalizeList(query.related)[0], 10) || 5;
   let variant = normalizeList(query.variant).map(parseFiniteNumber);
   if (variant.length === 0) {
     variant = normalizeList(query["variant[]"]).map(parseFiniteNumber);
@@ -7579,6 +7802,19 @@ function parseReadMemberParams(query) {
       })
     };
   }
+  if (mode === "related") {
+    return {
+      all,
+      mode,
+      locale: all ? localeDefault8 : stripHTML(locale),
+      related: relatedLimit,
+      current_ids: normalizeList(query.current_ids || query["current_ids[]"]).map(parseFiniteNumber),
+      report_ids: normalizeList(query.report_ids || query["report_ids[]"]).map(parseFiniteNumber),
+      dimension_ids: normalizeList(query.dimension_ids || query["dimension_ids[]"]).map(parseFiniteNumber),
+      variant_ids: normalizeList(query.variant_ids || query["variant_ids[]"]).map(parseFiniteNumber),
+      output
+    };
+  }
   throw new BackendError(400, `Invalid mode: '${mode}'`);
 }
 function parseSearchMemberParams(query) {
@@ -9234,6 +9470,12 @@ function BlockPreview(props) {
         setContent({ headings: block.inputs, settings: block.settings });
         return;
       }
+      if (block.type === BLOCK_TYPES.RELATED) {
+        const { outputVariables } = await runSingleBlock(block, formatterFunctions, blockContext, readMemberFn);
+        const { related_reports } = outputVariables;
+        setContent({ related_reports });
+        return;
+      }
       if (block.type === BLOCK_TYPES.RESET_BUTTON) {
         setContent(blockContent.simple);
         return;
@@ -9459,6 +9701,16 @@ function BlockSettings({ id, setBlockSettings, setBlockContent }) {
       [BLOCK_SETTINGS.ALLOWED_LOGIC]: allowedLogic
     });
   };
+  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);
+  const consumersP = consumers.slice(0, 3).map(
+    (cid, i) => /* @__PURE__ */ jsxs(Fragment, { children: [
+      i === consumers.length - 1 && consumers.length > 1 ? "and " : "",
+      /* @__PURE__ */ jsx("strong", { children: `${blocks[cid].type} ${cid} [Section ${blocks[cid].section_id}]` }, cid),
+      i < consumers.length - 1 && consumers.length > 1 ? ", " : ""
+    ] })
+  );
   return /* @__PURE__ */ jsxs(Group, { grow: true, align: "flex-start", children: [
     /* @__PURE__ */ jsxs(Stack, { justify: "flex-start", children: [
       /* @__PURE__ */ jsx(Title, { order: 4, children: "Allowed" }),
@@ -9480,10 +9732,20 @@ function BlockSettings({ id, setBlockSettings, setBlockContent }) {
         }
       ),
       /* @__PURE__ */ jsx(Title, { order: 4, children: "Sharing" }),
+      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: [
+          "This block is being consumed by ",
+          consumersP,
+          consumers.length > 3 && " and others",
+          ". Please, make sure you remove this block dependencies before changing this setting."
+        ] })
+      ] }),
       /* @__PURE__ */ jsx(
         SegmentedControl,
         {
           defaultValue: String(block.shared),
+          disabled: isShared && block.shared,
           onChange: (e) => handleChange("shared", e === "true"),
           data: shared
         }
@@ -9513,6 +9775,8 @@ var Icons = {
 function InputMenu({ id }) {
   const dispatch = useAppDispatch();
   const resource = useContext(ResourceContext);
+  const [searchTerm, setSearchTerm] = useState("");
+  const [debouncedSearchTerm] = useDebouncedValue(searchTerm, 200);
   const blocks = useAppSelector((state) => {
     if (state.records.reports && state.records.reports[0]) {
       const reportId = state.records.reports[0];
@@ -9541,8 +9805,11 @@ function InputMenu({ id }) {
     () => blocks.filter((d) => d.id !== block.id && (d.section_id === block.section_id || d.shared)).sort(inputMenuSort),
     [blocks]
   );
-  if (!block)
-    return null;
+  const filteredBlocks = useMemo(() => availableBlocks.filter((block2) => {
+    const matchId = String(block2.id).includes(debouncedSearchTerm.trim());
+    const matchVariables = Object.keys(variables[block2.id] || {}).some((varName) => varName.includes(debouncedSearchTerm.trim()));
+    return matchId || matchVariables;
+  }), [availableBlocks, debouncedSearchTerm, variables]);
   const handleClick = (blockId) => {
     const operation = inputBlocks[blockId] ? "delete" : "create";
     dispatch(actions_exports.updateEntity("block", {
@@ -9558,6 +9825,8 @@ function InputMenu({ id }) {
       dispatch(recalculateVariables(resource));
     });
   };
+  if (!block)
+    return null;
   const determineIcon = (blockId) => {
     if (block.consumers.includes(blockId))
       return Icons.Consumer;
@@ -9579,23 +9848,41 @@ function InputMenu({ id }) {
             children: "Add New Input"
           }
         ) }),
-        /* @__PURE__ */ jsx(Menu.Dropdown, { children: availableBlocks.map(({ id: id2, shared }) => /* @__PURE__ */ jsx(
-          Menu.Item,
-          {
-            disabled: block.consumers.includes(id2),
-            onClick: () => handleClick(id2),
-            icon: determineIcon(id2),
-            rightSection: shared ? /* @__PURE__ */ jsx(ThemeIcon, { size: "xs", radius: "xl", children: /* @__PURE__ */ jsx(IconGlobe, {}) }) : null,
-            children: /* @__PURE__ */ jsx(Box, { style: { maxWidth: "400px" }, children: /* @__PURE__ */ jsx(
-              InputMenuItem_default,
-              {
-                id: id2,
-                variables: variables[id2]
-              }
-            ) })
-          },
-          id2
-        )) })
+        /* @__PURE__ */ jsxs(Menu.Dropdown, { children: [
+          /* @__PURE__ */ jsx(
+            TextInput,
+            {
+              placeholder: "Search by variable name or block id.",
+              size: "xs",
+              value: searchTerm,
+              onChange: (e) => setSearchTerm(e.target.value)
+            }
+          ),
+          filteredBlocks.map(({ id: id2, shared }) => /* @__PURE__ */ jsx(
+            Menu.Item,
+            {
+              disabled: block.consumers.includes(id2),
+              onClick: () => handleClick(id2),
+              icon: determineIcon(id2),
+              rightSection: /* @__PURE__ */ jsxs(Stack, { ml: "xs", spacing: "xs", align: "flex-end", children: [
+                /* @__PURE__ */ jsxs(Text, { size: "xs", color: "gray.6", children: [
+                  "[",
+                  id2,
+                  "]"
+                ] }),
+                shared ? /* @__PURE__ */ jsx(ThemeIcon, { size: "xs", radius: "xl", children: /* @__PURE__ */ jsx(IconGlobe, {}) }) : null
+              ] }),
+              children: /* @__PURE__ */ jsx(Box, { style: { maxWidth: "400px" }, children: /* @__PURE__ */ jsx(
+                InputMenuItem_default,
+                {
+                  id: id2,
+                  variables: variables[id2]
+                }
+              ) })
+            },
+            id2
+          ))
+        ] })
       ]
     }
   );
@@ -9899,7 +10186,11 @@ function BlockEditor({
     setBlockContent({ api: [...apiList, ""].join(apiSeparator) });
   };
   const onDeleteAPI = (deletedIx) => {
-    setBlockContent({ api: apiList.filter((ai, ix) => ix !== deletedIx).join(apiSeparator) });
+    setBlockContent(
+      {
+        api: apiList.length === 1 && apiList[0] === "" ? null : apiList.filter((ai, ix) => ix !== deletedIx).join(apiSeparator)
+      }
+    );
   };
   const codeEditor = /* @__PURE__ */ jsx(
     MonacoWrapper_default,
@@ -9953,7 +10244,7 @@ function BlockEditor({
                 onEnterPress: () => onSave(true),
                 onDelete: () => onDeleteAPI(ix)
               },
-              `${id}-${ix}`
+              `${id}-${ix}-${apiList.length}`
             )),
             /* @__PURE__ */ jsx(
               Button,
@@ -10927,7 +11218,7 @@ function BuilderEditor(props) {
       {
         report: reportRef.data,
         locale: props.locale,
-        isLoading: reportRef.isFetching
+        isLoading: false
       }
     );
   }, [reportRef.status, reportRef.data?.sections]);
@@ -11312,6 +11603,7 @@ function FormatterForm({ formatterId, onEditEnd }) {
                 {
                   monacoOptions: {
                     onChange: (newLogic) => onContentValueChange("logic", newLogic),
+                    height: "30vh",
                     value: formatter.content.logic
                   }
                 },
@@ -12541,6 +12833,7 @@ function MetadataEditor() {
 init_esm_shims();
 function NotFoundView() {
   const { user } = useUser();
+  const textStyle = { color: "#000" };
   return /* @__PURE__ */ jsxs(
     Flex,
     {
@@ -12550,14 +12843,15 @@ function NotFoundView() {
       align: "center",
       direction: "column",
       wrap: "wrap",
+      style: { background: "white" },
       children: [
-        /* @__PURE__ */ jsx(Title, { children: "Not found." }),
-        /* @__PURE__ */ jsxs(Title, { order: 2, children: [
+        /* @__PURE__ */ jsx(Title, { style: textStyle, children: "Not found." }),
+        /* @__PURE__ */ jsxs(Title, { order: 2, style: textStyle, children: [
           "Sorry, ",
           user?.name,
           "!"
         ] }),
-        /* @__PURE__ */ jsx(Text, { children: "The page you are looking for is not here." }),
+        /* @__PURE__ */ jsx(Text, { style: textStyle, children: "The page you are looking for is not here." }),
         /* @__PURE__ */ jsx(Button, { component: "a", href: "/", children: "Back to homepage" })
       ]
     }
@@ -12671,6 +12965,7 @@ function ReportPicker() {
 init_esm_shims();
 function UnauthorizeView() {
   const { user } = useUser();
+  const textStyle = { color: "#000" };
   return /* @__PURE__ */ jsxs(
     Flex,
     {
@@ -12680,15 +12975,39 @@ function UnauthorizeView() {
       align: "center",
       direction: "column",
       wrap: "wrap",
+      style: { background: "white" },
       children: [
-        /* @__PURE__ */ jsx(Title, { children: "Unauthorize or forbidden access." }),
-        /* @__PURE__ */ jsxs(Title, { order: 2, children: [
+        /* @__PURE__ */ jsx(Title, { style: textStyle, children: "Unauthorize or forbidden access." }),
+        /* @__PURE__ */ jsxs(Title, { style: textStyle, order: 2, children: [
           "Sorry, ",
           user?.name,
           "!"
         ] }),
-        /* @__PURE__ */ jsx(Text, { children: "Your session or your user's roles doesn't satisfy the needs of the requested view. Please, ask your administrator to allow you." }),
-        /* @__PURE__ */ jsx(Button, { component: "a", href: "/", children: "Back to homepage" })
+        /* @__PURE__ */ jsx(Text, { style: textStyle, children: "Your session or your user's roles doesn't satisfy the needs of the requested view. Please, ask your administrator to allow you." }),
+        /* @__PURE__ */ jsxs(Group, { children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              component: "a",
+              href: "/",
+              leftIcon: /* @__PURE__ */ jsx(IconHome, { size: 14 }),
+              variant: "outline",
+              color: "dark",
+              children: "Back to homepage"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              component: "a",
+              href: "/api/auth/logout",
+              leftIcon: /* @__PURE__ */ jsx(IconLogout, { size: 14 }),
+              variant: "outline",
+              color: "dark",
+              children: "Disconnect"
+            }
+          )
+        ] })
       ]
     }
   );

package/dist/server.js

@@ -506,6 +506,7 @@ var BLOCK_CONTENT_TYPES = {
 };
 var BLOCK_LOGIC_TYPES = {
   GENERATOR: "generator",
+  RELATED: "related",
   VIZ: "visualization"
 };
 var BLOCK_LOGIC_LOCALE = "logic";
@@ -1974,6 +1975,26 @@ function readMemberFactory(db) {
         }
       });
       whereClause.content_id = entities.map((item) => item.content_id);
+    } else if (mode === "related") {
+      const levelWhereClause = () => {
+        if (params.variant_ids?.length)
+          return { variant_id: params.variant_ids.map((item) => item) };
+        if (params.dimension_ids?.length)
+          return { dimension_id: params.dimension_ids.map((item) => item) };
+        if (params.report_ids?.length)
+          return { report_id: params.report_ids.map((item) => item) };
+      };
+      const entities = await Search.findAll({
+        attributes: ["content_id"],
+        where: {
+          ...levelWhereClause(),
+          content_id: { [Op.notIn]: params.current_ids },
+          visible: true
+        },
+        order: [Sequelize.fn("RANDOM")],
+        limit: params.related || 4
+      });
+      whereClause.content_id = entities.map((item) => item.content_id);
     }
     const contentWhereClause = {
       locale: all ? { [Op.ne]: null } : locale
@@ -2001,7 +2022,7 @@ function readMemberFactory(db) {
         where: contentWhereClause
       }]
     });
-    if (memberSearchResults.length !== params[mode].length) {
+    if (mode !== "related" && memberSearchResults.length !== params[mode].length) {
       throw new BackendError(404, "One or more members were not found.");
     }
     memberSearchResults.sort(
@@ -2703,7 +2724,7 @@ function dbSectionFactory(db) {
     const { id, blocks, ...sectionData } = data;
     const entity = await Section.findByPk(id, {
       include: sectionQuery.include,
-      rejectOnEmpty: true
+      rejectOnEmpty: false
     });
     entity.set(sectionData);
     await entity.save();
@@ -3112,6 +3133,7 @@ function parseReadMemberParams(query) {
   const mode = normalizeList(query.mode)[0];
   const outputParam = normalizeList(query.output)[0] || "full";
   const output = outputParam === "lite" ? "lite" : "full";
+  const relatedLimit = parseInt(normalizeList(query.related)[0], 10) || 5;
   let variant = normalizeList(query.variant).map(parseFiniteNumber);
   if (variant.length === 0) {
     variant = normalizeList(query["variant[]"]).map(parseFiniteNumber);
@@ -3149,6 +3171,19 @@ function parseReadMemberParams(query) {
       })
     };
   }
+  if (mode === "related") {
+    return {
+      all,
+      mode,
+      locale: all ? localeDefault3 : stripHTML(locale),
+      related: relatedLimit,
+      current_ids: normalizeList(query.current_ids || query["current_ids[]"]).map(parseFiniteNumber),
+      report_ids: normalizeList(query.report_ids || query["report_ids[]"]).map(parseFiniteNumber),
+      dimension_ids: normalizeList(query.dimension_ids || query["dimension_ids[]"]).map(parseFiniteNumber),
+      variant_ids: normalizeList(query.variant_ids || query["variant_ids[]"]).map(parseFiniteNumber),
+      output
+    };
+  }
   throw new BackendError(400, `Invalid mode: '${mode}'`);
 }
 function parseSearchMemberParams(query) {
@@ -4360,6 +4395,9 @@ var transformReadMembers = (params) => {
     ).join(",");
     return { ...params, slugs };
   }
+  if (params.mode === "related") {
+    return { ...params };
+  }
   return { ...params, [params.mode]: params[params.mode].join(",") };
 };
 function apiFactory2(baseURL) {
@@ -4809,6 +4847,80 @@ async function runSingleBlock(block, formatterFunctions, blockContext, readMembe
       }
     };
   }
+  if (block.type === BLOCK_TYPES.RELATED) {
+    const relatedCompare = block.contentByLocale?.logic?.content?.simple?.compare || "variant";
+    const relatedLimit = block.contentByLocale?.logic?.content?.simple?.limit || 4;
+    const reportIds = Object.keys(variables).filter((key) => key.startsWith("report_id")).map((key) => variables[key]);
+    const dimensionIds = Object.keys(variables).filter((key) => key.startsWith("dimension_id")).map((key) => variables[key]);
+    const variantIds = Object.keys(variables).filter((key) => key.startsWith("variant_id")).map((key) => variables[key]);
+    const memberIds = Object.keys(variables).filter((key) => key.startsWith("id")).map((key) => variables[key]);
+    if (!memberIds.length)
+      return {
+        outputVariables: { related_reports: [] },
+        renderVariables: {},
+        status: {
+          log: [],
+          allowed: false
+        }
+      };
+    const membersContentIds = await readMemberFn({
+      mode: "ids",
+      locale,
+      ids: memberIds,
+      output: "lite"
+    }).then((response) => {
+      let data = [];
+      if (isResult(response)) {
+        if (response.ok) {
+          data = response.data.results;
+        }
+      } else {
+        data = response.results;
+      }
+      return data && Array.isArray(data) ? data : [];
+    }).catch((err) => {
+      console.log("Error getting related members", err);
+      return [];
+    });
+    const current_ids = membersContentIds.map((member) => member.content_id);
+    const memberParams = {
+      mode: "related",
+      locale,
+      related: relatedLimit ?? 4,
+      current_ids,
+      output: "full"
+    };
+    if (relatedCompare) {
+      if (relatedCompare === "report")
+        memberParams.report_ids = reportIds;
+      else if (relatedCompare === "dimension")
+        memberParams.dimension_ids = dimensionIds;
+      else
+        memberParams.variant_ids = variantIds;
+    }
+    const bespokeMembers = await readMemberFn(memberParams).then((response) => {
+      let data = [];
+      if (isResult(response)) {
+        if (response.ok) {
+          data = response.data.results;
+        }
+      } else {
+        data = response.results;
+      }
+      return data && Array.isArray(data) ? data : [];
+    }).catch((err) => {
+      console.log("Error getting related members", err);
+      return [];
+    });
+    return {
+      outputVariables: { related_reports: bespokeMembers },
+      renderVariables: {},
+      status: {
+        log: [],
+        allowed: bespokeMembers.length > 0
+      }
+    };
+  }
   const { logic } = getBlockContent(block, locale);
   const swappedLogic = varSwap_default(logic, formatterFunctions, blockContext);
   const evalResults = mortarEval_default("resp", resp || {}, swappedLogic, formatterFunctions, variables, blockContext);
@@ -4952,7 +5064,7 @@ var runConsumersV2 = async (blocks, sections, bid, formatterFunctions, blockCont
         ).then(({ outputVariables, status }) => {
           if (
             // store output variables for block that:
-            (block.consumers.length > 0 || block.type === BLOCK_TYPES.GENERATOR) && status.allowed && Object.keys(outputVariables).length > 0
+            (block.consumers.length > 0 || [BLOCK_TYPES.GENERATOR, BLOCK_TYPES.RELATED].includes(block.type)) && status.allowed && Object.keys(outputVariables).length > 0
           )
             variablesById[bid2] = outputVariables;
           if (mode === "report") {
@@ -5957,7 +6069,7 @@ function BespokeRendererStaticPaths(options) {
         limit,
         format: "plain",
         locale: locale || localeDefault9,
-        noImage: true,
+        noImage: false,
         visible: true,
         report: [],
         dimension: [],
@@ -5965,7 +6077,7 @@ function BespokeRendererStaticPaths(options) {
         includes: true
       });
       if (req.ok === true) {
-        paths = req.data.results.slice(0, limit).map((item) => ({
+        paths = req.data.results.map((item) => ({
           locale: locales9.find((token) => token === item.locale),
           params: {
             bespoke: [item.variant.slug, item.slug]

package/package.json

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