fix: iFrame resize

app/charts/bar/rendering-utils.ts

@@ -1,4 +1,3 @@
-import { getContrastingColor } from "@uiw/react-color";
 import { select, Selection } from "d3-selection";
 import { Series } from "d3-shape";
 import { useCallback } from "react";
@@ -18,6 +17,7 @@ import {
 import { getChartConfig, useDefinitiveFilters } from "@/config-utils";
 import { useConfiguratorState } from "@/configurator/configurator-state";
 import { Observation } from "@/domain/data";
+import { getContrastingColor } from "@/utils/color-utils";
 import { getTextWidth } from "@/utils/get-text-width";
 
 export type RenderBarDatum = {

app/charts/column/rendering-utils.ts

@@ -1,4 +1,3 @@
-import { getContrastingColor } from "@uiw/react-color";
 import { select, Selection } from "d3-selection";
 import { Series } from "d3-shape";
 import { useCallback } from "react";
@@ -18,6 +17,7 @@ import {
 import { getChartConfig, useDefinitiveFilters } from "@/config-utils";
 import { useConfiguratorState } from "@/configurator/configurator-state";
 import { Observation } from "@/domain/data";
+import { getContrastingColor } from "@/utils/color-utils";
 
 export type RenderColumnDatum = {
   key: string;

app/charts/map/map.tsx

@@ -6,7 +6,6 @@ import {
 import { supported } from "@mapbox/mapbox-gl-supported";
 import { Button, Theme } from "@mui/material";
 import { makeStyles } from "@mui/styles";
-import { hexToRgba } from "@uiw/react-color";
 import { geoArea } from "d3-geo";
 import debounce from "lodash/debounce";
 import orderBy from "lodash/orderBy";
@@ -59,6 +58,7 @@ import {
 import { GeoFeature, GeoPoint } from "@/domain/data";
 import { Icon, IconName } from "@/icons";
 import { useLocale } from "@/locales/use-locale";
+import { hexToRgba } from "@/utils/color-utils";
 import { useEvent } from "@/utils/use-event";
 import { DISABLE_SCREENSHOT_ATTR } from "@/utils/use-screenshot";
 

app/components/chart-with-filters.tsx

@@ -13,70 +13,37 @@ import {
 } from "@/config-types";
 
 const ChartAreasVisualization = dynamic(
-  import("@/charts/area/chart-area").then(
-    (mod) => mod.ChartAreasVisualization,
-    () => null as never
-  )
+  () => import("@/charts/area/chart-area").then((mod) => ({ default: mod.ChartAreasVisualization }))
 );
 const ChartColumnsVisualization = dynamic(
-  import("@/charts/column/chart-column").then(
-    (mod) => mod.ChartColumnsVisualization,
-    () => null as never
-  )
+  () => import("@/charts/column/chart-column").then((mod) => ({ default: mod.ChartColumnsVisualization }))
 );
 const ChartBarsVisualization = dynamic(
-  import("@/charts/bar/chart-bar").then(
-    (mod) => mod.ChartBarsVisualization,
-    () => null as never
-  )
+  () => import("@/charts/bar/chart-bar").then((mod) => ({ default: mod.ChartBarsVisualization }))
 );
 const ChartComboLineSingleVisualization = dynamic(
-  import("@/charts/combo/chart-combo-line-single").then(
-    (mod) => mod.ChartComboLineSingleVisualization,
-    () => null as never
-  )
+  () => import("@/charts/combo/chart-combo-line-single").then((mod) => ({ default: mod.ChartComboLineSingleVisualization }))
 );
 const ChartComboLineDualVisualization = dynamic(
-  import("@/charts/combo/chart-combo-line-dual").then(
-    (mod) => mod.ChartComboLineDualVisualization,
-    () => null as never
-  )
+  () => import("@/charts/combo/chart-combo-line-dual").then((mod) => ({ default: mod.ChartComboLineDualVisualization }))
 );
 const ChartComboLineColumnVisualization = dynamic(
-  import("@/charts/combo/chart-combo-line-column").then(
-    (mod) => mod.ChartComboLineColumnVisualization,
-    () => null as never
-  )
+  () => import("@/charts/combo/chart-combo-line-column").then((mod) => ({ default: mod.ChartComboLineColumnVisualization }))
 );
 const ChartLinesVisualization = dynamic(
-  import("@/charts/line/chart-lines").then(
-    (mod) => mod.ChartLinesVisualization,
-    () => null as never
-  )
+  () => import("@/charts/line/chart-lines").then((mod) => ({ default: mod.ChartLinesVisualization }))
 );
 const ChartMapVisualization = dynamic(
-  import("@/charts/map/chart-map").then(
-    (mod) => mod.ChartMapVisualization,
-    () => null as never
-  )
+  () => import("@/charts/map/chart-map").then((mod) => ({ default: mod.ChartMapVisualization }))
 );
 const ChartPieVisualization = dynamic(
-  import("@/charts/pie/chart-pie").then(
-    (mod) => mod.ChartPieVisualization,
-    () => null as never
-  )
+  () => import("@/charts/pie/chart-pie").then((mod) => ({ default: mod.ChartPieVisualization }))
 );
 const ChartScatterplotVisualization = dynamic(
-  import("@/charts/scatterplot/chart-scatterplot").then(
-    (mod) => mod.ChartScatterplotVisualization,
-    () => null as never
-  )
+  () => import("@/charts/scatterplot/chart-scatterplot").then((mod) => ({ default: mod.ChartScatterplotVisualization }))
 );
 const ChartTableVisualization = dynamic(
-  import("@/charts/table/chart-table").then(
-    (mod) => mod.ChartTableVisualization,
-    () => null as never
-  )
+  () => import("@/charts/table/chart-table").then((mod) => ({ default: mod.ChartTableVisualization }))
 );
 
 type GenericChartProps = {

app/components/text-block.tsx

@@ -3,7 +3,6 @@ import { t } from "@lingui/macro";
 import { Theme } from "@mui/material";
 import { makeStyles } from "@mui/styles";
 import clsx from "clsx";
-import { selectAll } from "d3-selection";
 import isEqual from "lodash/isEqual";
 import {
   ComponentProps,
@@ -186,39 +185,39 @@ export const useSyncTextBlockHeight = () => {
       return;
     }
 
-    selectAll<HTMLDivElement, unknown>(`.${TEXT_BLOCK_WRAPPER_CLASS}`).each(
-      function () {
-        const wrapperEl = this;
-        const contentEl = wrapperEl.querySelector<HTMLDivElement>(
-          `.${TEXT_BLOCK_CONTENT_CLASS}`
-        );
+    const elements = document.querySelectorAll<HTMLDivElement>(
+      `.${TEXT_BLOCK_WRAPPER_CLASS}`
+    );
+    elements.forEach((wrapperEl) => {
+      const contentEl = wrapperEl.querySelector<HTMLDivElement>(
+        `.${TEXT_BLOCK_CONTENT_CLASS}`
+      );
 
-        if (!contentEl) {
-          return;
-        }
+      if (!contentEl) {
+        return;
+      }
 
-        const key = wrapperEl.id;
-        const h = Math.ceil(contentEl.clientHeight / ROW_HEIGHT) || 1;
-
-        const newLayouts = Object.fromEntries(
-          Object.entries(layout.layouts).map(([bp, layouts]) => [
-            bp,
-            layouts.map((b) => {
-              return b.i === key ? { ...b, h, minH: h } : b;
-            }),
-          ])
-        );
-
-        if (!isEqual(newLayouts, layout.layouts)) {
-          dispatch({
-            type: "LAYOUT_CHANGED",
-            value: {
-              ...layout,
-              layouts: newLayouts,
-            },
-          });
-        }
+      const key = wrapperEl.id;
+      const h = Math.ceil(contentEl.clientHeight / ROW_HEIGHT) || 1;
+
+      const newLayouts = Object.fromEntries(
+        Object.entries(layout.layouts).map(([bp, layouts]) => [
+          bp,
+          layouts.map((b) => {
+            return b.i === key ? { ...b, h, minH: h } : b;
+          }),
+        ])
+      );
+
+      if (!isEqual(newLayouts, layout.layouts)) {
+        dispatch({
+          type: "LAYOUT_CHANGED",
+          value: {
+            ...layout,
+            layouts: newLayouts,
+          },
+        });
       }
-    );
+    });
   }, [dispatch, layout, isFreeCanvas]);
 };

app/configurator/components/chart-controls/color-picker.tsx

@@ -1,7 +1,6 @@
 import { Trans } from "@lingui/macro";
 import { Box, Button, Popover, styled } from "@mui/material";
 import { makeStyles } from "@mui/styles";
-import { hexToHsva, hsvaToHex } from "@uiw/react-color";
 import { color as d3Color } from "d3-color";
 import dynamic from "next/dynamic";
 import { MouseEventHandler, useCallback, useMemo, useRef } from "react";
@@ -11,11 +10,11 @@ import { VisuallyHidden } from "@/components/visually-hidden";
 import { Icon } from "@/icons";
 import { ColorItem } from "@/palettes";
 import { createColorId } from "@/utils/color-palette-utils";
+import { hexToHsva, hsvaToHex } from "@/utils/color-utils";
 
-//have to import dynamically to avoid @uiw/react-color dependency issues with the server
 const CustomColorPicker = dynamic(
   () =>
-    import("../../components/color-picker").then(
+    import("@/configurator/components/color-picker").then(
       (mod) => mod.CustomColorPicker
     ),
   { ssr: false }

app/configurator/components/color-picker.tsx

@@ -1,25 +1,29 @@
 import { Input } from "@mui/material";
 import { makeStyles } from "@mui/styles";
-import {
-  hexToHsva,
-  HsvaColor,
-  hsvaToHex,
-  Hue,
-  Saturation,
-} from "@uiw/react-color";
 import dynamic from "next/dynamic";
 import { ChangeEvent, useCallback, useEffect, useState } from "react";
 
 import { Flex } from "@/components/flex";
 import { Swatch } from "@/configurator/components/chart-controls/color-picker";
 import { ColorItem } from "@/palettes";
 import { createColorId } from "@/utils/color-palette-utils";
+import { hexToHsva, HsvaColor, hsvaToHex } from "@/utils/color-utils";
 
 const ChromePicker = dynamic(
   () => import("@uiw/react-color").then((mod) => ({ default: mod.Chrome })),
   { ssr: false }
 );
 
+const Hue = dynamic(
+  () => import("@uiw/react-color").then((mod) => ({ default: mod.Hue })),
+  { ssr: false }
+);
+
+const Saturation = dynamic(
+  () => import("@uiw/react-color").then((mod) => ({ default: mod.Saturation })),
+  { ssr: false }
+);
+
 const useColorPickerStyles = makeStyles({
   swatches: {
     display: "grid",

app/package.json

@@ -46,6 +46,7 @@
     "@mui/utils": "^5.17.1",
     "@next/bundle-analyzer": "^11.0.1",
     "@next/mdx": "^11.0.1",
+    "@open-iframe-resizer/core": "1.6.0",
     "@preconstruct/next": "^3.0.1",
     "@prisma/client": "^4.10.1",
     "@rdfjs/data-model": "^2.0.2",

app/pages/embed/[chartId].tsx

@@ -3,7 +3,7 @@ import "iframe-resizer/js/iframeResizer.contentWindow.js";
 import { GetServerSideProps } from "next";
 import ErrorPage from "next/error";
 import Head from "next/head";
-import Script from "next/script";
+import "@open-iframe-resizer/core";
 
 import { ChartPublished } from "@/components/chart-published";
 import { useEmbedQueryParams } from "@/components/embed-params";
@@ -66,13 +66,9 @@ const EmbedPage = (props: PageProps) => {
       <Head>
         <meta
           httpEquiv="Content-Security-Policy"
-          content="default-src 'self' 'unsafe-inline'; script-src 'unsafe-inline' 'self' https://cdn.jsdelivr.net/npm/@open-iframe-resizer/; style-src 'self' 'unsafe-inline';"
+          content="default-src 'self' 'unsafe-inline' data:; script-src 'unsafe-inline' 'unsafe-eval' 'self'; style-src 'self' 'unsafe-inline';"
         />
       </Head>
-      <Script
-        type="module"
-        src="https://cdn.jsdelivr.net/npm/@open-iframe-resizer/core@1.6.0/dist/index.js"
-      />
       <ConfiguratorStateProvider
         chartId="published"
         initialState={{ ...state, state: "PUBLISHED" }}