From 98748d07f8f1b5340fea0478dcd40d02ecc54fe1 Mon Sep 17 00:00:00 2001 From: Patrick Browne Date: Mon, 27 May 2024 17:32:12 +0200 Subject: [PATCH 01/17] refactor: Extract menu action item --- app/components/menu-action-item.tsx | 128 ++++++++++++++++++++++ app/components/row-actions.tsx | 135 ++---------------------- app/login/components/profile-tables.tsx | 10 +- 3 files changed, 140 insertions(+), 133 deletions(-) create mode 100644 app/components/menu-action-item.tsx diff --git a/app/components/menu-action-item.tsx b/app/components/menu-action-item.tsx new file mode 100644 index 000000000..29d66e77d --- /dev/null +++ b/app/components/menu-action-item.tsx @@ -0,0 +1,128 @@ +import { Button, Link, MenuItem, styled } from "@mui/material"; +import NextLink from "next/link"; + +import ConfirmationDialog from "@/components/confirmation-dialog"; +import useDisclosure from "@/components/use-disclosure"; +import { Icon, IconName } from "@/icons"; + +export const StyledMenuItem = styled(MenuItem)(({ theme, color }) => ({ + display: "flex", + alignItems: "center", + gap: theme.spacing(2), + color: + color === "primary" || color === "error" + ? theme.palette[color].main + : theme.palette.primary.main, +})) as typeof MenuItem; + +export type MenuActionProps = { + label: string; + iconName: IconName; + priority?: number; + stayOpen?: boolean; + color?: "primary" | "error"; + onClick?: () => Promise | void; +} & ( + | { + type: "link"; + href: string; + } + | { + type: "button"; + requireConfirmation?: false | undefined; + onClick: () => Promise | void; + } + | { + type: "button"; + onClick: () => Promise | void; + requireConfirmation: true; + confirmationTitle?: string; + confirmationText?: string; + onDialogClose?: () => void; + onSuccess?: () => void; + } +); + +export const MenuActionItem = ( + props: MenuActionProps & { as: "menuitem" | "button" } +) => { + const { label, iconName } = props; + const { + isOpen: isConfirmationOpen, + open: openConfirmation, + close: closeConfirmation, + } = useDisclosure(); + + const Wrapper = ({ + icon, + label, + color = "primary", + }: { + icon: IconName; + label: string; + color?: MenuActionProps["color"]; + }) => { + const handleClick = () => { + if (props.onClick) { + if ("requireConfirmation" in props && props.requireConfirmation) { + openConfirmation(); + } else { + return props.onClick(); + } + } + }; + const forwardedProps = + props.type === "button" + ? { + onClick: handleClick, + } + : { + href: props.href, + }; + if (props.as === "button") { + return ( + + ); + } else { + return ( + + + {label} + + ); + } + }; + return ( + <> + {props.type === "link" ? ( + + + + ) : props.type === "button" ? ( + + ) : null} + {props.type === "button" && props.requireConfirmation && ( + + )} + + ); +}; diff --git a/app/components/row-actions.tsx b/app/components/row-actions.tsx index bd83f3ea2..118297520 100644 --- a/app/components/row-actions.tsx +++ b/app/components/row-actions.tsx @@ -1,135 +1,14 @@ -import { Box, Button, IconButton, Link, MenuItem, styled } from "@mui/material"; -import NextLink from "next/link"; -import React, { useRef } from "react"; +import { Box, IconButton } from "@mui/material"; +import { useRef } from "react"; -import ConfirmationDialog from "@/components/confirmation-dialog"; import useDisclosure from "@/components/use-disclosure"; -import { Icon, IconName } from "@/icons"; +import { Icon } from "@/icons"; import { ArrowMenu } from "./arrow-menu"; - -export type ActionProps = { - label: string; - iconName: IconName; - priority?: number; - stayOpen?: boolean; - color?: "primary" | "error"; - onClick?: () => Promise | void; -} & ( - | { - type: "link"; - href: string; - } - | { - type: "button"; - requireConfirmation?: false | undefined; - onClick: () => Promise | void; - } - | { - type: "button"; - onClick: () => Promise | void; - requireConfirmation: true; - confirmationTitle?: string; - confirmationText?: string; - onDialogClose?: () => void; - onSuccess?: () => void; - } -); +import { MenuActionItem, MenuActionProps } from "./menu-action-item"; type ActionsProps = { - actions: ActionProps[]; -}; - -const StyledMenuItem = styled(MenuItem)(({ theme, color }) => ({ - display: "flex", - alignItems: "center", - gap: theme.spacing(2), - color: - color === "primary" || color === "error" - ? theme.palette[color].main - : theme.palette.primary.main, -})) as typeof MenuItem; - -export const Action = (props: ActionProps & { as: "menuitem" | "button" }) => { - const { label, iconName } = props; - const { - isOpen: isConfirmationOpen, - open: openConfirmation, - close: closeConfirmation, - } = useDisclosure(); - - const Wrapper = ({ - icon, - label, - color = "primary", - }: { - icon: IconName; - label: string; - color?: ActionProps["color"]; - }) => { - const handleClick = () => { - if (props.onClick) { - if ("requireConfirmation" in props && props.requireConfirmation) { - openConfirmation(); - } else { - return props.onClick(); - } - } - }; - const forwardedProps = - props.type === "button" - ? { - onClick: handleClick, - } - : { - href: props.href, - }; - if (props.as === "button") { - return ( - - ); - } else { - return ( - - - {label} - - ); - } - }; - return ( - <> - {props.type === "link" ? ( - - - - ) : props.type === "button" ? ( - - ) : null} - {props.type === "button" && props.requireConfirmation && ( - - )} - - ); + actions: MenuActionProps[]; }; export const RowActions = (props: ActionsProps) => { @@ -141,7 +20,7 @@ export const RowActions = (props: ActionsProps) => { const [primaryAction, ...rest] = actions; return ( - { sx={{}} > {rest.map((props, i) => ( - { } = useDisclosure(); const actions = useMemo(() => { - const actions: (ActionProps | null)[] = [ + const actions: (MenuActionProps | null)[] = [ { type: "link", href: `/${locale}/v/${config.key}`, @@ -234,7 +234,7 @@ const ProfileVisualizationsRow = (props: ProfileVisualizationsRowProps) => { }), iconName: (updateConfigMut.status === "fetching" ? "loading" - : "unpublish") as ActionProps["iconName"], + : "unpublish") as MenuActionProps["iconName"], onClick: async () => { await updateConfigMut.mutate({ From 5cd11bf80008608f87c9dc7cf70f27a17fc83704 Mon Sep 17 00:00:00 2001 From: Patrick Browne Date: Wed, 29 May 2024 09:35:05 +0200 Subject: [PATCH 02/17] feat: By default the title & description section is expanded --- app/configurator/components/annotators.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/configurator/components/annotators.tsx b/app/configurator/components/annotators.tsx index d852376ea..276fba00a 100644 --- a/app/configurator/components/annotators.tsx +++ b/app/configurator/components/annotators.tsx @@ -152,7 +152,7 @@ export const LayoutAnnotator = () => { role="tablist" aria-labelledby="controls-design" collapse - defaultExpanded={false} + defaultExpanded > Date: Wed, 29 May 2024 09:37:27 +0200 Subject: [PATCH 03/17] feat: Add shadow on hover the drag icon --- app/components/chart-panel-layout-grid.tsx | 5 ++--- app/components/chart-panel.tsx | 19 ++++++++++++++++--- 2 files changed, 18 insertions(+), 6 deletions(-) diff --git a/app/components/chart-panel-layout-grid.tsx b/app/components/chart-panel-layout-grid.tsx index 3ff7eb55f..888195d39 100644 --- a/app/components/chart-panel-layout-grid.tsx +++ b/app/components/chart-panel-layout-grid.tsx @@ -1,4 +1,3 @@ -import clsx from "clsx"; import { fold } from "fp-ts/lib/Either"; import { pipe } from "fp-ts/lib/function"; import { useState } from "react"; @@ -6,7 +5,7 @@ import { Layouts } from "react-grid-layout"; import { ChartPanelLayoutTypeProps } from "@/components/chart-panel"; import ChartGridLayout from "@/components/react-grid"; -import { ReactGridLayoutsType, isLayouting } from "@/configurator"; +import { isLayouting, ReactGridLayoutsType } from "@/configurator"; import { useConfiguratorState } from "@/src"; import { assert } from "@/utils/assert"; @@ -66,7 +65,7 @@ const ChartPanelLayoutGrid = (props: ChartPanelLayoutTypeProps) => { return ( ({ flexDirection: "column", gap: theme.spacing(4), }, + chartWrapper: { + [`.${chartPanelLayoutGridClasses.root} &`]: { + transition: theme.transitions.create(["box-shadow"], { + duration: theme.transitions.duration.shortest, + }), + }, + [`.${chartPanelLayoutGridClasses.root} &:has(.${chartPanelLayoutGridClasses.dragHandle}:hover)`]: + { + boxShadow: theme.shadows[6], + }, + }, chartWrapperInner: { display: "contents", overflow: "hidden", @@ -33,7 +46,7 @@ export const ChartWrapper = forwardRef( const { children, editing, layoutType, ...rest } = props; const classes = useStyles(); return ( - + {(editing || layoutType === "tab") && } Date: Wed, 29 May 2024 10:59:10 +0200 Subject: [PATCH 04/17] refactor: Replace tiles by canvas --- app/components/chart-panel-layout-grid.tsx | 12 ++++---- app/components/chart-panel.tsx | 4 +-- app/components/chart-preview.tsx | 4 +-- app/config-types.ts | 2 +- app/configurator/components/field-i18n.ts | 10 +++---- .../components/layout-configurator.tsx | 4 +-- app/configurator/components/ui-helpers.ts | 6 ++-- app/icons/components/IcLayoutCanvas.tsx | 28 +++++++++++++++++++ app/icons/components/index.tsx | 4 ++- app/icons/svg/ic_layout_canvas.svg | 10 +++++++ app/locales/de/messages.po | 4 +-- app/locales/en/messages.po | 4 +-- app/locales/fr/messages.po | 4 +-- app/locales/it/messages.po | 4 +-- 14 files changed, 70 insertions(+), 30 deletions(-) create mode 100644 app/icons/components/IcLayoutCanvas.tsx create mode 100644 app/icons/svg/ic_layout_canvas.svg diff --git a/app/components/chart-panel-layout-grid.tsx b/app/components/chart-panel-layout-grid.tsx index 888195d39..41ba79398 100644 --- a/app/components/chart-panel-layout-grid.tsx +++ b/app/components/chart-panel-layout-grid.tsx @@ -29,13 +29,13 @@ const decodeLayouts = (layouts: Layouts) => { ); }; -const ChartPanelLayoutGrid = (props: ChartPanelLayoutTypeProps) => { +const ChartPanelLayoutCanvas = (props: ChartPanelLayoutTypeProps) => { const { chartConfigs } = props; const [config, dispatch] = useConfiguratorState(isLayouting); const [layouts, setLayouts] = useState(() => { assert( - config.layout.type === "dashboard" && config.layout.layout === "tiles", - "ChartPanelLayoutGrid should be rendered only for dashboard layout with tiles" + config.layout.type === "dashboard" && config.layout.layout === "canvas", + "ChartPanelLayoutGrid should be rendered only for dashboard layout with canvas" ); return config.layout.layouts; @@ -44,8 +44,8 @@ const ChartPanelLayoutGrid = (props: ChartPanelLayoutTypeProps) => { const handleChangeLayouts = (layouts: Layouts) => { const layout = config.layout; assert( - layout.type === "dashboard" && layout.layout === "tiles", - "ChartPanelLayoutGrid should be rendered only for dashboard layout with tiles" + layout.type === "dashboard" && layout.layout === "canvas", + "ChartPanelLayoutGrid should be rendered only for dashboard layout with canvas" ); const parsedLayouts = decodeLayouts(layouts); @@ -76,4 +76,4 @@ const ChartPanelLayoutGrid = (props: ChartPanelLayoutTypeProps) => { ); }; -export default ChartPanelLayoutGrid; +export default ChartPanelLayoutCanvas; diff --git a/app/components/chart-panel.tsx b/app/components/chart-panel.tsx index a67294047..3b9c12d34 100644 --- a/app/components/chart-panel.tsx +++ b/app/components/chart-panel.tsx @@ -3,7 +3,7 @@ import { makeStyles } from "@mui/styles"; import clsx from "clsx"; import React, { forwardRef, HTMLProps } from "react"; -import ChartPanelLayoutGrid, { +import ChartPanelLayoutCanvas, { chartPanelLayoutGridClasses, } from "@/components/chart-panel-layout-grid"; import { ChartPanelLayoutTall } from "@/components/chart-panel-layout-tall"; @@ -77,7 +77,7 @@ const Wrappers: Record< > = { vertical: ChartPanelLayoutVertical, tall: ChartPanelLayoutTall, - tiles: ChartPanelLayoutGrid, + canvas: ChartPanelLayoutCanvas, }; export const ChartPanelLayout = (props: ChartPanelLayoutProps) => { diff --git a/app/components/chart-preview.tsx b/app/components/chart-preview.tsx index 3a8a3e398..901892700 100644 --- a/app/components/chart-preview.tsx +++ b/app/components/chart-preview.tsx @@ -109,7 +109,7 @@ const DashboardPreview = (props: DashboardPreviewProps) => { const [over, setOver] = useState(null); const renderChart = useCallback( (chartConfig: ChartConfig) => { - return layoutType === "tiles" ? ( + return layoutType === "canvas" ? ( { [dataSource, editing, layoutType, state.layout.type] ); - if (layoutType === "tiles") { + if (layoutType === "canvas") { return ( { > - + @@ -75,7 +75,7 @@ const migrateLayout = ( newLayoutType: LayoutDashboard["layout"], chartConfigs: ChartConfig[] ): LayoutDashboard => { - if (newLayoutType === "tiles") { + if (newLayoutType === "canvas") { const generated = generateLayout({ count: chartConfigs.length, layout: "tiles", diff --git a/app/configurator/components/ui-helpers.ts b/app/configurator/components/ui-helpers.ts index f012a8384..51b5ae072 100644 --- a/app/configurator/components/ui-helpers.ts +++ b/app/configurator/components/ui-helpers.ts @@ -11,9 +11,9 @@ import { Component, Dimension, DimensionValue, + isJoinByComponent, Measure, Observation, - isJoinByComponent, } from "@/domain/data"; import { TimeUnit } from "@/graphql/query-hooks"; import { IconName } from "@/icons"; @@ -216,8 +216,8 @@ export const getIconName = (name: string): IconName => { return "layoutTall"; case "layoutVertical": return "layoutVertical"; - case "layoutTiles": - return "layoutTiles"; + case "layoutCanvas": + return "layoutCanvas"; default: return "table"; diff --git a/app/icons/components/IcLayoutCanvas.tsx b/app/icons/components/IcLayoutCanvas.tsx new file mode 100644 index 000000000..4308bcbe6 --- /dev/null +++ b/app/icons/components/IcLayoutCanvas.tsx @@ -0,0 +1,28 @@ +import * as React from "react"; + +function SvgIcLayoutCanvas(props: React.SVGProps) { + return ( + + + + + + + + + ); +} + +export default SvgIcLayoutCanvas; + diff --git a/app/icons/components/index.tsx b/app/icons/components/index.tsx index f65747ea7..7c8dbb2d1 100644 --- a/app/icons/components/index.tsx +++ b/app/icons/components/index.tsx @@ -26,10 +26,10 @@ import { default as ChartMultiLine } from "@/icons/components/IcChartMultiLine"; import { default as ChartPie } from "@/icons/components/IcChartPie"; import { default as ChartScatterplot } from "@/icons/components/IcChartScatterplot"; import { default as Check } from "@/icons/components/IcCheck"; -import { default as Checked } from "@/icons/components/IcChecked"; import { default as CheckboxActive } from "@/icons/components/IcCheckboxActive"; import { default as CheckboxDefault } from "@/icons/components/IcCheckboxDefault"; import { default as CheckboxIndeterminate } from "@/icons/components/IcCheckboxIndeterminate"; +import { default as Checked } from "@/icons/components/IcChecked"; import { default as ChevronDown } from "@/icons/components/IcChevronDown"; import { default as ChevronLeft } from "@/icons/components/IcChevronLeft"; import { default as ChevronRight } from "@/icons/components/IcChevronRight"; @@ -70,6 +70,7 @@ import { default as Indeterminate } from "@/icons/components/IcIndeterminate"; import { default as Info } from "@/icons/components/IcInfo"; import { default as InfoOutline } from "@/icons/components/IcInfoOutline"; import { default as Laptop } from "@/icons/components/IcLaptop"; +import { default as LayoutCanvas } from "@/icons/components/IcLayoutCanvas"; import { default as LayoutDashboard } from "@/icons/components/IcLayoutDashboard"; import { default as LayoutSingleURLs } from "@/icons/components/IcLayoutSingleURLs"; import { default as LayoutTab } from "@/icons/components/IcLayoutTab"; @@ -222,6 +223,7 @@ export const Icons = { info: Info, infoOutline: InfoOutline, laptop: Laptop, + layoutCanvas: LayoutCanvas, layoutDashboard: LayoutDashboard, layoutSingleURLs: LayoutSingleURLs, layoutTall: LayoutTall, diff --git a/app/icons/svg/ic_layout_canvas.svg b/app/icons/svg/ic_layout_canvas.svg new file mode 100644 index 000000000..6c8b3ddf3 --- /dev/null +++ b/app/icons/svg/ic_layout_canvas.svg @@ -0,0 +1,10 @@ + + + + + + + + \ No newline at end of file diff --git a/app/locales/de/messages.po b/app/locales/de/messages.po index c726d75b0..30ac2ab71 100644 --- a/app/locales/de/messages.po +++ b/app/locales/de/messages.po @@ -591,8 +591,8 @@ msgid "controls.layout.tall" msgstr "Hoch" #: app/configurator/components/field-i18n.ts -msgid "controls.layout.tiles" -msgstr "Kacheln" +msgid "controls.layout.canvas" +msgstr "Freies Layout" #: app/configurator/components/field-i18n.ts msgid "controls.layout.vertical" diff --git a/app/locales/en/messages.po b/app/locales/en/messages.po index ccc9ee715..25adc1e46 100644 --- a/app/locales/en/messages.po +++ b/app/locales/en/messages.po @@ -591,8 +591,8 @@ msgid "controls.layout.tall" msgstr "Tall" #: app/configurator/components/field-i18n.ts -msgid "controls.layout.tiles" -msgstr "Tiles" +msgid "controls.layout.canvas" +msgstr "Free canvas" #: app/configurator/components/field-i18n.ts msgid "controls.layout.vertical" diff --git a/app/locales/fr/messages.po b/app/locales/fr/messages.po index 86a32a066..3ce63eab9 100644 --- a/app/locales/fr/messages.po +++ b/app/locales/fr/messages.po @@ -591,8 +591,8 @@ msgid "controls.layout.tall" msgstr "Haut" #: app/configurator/components/field-i18n.ts -msgid "controls.layout.tiles" -msgstr "Carreaux" +msgid "controls.layout.canvas" +msgstr "Grille libre" #: app/configurator/components/field-i18n.ts msgid "controls.layout.vertical" diff --git a/app/locales/it/messages.po b/app/locales/it/messages.po index 3c06a8ace..af4a4bc2c 100644 --- a/app/locales/it/messages.po +++ b/app/locales/it/messages.po @@ -591,8 +591,8 @@ msgid "controls.layout.tall" msgstr "Alto" #: app/configurator/components/field-i18n.ts -msgid "controls.layout.tiles" -msgstr "Riquadri" +msgid "controls.layout.canvas" +msgstr "Layout personalizzabile" #: app/configurator/components/field-i18n.ts msgid "controls.layout.vertical" From e4c2c65a7bbccc140f265de657c93cde55215bc1 Mon Sep 17 00:00:00 2001 From: Patrick Browne Date: Tue, 28 May 2024 13:37:23 +0200 Subject: [PATCH 05/17] feat: Add action menu for dashboard layout --- app/components/chart-preview.tsx | 86 +++++++++++++++++++++---- app/components/chart-selection-tabs.tsx | 3 +- app/components/drag-handle.tsx | 3 - app/components/menu-action-item.tsx | 4 +- app/components/row-actions.tsx | 1 - app/configurator/configurator-state.tsx | 19 +++++- 6 files changed, 93 insertions(+), 23 deletions(-) diff --git a/app/components/chart-preview.tsx b/app/components/chart-preview.tsx index 901892700..a1274deb6 100644 --- a/app/components/chart-preview.tsx +++ b/app/components/chart-preview.tsx @@ -6,8 +6,8 @@ import { useDraggable, useDroppable, } from "@dnd-kit/core"; -import { Trans } from "@lingui/macro"; -import { Box } from "@mui/material"; +import { t, Trans } from "@lingui/macro"; +import { Box, IconButton, useEventCallback } from "@mui/material"; import Head from "next/head"; import React, { forwardRef, @@ -20,6 +20,7 @@ import React, { import { DataSetTable } from "@/browse/datatable"; import { ChartDataFilters } from "@/charts/shared/chart-data-filters"; import { LoadingStateProvider } from "@/charts/shared/chart-loading-state"; +import { ArrowMenu } from "@/components/arrow-menu"; import { ChartErrorBoundary } from "@/components/chart-error-boundary"; import { ChartFootnotes } from "@/components/chart-footnotes"; import { @@ -39,6 +40,7 @@ import { DragHandle } from "@/components/drag-handle"; import Flex from "@/components/flex"; import { Checkbox } from "@/components/form"; import { HintYellow } from "@/components/hint"; +import { MenuActionItem } from "@/components/menu-action-item"; import { MetadataPanel } from "@/components/metadata-panel"; import { BANNER_MARGIN_TOP } from "@/components/presence"; import { @@ -47,6 +49,7 @@ import { getChartConfig, hasChartConfigs, isConfiguring, + isLayouting, Layout, useConfiguratorState, } from "@/configurator"; @@ -56,6 +59,7 @@ import { useDataCubesMetadataQuery, } from "@/graphql/hooks"; import { DataCubePublicationStatus } from "@/graphql/resolver-types"; +import SvgIcMore from "@/icons/components/IcMore"; import { useLocale } from "@/locales/use-locale"; import { InteractiveFiltersChartProvider } from "@/stores/interactive-filters"; import { useTransitionStore } from "@/stores/transition"; @@ -206,19 +210,78 @@ const DashboardPreview = (props: DashboardPreviewProps) => { ); }; -type DndChartPreviewProps = ChartWrapperProps & { +type CommonChartPreviewProps = ChartWrapperProps & { chartKey: string; dataSource: DataSource; }; -type ReactGridChartPreviewProps = ChartWrapperProps & { - chartKey: string; - dataSource: DataSource; +const ChartPreviewChartMoreButton = ({ chartKey }: { chartKey: string }) => { + const [anchor, setAnchor] = useState(null); + const handleClose = useEventCallback(() => setAnchor(null)); + const [state, dispatch] = useConfiguratorState(isLayouting); + return ( + <> + setAnchor(ev.currentTarget)}> + + + + { + dispatch({ type: "CONFIGURE_CHART", value: { chartKey } }); + }} + iconName="edit" + label={Edit} + /> + {state.chartConfigs.length > 1 ? ( + { + dispatch({ type: "CHART_CONFIG_REMOVE", value: { chartKey } }); + }} + iconName="trash" + label={Delete} + /> + ) : null} + + + ); +}; + +const ChartTopRightControls = ({ chartKey }: { chartKey: string }) => { + return ( + <> + + + + ); }; const ReactGridChartPreview = forwardRef< HTMLDivElement, - ReactGridChartPreviewProps + CommonChartPreviewProps >((props, ref) => { const { children, chartKey, dataSource, ...rest } = props; return ( @@ -227,12 +290,7 @@ const ReactGridChartPreview = forwardRef< - } + actionElementSlot={} > {children} @@ -241,7 +299,7 @@ const ReactGridChartPreview = forwardRef< ); }); -const DndChartPreview = (props: DndChartPreviewProps) => { +const DndChartPreview = (props: CommonChartPreviewProps) => { const { children, chartKey, dataSource, ...rest } = props; const theme = useTheme(); const { diff --git a/app/components/chart-selection-tabs.tsx b/app/components/chart-selection-tabs.tsx index a8f9af431..535fc88b8 100644 --- a/app/components/chart-selection-tabs.tsx +++ b/app/components/chart-selection-tabs.tsx @@ -742,8 +742,7 @@ export const useIconStyles = makeStyles< dragIconWrapper: { width: 24, height: 24, - color: (d) => - d.dragging ? palette.secondary.active : palette.secondary.disabled, + color: palette.grey[500], cursor: "grab", "&:hover": { diff --git a/app/components/drag-handle.tsx b/app/components/drag-handle.tsx index 13961047e..fbf20b788 100644 --- a/app/components/drag-handle.tsx +++ b/app/components/drag-handle.tsx @@ -20,9 +20,6 @@ export const DragHandle = forwardRef( ref={ref} {...rest} className={clsx(classes.dragIconWrapper, props.className)} - sx={{ - color: dragging ? "secondary.active" : "secondary.disabled", - }} > diff --git a/app/components/menu-action-item.tsx b/app/components/menu-action-item.tsx index 29d66e77d..d0db8a451 100644 --- a/app/components/menu-action-item.tsx +++ b/app/components/menu-action-item.tsx @@ -16,7 +16,7 @@ export const StyledMenuItem = styled(MenuItem)(({ theme, color }) => ({ })) as typeof MenuItem; export type MenuActionProps = { - label: string; + label: string | NonNullable; iconName: IconName; priority?: number; stayOpen?: boolean; @@ -59,7 +59,7 @@ export const MenuActionItem = ( color = "primary", }: { icon: IconName; - label: string; + label: string | NonNullable; color?: MenuActionProps["color"]; }) => { const handleClick = () => { diff --git a/app/components/row-actions.tsx b/app/components/row-actions.tsx index 118297520..353f2d416 100644 --- a/app/components/row-actions.tsx +++ b/app/components/row-actions.tsx @@ -34,7 +34,6 @@ export const RowActions = (props: ActionsProps) => { anchorEl={buttonRef.current} anchorOrigin={{ vertical: "bottom", horizontal: "center" }} transformOrigin={{ horizontal: "center", vertical: "top" }} - sx={{}} > {rest.map((props, i) => ( = ( } break; case "CHART_CONFIG_REMOVE": - if (isConfiguring(draft)) { + if (isConfiguring(draft) || isLayouting(draft) || isPublishing(draft)) { const index = draft.chartConfigs.findIndex( (d) => d.key === action.value.chartKey ); @@ -1523,6 +1529,11 @@ const reducer_: Reducer = ( if (removedKey === draft.activeChartKey) { draft.activeChartKey = draft.chartConfigs[Math.max(index - 1, 0)].key; } + } else { + console.warn( + "Ignoring CHART_CONFIG_REMOVE as state is incompatible with action" + ); + console.log(current(draft)); } return draft; @@ -1581,7 +1592,13 @@ const reducer_: Reducer = ( Object ); } + return draft; + case "CONFIGURE_CHART": + const newDraft = transitionStepPrevious(draft, "CONFIGURING_CHART"); + Object.assign(draft, newDraft); + assert(isConfiguring(draft), "Should be configuring after edit"); + draft.activeChartKey = action.value.chartKey; return draft; default: From cdaa314f561b9085ad038a96a15755b3e6dad28e Mon Sep 17 00:00:00 2001 From: Patrick Browne Date: Wed, 29 May 2024 11:38:18 +0200 Subject: [PATCH 06/17] feat: Add chart action menu for vertical & tall layout --- app/components/chart-preview.tsx | 26 +++++++++++++++++--------- app/components/drag-handle.tsx | 5 +++-- 2 files changed, 20 insertions(+), 11 deletions(-) diff --git a/app/components/chart-preview.tsx b/app/components/chart-preview.tsx index a1274deb6..82732c1a8 100644 --- a/app/components/chart-preview.tsx +++ b/app/components/chart-preview.tsx @@ -36,7 +36,7 @@ import { import { useChartStyles } from "@/components/chart-utils"; import { ChartWithFilters } from "@/components/chart-with-filters"; import DebugPanel from "@/components/debug-panel"; -import { DragHandle } from "@/components/drag-handle"; +import { DragHandle, DragHandleProps } from "@/components/drag-handle"; import Flex from "@/components/flex"; import { Checkbox } from "@/components/form"; import { HintYellow } from "@/components/hint"; @@ -49,7 +49,6 @@ import { getChartConfig, hasChartConfigs, isConfiguring, - isLayouting, Layout, useConfiguratorState, } from "@/configurator"; @@ -218,7 +217,7 @@ type CommonChartPreviewProps = ChartWrapperProps & { const ChartPreviewChartMoreButton = ({ chartKey }: { chartKey: string }) => { const [anchor, setAnchor] = useState(null); const handleClose = useEventCallback(() => setAnchor(null)); - const [state, dispatch] = useConfiguratorState(isLayouting); + const [state, dispatch] = useConfiguratorState(hasChartConfigs); return ( <> setAnchor(ev.currentTarget)}> @@ -266,14 +265,20 @@ const ChartPreviewChartMoreButton = ({ chartKey }: { chartKey: string }) => { ); }; -const ChartTopRightControls = ({ chartKey }: { chartKey: string }) => { +const ChartTopRightControls = ({ + chartKey, + dragHandleProps, +}: { + chartKey: string; + dragHandleProps?: DragHandleProps; +}) => { return ( <> ); @@ -343,10 +348,13 @@ const DndChartPreview = (props: CommonChartPreviewProps) => { dataSource={dataSource} chartKey={chartKey} actionElementSlot={ - } /> diff --git a/app/components/drag-handle.tsx b/app/components/drag-handle.tsx index fbf20b788..e4da0cd1f 100644 --- a/app/components/drag-handle.tsx +++ b/app/components/drag-handle.tsx @@ -1,12 +1,13 @@ import { Box, BoxProps } from "@mui/material"; import clsx from "clsx"; -import { forwardRef } from "react"; +import { forwardRef, Ref } from "react"; import { Icon } from "@/icons"; import { useIconStyles } from "./chart-selection-tabs"; -type DragHandleProps = BoxProps & { +export type DragHandleProps = Omit & { + ref?: Ref; dragging?: boolean; }; From def6d5853ba2f4f8cde5564502733b98cc1bbae3 Mon Sep 17 00:00:00 2001 From: Patrick Browne Date: Wed, 29 May 2024 11:41:45 +0200 Subject: [PATCH 07/17] feat: Add more button for separate URLs --- app/components/chart-preview.tsx | 41 ++++++++++++++++++-------------- 1 file changed, 23 insertions(+), 18 deletions(-) diff --git a/app/components/chart-preview.tsx b/app/components/chart-preview.tsx index 82732c1a8..7ea58997e 100644 --- a/app/components/chart-preview.tsx +++ b/app/components/chart-preview.tsx @@ -235,6 +235,7 @@ const ChartPreviewChartMoreButton = ({ chartKey }: { chartKey: string }) => { as="menuitem" onClick={() => { dispatch({ type: "CONFIGURE_CHART", value: { chartKey } }); + handleClose(); }} iconName="edit" label={Edit} @@ -255,6 +256,7 @@ const ChartPreviewChartMoreButton = ({ chartKey }: { chartKey: string }) => { })} onClick={() => { dispatch({ type: "CHART_CONFIG_REMOVE", value: { chartKey } }); + handleClose(); }} iconName="trash" label={Delete} @@ -383,24 +385,27 @@ const SingleURLsPreview = (props: SingleURLsPreviewProps) => { dataSource={dataSource} chartKey={chartConfig.key} actionElementSlot={ - { - dispatch({ - type: "LAYOUT_CHANGED", - value: { - ...layout, - publishableChartKeys: checked - ? keys.filter((k) => k !== key) - : state.chartConfigs - .map((c) => c.key) - .filter((k) => keys.includes(k) || k === key), - }, - }); - }} - label="" - /> + <> + + { + dispatch({ + type: "LAYOUT_CHANGED", + value: { + ...layout, + publishableChartKeys: checked + ? keys.filter((k) => k !== key) + : state.chartConfigs + .map((c) => c.key) + .filter((k) => keys.includes(k) || k === key), + }, + }); + }} + label="" + /> + } /> From 31fde77b96199d18926ea7b1cbddde16d6cd5173 Mon Sep 17 00:00:00 2001 From: Patrick Browne Date: Wed, 29 May 2024 11:56:44 +0200 Subject: [PATCH 08/17] refactor: Detangle add & edit menus --- app/components/chart-selection-tabs.tsx | 164 +++++++++++++----------- 1 file changed, 90 insertions(+), 74 deletions(-) diff --git a/app/components/chart-selection-tabs.tsx b/app/components/chart-selection-tabs.tsx index 535fc88b8..346d0e0d3 100644 --- a/app/components/chart-selection-tabs.tsx +++ b/app/components/chart-selection-tabs.tsx @@ -189,75 +189,91 @@ const TabsEditable = (props: TabsEditableProps) => { }} /> - - {tabsState.popoverType === "add" ? ( - <> - } - gap="0.5rem" - direction="column" - > - - - - Add chart based on the same dataset - - - - - - - - Add chart based on a different dataset - - - - + {tabsState.popoverType === "add" ? ( + + } + gap="0.5rem" + direction="column" + > + + + + Add chart based on the same dataset + + + - - ) : ( + + + + Add chart based on a different dataset + + + + + + + ) : null} + + {tabsState.popoverType === "edit" ? ( + )} - )} - + + ) : null} ); }; @@ -664,7 +680,7 @@ const TabsInner = (props: TabsInnerProps) => { draggable={draggable} active={d.active} dragging={snapshot.isDragging} - onEditClick={(e) => { + onChevronDownClick={(e) => { onChartEdit?.(e, d.key); }} onSwitchClick={() => { @@ -758,7 +774,7 @@ type TabContentProps = { draggable?: boolean; active?: boolean; dragging?: boolean; - onEditClick?: ( + onChevronDownClick?: ( e: React.MouseEvent, activeChartKey: string ) => void; @@ -773,7 +789,7 @@ const TabContent = (props: TabContentProps) => { draggable, active, dragging, - onEditClick, + onChevronDownClick, onSwitchClick, } = props; const classes = useIconStyles({ active, dragging }); @@ -792,7 +808,7 @@ const TabContent = (props: TabContentProps) => { - - {state.chartConfigs.length > 1 && ( - - )} - - + } + color="error" + requireConfirmation + confirmationTitle={t({ + id: "chat-preview.delete.title", + message: "Delete chart?", + })} + confirmationText={t({ + id: "chat-preview.delete.confirmation", + message: "Are you sure you want to delete this chart?", + })} + onClick={() => { + dispatch({ + type: "CHART_CONFIG_REMOVE", + value: { + chartKey: tabsState.activeChartKey, + }, + }); + handleClose(); + }} + /> + )} + ) : null} ); diff --git a/app/icons/components/IcDuplicate.tsx b/app/icons/components/IcDuplicate.tsx new file mode 100644 index 000000000..e7516bf70 --- /dev/null +++ b/app/icons/components/IcDuplicate.tsx @@ -0,0 +1,29 @@ +import * as React from "react"; + +function SvgIcDuplicate(props: React.SVGProps) { + return ( + + + + + ); +} + +export default SvgIcDuplicate; + diff --git a/app/icons/components/index.tsx b/app/icons/components/index.tsx index 7c8dbb2d1..dc2a9c40b 100644 --- a/app/icons/components/index.tsx +++ b/app/icons/components/index.tsx @@ -50,6 +50,7 @@ import { default as Download } from "@/icons/components/IcDownload"; import { default as Drag } from "@/icons/components/IcDrag"; import { default as DragHandle } from "@/icons/components/IcDragHandle"; import { default as Dragndrop } from "@/icons/components/IcDragndrop"; +import { default as Duplicate } from "@/icons/components/IcDuplicate"; import { default as Edit } from "@/icons/components/IcEdit"; import { default as Embed } from "@/icons/components/IcEmbed"; import { default as Excel } from "@/icons/components/IcExcel"; @@ -203,6 +204,7 @@ export const Icons = { dragHandle: DragHandle, drag: Drag, dragndrop: Dragndrop, + duplicate: Duplicate, edit: Edit, embed: Embed, excel: Excel, diff --git a/app/icons/svg/ic_duplicate.svg b/app/icons/svg/ic_duplicate.svg new file mode 100644 index 000000000..0c87b5de2 --- /dev/null +++ b/app/icons/svg/ic_duplicate.svg @@ -0,0 +1,6 @@ + + + + \ No newline at end of file From 40344d34a07f5c21bcbb19bbd215d07817a556ce Mon Sep 17 00:00:00 2001 From: Patrick Browne Date: Wed, 29 May 2024 12:36:42 +0200 Subject: [PATCH 10/17] docs: Update changelog --- CHANGELOG.md | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index af6712da5..90c6f61d7 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,17 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 You can also check the [release page](https://github.com/visualize-admin/visualization-tool/releases) +# Unreleased + +- Features + - Add the "Free canvas" layout, allowing users to freely resize and move charts for dashboards + - Ability to start a chart from another dataset than the current one + +# [4.5.1] - 2024-05-21 + +- Fixes + - If there is an error on a chart contained in a dashboard, the layout is not be broken + # [4.5.0] - 2024-05-21 - Features From 29d1a38771d1c708a732382fa990055bcd93ca92 Mon Sep 17 00:00:00 2001 From: Patrick Browne Date: Wed, 29 May 2024 14:32:30 +0200 Subject: [PATCH 11/17] feat: Add translations --- app/components/chart-preview.tsx | 8 ++++---- app/locales/de/messages.po | 31 +++++++++++++++++++++++++++---- app/locales/en/messages.po | 32 ++++++++++++++++++++++++++++---- app/locales/fr/messages.po | 32 ++++++++++++++++++++++++++++---- app/locales/it/messages.po | 31 +++++++++++++++++++++++++++---- 5 files changed, 114 insertions(+), 20 deletions(-) diff --git a/app/components/chart-preview.tsx b/app/components/chart-preview.tsx index 7ea58997e..8f8198c9b 100644 --- a/app/components/chart-preview.tsx +++ b/app/components/chart-preview.tsx @@ -238,7 +238,7 @@ const ChartPreviewChartMoreButton = ({ chartKey }: { chartKey: string }) => { handleClose(); }} iconName="edit" - label={Edit} + label={Edit} /> {state.chartConfigs.length > 1 ? ( { color="error" requireConfirmation confirmationTitle={t({ - id: "chat-preview.delete.title", + id: "chart-controls.delete.title", message: "Delete chart?", })} confirmationText={t({ - id: "chat-preview.delete.confirmation", + id: "chart-controls.delete.confirmation", message: "Are you sure you want to delete this chart?", })} onClick={() => { @@ -259,7 +259,7 @@ const ChartPreviewChartMoreButton = ({ chartKey }: { chartKey: string }) => { handleClose(); }} iconName="trash" - label={Delete} + label={Delete} /> ) : null} diff --git a/app/locales/de/messages.po b/app/locales/de/messages.po index 30ac2ab71..3164150ec 100644 --- a/app/locales/de/messages.po +++ b/app/locales/de/messages.po @@ -151,6 +151,22 @@ msgstr "Diese Visualisierung aktualisieren" msgid "button.update.warning" msgstr "Denken Sie daran, dass sich die Aktualisierung dieser Visualisierung auf alle Stellen auswirkt, an denen sie bereits eingebettet ist!" +#: app/components/chart-preview.tsx +msgid "chart-controls.delete" +msgstr "Löschen" + +#: app/components/chart-preview.tsx +msgid "chart-controls.delete.confirmation" +msgstr "Sind Sie sicher, dass Sie dieses Diagramm löschen möchten?" + +#: app/components/chart-preview.tsx +msgid "chart-controls.delete.title" +msgstr "Diagramm löschen?" + +#: app/components/chart-preview.tsx +msgid "chart-controls.edit" +msgstr "Bearbeiten" + #: app/components/chart-selection-tabs.tsx msgid "chart-selection-tabs.add-chart-different-dataset.button" msgstr "Datensatz auswählen" @@ -213,6 +229,13 @@ msgstr "Kompakte Ansicht" msgid "chart.table.number.of.lines" msgstr "Anzahl Zeilen" +msgid "chat-preview.delete.confirmation" +msgstr "Sind Sie sicher, dass Sie dieses Diagramm löschen möchten?" + +#: app/components/chart-selection-tabs.tsx +msgid "chat-preview.delete.title" +msgstr "Diagramm löschen?" + #: app/configurator/table/table-chart-options.tsx msgid "columnStyle.bar" msgstr "Säulendiagramm" @@ -570,6 +593,10 @@ msgstr "Deutsch" msgid "controls.language.italian" msgstr "Italienisch" +#: app/configurator/components/field-i18n.ts +msgid "controls.layout.canvas" +msgstr "Freies Layout" + #: app/configurator/components/field-i18n.ts msgid "controls.layout.dashboard" msgstr "Dashboard" @@ -590,10 +617,6 @@ msgstr "Tab Layout" msgid "controls.layout.tall" msgstr "Hoch" -#: app/configurator/components/field-i18n.ts -msgid "controls.layout.canvas" -msgstr "Freies Layout" - #: app/configurator/components/field-i18n.ts msgid "controls.layout.vertical" msgstr "Vertikal" diff --git a/app/locales/en/messages.po b/app/locales/en/messages.po index 25adc1e46..6cd66a771 100644 --- a/app/locales/en/messages.po +++ b/app/locales/en/messages.po @@ -151,6 +151,22 @@ msgstr "Update this visualization" msgid "button.update.warning" msgstr "Keep in mind that updating this visualization will affect all the places where it might be already embedded!" +#: app/components/chart-preview.tsx +msgid "chart-controls.delete" +msgstr "Delete" + +#: app/components/chart-preview.tsx +msgid "chart-controls.delete.confirmation" +msgstr "Are you sure you want to delete this chart?" + +#: app/components/chart-preview.tsx +msgid "chart-controls.delete.title" +msgstr "Delete chart?" + +#: app/components/chart-preview.tsx +msgid "chart-controls.edit" +msgstr "Edit" + #: app/components/chart-selection-tabs.tsx msgid "chart-selection-tabs.add-chart-different-dataset.button" msgstr "Select dataset" @@ -213,6 +229,14 @@ msgstr "Compact view" msgid "chart.table.number.of.lines" msgstr "Total number of lines:" +#: app/components/chart-selection-tabs.tsx +msgid "chat-preview.delete.confirmation" +msgstr "Are you sure you want to delete this chart?" + +#: app/components/chart-selection-tabs.tsx +msgid "chat-preview.delete.title" +msgstr "Delete chart?" + #: app/configurator/table/table-chart-options.tsx msgid "columnStyle.bar" msgstr "Bar Chart" @@ -570,6 +594,10 @@ msgstr "German" msgid "controls.language.italian" msgstr "Italian" +#: app/configurator/components/field-i18n.ts +msgid "controls.layout.canvas" +msgstr "Free canvas" + #: app/configurator/components/field-i18n.ts msgid "controls.layout.dashboard" msgstr "Dashboard" @@ -590,10 +618,6 @@ msgstr "Tab Layout" msgid "controls.layout.tall" msgstr "Tall" -#: app/configurator/components/field-i18n.ts -msgid "controls.layout.canvas" -msgstr "Free canvas" - #: app/configurator/components/field-i18n.ts msgid "controls.layout.vertical" msgstr "Vertical" diff --git a/app/locales/fr/messages.po b/app/locales/fr/messages.po index 3ce63eab9..c72595ab7 100644 --- a/app/locales/fr/messages.po +++ b/app/locales/fr/messages.po @@ -151,6 +151,22 @@ msgstr "Actualiser cette visualisation" msgid "button.update.warning" msgstr "Gardez à l'esprit que la mise à jour de cette visualisation affectera tous les endroits où elle est déjà intégrée !" +#: app/components/chart-preview.tsx +msgid "chart-controls.delete" +msgstr "Supprimer" + +#: app/components/chart-preview.tsx +msgid "chart-controls.delete.confirmation" +msgstr "Êtes-vous sûr de vouloir supprimer ce graphique ?" + +#: app/components/chart-preview.tsx +msgid "chart-controls.delete.title" +msgstr "Supprimer le graphique ?" + +#: app/components/chart-preview.tsx +msgid "chart-controls.edit" +msgstr "Modifier" + #: app/components/chart-selection-tabs.tsx msgid "chart-selection-tabs.add-chart-different-dataset.button" msgstr "Sélectionner un ensemble de données" @@ -213,6 +229,14 @@ msgstr "Vue compacte" msgid "chart.table.number.of.lines" msgstr "Nombre total de lignes:" +#: app/components/chart-selection-tabs.tsx +msgid "chat-preview.delete.confirmation" +msgstr "" + +#: app/components/chart-selection-tabs.tsx +msgid "chat-preview.delete.title" +msgstr "" + #: app/configurator/table/table-chart-options.tsx msgid "columnStyle.bar" msgstr "Barres" @@ -570,6 +594,10 @@ msgstr "Allemand" msgid "controls.language.italian" msgstr "Italien" +#: app/configurator/components/field-i18n.ts +msgid "controls.layout.canvas" +msgstr "Mise en page libre" + #: app/configurator/components/field-i18n.ts msgid "controls.layout.dashboard" msgstr "Dashboard" @@ -590,10 +618,6 @@ msgstr "Tab Layout" msgid "controls.layout.tall" msgstr "Haut" -#: app/configurator/components/field-i18n.ts -msgid "controls.layout.canvas" -msgstr "Grille libre" - #: app/configurator/components/field-i18n.ts msgid "controls.layout.vertical" msgstr "Vertical" diff --git a/app/locales/it/messages.po b/app/locales/it/messages.po index af4a4bc2c..35c3815b4 100644 --- a/app/locales/it/messages.po +++ b/app/locales/it/messages.po @@ -151,6 +151,22 @@ msgstr "Aggiornare questa visualizzazione" msgid "button.update.warning" msgstr "Tenete presente che l'aggiornamento di questa visualizzazione avrà effetto su tutti i luoghi in cui potrebbe essere già incorporata!" +#: app/components/chart-preview.tsx +msgid "chart-controls.delete" +msgstr "Elimina" + +#: app/components/chart-preview.tsx +msgid "chart-controls.delete.confirmation" +msgstr "Sei sicuro di voler eliminare questo grafico?" + +#: app/components/chart-preview.tsx +msgid "chart-controls.delete.title" +msgstr "Eliminare il grafico?" + +#: app/components/chart-preview.tsx +msgid "chart-controls.edit" +msgstr "Modifica" + #: app/components/chart-selection-tabs.tsx msgid "chart-selection-tabs.add-chart-different-dataset.button" msgstr "Seleziona il set di dati" @@ -213,6 +229,13 @@ msgstr "Vista compatta" msgid "chart.table.number.of.lines" msgstr "Numero totale di linee:" +msgid "chat-preview.delete.confirmation" +msgstr "Sei sicuro di voler eliminare questo grafico?" + +#: app/components/chart-selection-tabs.tsx +msgid "chat-preview.delete.title" +msgstr "Eliminare il grafico?" + #: app/configurator/table/table-chart-options.tsx msgid "columnStyle.bar" msgstr "Grafico a barre" @@ -570,6 +593,10 @@ msgstr "Tedesco" msgid "controls.language.italian" msgstr "Italiano" +#: app/configurator/components/field-i18n.ts +msgid "controls.layout.canvas" +msgstr "Layout libero" + #: app/configurator/components/field-i18n.ts msgid "controls.layout.dashboard" msgstr "Dashboard" @@ -590,10 +617,6 @@ msgstr "Tab Layout" msgid "controls.layout.tall" msgstr "Alto" -#: app/configurator/components/field-i18n.ts -msgid "controls.layout.canvas" -msgstr "Layout personalizzabile" - #: app/configurator/components/field-i18n.ts msgid "controls.layout.vertical" msgstr "Verticale" From 4d09c0a23e5fab4d6d15ecff68eaa48a5cbdad00 Mon Sep 17 00:00:00 2001 From: Patrick Browne Date: Wed, 29 May 2024 14:48:02 +0200 Subject: [PATCH 12/17] fix: Reset dialog state when closing it --- .../components/add-new-dataset-panel.tsx | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/app/configurator/components/add-new-dataset-panel.tsx b/app/configurator/components/add-new-dataset-panel.tsx index 8da09d158..8e00b125a 100644 --- a/app/configurator/components/add-new-dataset-panel.tsx +++ b/app/configurator/components/add-new-dataset-panel.tsx @@ -78,12 +78,20 @@ export const AddNewDatasetPanel = () => { const [dataSetIri, setDataSetIri] = useState(""); const addNewDataset = useAddChartConfigBasedOnNewDataset(); + const handleClose = useEventCallback(() => { + close(); + setTimeout(() => { + // Give time to the drawer to close before resetting the dataset IRI + setDataSetIri(""); + }, 500); + }); + return ( { }, }} > - close()} /> + handleClose()} /> From f06ad5d38ba9465463e1522d220a9991d71a0408 Mon Sep 17 00:00:00 2001 From: Patrick Browne Date: Wed, 29 May 2024 14:50:17 +0200 Subject: [PATCH 13/17] feat: Data sources is collapsed by default fix https://github.com/visualize-admin/visualization-tool/issues/1542 --- app/configurator/components/dataset-control-section.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/configurator/components/dataset-control-section.tsx b/app/configurator/components/dataset-control-section.tsx index 85a9c6023..125d7fc5c 100644 --- a/app/configurator/components/dataset-control-section.tsx +++ b/app/configurator/components/dataset-control-section.tsx @@ -198,7 +198,7 @@ export const DatasetsControlSection = () => { }; return ( - + Data Sources{" "} Date: Wed, 29 May 2024 16:58:17 +0200 Subject: [PATCH 14/17] refactor: Remove console log --- app/components/chart-selection-tabs.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/app/components/chart-selection-tabs.tsx b/app/components/chart-selection-tabs.tsx index 333eb99c6..6e38105b6 100644 --- a/app/components/chart-selection-tabs.tsx +++ b/app/components/chart-selection-tabs.tsx @@ -177,7 +177,6 @@ const TabsEditable = (props: TabsEditableProps) => { }} onChartEdit={(e, key) => { setPopoverAnchorEl(e.currentTarget); - console.log("e", e.currentTarget); setTabsState({ popoverOpen: true, popoverType: "edit", From bacc5847ec76e1bb4bb47656a81fdecb1ee03987 Mon Sep 17 00:00:00 2001 From: Patrick Browne Date: Wed, 29 May 2024 16:58:28 +0200 Subject: [PATCH 15/17] refactor: Cannot remove chart config when publishing draft --- app/configurator/configurator-state.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/configurator/configurator-state.tsx b/app/configurator/configurator-state.tsx index 4d6b4d805..177781032 100644 --- a/app/configurator/configurator-state.tsx +++ b/app/configurator/configurator-state.tsx @@ -1519,7 +1519,7 @@ const reducer_: Reducer = ( } break; case "CHART_CONFIG_REMOVE": - if (isConfiguring(draft) || isLayouting(draft) || isPublishing(draft)) { + if (isConfiguring(draft) || isLayouting(draft)) { const index = draft.chartConfigs.findIndex( (d) => d.key === action.value.chartKey ); From 958e65f5eda4a09f203a9dfc280573287b993d40 Mon Sep 17 00:00:00 2001 From: Patrick Browne Date: Wed, 29 May 2024 17:04:36 +0200 Subject: [PATCH 16/17] refactor: Do not assign to draft, just return the newDraft --- app/configurator/configurator-state.tsx | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/app/configurator/configurator-state.tsx b/app/configurator/configurator-state.tsx index 177781032..85ce8b115 100644 --- a/app/configurator/configurator-state.tsx +++ b/app/configurator/configurator-state.tsx @@ -1596,10 +1596,9 @@ const reducer_: Reducer = ( case "CONFIGURE_CHART": const newDraft = transitionStepPrevious(draft, "CONFIGURING_CHART"); - Object.assign(draft, newDraft); - assert(isConfiguring(draft), "Should be configuring after edit"); - draft.activeChartKey = action.value.chartKey; - return draft; + assert(isConfiguring(newDraft), "Should be configuring after edit"); + newDraft.activeChartKey = action.value.chartKey; + return newDraft; default: throw unreachableError(action); From 4c43c463309e7e647dc001325341c4af17a7dd89 Mon Sep 17 00:00:00 2001 From: Patrick Browne Date: Wed, 29 May 2024 17:11:35 +0200 Subject: [PATCH 17/17] feat: Use onExited to reset the dataset iri --- app/configurator/components/add-new-dataset-panel.tsx | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/app/configurator/components/add-new-dataset-panel.tsx b/app/configurator/components/add-new-dataset-panel.tsx index 8e00b125a..7bfdedbf9 100644 --- a/app/configurator/components/add-new-dataset-panel.tsx +++ b/app/configurator/components/add-new-dataset-panel.tsx @@ -80,10 +80,10 @@ export const AddNewDatasetPanel = () => { const handleClose = useEventCallback(() => { close(); - setTimeout(() => { - // Give time to the drawer to close before resetting the dataset IRI - setDataSetIri(""); - }, 500); + }); + + const handleExited = useEventCallback(() => { + setDataSetIri(""); }); return ( @@ -92,6 +92,9 @@ export const AddNewDatasetPanel = () => { open={isOpen} variant="temporary" onClose={handleClose} + SlideProps={{ + onExited: handleExited, + }} PaperProps={{ sx: { width: "1400px",