@datawheel/bespoke 0.2.0 → 0.2.2

package/dist/index.js

@@ -1,5 +1,4 @@
 import axios from 'axios';
-import yn4 from 'yn';
 import * as d3Array from 'd3-array';
 import * as d3Collection from 'd3-collection';
 import * as d3Format from 'd3-format';
@@ -8,15 +7,16 @@ import { formatAbbreviate } from 'd3plus-format';
 import { date } from 'd3plus-axis';
 import { assign, closest, merge, isObject } from 'd3plus-common';
 import { strip, titleCase } from 'd3plus-text';
+import yn3 from 'yn';
 import toposort from 'toposort';
 import { schema, normalize } from 'normalizr';
 import { createSlice, configureStore } from '@reduxjs/toolkit';
 import { HYDRATE, createWrapper } from 'next-redux-wrapper';
 import { Notifications, notifications } from '@mantine/notifications';
-import React, { forwardRef, useMemo, useState, useCallback, useContext, useEffect, createContext, useRef, Fragment as Fragment$1, createElement } from 'react';
+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, 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 { 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 { dataConcat } from 'd3plus-viz';
 import * as d3plus from 'd3plus-react';
 import Router, { useRouter } from 'next/router';
@@ -473,13 +473,6 @@ var init_cms = __esm({
     };
   }
 });
-var getLogging_default;
-var init_getLogging = __esm({
-  "libs/configs/getLogging.ts"() {
-    init_esm_shims();
-    getLogging_default = (env = process.env) => yn4(env.REPORTS_LOGGING);
-  }
-});
 
 // libs/stats.js
 function logGamma(Z) {
@@ -745,7 +738,7 @@ var init_mortarEval = __esm({
     init_esm_shims();
     init_block();
     init_libs();
-    verbose = yn4(process.env.REPORTS_LOGGING);
+    verbose = yn3(process.env.REPORTS_LOGGING);
     mortarEval_default = mortarEval;
   }
 });
@@ -1025,12 +1018,14 @@ var init_consts = __esm({
 function isResult(response) {
   return response.ok !== void 0;
 }
+function ApiFetchException(message) {
+  this.message = message;
+  this.name = "ApiFetchException";
+}
 async function apiFetch(url, settings, readMemberFn, locale = "en") {
   const start = Date.now();
   let finalUrl = url;
   let finalData;
-  if (verbose2)
-    console.log("apiFetch", url);
   const parsedUrl = new URL(url);
   const parsedQuery = parsedUrl.searchParams;
   if (parsedQuery.has("bespoke_slugs")) {
@@ -1039,11 +1034,26 @@ async function apiFetch(url, settings, readMemberFn, locale = "en") {
   }
   const useProxy = settings && settings.useProxy && settings.useProxy === "true" ? true : false;
   if (typeof window === "object" && useProxy) {
-    const result = await urlProxy({ url: finalUrl });
-    finalData = result.ok === true ? result.data : result.error;
+    const result = await urlProxy({ url: finalUrl, timeout: apiFetchTimeout });
+    if (result.ok === true) {
+      finalData = result.data;
+    } else {
+      throw new ApiFetchException(result?.error);
+    }
   } else {
-    const response = await axios({ url: finalUrl });
-    finalData = response.data;
+    try {
+      const response = await axios({
+        url: finalUrl,
+        timeout: apiFetchTimeout
+      });
+      if (response.status === 200) {
+        finalData = response.data;
+      } else {
+        throw new ApiFetchException("No response");
+      }
+    } catch (e) {
+      throw new ApiFetchException(e.message);
+    }
   }
   if (parsedQuery.has("bespoke_slugs")) {
     const slugStrings = parsedQuery.get("bespoke_slugs");
@@ -1097,6 +1107,10 @@ async function apiFetch(url, settings, readMemberFn, locale = "en") {
     requestDuration: Date.now() - start
   };
 }
+function BlockException(message) {
+  this.name = "BlockException";
+  this.message = message;
+}
 async function runSingleBlock(block, formatterFunctions, blockContext, readMemberFn) {
   const { locale, variables, query } = parseBlockContext(blockContext);
   const allowed = isBlockAllowed(block, blockContext, variables, formatterFunctions);
@@ -1128,18 +1142,30 @@ async function runSingleBlock(block, formatterFunctions, blockContext, readMembe
           block.settings,
           readMemberFn,
           locale
-        ).then((result) => {
-          if (verbose2)
-            console.log("Variable loaded:", apiUrl, "response time: ", result.requestDuration);
-          return result;
-        }, (e) => {
-          if (verbose2)
-            console.error(`Error fetching ${apiUrl} block ${block.id}: ${e.message}`);
-          return { data: {}, requestDuration: 0 };
-        })
+        ).catch(
+          (e) => {
+            throw new BlockException(` Excecution of ${block.type}-${block.id} in section ${block.section_id} in report ${variables.report_name} (${variables.report_id}) failed.
+  Error fetching ${apiUrl}.
+  Message: ${e.message}.
+          `);
+          }
+        )
       );
     }
-    const apiResponses = await Promise.all(apiPromisesList);
+    const apiResponses = await Promise.all(apiPromisesList).catch((e) => {
+      return e.message;
+    });
+    if (typeof apiResponses === "string") {
+      if (apiResponses) {
+        return {
+          outputVariables: {},
+          renderVariables: {},
+          status: {
+            error: apiResponses
+          }
+        };
+      }
+    }
     resp = apiResponses.length === 1 ? apiResponses[0].data : apiResponses.map((r) => r.data);
     responseSize = apiResponses.reduce((acc, r) => acc + JSON.stringify(r.data).length / 1024, 0);
     duration = Math.max(...apiResponses.map((ar) => ar.requestDuration));
@@ -1280,14 +1306,13 @@ async function runSingleBlock(block, formatterFunctions, blockContext, readMembe
     }
   };
 }
-var verbose2, debug, ORIGIN, swapAPI, urlProxy, getDependencies, isBlockAllowed, runConsumersV2, getDurationColor, getSizeColor;
+var debug, ORIGIN, swapAPI, urlProxy, apiFetchTimeout, getDependencies, isBlockAllowed, runConsumersV2, getDurationColor, getSizeColor;
 var init_runConsumers = __esm({
   "libs/blocks/runConsumers.ts"() {
     init_esm_shims();
     init_api();
     init_block();
     init_cms();
-    init_getLogging();
     init_runSelector();
     init_selectorQueryToVariable();
     init_mortarEval();
@@ -1296,8 +1321,7 @@ var init_runConsumers = __esm({
     init_getRootBlocksForSection();
     init_arrayUtils();
     init_consts();
-    verbose2 = getLogging_default();
-    debug = yn4(process.env.NEXT_PUBLIC_REPORTS_DEBUG);
+    debug = yn3(process.env.NEXT_PUBLIC_REPORTS_DEBUG);
     ORIGIN = process.env.REPORTS_ORIGIN || "";
     axios.interceptors.request.use((config) => ({
       ...config,
@@ -1314,6 +1338,7 @@ var init_runConsumers = __esm({
       return url;
     };
     ({ urlProxy } = apiFactory("/api/cms"));
+    apiFetchTimeout = process.env.NEXT_PUBLIC_REPORTS_API_FETCH_TIMEOUT || 0;
     getDependencies = (bid, blocks, acc = [], crawlUp = true, crawlDown = true, withinSection = true, visited = []) => {
       if (visited.includes(bid))
         return [];
@@ -1421,6 +1446,16 @@ var init_runConsumers = __esm({
               },
               readMemberFn
             ).then(({ outputVariables, status }) => {
+              if (status.error) {
+                if (typeof window === "undefined") {
+                  throw new Error(`Run consumers failed with message: ${status.error}`);
+                } else {
+                  statusById[bid2] = {
+                    allowed: false,
+                    error: status.error
+                  };
+                }
+              }
               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
@@ -2465,17 +2500,21 @@ function recalculateVariables(resource, params) {
     };
     const section = state.records.entities.section[sid];
     const readMemberFn = async (innerParams) => dispatch(readMember(innerParams));
-    const data = await runConsumersV2(
-      blocks,
-      section && [section],
-      bid,
-      formatterFunctions,
-      blockContext,
-      void 0,
-      readMemberFn
-    );
-    const { variables, status } = data;
-    dispatch(variablesActions.setVariableChange({ attributes, variables, status }));
+    try {
+      const data = await runConsumersV2(
+        blocks,
+        section && [section],
+        bid,
+        formatterFunctions,
+        blockContext,
+        void 0,
+        readMemberFn
+      );
+      const { variables, status } = data;
+      dispatch(variablesActions.setVariableChange({ attributes, variables, status }));
+    } catch (error) {
+      console.log("Error in runConsumers client side: recalculateVariables", error);
+    }
   };
 }
 function readMetadata(filters) {
@@ -3040,51 +3079,38 @@ function Viz(config) {
   const Visualization = vizTypes[fallbackType];
   const { _data, ...vizPropsConfig } = vizProps.config;
   const vizConfig = { locale, variables, ...vizPropsConfig, ...configOverride };
-  const { title } = vizConfig;
-  return /* @__PURE__ */ jsxs("div", { className: "bespoke-Viz", children: [
-    title && /* @__PURE__ */ jsx(
-      Title,
-      {
-        className: "bespoke-Viz-title",
-        order: 4,
-        size: "h6",
-        align: "center",
-        dangerouslySetInnerHTML: { __html: title }
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        style: {
-          display: "flex",
-          flex: "1 1 100%",
-          minHeight: 400
-        },
-        children: /* @__PURE__ */ jsx(ErrorBoundary, { fallback: /* @__PURE__ */ jsx("p", { children: "Error in d3plus viz config." }), children: /* @__PURE__ */ jsx(
-          Visualization,
-          {
-            style: { flex: 1 },
-            dataFormat: (resp) => {
-              vizProps.data && Array.isArray(vizProps.data) && vizProps.data.length > 1 && vizProps.data.some((d) => typeof d === "string");
-              let data;
-              try {
-                data = vizProps.dataFormat(resp);
-              } catch (e) {
-                console.log("Error in dataFormat: ", e);
-                data = [];
-              }
-              return data;
-            },
-            linksFormat: vizProps.linksFormat,
-            nodesFormat: vizProps.nodesFormat,
-            topojsonFormat: vizProps.topojsonFormat,
-            config: { ...defaultConfig_default, ...vizConfig, sectionVariables: sectionVariablesStr, title: void 0 }
+  return /* @__PURE__ */ jsx("div", { className: "bespoke-Viz", children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        display: "flex",
+        flex: "1 1 100%",
+        minHeight: 400
+      },
+      children: /* @__PURE__ */ jsx(ErrorBoundary, { fallback: /* @__PURE__ */ jsx("p", { children: "Error in d3plus viz config." }), children: /* @__PURE__ */ jsx(
+        Visualization,
+        {
+          style: { flex: 1 },
+          dataFormat: (resp) => {
+            vizProps.data && Array.isArray(vizProps.data) && vizProps.data.length > 1 && vizProps.data.some((d) => typeof d === "string");
+            let data;
+            try {
+              data = vizProps.dataFormat(resp);
+            } catch (e) {
+              console.log("Error in dataFormat: ", e);
+              data = [];
+            }
+            return data;
           },
-          "viz-key"
-        ) })
-      }
-    )
-  ] });
+          linksFormat: vizProps.linksFormat,
+          nodesFormat: vizProps.nodesFormat,
+          topojsonFormat: vizProps.topojsonFormat,
+          config: { ...defaultConfig_default, ...vizConfig, sectionVariables: sectionVariablesStr, title: void 0 }
+        },
+        "viz-key"
+      ) })
+    }
+  ) });
 }
 var vizTypes;
 var init_Viz = __esm({
@@ -3238,7 +3264,7 @@ var init_Table = __esm({
 // components/blocks/types/renderers/Viz.tsx
 var Viz_exports2 = {};
 __export(Viz_exports2, {
-  default: () => Viz2
+  default: () => Viz_default
 });
 function Viz2({
   block,
@@ -3269,7 +3295,7 @@ function Viz2({
       }
     };
     return d3plusPropify_default(transpiledLogic, formatterFunctions, variables, locale, block.id, {}, globals);
-  }, [block, active, variables, sectionVariables]);
+  }, [content?.logic, active, variables, sectionVariables]);
   useMemo(() => {
     if (!active || !content?.logic)
       return {};
@@ -3325,7 +3351,7 @@ function Viz2({
     }
   );
 }
-var useAppContext, CustomVizzes, vizTypes2;
+var useAppContext, CustomVizzes, vizTypes2, Viz_default;
 var init_Viz2 = __esm({
   "components/blocks/types/renderers/Viz.tsx"() {
     init_esm_shims();
@@ -3348,6 +3374,9 @@ var init_Viz2 = __esm({
       ...d3plus,
       ...CustomVizzes
     };
+    Viz_default = memo(Viz2, (prevProps, nextProps) => {
+      return prevProps.block.contentByLocale.logic.content === nextProps.block.contentByLocale.logic.content && prevProps.active === nextProps.active && prevProps.locale === nextProps.locale && JSON.stringify(prevProps.variables) === JSON.stringify(nextProps.variables) && JSON.stringify(prevProps.configOverride) === JSON.stringify(nextProps.configOverride);
+    });
   }
 });
 
@@ -7626,14 +7655,14 @@ init_esm_shims();
 function withPageRoleAuthRequired(params) {
   const { SuccessComponent, FailureComponent, options } = params;
   const allowedRoles = new Set(params.allowedRoles);
-  return withPageAuthRequired(({ user }) => {
+  return withPageAuthRequired(({ user, ...props }) => {
     return useMemo(() => {
       const userRoles = user.bespoke_roles || [];
       if (allowedRoles.size === 0 || userRoles.some((role) => allowedRoles.has(role))) {
-        return /* @__PURE__ */ jsx(SuccessComponent, { user });
+        return /* @__PURE__ */ jsx(SuccessComponent, { user, ...props });
       }
-      return /* @__PURE__ */ jsx(FailureComponent, {});
-    }, [user]);
+      return /* @__PURE__ */ jsx(FailureComponent, { ...props });
+    }, [user, props]);
   }, options);
 }
 
@@ -7760,7 +7789,7 @@ function normalizeList(value) {
 var { localeDefault: localeDefault8 } = getLocales_default();
 function parseReadMemberParams(query) {
   const locale = normalizeList(query.locale)[0] || localeDefault8 || "en";
-  const all = locale === "all" || yn4(query.all);
+  const all = locale === "all" || yn3(query.all);
   const mode = normalizeList(query.mode)[0];
   const outputParam = normalizeList(query.output)[0] || "full";
   const output = outputParam === "lite" ? "lite" : "full";
@@ -7839,9 +7868,9 @@ function parseSearchMemberParams(query) {
     locale: localeIsAll ? localeDefault8 : locale,
     limit: normalizeList(query.limit).map(parseFiniteNumber)[0] ?? 5,
     format: formatIsNested ? "nested" : "plain",
-    includes: yn4(query.includes, { default: true }),
-    visible: yn4(query.visible, { default: true }),
-    noImage: yn4(query.noImage, { default: false }),
+    includes: yn3(query.includes, { default: true }),
+    visible: yn3(query.visible, { default: true }),
+    noImage: yn3(query.noImage, { default: false }),
     variant,
     dimension,
     report,
@@ -9425,8 +9454,8 @@ function BlockPreview(props) {
   const variables = useInputVariablesFlat(block.id);
   const formatterFunctions = useFormatterFunctionsForLocale();
   const blockContext = useBlockContext(block.id, locale);
-  const generatorVariables = useAppSelector((state) => state.variables.variables[block.id] || {});
-  const generatorStatus = useAppSelector((state) => state.variables.status[block.id] || {});
+  const blockVariables = useAppSelector((state) => state.variables.variables[block.id] || {});
+  const blockStatus = useAppSelector((state) => state.variables.status[block.id] || {});
   const blockContent = types_default[block.type].renderPreviewOnEdit && blockStateContent ? blockStateContent : getBlockContent(block, locale);
   const [content, setContent] = useState(null);
   const [status, setStatus2] = useState(emptyStatus);
@@ -9455,8 +9484,8 @@ function BlockPreview(props) {
       }
       if (block.type === BLOCK_TYPES.GENERATOR) {
         const hasAPI = Boolean(block.contentByLocale?.logic?.content?.api);
-        setContent({ outputVariables: generatorVariables, hasAPI });
-        setStatus2(generatorStatus);
+        setContent({ outputVariables: blockVariables, hasAPI });
+        setStatus2(blockStatus);
         return;
       }
       if (block.type === BLOCK_TYPES.SELECTOR) {
@@ -9495,6 +9524,17 @@ function BlockPreview(props) {
     };
     fetch();
   }, [blockContent, variables]);
+  useEffect(() => {
+    if (blockStatus && blockStatus.error && blockStatus.error !== "") {
+      notifications.show({
+        autoClose: 1e4,
+        color: "red",
+        id: "block-error",
+        message: blockStatus.error,
+        title: `Block error ID: ${block.id}`
+      });
+    }
+  }, [blockStatus.error]);
   const Renderer = renderers_default[block.type];
   const overlayStyle = {
     width: "100%",
@@ -10198,7 +10238,7 @@ function BlockEditor({
       monacoOptions: {
         onChange: (logic) => onChangeCode(logic, locale),
         value: blockContent?.logic || "",
-        height: fullscreen ? "85vh" : "70vh",
+        height: fullscreen ? "85vh" : "61vh",
         width: "100%"
       },
       variables
@@ -10218,6 +10258,7 @@ function BlockEditor({
     }
   );
   const isVizOrGenerator = [BLOCK_TYPES.GENERATOR, BLOCK_TYPES.VIZ].includes(blockType);
+  const isLogicType = Object.values(BLOCK_LOGIC_TYPES).includes(blockType);
   return /* @__PURE__ */ jsxs(Grid, { children: [
     /* @__PURE__ */ jsxs(
       Col,
@@ -10288,10 +10329,17 @@ function BlockEditor({
           height: "100%"
         },
         children: [
-          isVizOrGenerator && /* @__PURE__ */ jsxs(Alert, { icon: /* @__PURE__ */ jsx(IconFlag, {}), children: [
-            "You are editing the ",
-            /* @__PURE__ */ jsx(Code, { children: locale.toUpperCase() }),
-            " version of the block."
+          /* @__PURE__ */ jsxs(Alert, { icon: /* @__PURE__ */ jsx(IconFlag, {}), children: [
+            !isLogicType && /* @__PURE__ */ jsxs(Fragment, { children: [
+              "You are editing the ",
+              /* @__PURE__ */ jsx(Code, { children: locale.toUpperCase() }),
+              " version of the block."
+            ] }),
+            isLogicType && /* @__PURE__ */ jsxs(Fragment, { children: [
+              "You are editing a ",
+              /* @__PURE__ */ jsx(Code, { children: "logic" }),
+              " type of block. You have to handle all the languages inside it."
+            ] })
           ] }),
           /* @__PURE__ */ jsxs(
             Tabs,
@@ -10734,7 +10782,8 @@ function BlockElement({
                 right: px(theme.spacing.xs) / 2,
                 top: px(theme.spacing.xs) / 2,
                 backgroundColor: theme.colors.gray[2],
-                borderRadius: theme.radius.sm
+                borderRadius: theme.radius.sm,
+                zIndex: 2
               },
               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,
@@ -13614,7 +13663,7 @@ function BespokeManager(options) {
     locale = localeDefault4,
     profilePrefix = "/profilePathManager"
   } = options;
-  const notifications4 = {
+  const notifications5 = {
     position: "bottom-center",
     ...options.notifications
   };
@@ -13627,7 +13676,7 @@ function BespokeManager(options) {
     return /* @__PURE__ */ jsxs(ResourceProvider, { pathSegment, profilePrefix, children: [
       /* @__PURE__ */ jsx(Head, { children: /* @__PURE__ */ jsx("title", { children: title }) }),
       /* @__PURE__ */ jsxs(MantineProvider, { inherit: false, children: [
-        /* @__PURE__ */ jsx(Notifications, { ...notifications4 }),
+        /* @__PURE__ */ jsx(Notifications, { ...notifications5 }),
         /* @__PURE__ */ jsx(DialogProvider, { children: /* @__PURE__ */ jsx(ErrorBoundary, { fallback: /* @__PURE__ */ jsx("p", { children: "Client side error in Bespoke. Check the console for details." }), children: /* @__PURE__ */ jsx(BespokeManagerShell, { locale }) }) })
       ] })
     ] });