UI configurator enhancements

app/components/chart-panel.tsx

@@ -6,7 +6,6 @@ import Flex from "@/components/flex";
 import {
   ChartType,
   ConfiguratorStateConfiguringChart,
-  ConfiguratorStateDescribingChart,
   ConfiguratorStatePublishing,
 } from "@/configurator";
 import { useConfiguratorState } from "@/src";
@@ -18,9 +17,7 @@ type ChartPanelProps = { children: ReactNode } & BoxProps;
 export const ChartPanelConfigurator = (props: ChartPanelProps) => {
   // This type of chart panel can only appear for below steps.
   const [state] = useConfiguratorState() as unknown as [
-    | ConfiguratorStateConfiguringChart
-    | ConfiguratorStateDescribingChart
-    | ConfiguratorStatePublishing
+    ConfiguratorStateConfiguringChart | ConfiguratorStatePublishing
   ];
 
   return (
@@ -53,12 +50,10 @@ const useChartPanelInnerStyles = makeStyles<Theme, { showTabs: boolean }>(
     root: {
       flexDirection: "column",
       backgroundColor: theme.palette.grey[100],
-      boxShadow: theme.shadows[6],
-      borderRadius: 12,
-      borderTopLeftRadius: ({ showTabs }) => (showTabs ? 0 : 12),
+      border: "1px solid",
+      borderColor: theme.palette.divider,
       // TODO: Handle properly when chart composition is implemented (enable when
       // ChartSelectionTabs becomes scrollable)
-      borderTopRightRadius: 12,
       overflow: "hidden",
       width: "auto",
     },

app/components/chart-preview.tsx

@@ -1,5 +1,6 @@
 import { Trans } from "@lingui/macro";
-import { Box, Typography } from "@mui/material";
+import { Box, Theme, Typography } from "@mui/material";
+import { makeStyles } from "@mui/styles";
 import Head from "next/head";
 import * as React from "react";
 
@@ -39,16 +40,33 @@ export const ChartPreview = ({
   );
 };
 
+const useStyles = makeStyles<Theme>({
+  title: {
+    marginBottom: 2,
+    cursor: "pointer",
+    "&:hover": {
+      textDecoration: "underline",
+    },
+  },
+  description: {
+    marginBottom: 2,
+    cursor: "pointer",
+    "&:hover": {
+      textDecoration: "underline",
+    },
+  },
+});
+
 export const ChartPreviewInner = ({
   dataSetIri,
   dataSource,
 }: {
   dataSetIri: string;
   dataSource: DataSource;
 }) => {
-  const [state] = useConfiguratorState();
+  const [state, dispatch] = useConfiguratorState();
   const locale = useLocale();
-
+  const classes = useStyles();
   const [{ data: metaData }] = useDataCubeMetadataQuery({
     variables: {
       iri: dataSetIri,
@@ -91,16 +109,21 @@ export const ChartPreviewInner = ({
           </Box>
         )}
         {(state.state === "CONFIGURING_CHART" ||
-          state.state === "DESCRIBING_CHART" ||
           state.state === "PUBLISHING") && (
           <>
             <>
               <Typography
                 variant="h2"
                 sx={{
-                  mb: 2,
                   color: state.meta.title[locale] === "" ? "grey.500" : "text",
                 }}
+                className={classes.title}
+                onClick={() =>
+                  dispatch({
+                    type: "ACTIVE_FIELD_CHANGED",
+                    value: "title",
+                  })
+                }
               >
                 {state.meta.title[locale] === "" ? (
                   <Trans id="annotation.add.title">[ Title ]</Trans>
@@ -118,11 +141,17 @@ export const ChartPreviewInner = ({
               </Head>
               <Typography
                 variant="body1"
+                className={classes.description}
                 sx={{
-                  mb: 2,
                   color:
                     state.meta.description[locale] === "" ? "grey.500" : "text",
                 }}
+                onClick={() =>
+                  dispatch({
+                    type: "ACTIVE_FIELD_CHANGED",
+                    value: "description",
+                  })
+                }
               >
                 {state.meta.description[locale] === "" ? (
                   <Trans id="annotation.add.description">[ Description ]</Trans>

app/components/chart-selection-tabs.tsx

@@ -1,4 +1,5 @@
-import { Box, Popover, Tab, Tabs, Theme } from "@mui/material";
+import { Trans } from "@lingui/macro";
+import { Box, Popover, Tab, Tabs, Theme, Button } from "@mui/material";
 import { makeStyles } from "@mui/styles";
 import React, {
   createContext,
@@ -12,13 +13,14 @@ import React, {
 import {
   ChartType,
   ConfiguratorStateConfiguringChart,
-  ConfiguratorStateDescribingChart,
   ConfiguratorStatePublishing,
   useConfiguratorState,
 } from "@/configurator";
 import { ChartTypeSelector } from "@/configurator/components/chart-type-selector";
 import { getIconName } from "@/configurator/components/ui-helpers";
+import { useDataCubeMetadataWithComponentValuesQuery } from "@/graphql/query-hooks";
 import { Icon, IconName } from "@/icons";
+import { useLocale } from "@/src";
 import useEvent from "@/utils/use-event";
 
 import Flex from "./flex";
@@ -95,9 +97,7 @@ const useStyles = makeStyles<Theme, { editable: boolean }>((theme) => ({
 
 const TabsEditable = ({ chartType }: { chartType: ChartType }) => {
   const [configuratorState] = useConfiguratorState() as unknown as [
-    | ConfiguratorStateConfiguringChart
-    | ConfiguratorStateDescribingChart
-    | ConfiguratorStatePublishing
+    ConfiguratorStateConfiguringChart | ConfiguratorStatePublishing
   ];
   const [tabsState, setTabsState] = useTabsState();
   const [popoverAnchorEl, setPopoverAnchorEl] = useState<HTMLElement | null>(
@@ -149,6 +149,41 @@ const TabsFixed = ({ chartType }: { chartType: ChartType }) => {
   return <TabsInner chartType={chartType} editable={false} />;
 };
 
+const PublishChartButton = () => {
+  const [state, dispatch] = useConfiguratorState();
+  const { dataSet: dataSetIri } = state as
+    | ConfiguratorStatePublishing
+    | ConfiguratorStateConfiguringChart;
+  const locale = useLocale();
+  const [{ data }] = useDataCubeMetadataWithComponentValuesQuery({
+    variables: {
+      iri: dataSetIri ?? "",
+      sourceType: state.dataSource.type,
+      sourceUrl: state.dataSource.url,
+      locale,
+    },
+    pause: !dataSetIri,
+  });
+  const goNext = useEvent(() => {
+    if (data?.dataCubeByIri) {
+      dispatch({
+        type: "STEP_NEXT",
+        dataSetMetadata: data?.dataCubeByIri,
+      });
+    }
+  });
+
+  return (
+    <Button
+      color="primary"
+      variant="contained"
+      onClick={data ? goNext : undefined}
+    >
+      <Trans id="button.publish">Publish the chart</Trans>
+    </Button>
+  );
+};
+
 const TabsInner = ({
   chartType,
   editable,
@@ -159,16 +194,19 @@ const TabsInner = ({
   onActionButtonClick?: (e: React.MouseEvent<HTMLElement>) => void;
 }) => {
   return (
-    <Tabs value={0}>
-      {/* TODO: Generate dynamically when chart composition is implemented */}
-      <Tab
-        sx={{ p: 0 }}
-        onClick={onActionButtonClick}
-        label={
-          <TabContent iconName={getIconName(chartType)} editable={editable} />
-        }
-      />
-    </Tabs>
+    <Box display="flex" sx={{ width: "100%", alignItems: "flex-start" }}>
+      <Tabs value={0} sx={{ position: "relative", top: 1, flexGrow: 1 }}>
+        {/* TODO: Generate dynamically when chart composition is implemented */}
+        <Tab
+          sx={{ p: 0, background: "white" }}
+          onClick={onActionButtonClick}
+          label={
+            <TabContent iconName={getIconName(chartType)} editable={editable} />
+          }
+        />
+      </Tabs>
+      <PublishChartButton />
+    </Box>
   );
 };
 

app/components/language-menu.tsx

@@ -43,7 +43,6 @@ export const LanguageMenu = ({ contentId }: { contentId?: string }) => {
         ml: [0, "auto"],
         width: ["100%", "auto"],
         backgroundColor: ["grey.300", "transparent"],
-        order: [1, 2],
         justifyContent: "flex-end",
       }}
     >

app/components/login-menu.tsx

@@ -37,7 +37,6 @@ function LoginMenu() {
         <>
           <Typography variant="body2">
             Signed in as <Link href="/profile">{session.user?.name}</Link>{" "}
-            {session.user?.id}
             {" - "}
           </Typography>
           <Button

app/configurator/components/chart-annotations-selector.tsx

@@ -1,13 +1,11 @@
 import { Box } from "@mui/material";
 import { useEffect, useMemo, useRef } from "react";
 
-import { ConfiguratorStateDescribingChart } from "@/configurator";
 import {
   ControlSection,
   ControlSectionContent,
   SectionTitle,
 } from "@/configurator/components/chart-controls/section";
-import { EmptyRightPanel } from "@/configurator/components/empty-right-panel";
 import { MetaInputField } from "@/configurator/components/field";
 import { getFieldLabel } from "@/configurator/components/field-i18n";
 import { getIconName } from "@/configurator/components/ui-helpers";
@@ -16,19 +14,60 @@ import { InteractiveFilterType } from "@/configurator/interactive-filters/intera
 import { locales } from "@/locales/locales";
 import { useLocale } from "@/locales/use-locale";
 
-export const ChartAnnotationsSelector = ({
+import { ConfiguratorStateConfiguringChart } from "../config-types";
+
+const TitleAndDescriptionOptions = ({
   state,
 }: {
-  state: ConfiguratorStateDescribingChart;
+  state: ConfiguratorStateConfiguringChart;
 }) => {
   const { activeField, meta } = state;
+
+  const locale = useLocale();
+  // Reorder locales so the input field for
+  // the current locale is on top
+  const orderedLocales = [locale, ...locales.filter((l) => l !== locale)];
+
+  if (!activeField) {
+    return null;
+  }
+
+  return (
+    <ControlSection>
+      <SectionTitle iconName={getIconName(activeField)}>
+        {getFieldLabel(activeField)}
+      </SectionTitle>
+      <ControlSectionContent gap="none">
+        {orderedLocales.map((d) => (
+          <Box
+            key={`${d}-${activeField!}`}
+            sx={{ ":not(:first-of-type)": { mt: 2 } }}
+          >
+            <MetaInputField
+              metaKey={activeField}
+              locale={d}
+              label={getFieldLabel(d)}
+              value={meta[activeField === "title" ? "title" : "description"][d]}
+            />
+          </Box>
+        ))}
+      </ControlSectionContent>
+    </ControlSection>
+  );
+};
+
+export const ChartAnnotationsSelector = ({
+  state,
+}: {
+  state: ConfiguratorStateConfiguringChart;
+}) => {
+  const { activeField } = state;
   const panelRef = useRef<HTMLDivElement>(null);
   useEffect(() => {
     if (panelRef && panelRef.current) {
       panelRef.current.focus();
     }
   }, [activeField]);
-  const locale = useLocale();
 
   const isInteractiveFilterField = useMemo(() => {
     switch (activeField as InteractiveFilterType) {
@@ -43,10 +82,6 @@ export const ChartAnnotationsSelector = ({
     }
   }, [activeField]);
 
-  // Reorder locales so the input field for
-  // the current locale is on top
-  const orderedLocales = [locale, ...locales.filter((l) => l !== locale)];
-
   if (activeField) {
     return (
       <Box
@@ -60,32 +95,11 @@ export const ChartAnnotationsSelector = ({
         {isInteractiveFilterField ? (
           <InteractiveFiltersOptions state={state} />
         ) : (
-          <ControlSection>
-            <SectionTitle iconName={getIconName(activeField)}>
-              {getFieldLabel(activeField)}
-            </SectionTitle>
-            <ControlSectionContent gap="none">
-              {orderedLocales.map((d) => (
-                <Box
-                  key={`${d}-${activeField!}`}
-                  sx={{ ":not(:first-of-type)": { mt: 2 } }}
-                >
-                  <MetaInputField
-                    metaKey={activeField}
-                    locale={d}
-                    label={getFieldLabel(d)}
-                    value={
-                      meta[activeField === "title" ? "title" : "description"][d]
-                    }
-                  />
-                </Box>
-              ))}
-            </ControlSectionContent>
-          </ControlSection>
+          <TitleAndDescriptionOptions state={state} />
         )}
       </Box>
     );
   } else {
-    return <EmptyRightPanel state={state} />;
+    return null;
   }
 };