Feat/improve chart tab titles

app/components/chart-selection-tabs.tsx

@@ -7,8 +7,7 @@ import {
   Stack,
   tabClasses,
   Theme,
-  Tooltip,
-  Typography,
+  Typography
 } from "@mui/material";
 import { makeStyles } from "@mui/styles";
 import clsx from "clsx";
@@ -147,6 +146,14 @@ const TabsEditable = (props: TabsEditableProps) => {
 
   const addNewDatasetFlag = useFlag("configurator.add-dataset.new");
 
+
+  const switchChart = (key: string) => {
+    dispatch({
+      type: "SWITCH_ACTIVE_CHART",
+      value: key,
+    });
+  }
+
   return (
     <>
       <TabsInner
@@ -170,12 +177,7 @@ const TabsEditable = (props: TabsEditableProps) => {
             activeChartKey: key,
           });
         }}
-        onChartSwitch={(key) => {
-          dispatch({
-            type: "SWITCH_ACTIVE_CHART",
-            value: key,
-          });
-        }}
+        onChartSwitch={switchChart}
       />
 
       {tabsState.popoverType === "add" ? (
@@ -266,6 +268,20 @@ const TabsEditable = (props: TabsEditableProps) => {
           }}
           onClose={handleClose}
         >
+      {isConfiguringChart &&  <MenuActionItem 
+          as="menuitem"
+          type="button"
+          iconName="text"
+          label={<Trans id="chart-controls.edit-tab-label" >Edit tab label</Trans>}
+          onClick={() => {
+                switchChart(tabsState.activeChartKey);
+                dispatch({
+                  type: "CHART_ACTIVE_FIELD_CHANGED",
+                  value: 'label'
+                });
+          }}
+
+        />}
           <DuplicateChartMenuActionItem
             chartConfig={getChartConfig(state, tabsState.activeChartKey)}
             onSuccess={handleClose}
@@ -567,6 +583,9 @@ export const useIconStyles = makeStyles<
   },
   chartIconWrapper: {
     minWidth: "fit-content",
+    display: 'flex',
+    alignItems: 'center',
+    gap: spacing(2),
     color: (d) => (d.active ? palette.primary.main : palette.secondary.active),
   },
   editIconWrapper: {
@@ -621,40 +640,32 @@ const TabContent = (props: {
   const [_, dispatch] = useConfiguratorState();
   const showAddLabel = editable && !label;
   const addLabel = t({
-    id: "chart-selection-tabs.add-label",
-    message: "Add label",
+    id: "chart-selection-tabs.no-label",
+    message: "No label",
   });
   return (
     <Flex className={classes.root}>
-      <Button
-        className={classes.chartIconWrapper}
-        variant="text"
-        onClick={onSwitchClick}
-      >
-        <Icon name={iconName} />
-      </Button>
       {label || showAddLabel ? (
-        <Tooltip title={label || addLabel} enterDelay={750}>
           <Button
             variant="text"
-            className={classes.label}
+            className={classes.chartIconWrapper}  
             onClick={() => {
               onSwitchClick?.();
-              if (editable) {
-                dispatch({
-                  type: "CHART_ACTIVE_FIELD_CHANGED",
-                  value: "label",
-                });
-              }
+           if (editable) {
+              dispatch({
+                type: "CHART_ACTIVE_FIELD_CHANGED",
+                value: undefined
+              });
             }}
+          }
             sx={{
               color: (t) =>
                 label ? "inherit" : `${t.palette.grey[500]} !important`,
             }}
           >
-            {label || `[ ${addLabel} ]`}
+             <Icon name={iconName} />
+           {label || `[ ${addLabel} ]`}
           </Button>
-        </Tooltip>
       ) : null}
       {editable && (
         <Button

app/configurator/components/annotators.tsx

@@ -136,6 +136,16 @@ export const ChartAnnotator = () => {
           }
           mainLabel={getFieldLabel("description")}
         />
+          <ChartAnnotatorTabField
+          value="label"
+          icon="layoutTab"
+          emptyValueWarning={
+            <Trans id="controls.annotator.add-tab-label-warning">
+             Please add a tab label
+            </Trans>
+          }
+          mainLabel={getFieldLabel("label")}
+        />
       </ControlSectionContent>
     </ControlSection>
   );
@@ -189,6 +199,16 @@ export const LayoutAnnotator = () => {
           }
           mainLabel={getFieldLabel("description")}
         />
+        <LayoutAnnotatorTabField
+          value="label"
+          icon="layoutTab"
+          emptyValueWarning={
+            <Trans id="controls.annotator.add-tab-label-warning">
+              Please add a tab label
+            </Trans>
+          }
+          mainLabel={getFieldLabel("label")}
+        />
       </ControlSectionContent>
     </ControlSection>
   );

app/configurator/components/field.tsx

@@ -638,7 +638,7 @@ export const ChartAnnotatorTabField = (props: AnnotatorTabFieldProps) => {
 };
 
 export const LayoutAnnotatorTabField = (
-  props: AnnotatorTabFieldProps<"title" | "description">
+  props: AnnotatorTabFieldProps<"title" | "description" | "label">
 ) => {
   const { value, emptyValueWarning, ...tabProps } = props;
   const fieldProps = useActiveLayoutField({ value });

app/locales/de/messages.po

@@ -53,7 +53,7 @@ msgstr "Kategorien"
 
 #: app/login/components/profile-header.tsx
 msgid "browse.dataset.all"
-msgstr "Alle Datensätze durchsuchen"
+msgstr "Datensatz suchen"
 
 #: app/browser/dataset-preview.tsx
 #: app/browser/dataset-preview.tsx
@@ -172,6 +172,10 @@ msgstr "Duplizieren"
 msgid "chart-controls.edit"
 msgstr "Bearbeiten"
 
+#: app/components/chart-selection-tabs.tsx
+msgid "chart-controls.edit-tab-label"
+msgstr "Tab titel editieren"
+
 #: app/components/dataset-metadata.tsx
 msgid "chart-controls.sparql-query"
 msgstr "SPARQL-Abfrage"
@@ -182,7 +186,7 @@ msgstr "Tabellenansicht"
 
 #: app/components/chart-selection-tabs.tsx
 msgid "chart-selection-tabs.add-chart"
-msgstr ""
+msgstr "Diagramm hinzufügen"
 
 #: app/components/chart-selection-tabs.tsx
 msgid "chart-selection-tabs.add-chart-different-dataset.button"
@@ -197,8 +201,8 @@ msgid "chart-selection-tabs.add-chart-same-dataset.caption"
 msgstr "Fügen Sie ein Diagramm basierend auf demselben Datensatz hinzu"
 
 #: app/components/chart-selection-tabs.tsx
-msgid "chart-selection-tabs.add-label"
-msgstr ""
+msgid "chart-selection-tabs.no-label"
+msgstr "Ohne Titel"
 
 #: app/configurator/components/dataset-control-section.tsx
 msgid "chart.datasets.add"
@@ -297,6 +301,11 @@ msgstr "Animation"
 msgid "controls.annotator.add-description-warning"
 msgstr "Fügen Sie eine Beschreibung hinzu"
 
+#: app/configurator/components/annotators.tsx
+#: app/configurator/components/annotators.tsx
+msgid "controls.annotator.add-tab-label-warning"
+msgstr "Please add a tab label"
+
 #: app/configurator/components/annotators.tsx
 #: app/configurator/components/annotators.tsx
 msgid "controls.annotator.add-title-warning"
@@ -592,7 +601,7 @@ msgstr "Nullen"
 
 #: app/configurator/components/field-i18n.ts
 msgid "controls.label"
-msgstr ""
+msgstr "Tab-Titel"
 
 #: app/components/rename-dialog.tsx
 #: app/configurator/components/field-i18n.ts
@@ -620,24 +629,24 @@ msgstr "Freies Layout"
 
 #: app/login/components/profile-tables.tsx
 msgid "controls.layout.chart"
-msgstr ""
+msgstr "Diagramm"
 
 #: app/configurator/components/field-i18n.ts
 #: app/login/components/profile-tables.tsx
 msgid "controls.layout.dashboard"
 msgstr "Dashboard"
 
-#: app/configurator/components/configurator.tsx
+#: app/configurator/components/preview-breakpoint.tsx
 msgid "controls.layout.preview-lg"
-msgstr ""
+msgstr "Vorschau mit verfügbarer Breite"
 
-#: app/configurator/components/configurator.tsx
+#: app/configurator/components/preview-breakpoint.tsx
 msgid "controls.layout.preview-md"
-msgstr ""
+msgstr "Vorschau in mittlerer Breite"
 
-#: app/configurator/components/configurator.tsx
+#: app/configurator/components/preview-breakpoint.tsx
 msgid "controls.layout.preview-sm"
-msgstr ""
+msgstr "Vorschau in kleiner Breite"
 
 #: app/configurator/components/field-i18n.ts
 msgid "controls.layout.singleURLs"
@@ -840,7 +849,7 @@ msgstr "Layout-Optionen"
 msgid "controls.section.shared-filters"
 msgstr "Geteilte Filter"
 
-#: app/configurator/components/layout-configurator.tsx
+#: app/charts/shared/use-combined-temporal-dimension.ts
 msgid "controls.section.shared-filters.date"
 msgstr "Datum"
 
@@ -1097,7 +1106,7 @@ msgstr "Geteilte Dimensionen"
 
 #: app/components/chart-footnotes.tsx
 msgid "dataset.footnotes.dataset"
-msgstr ""
+msgstr "Datensatz"
 
 #: app/components/chart-footnotes.tsx
 msgid "dataset.footnotes.updated"
@@ -1197,15 +1206,15 @@ msgstr "Datensätze"
 
 #: app/configurator/components/add-dataset-dialog.tsx
 msgid "dataset.search.preview.description"
-msgstr "Überprüfen Sie alle verfügbaren Dimensionen, bevor Sie mit der Bearbeitung Ihrer Visualisierung fortfahren."
+msgstr "Überprüfen Sie die verfügbaren Dimensionen."
 
 #: app/configurator/components/add-dataset-dialog.tsx
 msgid "dataset.search.preview.new-dimension"
 msgstr "Neu"
 
 #: app/configurator/components/add-dataset-dialog.tsx
 msgid "dataset.search.preview.title"
-msgstr "Überprüfen Sie die verfügbaren Dimensionen"
+msgstr "Verfügbare Dimensionen"
 
 #: app/configurator/components/add-dataset-dialog.tsx
 msgid "dataset.search.search-options.more-2-options-selected"
@@ -1395,7 +1404,7 @@ msgstr "erstellen Sie einen"
 
 #: app/login/components/profile-tables.tsx
 msgid "login.no-charts"
-msgstr "Noch keine Charts"
+msgstr "Noch keine Diagramme"
 
 #: app/components/confirmation-dialog.tsx
 msgid "login.profile.chart.confirmation.default"
@@ -1407,7 +1416,7 @@ msgstr "Denken Sie daran, dass das Entfernen dieser Visualisierung sich auf alle
 
 #: app/login/components/profile-content-tabs.tsx
 msgid "login.profile.home"
-msgstr "Empfang"
+msgstr "Übersicht"
 
 #: app/login/components/profile-content-tabs.tsx
 #: app/login/components/profile-content-tabs.tsx
@@ -1419,11 +1428,11 @@ msgstr "Meine Entwürfe"
 #: app/login/components/profile-content-tabs.tsx
 #: app/login/components/profile-content-tabs.tsx
 msgid "login.profile.my-published-visualizations"
-msgstr "Meine Visualisierungen"
+msgstr "Veröffentlichte Visualisierungen"
 
 #: app/login/components/login-menu.tsx
 msgid "login.profile.my-visualizations"
-msgstr ""
+msgstr "Meine Visualisierungen"
 
 #: app/login/components/profile-tables.tsx
 msgid "login.profile.my-visualizations.chart-actions"
@@ -1451,12 +1460,12 @@ msgstr ""
 
 #: app/login/components/login-menu.tsx
 msgid "login.sign-in"
-msgstr ""
+msgstr "Einloggen"
 
 #: app/login/components/login-menu.tsx
 #: app/login/components/profile-header.tsx
 msgid "login.sign-out"
-msgstr ""
+msgstr "Abmelden"
 
 #: app/components/header.tsx
 #: app/components/header.tsx
@@ -1569,11 +1578,6 @@ msgstr "Woche"
 msgid "time-units.Year"
 msgstr "Jahr"
 
-#: app/components/chart-footnotes.tsx
-#: app/components/chart-footnotes.tsx
-msgid "typography.colon"
-msgstr ": "
-
 #: app/components/confirmation-dialog.tsx
 msgid "yes"
 msgstr "Ja"