Merge pull request #1707 from visualize-admin/feat/improvements-2

feat: General improvements

CHANGELOG.md

@@ -11,6 +11,13 @@ You can also check the
 
 # Unreleased
 
+- Features
+  - It's now possible to label individual chart tabs
+  - Time is now displayed in addition to date in `Last edit` column in user
+    profile
+  - Free canvas layout option now includes a 3-column layout, depending on the
+    screen width
+  - Added a new popover login menu
 - Fixes
   - Map is now correctly centered after copying a chart or switching to layout
     mode
@@ -20,7 +27,10 @@ You can also check the
   - Renaming of charts through user profile now works correctly
   - Manually entering dates in date pickers works correctly again
   - Improved scrolling behavior in the chart tabs
+- Style
   - Aligned editor and layouting page layouts
+  - Removed dimension selection from modal when merging cubes
+  - Updated styles of confirmation dialog
 - Maintenance
   - Updated cube-hierarchy-query library to 3.0.0
 

app/components/chart-footnotes.tsx

@@ -7,6 +7,7 @@ import { useMemo } from "react";
 import { extractChartConfigComponentIris } from "@/charts/shared/chart-helpers";
 import { LegendItem } from "@/charts/shared/legend-color";
 import { ChartFiltersList } from "@/components/chart-filters-list";
+import { OpenMetadataPanelWrapper } from "@/components/metadata-panel";
 import {
   ChartConfig,
   ComboLineColumnConfig,
@@ -96,8 +97,16 @@ export const ChartFootnotes = ({
             components={components}
             cubeIri={metadata.iri}
           />
+          <Typography component="span" variant="caption" color="grey.600">
+            <OpenMetadataPanelWrapper>
+              <Trans id="dataset.footnotes.dataset">Dataset</Trans>
+            </OpenMetadataPanelWrapper>
+            <Trans id="typography.colon">: </Trans>
+            {metadata.title}
+          </Typography>
           {metadata.dateModified ? (
             <Typography component="span" variant="caption" color="grey.600">
+              {", "}
               <Trans id="dataset.footnotes.updated">Latest data update</Trans>
               <Trans id="typography.colon">: </Trans>
               {formatLocale.format("%d.%m.%Y %H:%M")(

app/components/chart-selection-tabs.tsx

@@ -544,6 +544,7 @@ export const useIconStyles = makeStyles<
     flexWrap: "nowrap",
     whiteSpace: "nowrap",
     minWidth: 0,
+    maxWidth: 400,
     overflow: "hidden",
     minHeight: "100%",
     position: "relative",

app/components/confirmation-dialog.tsx

@@ -9,7 +9,7 @@ import {
   DialogProps,
   DialogTitle,
 } from "@mui/material";
-import React, { useState } from "react";
+import { useState } from "react";
 
 const ConfirmationDialog = ({
   title,
@@ -27,42 +27,45 @@ const ConfirmationDialog = ({
   onClose: NonNullable<DialogProps["onClose"]>;
 }) => {
   const [loading, setLoading] = useState(false);
-
   return (
     <Dialog
-      // To prevent the click away listener from closing the dialog.
-      onClick={(e) => e.stopPropagation()}
       maxWidth="xs"
+      PaperProps={{ sx: { gap: 4, width: "100%", p: 6 } }}
       {...props}
     >
-      <DialogTitle sx={{ typography: "h3" }}>
-        {title ??
+      <DialogTitle sx={{ p: 0, typography: "h4" }}>
+        {title ||
           t({
             id: "login.profile.chart.confirmation.default",
             message: "Are you sure you want to perform this action?",
           })}
       </DialogTitle>
       {text && (
-        <DialogContent>
-          <DialogContentText>{text}</DialogContentText>
+        <DialogContent sx={{ p: 0 }}>
+          <DialogContentText sx={{ typography: "body2" }}>
+            {text}
+          </DialogContentText>
         </DialogContent>
       )}
       <DialogActions
         sx={{
+          p: 0,
           "& > .MuiButton-root": {
             justifyContent: "center",
+            minWidth: 76,
+            minHeight: "fit-content",
             pointerEvents: loading ? "none" : "auto",
           },
         }}
       >
         <Button
-          variant="text"
+          variant="outlined"
           onClick={() => props.onClose({}, "escapeKeyDown")}
         >
           <Trans id="no">No</Trans>
         </Button>
         <Button
-          variant="text"
+          variant="contained"
           onClick={async (e) => {
             e.stopPropagation();
             setLoading(true);

app/components/menu-action-item.tsx

@@ -18,7 +18,7 @@ const StyledMenuItem = styled(MenuItem)(({ theme, color }) => ({
 
 export type MenuActionProps = {
   label: string | NonNullable<React.ReactNode>;
-  iconName: IconName;
+  iconName?: IconName;
   priority?: number;
   stayOpen?: boolean;
   color?: "primary" | "error";
@@ -60,7 +60,7 @@ export const MenuActionItem = (
     label,
     color = "primary",
   }: {
-    icon: IconName;
+    icon?: IconName;
     label: string | NonNullable<React.ReactNode>;
     color?: MenuActionProps["color"];
   }) => {
@@ -105,7 +105,9 @@ export const MenuActionItem = (
             {...forwardedProps}
             sx={{ minHeight: 0 }}
           >
-            <Icon size={16} name={icon} style={{ marginTop: "0.25rem" }} />
+            {icon && (
+              <Icon size={16} name={icon} style={{ marginTop: "0.25rem" }} />
+            )}
             {label}
           </StyledMenuItem>
           <Divider sx={{ mx: 1, "&:last-of-type": { display: "none" } }} />

app/components/metadata-panel-store.tsx

@@ -9,14 +9,14 @@ type MetadataPanelSection = "general" | "data";
 type MetadataPanelState = {
   open: boolean;
   activeSection: MetadataPanelSection;
-  selectedDimension: Component | undefined;
+  selectedComponent: Component | undefined;
   actions: {
-    setOpen: (d: boolean) => void;
+    setOpen: (open: boolean) => void;
     toggle: () => void;
-    setActiveSection: (d: MetadataPanelSection) => void;
-    setSelectedDimension: (d: Component) => void;
-    clearSelectedDimension: () => void;
-    openDimension: (d: Component) => void;
+    setActiveSection: (activeSection: MetadataPanelSection) => void;
+    setSelectedComponent: (component: Component) => void;
+    clearSelectedComponent: () => void;
+    openComponent: (component: Component) => void;
     reset: () => void;
   };
 };
@@ -25,28 +25,32 @@ export const createMetadataPanelStore = () =>
   createStore<MetadataPanelState>((set, get) => ({
     open: false,
     activeSection: "general",
-    selectedDimension: undefined,
+    selectedComponent: undefined,
     actions: {
-      setOpen: (d: boolean) => {
-        set({ open: d });
+      setOpen: (open: boolean) => {
+        set({ open });
       },
       toggle: () => {
         set({ open: !get().open });
       },
-      setActiveSection: (d: MetadataPanelSection) => {
-        set({ activeSection: d });
+      setActiveSection: (section: MetadataPanelSection) => {
+        set({ activeSection: section });
       },
-      setSelectedDimension: (d: Component) => {
-        set({ selectedDimension: d });
+      setSelectedComponent: (component: Component) => {
+        set({ selectedComponent: component });
       },
-      clearSelectedDimension: () => {
-        set({ selectedDimension: undefined });
+      clearSelectedComponent: () => {
+        set({ selectedComponent: undefined });
       },
-      openDimension: (d: Component) => {
-        set({ open: true, activeSection: "data", selectedDimension: d });
+      openComponent: (component: Component) => {
+        set({
+          open: true,
+          activeSection: "data",
+          selectedComponent: component,
+        });
       },
       reset: () => {
-        set({ activeSection: "general", selectedDimension: undefined });
+        set({ activeSection: "general", selectedComponent: undefined });
       },
     },
   }));

app/components/metadata-panel.tsx

@@ -175,7 +175,7 @@ const useOtherStyles = makeStyles<Theme>((theme) => {
         borderBottom: "none",
       },
     },
-    openDimension: {
+    openComponent: {
       minHeight: 0,
       verticalAlign: "baseline",
       padding: 0,
@@ -211,18 +211,24 @@ export const OpenMetadataPanelWrapper = ({
   component,
 }: {
   children: ReactNode;
-  component: Component;
+  component?: Component;
 }) => {
   const classes = useOtherStyles();
-  const { openDimension } = useMetadataPanelStoreActions();
+  const { openComponent, setOpen, setActiveSection } =
+    useMetadataPanelStoreActions();
   const handleClick = useEvent((e: React.MouseEvent) => {
     e.stopPropagation();
-    openDimension(component);
+    if (component) {
+      openComponent(component);
+    } else {
+      setActiveSection("general");
+      setOpen(true);
+    }
   });
 
   return (
     <Button
-      className={classes.openDimension}
+      className={classes.openComponent}
       variant="text"
       size="small"
       onClick={handleClick}
@@ -473,9 +479,9 @@ const DataPanel = ({
   const locale = useLocale();
   const classes = useOtherStyles();
   const selectedDimension = useMetadataPanelStore(
-    (state) => state.selectedDimension
+    (state) => state.selectedComponent
   );
-  const { setSelectedDimension, clearSelectedDimension } =
+  const { setSelectedComponent, clearSelectedComponent } =
     useMetadataPanelStoreActions();
   const [inputValue, setInputValue] = useState("");
   const { options, groupedComponents } = useMemo(() => {
@@ -552,7 +558,7 @@ const DataPanel = ({
         {selectedDimension ? (
           <MotionBox key="dimension-selected" {...animationProps}>
             <BackButton
-              onClick={() => clearSelectedDimension()}
+              onClick={() => clearSelectedComponent()}
               sx={{ color: "primary.main" }}
             >
               <Trans id="button.back">Back</Trans>
@@ -574,7 +580,7 @@ const DataPanel = ({
             <Autocomplete
               className={classes.search}
               disablePortal
-              onChange={(_, v) => v && setSelectedDimension(v.value)}
+              onChange={(_, v) => v && setSelectedComponent(v.value)}
               inputValue={inputValue}
               onInputChange={(_, v) => setInputValue(v.toLowerCase())}
               options={sortedOptions}
@@ -686,7 +692,7 @@ const ComponentTabPanel = ({
   cubeIri?: string;
 }) => {
   const classes = useOtherStyles();
-  const { setSelectedDimension } = useMetadataPanelStoreActions();
+  const { setSelectedComponent } = useMetadataPanelStoreActions();
   const label = useMemo(
     () => getComponentLabel(component, { cubeIri }),
     [cubeIri, component]
@@ -745,9 +751,9 @@ const ComponentTabPanel = ({
 
   const handleClick = useCallback(() => {
     if (!expanded) {
-      setSelectedDimension(component);
+      setSelectedComponent(component);
     }
-  }, [expanded, component, setSelectedDimension]);
+  }, [expanded, component, setSelectedComponent]);
 
   return (
     <div>

app/components/react-grid.tsx

@@ -36,7 +36,7 @@ export const MIN_H = 1;
 /** In grid unit */
 const MAX_W = 4;
 
-export const COLS = { lg: 4, md: 2, sm: 1, xs: 1, xxs: 1 };
+export const COLS = { lg: 4, md: 3, sm: 2, xs: 1, xxs: 1 };
 const ROW_HEIGHT = 100;
 
 const useStyles = makeStyles((theme: Theme) => ({