diff --git a/CHANGELOG.md b/CHANGELOG.md
index be1d2819d..bca837e01 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,7 +9,7 @@ You can also check the [release page](https://github.com/visualize-admin/visuali
 
 ## Unreleased
 
-Nothing yet.
+- Metadata is now shown in a dedicated panel that can be reached both from editor & published mode
 
 ## [3.15.0] - 2022-11-29
 
diff --git a/app/charts/area/areas-state.tsx b/app/charts/area/areas-state.tsx
index 12cb40d9b..8e18dfcff 100644
--- a/app/charts/area/areas-state.tsx
+++ b/app/charts/area/areas-state.tsx
@@ -47,6 +47,7 @@ import {
   formatNumberWithUnit,
   useTimeFormatUnit,
 } from "@/formatters";
+import { DimensionMetadataFragment } from "@/graphql/query-hooks";
 import { getPalette } from "@/palettes";
 import { sortByIndex } from "@/utils/array";
 import { estimateTextWidth } from "@/utils/estimate-text-width";
@@ -70,7 +71,7 @@ export interface AreasState extends CommonChartState {
   segments: string[];
   colors: ScaleOrdinal<string, string>;
   yAxisLabel: string;
-  yAxisDescription: string | undefined;
+  yAxisDimension: DimensionMetadataFragment;
   chartWideData: ArrayLike<Observation>;
   allDataWide: ArrayLike<Observation>;
   series: $FixMe[];
@@ -202,7 +203,6 @@ const useAreasState = (
   }
 
   const yAxisLabel = getLabelWithUnit(yMeasure);
-  const yAxisDescription = yMeasure.description || undefined;
 
   /** Ordered segments */
   const segmentSorting = fields.segment?.sorting;
@@ -404,7 +404,7 @@ const useAreasState = (
     yScale,
     getSegment,
     yAxisLabel,
-    yAxisDescription,
+    yAxisDimension: yMeasure,
     segments,
     colors,
     chartWideData,
diff --git a/app/charts/column/columns-grouped-state.tsx b/app/charts/column/columns-grouped-state.tsx
index 1c64a1670..aa03c395c 100644
--- a/app/charts/column/columns-grouped-state.tsx
+++ b/app/charts/column/columns-grouped-state.tsx
@@ -51,6 +51,7 @@ import {
 } from "@/configurator/components/ui-helpers";
 import { isTemporalDimension, Observation } from "@/domain/data";
 import { useFormatNumber, formatNumberWithUnit } from "@/formatters";
+import { DimensionMetadataFragment } from "@/graphql/query-hooks";
 import { getPalette } from "@/palettes";
 import { sortByIndex } from "@/utils/array";
 import {
@@ -77,7 +78,7 @@ export interface GroupedColumnsState extends CommonChartState {
   segments: string[];
   colors: ScaleOrdinal<string, string>;
   yAxisLabel: string;
-  yAxisDescription: string | undefined;
+  yAxisDimension: DimensionMetadataFragment;
   grouped: [string, Observation[]][];
   getAnnotationInfo: (d: Observation) => TooltipInfo;
   showStandardError: boolean;
@@ -312,7 +313,6 @@ const useGroupedColumnsState = (
   }
 
   const yAxisLabel = getLabelWithUnit(yMeasure);
-  const yAxisDescription = yMeasure.description || undefined;
 
   // Group
   const grouped = useMemo(() => {
@@ -452,7 +452,7 @@ const useGroupedColumnsState = (
     getSegment,
     getSegmentLabel,
     yAxisLabel,
-    yAxisDescription,
+    yAxisDimension: yMeasure,
     segments,
     colors,
     grouped,
diff --git a/app/charts/column/columns-stacked-state.tsx b/app/charts/column/columns-stacked-state.tsx
index 0a986f8b2..10a521f84 100644
--- a/app/charts/column/columns-stacked-state.tsx
+++ b/app/charts/column/columns-stacked-state.tsx
@@ -51,6 +51,7 @@ import { Observer, useWidth } from "@/charts/shared/use-width";
 import { ColumnFields, SortingOrder, SortingType } from "@/configurator";
 import { isTemporalDimension, Observation } from "@/domain/data";
 import { formatNumberWithUnit, useFormatNumber } from "@/formatters";
+import { DimensionMetadataFragment } from "@/graphql/query-hooks";
 import { getPalette } from "@/palettes";
 import { sortByIndex } from "@/utils/array";
 import {
@@ -75,7 +76,7 @@ export interface StackedColumnsState extends CommonChartState {
   segments: string[];
   colors: ScaleOrdinal<string, string>;
   yAxisLabel: string;
-  yAxisDescription: string | undefined;
+  yAxisDimension: DimensionMetadataFragment;
   chartWideData: ArrayLike<Observation>;
   allDataWide: ArrayLike<Observation>;
   grouped: [string, Observation[]][];
@@ -325,7 +326,6 @@ const useColumnsStackedState = (
   }
 
   const yAxisLabel = getLabelWithUnit(yMeasure);
-  const yAxisDescription = yMeasure.description || undefined;
 
   const yScale = scaleLinear().domain(yStackDomain).nice();
 
@@ -507,7 +507,7 @@ const useColumnsStackedState = (
     getSegment,
     getSegmentLabel,
     yAxisLabel,
-    yAxisDescription,
+    yAxisDimension: yMeasure,
     segments,
     colors,
     chartWideData,
diff --git a/app/charts/column/columns-state.tsx b/app/charts/column/columns-state.tsx
index 6992c4f26..8d9ab0b66 100644
--- a/app/charts/column/columns-state.tsx
+++ b/app/charts/column/columns-state.tsx
@@ -53,7 +53,11 @@ import {
   formatNumberWithUnit,
   useTimeFormatUnit,
 } from "@/formatters";
-import { TemporalDimension, TimeUnit } from "@/graphql/query-hooks";
+import {
+  DimensionMetadataFragment,
+  TemporalDimension,
+  TimeUnit,
+} from "@/graphql/query-hooks";
 import { getPalette } from "@/palettes";
 import {
   getSortingOrders,
@@ -79,7 +83,7 @@ export interface ColumnsState extends CommonChartState {
   segments: string[];
   colors: ScaleOrdinal<string, string>;
   yAxisLabel: string;
-  yAxisDescription: string | undefined;
+  yAxisDimension: DimensionMetadataFragment;
   getAnnotationInfo: (d: Observation) => TooltipInfo;
   showStandardError: boolean;
 }
@@ -229,7 +233,6 @@ const useColumnsState = (
   }
 
   const yAxisLabel = getLabelWithUnit(yMeasure);
-  const yAxisDescription = yMeasure.description || undefined;
 
   const { left, bottom } = useChartPadding(
     yScale,
@@ -358,7 +361,7 @@ const useColumnsState = (
     getSegment,
     getSegmentLabel,
     yAxisLabel,
-    yAxisDescription,
+    yAxisDimension: yMeasure,
     segments,
     colors,
     getAnnotationInfo,
diff --git a/app/charts/line/lines-state.tsx b/app/charts/line/lines-state.tsx
index 819a13f67..17da947e1 100644
--- a/app/charts/line/lines-state.tsx
+++ b/app/charts/line/lines-state.tsx
@@ -40,6 +40,7 @@ import {
   formatNumberWithUnit,
   useTimeFormatUnit,
 } from "@/formatters";
+import { DimensionMetadataFragment } from "@/graphql/query-hooks";
 import { getPalette } from "@/palettes";
 import { sortByIndex } from "@/utils/array";
 import { estimateTextWidth } from "@/utils/estimate-text-width";
@@ -62,7 +63,7 @@ export interface LinesState extends CommonChartState {
   colors: ScaleOrdinal<string, string>;
   xAxisLabel: string;
   yAxisLabel: string;
-  yAxisDescription: string | undefined;
+  yAxisDimension: DimensionMetadataFragment;
   grouped: Map<string, Observation[]>;
   chartWideData: ArrayLike<Observation>;
   allDataWide: ArrayLike<Observation>;
@@ -184,7 +185,6 @@ const useLinesState = (
   }
 
   const yAxisLabel = getLabelWithUnit(yMeasure);
-  const yAxisDescription = yMeasure.description || undefined;
 
   const segmentDimension = useMemo(() => {
     return (
@@ -345,7 +345,7 @@ const useLinesState = (
     getSegmentLabel,
     xAxisLabel,
     yAxisLabel,
-    yAxisDescription,
+    yAxisDimension: yMeasure,
     segments,
     colors,
     grouped: preparedDataGroupedBySegment,
diff --git a/app/charts/scatterplot/scatterplot-state.tsx b/app/charts/scatterplot/scatterplot-state.tsx
index 4b574778f..ec2baf0ed 100644
--- a/app/charts/scatterplot/scatterplot-state.tsx
+++ b/app/charts/scatterplot/scatterplot-state.tsx
@@ -28,6 +28,7 @@ import { ScatterPlotFields } from "@/configurator";
 import { mkNumber } from "@/configurator/components/ui-helpers";
 import { DimensionValue, Observation } from "@/domain/data";
 import { useFormatNumber } from "@/formatters";
+import { DimensionMetadataFragment } from "@/graphql/query-hooks";
 import { getPalette } from "@/palettes";
 import { estimateTextWidth } from "@/utils/estimate-text-width";
 
@@ -43,9 +44,9 @@ export interface ScatterplotState extends CommonChartState {
   getSegment: (d: Observation) => string;
   colors: ScaleOrdinal<string, string>;
   xAxisLabel: string;
-  xAxisDescription: string | undefined;
+  xAxisDimension: DimensionMetadataFragment;
   yAxisLabel: string;
-  yAxisDescription: string | undefined;
+  yAxisDimension: DimensionMetadataFragment;
   getSegmentLabel: (s: string) => string;
   getAnnotationInfo: (d: Observation, values: Observation[]) => TooltipInfo;
 }
@@ -93,7 +94,6 @@ const useScatterplotState = ({
   }
 
   const xAxisLabel = getLabelWithUnit(xMeasure);
-  const xAxisDescription = xMeasure.description || undefined;
 
   const xMinValue = Math.min(mkNumber(min(preparedData, (d) => getX(d))), 0);
   const xMaxValue = max(preparedData, (d) => getX(d)) as number;
@@ -107,7 +107,6 @@ const useScatterplotState = ({
   }
 
   const yAxisLabel = getLabelWithUnit(yMeasure);
-  const yAxisDescription = yMeasure.description || undefined;
 
   const yMinValue = Math.min(mkNumber(min(preparedData, (d) => getY(d))), 0);
   const yMaxValue = max(preparedData, getY) as number;
@@ -243,9 +242,9 @@ const useScatterplotState = ({
     getSegment,
     colors,
     xAxisLabel,
-    xAxisDescription,
+    xAxisDimension: xMeasure,
     yAxisLabel,
-    yAxisDescription,
+    yAxisDimension: yMeasure,
     getAnnotationInfo,
     getSegmentLabel,
   };
diff --git a/app/charts/shared/axis-height-linear.tsx b/app/charts/shared/axis-height-linear.tsx
index 381fb5756..d504a5077 100644
--- a/app/charts/shared/axis-height-linear.tsx
+++ b/app/charts/shared/axis-height-linear.tsx
@@ -10,8 +10,8 @@ import { LinesState } from "@/charts/line/lines-state";
 import { ScatterplotState } from "@/charts/scatterplot/scatterplot-state";
 import { useChartState } from "@/charts/shared/use-chart-state";
 import { useChartTheme } from "@/charts/shared/use-chart-theme";
+import { OpenMetadataPanelWrapper } from "@/components/metadata-panel";
 import { useFormatNumber } from "@/formatters";
-import { MaybeTooltip } from "@/utils/maybe-tooltip";
 
 export const TICK_MIN_HEIGHT = 50;
 
@@ -23,7 +23,7 @@ export const AxisHeightLinear = () => {
   const ref = useRef<SVGGElement>(null);
   const formatNumber = useFormatNumber({ decimals: "auto" });
 
-  const { yScale, yAxisLabel, yAxisDescription, bounds } = useChartState() as
+  const { yScale, yAxisLabel, yAxisDimension, bounds } = useChartState() as
     | AreasState
     | ColumnsState
     | GroupedColumnsState
@@ -61,19 +61,11 @@ export const AxisHeightLinear = () => {
 
   return (
     <>
-      <g>
-        <MaybeTooltip text={yAxisDescription}>
-          <text
-            x={0}
-            y={0}
-            dy={labelFontSize}
-            fontSize={labelFontSize}
-            textDecoration={yAxisDescription ? "underline" : undefined}
-          >
-            {yAxisLabel}
-          </text>
-        </MaybeTooltip>
-      </g>
+      <OpenMetadataPanelWrapper dim={yAxisDimension} svg={true}>
+        <text x={0} y={0} dy={labelFontSize} fontSize={labelFontSize}>
+          {yAxisLabel}
+        </text>
+      </OpenMetadataPanelWrapper>
       <g
         ref={ref}
         transform={`translate(${bounds.margins.left}, ${bounds.margins.top})`}
diff --git a/app/charts/shared/axis-width-linear.tsx b/app/charts/shared/axis-width-linear.tsx
index ad4dfb863..6fb8fec4d 100644
--- a/app/charts/shared/axis-width-linear.tsx
+++ b/app/charts/shared/axis-width-linear.tsx
@@ -5,13 +5,13 @@ import { useEffect, useRef } from "react";
 import { ScatterplotState } from "@/charts/scatterplot/scatterplot-state";
 import { useChartState } from "@/charts/shared/use-chart-state";
 import { useChartTheme } from "@/charts/shared/use-chart-theme";
+import { OpenMetadataPanelWrapper } from "@/components/metadata-panel";
 import { useFormatNumber } from "@/formatters";
 import { estimateTextWidth } from "@/utils/estimate-text-width";
-import { MaybeTooltip } from "@/utils/maybe-tooltip";
 
 export const AxisWidthLinear = () => {
   const formatNumber = useFormatNumber();
-  const { xScale, bounds, xAxisLabel, xAxisDescription } =
+  const { xScale, bounds, xAxisLabel, xAxisDimension } =
     useChartState() as ScatterplotState;
   const { chartWidth, chartHeight, margins } = bounds;
   const { labelColor, labelFontSize, gridColor, fontFamily } = useChartTheme();
@@ -51,18 +51,17 @@ export const AxisWidthLinear = () => {
   return (
     <>
       <g transform={`translate(${margins.left}, ${margins.top})`}>
-        <MaybeTooltip text={xAxisDescription}>
+        <OpenMetadataPanelWrapper dim={xAxisDimension} svg={true}>
           <text
             x={chartWidth}
             y={chartHeight + margins.bottom}
             dy={-labelFontSize}
             fontSize={labelFontSize}
             textAnchor="end"
-            textDecoration={xAxisDescription ? "underline" : undefined}
           >
             {xAxisLabel}
           </text>
-        </MaybeTooltip>
+        </OpenMetadataPanelWrapper>
       </g>
       <g
         ref={xAxisRef}
diff --git a/app/charts/shared/chart-data-filters.tsx b/app/charts/shared/chart-data-filters.tsx
index 20e9d8c81..e2e20681f 100644
--- a/app/charts/shared/chart-data-filters.tsx
+++ b/app/charts/shared/chart-data-filters.tsx
@@ -7,6 +7,7 @@ import { ChartFiltersList } from "@/components/chart-filters-list";
 import Flex from "@/components/flex";
 import { Select } from "@/components/form";
 import { Loading } from "@/components/hint";
+import { OpenMetadataPanelWrapper } from "@/components/metadata-panel";
 import SelectTree from "@/components/select-tree";
 import {
   ChartConfig,
@@ -25,6 +26,7 @@ import { isTemporalDimension } from "@/domain/data";
 import { useTimeFormatLocale } from "@/formatters";
 import {
   Dimension,
+  DimensionMetadataFragment,
   HierarchyValue,
   TemporalDimension,
   TimeUnit,
@@ -249,7 +251,7 @@ const DataFilterGenericDimension = ({
     message: `No Filter`,
   });
 
-  const { label, isKeyDimension, description: tooltipText } = dimension;
+  const { label, isKeyDimension } = dimension;
   const options = propOptions || dimension.values;
 
   const allOptions = React.useMemo(() => {
@@ -268,10 +270,13 @@ const DataFilterGenericDimension = ({
   return (
     <Select
       id="dataFilterBaseDimension"
-      label={label}
+      label={
+        <OpenMetadataPanelWrapper dim={dimension as DimensionMetadataFragment}>
+          {label}
+        </OpenMetadataPanelWrapper>
+      }
       options={allOptions}
       value={value}
-      tooltipText={tooltipText || undefined}
       onChange={onChange}
     />
   );
@@ -293,12 +298,7 @@ const DataFilterHierarchyDimension = ({
     message: `No Filter`,
   });
 
-  const {
-    label,
-    isKeyDimension,
-    description: tooltipText,
-    values: dimensionValues,
-  } = dimension;
+  const { label, isKeyDimension, values: dimensionValues } = dimension;
   const options = React.useMemo(() => {
     let opts = [] as { label: string; value: string; isNoneValue?: boolean }[];
     if (hierarchy) {
@@ -321,8 +321,11 @@ const DataFilterHierarchyDimension = ({
       value={value}
       options={options}
       onChange={onChange}
-      label={label}
-      tooltipText={tooltipText || undefined}
+      label={
+        <OpenMetadataPanelWrapper dim={dimension as DimensionMetadataFragment}>
+          {label}
+        </OpenMetadataPanelWrapper>
+      }
     />
   );
 };
@@ -330,12 +333,10 @@ const DataFilterHierarchyDimension = ({
 const DataFilterTemporalDimension = ({
   dimension,
   value,
-  tooltipText,
   onChange,
 }: {
   dimension: TemporalDimension;
   value: string;
-  tooltipText?: string;
   onChange: (e: SelectChangeEvent<unknown>) => void;
 }) => {
   const {
@@ -376,9 +377,12 @@ const DataFilterTemporalDimension = ({
   return (
     <TimeInput
       id="dataFilterTemporalDimension"
-      label={label}
+      label={
+        <OpenMetadataPanelWrapper dim={dimension as DimensionMetadataFragment}>
+          {label}
+        </OpenMetadataPanelWrapper>
+      }
       value={value}
-      tooltipText={tooltipText}
       timeFormat={timeFormat}
       formatLocale={formatLocale}
       isOptional={!isKeyDimension}
diff --git a/app/components/chart-filters-list.tsx b/app/components/chart-filters-list.tsx
index 9c2574827..b61dd2dfe 100644
--- a/app/components/chart-filters-list.tsx
+++ b/app/components/chart-filters-list.tsx
@@ -2,12 +2,12 @@ import { Box, Typography } from "@mui/material";
 import { Fragment } from "react";
 
 import { useQueryFilters } from "@/charts/shared/chart-helpers";
+import { OpenMetadataPanelWrapper } from "@/components/metadata-panel";
 import { ChartConfig, DataSource } from "@/configurator";
 import { isTemporalDimension } from "@/domain/data";
 import { useTimeFormatUnit } from "@/formatters";
 import { useDataCubeMetadataWithComponentValuesQuery } from "@/graphql/query-hooks";
 import { useLocale } from "@/locales/use-locale";
-import { MaybeTooltip } from "@/utils/maybe-tooltip";
 
 export const ChartFiltersList = ({
   dataSetIri,
@@ -75,17 +75,11 @@ export const ChartFiltersList = ({
             {namedFilters.map(({ dimension, value }, i) => (
               <Fragment key={dimension.iri}>
                 <Box component="span" fontWeight="bold">
-                  <MaybeTooltip text={dimension.description || undefined}>
-                    <span
-                      style={{
-                        textDecoration: dimension.description
-                          ? "underline"
-                          : undefined,
-                      }}
-                    >
+                  <OpenMetadataPanelWrapper dim={dimension}>
+                    <span style={{ fontWeight: "bold" }}>
                       {dimension.label}
                     </span>
-                  </MaybeTooltip>
+                  </OpenMetadataPanelWrapper>
 
                   {": "}
                 </Box>
diff --git a/app/components/chart-preview.tsx b/app/components/chart-preview.tsx
index 03fc94167..676fe7a03 100644
--- a/app/components/chart-preview.tsx
+++ b/app/components/chart-preview.tsx
@@ -23,7 +23,6 @@ import { HintYellow } from "@/components/hint";
 import { MetadataPanel } from "@/components/metadata-panel";
 import { ChartConfig, DataSource, useConfiguratorState } from "@/configurator";
 import { DataSetTable } from "@/configurator/components/datatable";
-import { flag } from "@/configurator/components/flag";
 import {
   DimensionMetadataFragment,
   useDataCubeMetadataWithComponentValuesQuery,
@@ -152,14 +151,12 @@ export const ChartPreviewInner = ({
                   )}
                 </Typography>
 
-                {flag("metadata") && (
-                  <MetadataPanel
-                    datasetIri={dataSetIri}
-                    dataSource={dataSource}
-                    dimensions={allDimensions}
-                    top={96}
-                  />
-                )}
+                <MetadataPanel
+                  datasetIri={dataSetIri}
+                  dataSource={dataSource}
+                  dimensions={allDimensions}
+                  top={96}
+                />
               </Flex>
               <Head>
                 <title key="title">
diff --git a/app/components/chart-published.tsx b/app/components/chart-published.tsx
index 5fea70f15..b21efd247 100644
--- a/app/components/chart-published.tsx
+++ b/app/components/chart-published.tsx
@@ -3,6 +3,7 @@ import { Box, Theme, Typography } from "@mui/material";
 import { makeStyles } from "@mui/styles";
 import * as React from "react";
 import { useEffect, useMemo, useRef } from "react";
+import { useStore } from "zustand";
 
 import { ChartDataFilters } from "@/charts/shared/chart-data-filters";
 import { isUsingImputation } from "@/charts/shared/imputation";
@@ -19,7 +20,11 @@ import {
 import GenericChart from "@/components/common-chart";
 import Flex from "@/components/flex";
 import { HintBlue, HintRed, HintYellow } from "@/components/hint";
-import { MetadataPanel } from "@/components/metadata-panel";
+import {
+  MetadataPanel,
+  MetadataPanelStoreContext,
+  createMetadataPanelStore,
+} from "@/components/metadata-panel";
 import {
   ChartConfig,
   ConfiguratorStatePublishing,
@@ -28,7 +33,7 @@ import {
   PublishedConfiguratorStateProvider,
 } from "@/configurator";
 import { DataSetTable } from "@/configurator/components/datatable";
-import { flag } from "@/configurator/components/flag";
+import { DRAWER_WIDTH } from "@/configurator/components/drawer";
 import { parseDate } from "@/configurator/components/ui-helpers";
 import {
   DEFAULT_DATA_SOURCE,
@@ -68,15 +73,18 @@ export const ChartPublished = ({
   );
 };
 
-const useStyles = makeStyles((theme: Theme) => ({
+const useStyles = makeStyles<Theme, { shrink: boolean }>((theme) => ({
   root: {
     position: "relative",
     display: "flex",
     flexGrow: 1,
     flexDirection: "column",
     padding: theme.spacing(5),
+    paddingLeft: ({ shrink }) =>
+      `calc(${theme.spacing(5)} + ${shrink ? DRAWER_WIDTH : 0}px)`,
     color: theme.palette.grey[800],
     overflowX: "auto",
+    transition: "padding 0.25s ease",
   },
 }));
 
@@ -93,12 +101,43 @@ export const ChartPublishedInner = ({
   chartConfig: ChartConfig;
   configKey: string;
 }) => {
-  const classes = useStyles();
+  const rootRef = useRef<HTMLDivElement>(null);
+
+  const {
+    state: isTablePreview,
+    setState: setIsTablePreview,
+    containerRef,
+    containerHeight,
+    computeContainerHeight,
+  } = useChartTablePreview();
+
+  const metadataPanelStore = useMemo(() => createMetadataPanelStore(), []);
+  const metadataPanelOpen = useStore(metadataPanelStore, (state) => state.open);
+
+  const shouldShrink = useMemo(() => {
+    const rootWidth = rootRef.current?.getBoundingClientRect().width;
+
+    if (!rootWidth) {
+      return false;
+    }
+
+    return metadataPanelOpen && rootWidth > DRAWER_WIDTH * 2;
+  }, [metadataPanelOpen]);
+
+  useEffect(() => {
+    const unsubscribe = metadataPanelStore.subscribe(() => {
+      computeContainerHeight();
+    });
+
+    return () => unsubscribe();
+  });
+
+  const classes = useStyles({
+    shrink: shouldShrink,
+  });
   const locale = useLocale();
   const isTrustedDataSource = useIsTrustedDataSource(dataSource);
 
-  const rootRef = useRef<HTMLDivElement>(null);
-
   const [{ data: metaData }] = useDataCubeMetadataWithComponentValuesQuery({
     variables: {
       iri: dataSet,
@@ -115,13 +154,6 @@ export const ChartPublishedInner = ({
       chartConfig: chartConfig,
     } as ConfiguratorStatePublishing;
   }, [chartConfig, dataSource]);
-
-  const {
-    state: isTablePreview,
-    setState: setIsTablePreview,
-    containerRef,
-    containerHeight,
-  } = useChartTablePreview();
   const handleToggleTableView = useEvent(() => setIsTablePreview((c) => !c));
 
   const allDimensions: DimensionMetadataFragment[] = useMemo(() => {
@@ -132,98 +164,96 @@ export const ChartPublishedInner = ({
   }, [metaData?.dataCubeByIri?.dimensions, metaData?.dataCubeByIri?.measures]);
 
   return (
-    <Box className={classes.root} ref={rootRef}>
-      <ChartErrorBoundary resetKeys={[chartConfig]}>
-        {metaData?.dataCubeByIri?.publicationStatus ===
-          DataCubePublicationStatus.Draft && (
-          <Box sx={{ mb: 4 }}>
-            <HintRed iconName="datasetError" iconSize={64}>
-              <Trans id="dataset.publicationStatus.draft.warning">
-                Careful, this dataset is only a draft.
-                <br />
-                <strong>Don&apos;t use for reporting!</strong>
-              </Trans>
-            </HintRed>
-          </Box>
-        )}
-        {metaData?.dataCubeByIri?.expires && (
-          <Box sx={{ mb: 4 }}>
-            <HintRed iconName="datasetError" iconSize={64}>
-              <Trans id="dataset.publicationStatus.expires.warning">
-                Careful, the data for this chart has expired.
-                <br />
-                <strong>Don&apos;t use for reporting!</strong>
-              </Trans>
-            </HintRed>
-          </Box>
-        )}
-        {!isTrustedDataSource && (
-          <Box sx={{ mb: 4 }}>
-            <HintYellow iconName="hintWarning">
-              <Trans id="data.source.notTrusted">
-                This chart is not using a trusted data source.
-              </Trans>
-            </HintYellow>
-          </Box>
-        )}
-        {isUsingImputation(chartConfig) && (
-          <Box sx={{ mb: 4 }}>
-            <HintBlue iconName="hintWarning">
-              <Trans id="dataset.hasImputedValues">
-                Some data in this dataset is missing and has been interpolated
-                to fill the gaps.
-              </Trans>
-            </HintBlue>
-          </Box>
-        )}
-        <Flex sx={{ justifyContent: "space-between", alignItems: "center" }}>
-          <Typography component="div" variant="h2" mb={2}>
-            {meta.title[locale]}
-          </Typography>
+    <MetadataPanelStoreContext.Provider value={metadataPanelStore}>
+      <Box className={classes.root} ref={rootRef}>
+        <ChartErrorBoundary resetKeys={[chartConfig]}>
+          {metaData?.dataCubeByIri?.publicationStatus ===
+            DataCubePublicationStatus.Draft && (
+            <Box sx={{ mb: 4 }}>
+              <HintRed iconName="datasetError" iconSize={64}>
+                <Trans id="dataset.publicationStatus.draft.warning">
+                  Careful, this dataset is only a draft.
+                  <br />
+                  <strong>Don&apos;t use for reporting!</strong>
+                </Trans>
+              </HintRed>
+            </Box>
+          )}
+          {metaData?.dataCubeByIri?.expires && (
+            <Box sx={{ mb: 4 }}>
+              <HintRed iconName="datasetError" iconSize={64}>
+                <Trans id="dataset.publicationStatus.expires.warning">
+                  Careful, the data for this chart has expired.
+                  <br />
+                  <strong>Don&apos;t use for reporting!</strong>
+                </Trans>
+              </HintRed>
+            </Box>
+          )}
+          {!isTrustedDataSource && (
+            <Box sx={{ mb: 4 }}>
+              <HintYellow iconName="hintWarning">
+                <Trans id="data.source.notTrusted">
+                  This chart is not using a trusted data source.
+                </Trans>
+              </HintYellow>
+            </Box>
+          )}
+          {isUsingImputation(chartConfig) && (
+            <Box sx={{ mb: 4 }}>
+              <HintBlue iconName="hintWarning">
+                <Trans id="dataset.hasImputedValues">
+                  Some data in this dataset is missing and has been interpolated
+                  to fill the gaps.
+                </Trans>
+              </HintBlue>
+            </Box>
+          )}
+          <Flex sx={{ justifyContent: "space-between", alignItems: "center" }}>
+            <Typography component="div" variant="h2" mb={2}>
+              {meta.title[locale]}
+            </Typography>
 
-          {flag("metadata") && (
             <MetadataPanel
               datasetIri={dataSet}
               dataSource={dataSource}
               dimensions={allDimensions}
               container={rootRef.current}
             />
-          )}
-        </Flex>
+          </Flex>
 
-        {meta.description[locale] && (
-          <Typography component="div" variant="body1" mb={2}>
-            {meta.description[locale]}
-          </Typography>
-        )}
-        <InteractiveFiltersProvider>
-          <Flex
-            flexDirection="column"
-            ref={containerRef}
-            height={containerHeight.current!}
-            flexGrow={1}
-          >
-            <PublishedConfiguratorStateProvider
-              chartId={configKey}
-              initialState={publishedConfiguratorState}
+          {meta.description[locale] && (
+            <Typography component="div" variant="body1" mb={2}>
+              {meta.description[locale]}
+            </Typography>
+          )}
+          <InteractiveFiltersProvider>
+            <Flex
+              flexDirection="column"
+              ref={containerRef}
+              height={containerHeight.current!}
+              flexGrow={1}
             >
-              {isTablePreview ? (
-                <DataSetTable
-                  sx={{ maxHeight: "100%" }}
-                  dataSetIri={dataSet}
-                  dataSource={dataSource}
-                  chartConfig={chartConfig}
-                />
-              ) : (
-                <ChartWithInteractiveFilters
-                  dataSet={dataSet}
-                  dataSource={dataSource}
-                  chartConfig={chartConfig}
-                />
-              )}
-            </PublishedConfiguratorStateProvider>
-          </Flex>
-          {chartConfig && (
+              <PublishedConfiguratorStateProvider
+                chartId={configKey}
+                initialState={publishedConfiguratorState}
+              >
+                {isTablePreview ? (
+                  <DataSetTable
+                    sx={{ maxHeight: "100%" }}
+                    dataSetIri={dataSet}
+                    dataSource={dataSource}
+                    chartConfig={chartConfig}
+                  />
+                ) : (
+                  <ChartWithInteractiveFilters
+                    dataSet={dataSet}
+                    dataSource={dataSource}
+                    chartConfig={chartConfig}
+                  />
+                )}
+              </PublishedConfiguratorStateProvider>
+            </Flex>
             <ChartFootnotes
               dataSetIri={dataSet}
               dataSource={dataSource}
@@ -231,10 +261,10 @@ export const ChartPublishedInner = ({
               configKey={configKey}
               onToggleTableView={handleToggleTableView}
             />
-          )}
-        </InteractiveFiltersProvider>
-      </ChartErrorBoundary>
-    </Box>
+          </InteractiveFiltersProvider>
+        </ChartErrorBoundary>
+      </Box>
+    </MetadataPanelStoreContext.Provider>
   );
 };
 
diff --git a/app/components/chart-table-preview.tsx b/app/components/chart-table-preview.tsx
index f43905c3f..d6a338df5 100644
--- a/app/components/chart-table-preview.tsx
+++ b/app/components/chart-table-preview.tsx
@@ -17,6 +17,7 @@ type Context = {
   setStateRaw: Dispatch<SetStateAction<boolean>>;
   containerRef: RefObject<HTMLDivElement>;
   containerHeight: RefObject<"auto" | number>;
+  computeContainerHeight: () => void;
 };
 
 const ChartTablePreviewContext = createContext<Context>({
@@ -25,6 +26,7 @@ const ChartTablePreviewContext = createContext<Context>({
   setStateRaw: () => {},
   containerRef: { current: null },
   containerHeight: { current: "auto" },
+  computeContainerHeight: () => undefined,
 });
 
 export const useChartTablePreview = () => {
@@ -52,13 +54,16 @@ export const ChartTablePreviewProvider = ({
   const [state, setStateRaw] = useState<boolean>(false);
   const containerHeight = useRef("auto" as "auto" | number);
   const containerRef = useRef<HTMLDivElement>(null);
+  const computeContainerHeight = () => {
+    if (!containerRef.current) {
+      return;
+    }
+    const bcr = containerRef.current.getBoundingClientRect();
+    containerHeight.current = bcr.height;
+  };
   const setState = useCallback(
     (v) => {
-      if (!containerRef.current) {
-        return;
-      }
-      const bcr = containerRef.current.getBoundingClientRect();
-      containerHeight.current = bcr.height;
+      computeContainerHeight();
       return setStateRaw(v);
     },
     [setStateRaw]
@@ -71,6 +76,7 @@ export const ChartTablePreviewProvider = ({
       setStateRaw,
       containerRef,
       containerHeight,
+      computeContainerHeight,
     };
   }, [setState, state, containerRef, containerHeight, setStateRaw]);
   return (
diff --git a/app/components/form.tsx b/app/components/form.tsx
index 92efca98c..7d1d6fdcc 100644
--- a/app/components/form.tsx
+++ b/app/components/form.tsx
@@ -42,40 +42,30 @@ import {
 import { useBrowseContext } from "@/configurator/components/dataset-browse";
 import { Icon } from "@/icons";
 import { useLocale } from "@/locales/use-locale";
-import { MaybeTooltip } from "@/utils/maybe-tooltip";
 import { valueComparator } from "@/utils/sorting-values";
 
 export const Label = ({
   htmlFor,
-  tooltipText,
   smaller = false,
   children,
   sx,
 }: {
   htmlFor: string;
-  tooltipText?: string;
   smaller?: boolean;
   children: ReactNode;
   sx?: TypographyProps["sx"];
 }) => {
   return (
-    <MaybeTooltip text={tooltipText}>
-      <Typography
-        component="label"
-        htmlFor={htmlFor}
-        variant={smaller ? "caption" : "body2"}
-        color="secondary"
-        display="flex"
-        sx={{
-          ...sx,
-          ...(tooltipText
-            ? { width: "max-content", textDecoration: "underline" }
-            : {}),
-        }}
-      >
-        {children}
-      </Typography>
-    </MaybeTooltip>
+    <Typography
+      component="label"
+      htmlFor={htmlFor}
+      variant={smaller ? "caption" : "body2"}
+      color="secondary"
+      display="flex"
+      sx={sx}
+    >
+      {children}
+    </Typography>
   );
 };
 
@@ -312,7 +302,6 @@ export const Select = ({
   sortOptions = true,
   controls,
   optionGroups,
-  tooltipText,
   open,
   onClose,
   onOpen,
@@ -325,7 +314,6 @@ export const Select = ({
   sortOptions?: boolean;
   controls?: React.ReactNode;
   optionGroups?: [OptionGroup, Option[]][];
-  tooltipText?: string;
   loading?: boolean;
 } & SelectProps) => {
   const locale = useLocale();
@@ -350,7 +338,7 @@ export const Select = ({
     <LoadingMenuPaperContext.Provider value={loading}>
       <Box>
         {label && (
-          <Label htmlFor={id} smaller tooltipText={tooltipText} sx={{ mb: 1 }}>
+          <Label htmlFor={id} smaller sx={{ my: 1 }}>
             {label}
             {controls}
           </Label>
@@ -456,16 +444,14 @@ export const Input = ({
   name,
   value,
   disabled,
-  tooltipText,
   onChange,
 }: {
   label?: string | ReactNode;
-  tooltipText?: string;
   disabled?: boolean;
 } & FieldProps) => (
   <Box sx={{ fontSize: "1rem", pb: 2 }}>
     {label && name && (
-      <Label htmlFor={name} smaller tooltipText={tooltipText} sx={{ mb: 1 }}>
+      <Label htmlFor={name} smaller sx={{ mb: 1 }}>
         {label}
       </Label>
     )}
diff --git a/app/components/metadata-panel.tsx b/app/components/metadata-panel.tsx
index e78da41ed..96b1ab43d 100644
--- a/app/components/metadata-panel.tsx
+++ b/app/components/metadata-panel.tsx
@@ -1,72 +1,104 @@
 import { t, Trans } from "@lingui/macro";
 import { TabContext, TabList, TabPanel } from "@mui/lab";
 import {
+  Autocomplete,
   Box,
   Button,
   Drawer,
   IconButton,
-  Input,
   InputAdornment,
   Tab,
+  TextField,
   Theme,
   Typography,
 } from "@mui/material";
 import { makeStyles } from "@mui/styles";
-import React, { useMemo, useState } from "react";
-
-import { DataSource } from "@/configurator";
+import match from "autosuggest-highlight/match";
+import parse from "autosuggest-highlight/parse";
+import clsx from "clsx";
+import { AnimatePresence, Transition } from "framer-motion";
+import { useRouter } from "next/router";
+import React from "react";
+import { createStore, useStore } from "zustand";
+import shallow from "zustand/shallow";
+
+import { BackButton, DataSource } from "@/configurator";
 import { DataSetMetadata } from "@/configurator/components/dataset-metadata";
 import { DRAWER_WIDTH } from "@/configurator/components/drawer";
+import { MotionBox } from "@/configurator/components/presence";
 import { DimensionMetadataFragment } from "@/graphql/query-hooks";
-import { Icon, getDimensionIconName } from "@/icons";
+import { getDimensionIconName, Icon } from "@/icons";
+import SvgIcArrowRight from "@/icons/components/IcArrowRight";
 import SvgIcClose from "@/icons/components/IcClose";
 import useEvent from "@/utils/use-event";
 
 import Flex from "./flex";
 
-type Section = "general" | "data";
+type MetadataPanelSection = "general" | "data";
 
-type State = {
+type MetadataPanelState = {
   open: boolean;
-  toggle: () => void;
-  activeSection: Section;
-  setActiveSection: (d: Section) => void;
+  activeSection: MetadataPanelSection;
+  selectedDimension: DimensionMetadataFragment | undefined;
+  actions: {
+    setOpen: (d: boolean) => void;
+    toggle: () => void;
+    setActiveSection: (d: MetadataPanelSection) => void;
+    setSelectedDimension: (d: DimensionMetadataFragment) => void;
+    clearSelectedDimension: () => void;
+    openDimension: (d: DimensionMetadataFragment) => void;
+    reset: () => void;
+  };
 };
 
-const Context = React.createContext<State | undefined>(undefined);
-
-export const ContextProvider = ({
-  children,
-}: {
-  children: React.ReactNode;
-}) => {
-  const [open, setOpen] = React.useState(false);
-  const [activeSection, setActiveSection] = React.useState<Section>("general");
+export const createMetadataPanelStore = () =>
+  createStore<MetadataPanelState>((set, get) => ({
+    open: false,
+    activeSection: "general",
+    selectedDimension: undefined,
+    actions: {
+      setOpen: (d: boolean) => {
+        set({ open: d });
+      },
+      toggle: () => {
+        set({ open: !get().open });
+      },
+      setActiveSection: (d: MetadataPanelSection) => {
+        set({ activeSection: d });
+      },
+      setSelectedDimension: (d: DimensionMetadataFragment) => {
+        set({ selectedDimension: d });
+      },
+      clearSelectedDimension: () => {
+        set({ selectedDimension: undefined });
+      },
+      openDimension: (d: DimensionMetadataFragment) => {
+        set({ open: true, activeSection: "data", selectedDimension: d });
+      },
+      reset: () => {
+        set({ activeSection: "general", selectedDimension: undefined });
+      },
+    },
+  }));
 
-  const ctx = React.useMemo(() => {
-    return {
-      open,
-      toggle: () => setOpen(!open),
-      activeSection,
-      setActiveSection,
-    };
-  }, [open, activeSection]);
+const useMetadataPanelStore: <T>(
+  selector: (state: MetadataPanelState) => T
+) => T = (selector) => {
+  const store = React.useContext(MetadataPanelStoreContext);
 
-  return <Context.Provider value={ctx}>{children}</Context.Provider>;
+  return useStore(store, selector, shallow);
 };
 
-export const useContext = () => {
-  const ctx = React.useContext(Context);
+const useMetadataPanelStoreActions = () => {
+  const store = React.useContext(MetadataPanelStoreContext);
 
-  if (ctx === undefined) {
-    throw Error(
-      "You need to wrap your component in <ContextProvider /> to useContext()"
-    );
-  }
-
-  return ctx;
+  return useStore(store, (state) => state.actions);
 };
 
+const defaultStore = createMetadataPanelStore();
+
+export const MetadataPanelStoreContext = React.createContext(defaultStore);
+
 const useDrawerStyles = makeStyles<Theme, { top: number }>((theme) => {
   return {
     root: {
@@ -109,54 +141,106 @@ const useOtherStyles = makeStyles<Theme>((theme) => {
       },
     },
     tabPanel: {
+      padding: 0,
+    },
+    tabPanelContent: {
       display: "flex",
       flexDirection: "column",
       gap: theme.spacing(4),
-      padding: 0,
     },
     icon: {
       display: "inline",
-      marginLeft: -6,
+      marginLeft: -2,
       marginTop: -3,
       marginRight: 2,
     },
     search: {
-      marginTop: theme.spacing(2),
-      padding: "0px 12px",
-      width: "100%",
-      height: 40,
-      minHeight: 40,
+      "& .MuiAutocomplete-inputRoot": {
+        padding: `0px ${theme.spacing(3)}`,
+
+        "& > .MuiAutocomplete-input": {
+          padding: `${theme.spacing(2)} 0px`,
+        },
+      },
+    },
+    searchInputResultList: {
+      marginTop: theme.spacing(1),
+      padding: 0,
+      border: `1px solid ${theme.palette.grey[700]}`,
+      borderRadius: 3,
+    },
+    searchInputResult: {
+      borderBottom: `1px solid ${theme.palette.grey[400]}`,
+
+      "&:last-of-type": {
+        borderBottom: "none",
+      },
+    },
+    openDimension: {
+      minHeight: 0,
+      verticalAlign: "baseline",
+      padding: 0,
+      margin: 0,
+      fontSize: "inherit",
+      color: "inherit",
+    },
+    openDimensionSVG: {
+      cursor: "pointer",
+
+      "&:hover": {
+        fill: theme.palette.primary.hover,
+      },
     },
   };
 });
 
-export const MetadataPanel = ({
-  datasetIri,
-  dataSource,
-  dimensions,
-  container,
-  top,
+const animationProps: Transition = {
+  transition: {
+    duration: 0.2,
+  },
+  initial: {
+    opacity: 0,
+  },
+  animate: {
+    opacity: 1,
+  },
+  exit: {
+    opacity: 0,
+  },
+};
+
+export const OpenMetadataPanelWrapper = ({
+  dim,
+  svg,
+  children,
 }: {
-  datasetIri: string;
-  dataSource: DataSource;
-  dimensions: DimensionMetadataFragment[];
-  container?: HTMLDivElement | null;
-  top?: number;
+  dim: DimensionMetadataFragment;
+  svg?: boolean;
+  children: React.ReactNode;
 }) => {
-  return (
-    <ContextProvider>
-      <PanelInner
-        datasetIri={datasetIri}
-        dataSource={dataSource}
-        dimensions={dimensions}
-        container={container}
-        top={top}
-      />
-    </ContextProvider>
+  const classes = useOtherStyles();
+  const { openDimension } = useMetadataPanelStoreActions();
+  const handleClick = useEvent(() => {
+    openDimension(dim);
+  });
+
+  return svg ? (
+    <g className={classes.openDimensionSVG} onClick={handleClick}>
+      {children}
+    </g>
+  ) : (
+    <Button
+      className={classes.openDimension}
+      variant="text"
+      size="small"
+      onClick={handleClick}
+    >
+      {children}
+    </Button>
   );
 };
 
-const PanelInner = ({
+export const MetadataPanel = ({
   datasetIri,
   dataSource,
   dimensions,
@@ -166,16 +250,28 @@ const PanelInner = ({
   datasetIri: string;
   dataSource: DataSource;
   dimensions: DimensionMetadataFragment[];
-  container: HTMLDivElement | null | undefined;
+  container?: HTMLDivElement | null;
   top?: number;
 }) => {
+  const router = useRouter();
   const drawerClasses = useDrawerStyles({ top });
   const otherClasses = useOtherStyles();
-  const { open, toggle, activeSection, setActiveSection } = useContext();
+  const { open, activeSection } = useMetadataPanelStore((state) => ({
+    open: state.open,
+    activeSection: state.activeSection,
+  }));
+  const { setOpen, toggle, setActiveSection, reset } =
+    useMetadataPanelStoreActions();
   const handleToggle = useEvent(() => {
     toggle();
   });
 
+  // Close and reset the metadata panel when route has changed.
+  React.useEffect(() => {
+    setOpen(false);
+    reset();
+  }, [router.pathname, setOpen, reset]);
+
   return (
     <>
       <ToggleButton onClick={handleToggle} />
@@ -217,8 +313,20 @@ const PanelInner = ({
             />
           </TabList>
 
-          <TabPanelGeneral datasetIri={datasetIri} dataSource={dataSource} />
-          <TabPanelData dimensions={dimensions} />
+          <AnimatePresence>
+            {activeSection === "general" ? (
+              <MotionBox key="general-tab" {...animationProps}>
+                <TabPanelGeneral
+                  datasetIri={datasetIri}
+                  dataSource={dataSource}
+                />
+              </MotionBox>
+            ) : activeSection === "data" ? (
+              <MotionBox key="data-tab" {...animationProps}>
+                <TabPanelData dimensions={dimensions} />
+              </MotionBox>
+            ) : null}
+          </AnimatePresence>
         </TabContext>
 
         <Content />
@@ -281,48 +389,150 @@ const TabPanelData = ({
   dimensions: DimensionMetadataFragment[];
 }) => {
   const classes = useOtherStyles();
-  const [searchInput, setSearchInput] = useState("");
+  const selectedDimension = useMetadataPanelStore(
+    (state) => state.selectedDimension
+  );
+  const { setSelectedDimension, clearSelectedDimension } =
+    useMetadataPanelStoreActions();
+  const [inputValue, setInputValue] = React.useState("");
 
-  const filteredDimensions = useMemo(() => {
-    return dimensions.filter(
-      (d) =>
-        d.label.toLowerCase().includes(searchInput) ||
-        d.description?.toLowerCase().includes(searchInput)
-    );
-  }, [dimensions, searchInput]);
+  const options = React.useMemo(() => {
+    return dimensions.map((d) => ({ label: d.label, value: d }));
+  }, [dimensions]);
 
   return (
     <TabPanel className={classes.tabPanel} value="data">
-      {/* Extract into a component (as it's also used in MultiFilter drawer?) */}
-      <Input
-        className={classes.search}
-        value={searchInput}
-        onChange={(e) => setSearchInput(e.target.value.toLowerCase())}
-        placeholder={t({
-          id: "select.controls.metadata.search",
-          message: "Jump to...",
-        })}
-        startAdornment={
-          <InputAdornment position="start">
-            <Icon name="search" size={16} />
-          </InputAdornment>
-        }
-        sx={{ typography: "body2" }}
-      />
-      {filteredDimensions.map((d) => (
-        <Box key={d.iri}>
-          <Flex>
-            <Icon
-              className={classes.icon}
-              name={getDimensionIconName(d.__typename)}
+      <AnimatePresence exitBeforeEnter={true}>
+        {selectedDimension ? (
+          <MotionBox key="dimension-selected" {...animationProps}>
+            <BackButton onClick={() => clearSelectedDimension()}>
+              <Trans id="button.back">Back</Trans>
+            </BackButton>
+            <Box sx={{ mt: 4 }}>
+              <TabPanelDataDimension
+                dim={selectedDimension}
+                expandable={false}
+              />
+            </Box>
+          </MotionBox>
+        ) : (
+          <MotionBox
+            key="dimension-not-selected"
+            className={classes.tabPanelContent}
+            {...animationProps}
+          >
+            <Autocomplete
+              className={classes.search}
+              disablePortal
+              onChange={(_, v) => v && setSelectedDimension(v.value)}
+              inputValue={inputValue}
+              onInputChange={(_, v) => setInputValue(v.toLowerCase())}
+              options={options}
+              ListboxProps={{ className: classes.searchInputResultList }}
+              renderInput={(params) => (
+                <TextField
+                  {...params}
+                  className={classes.search}
+                  placeholder={t({
+                    id: "select.controls.metadata.search",
+                    message: "Jump to...",
+                  })}
+                  InputProps={{
+                    ...params.InputProps,
+                    startAdornment: (
+                      <InputAdornment position="start">
+                        <Icon name="search" size={16} />
+                      </InputAdornment>
+                    ),
+                    sx: { typography: "body2" },
+                  }}
+                />
+              )}
+              renderOption={(props, option, { inputValue }) => {
+                const matches = match(option.label, inputValue, {
+                  insideWords: true,
+                });
+                const parts = parse(option.label, matches);
+
+                return (
+                  <li
+                    {...props}
+                    className={clsx(props.className, classes.searchInputResult)}
+                  >
+                    <div>
+                      {parts.map(({ text, highlight }, i) => (
+                        <Typography
+                          key={i}
+                          variant="body2"
+                          component="span"
+                          style={{ fontWeight: highlight ? 700 : 400 }}
+                        >
+                          {text}
+                        </Typography>
+                      ))}
+                    </div>
+                  </li>
+                );
+              }}
+              clearIcon={null}
             />
-            <Typography variant="body2" fontWeight="bold">
-              {d.label}
-            </Typography>
-          </Flex>
-          <Typography variant="body2">{d.description}</Typography>
-        </Box>
-      ))}
+            {dimensions.map((d) => (
+              <TabPanelDataDimension key={d.iri} dim={d} expandable={true} />
+            ))}
+          </MotionBox>
+        )}
+      </AnimatePresence>
     </TabPanel>
   );
 };
+
+const TabPanelDataDimension = ({
+  dim,
+  expandable,
+}: {
+  dim: DimensionMetadataFragment;
+  expandable: boolean;
+}) => {
+  const classes = useOtherStyles();
+  const { setSelectedDimension } = useMetadataPanelStoreActions();
+  const { description, showExpandButton } = React.useMemo(() => {
+    if (expandable && dim.description && dim.description.length > 180) {
+      return {
+        description: dim.description.slice(0, 180) + "…",
+        showExpandButton: true,
+      };
+    }
+
+    return {
+      description: dim.description,
+      showExpandButton: false,
+    };
+  }, [dim.description, expandable]);
+  const iconName = React.useMemo(() => {
+    return getDimensionIconName(dim.__typename);
+  }, [dim.__typename]);
+
+  return (
+    <div>
+      <Flex>
+        <Icon className={classes.icon} name={iconName} />
+        <Typography variant="body2" fontWeight="bold">
+          {dim.label}
+        </Typography>
+      </Flex>
+      {description && <Typography variant="body2">{description}</Typography>}
+      {showExpandButton && (
+        <Button
+          component="a"
+          variant="text"
+          size="small"
+          onClick={() => setSelectedDimension(dim)}
+          endIcon={<SvgIcArrowRight />}
+          sx={{ p: 0 }}
+        >
+          Show more
+        </Button>
+      )}
+    </div>
+  );
+};
diff --git a/app/components/select-tree.tsx b/app/components/select-tree.tsx
index a984293b9..627e94f12 100644
--- a/app/components/select-tree.tsx
+++ b/app/components/select-tree.tsx
@@ -265,8 +265,7 @@ export type SelectTreeProps = {
   controls?: React.ReactNode;
   onChange: (ev: { target: { value: NodeId } }) => void;
   disabled?: boolean;
-  tooltipText?: string;
-  label?: string;
+  label?: React.ReactNode;
   onOpen?: () => void;
   onClose?: () => void;
   open?: boolean;
@@ -287,7 +286,6 @@ function SelectTree({
   options,
   value,
   onChange,
-  tooltipText,
   disabled,
   controls,
   onOpen,
@@ -478,7 +476,7 @@ function SelectTree({
   return (
     <div>
       {label && (
-        <Label htmlFor={id!} smaller tooltipText={tooltipText} sx={{ mb: 1 }}>
+        <Label htmlFor={id!} smaller sx={{ mb: 1 }}>
           {label} {controls}
         </Label>
       )}
diff --git a/app/configurator/components/chart-configurator.tsx b/app/configurator/components/chart-configurator.tsx
index c55e016e7..98ae7efb5 100644
--- a/app/configurator/components/chart-configurator.tsx
+++ b/app/configurator/components/chart-configurator.tsx
@@ -29,6 +29,7 @@ import {
 import { useClient } from "urql";
 
 import { chartConfigOptionsUISpec } from "@/charts/chart-config-ui-options";
+import { OpenMetadataPanelWrapper } from "@/components/metadata-panel";
 import {
   ChartConfig,
   ConfiguratorStateConfiguringChart,
@@ -125,12 +126,15 @@ const DataFilterSelectGeneric = ({
 
   const sharedProps = {
     dimension: dimension,
-    label: `${index + 1}. ${dimension.label}`,
+    label: (
+      <OpenMetadataPanelWrapper dim={dimension}>
+        {`${index + 1}. ${dimension.label}`}
+      </OpenMetadataPanelWrapper>
+    ),
     controls: controls,
     id: `select-single-filter-${index}`,
     disabled: disabled,
     isOptional: !dimension.isKeyDimension,
-    tooltipText: dimension.description || undefined,
   };
 
   if (isTemporalDimension(dimension)) {
diff --git a/app/configurator/components/configurator.tsx b/app/configurator/components/configurator.tsx
index 882822b28..0060d75ba 100644
--- a/app/configurator/components/configurator.tsx
+++ b/app/configurator/components/configurator.tsx
@@ -43,7 +43,7 @@ const BackContainer = ({ children }: { children: React.ReactNode }) => {
   );
 };
 
-const BackButton = ({
+export const BackButton = ({
   children,
   onClick,
 }: { children: React.ReactNode } & ButtonProps) => {
diff --git a/app/configurator/components/field.tsx b/app/configurator/components/field.tsx
index b54948f76..86ac38efb 100644
--- a/app/configurator/components/field.tsx
+++ b/app/configurator/components/field.tsx
@@ -148,18 +148,16 @@ export const DataFilterSelect = ({
   isOptional,
   controls,
   hierarchy,
-  tooltipText,
   onOpen,
   loading,
 }: {
   dimension: DimensionMetadataFragment;
-  label: string;
+  label: React.ReactNode;
   id: string;
   disabled?: boolean;
   isOptional?: boolean;
   controls?: React.ReactNode;
   hierarchy?: HierarchyValue[];
-  tooltipText?: string;
   onOpen?: () => void;
   loading?: boolean;
 }) => {
@@ -222,7 +220,6 @@ export const DataFilterSelect = ({
         open={isOpen}
         disabled={disabled}
         controls={controls}
-        tooltipText={tooltipText}
         {...fieldProps}
       />
     );
@@ -236,7 +233,6 @@ export const DataFilterSelect = ({
       options={allValues}
       sortOptions={false}
       controls={controls}
-      tooltipText={tooltipText}
       open={isOpen}
       onClose={handleClose}
       onOpen={handleOpen}
@@ -257,7 +253,7 @@ export const DataFilterSelectDay = ({
   controls,
 }: {
   dimension: DimensionMetadataFragment;
-  label: string;
+  label: React.ReactNode;
   disabled?: boolean;
   isOptional?: boolean;
   controls?: React.ReactNode;
@@ -349,10 +345,9 @@ export const DataFilterSelectTime = ({
   disabled,
   isOptional,
   controls,
-  tooltipText,
 }: {
   dimension: DimensionMetadataFragment;
-  label: string;
+  label: React.ReactNode;
   from: string;
   to: string;
   timeUnit: TimeUnit;
@@ -361,7 +356,6 @@ export const DataFilterSelectTime = ({
   disabled?: boolean;
   isOptional?: boolean;
   controls?: React.ReactNode;
-  tooltipText?: string;
 }) => {
   const fieldProps = useSingleFilterSelect({ dimensionIri: dimension.iri });
   const formatLocale = useTimeFormatLocale();
@@ -416,7 +410,6 @@ export const DataFilterSelectTime = ({
         options={allOptions}
         sortOptions={false}
         controls={controls}
-        tooltipText={tooltipText}
         {...fieldProps}
       />
     );
@@ -430,7 +423,6 @@ export const DataFilterSelectTime = ({
       timeFormat={timeFormat}
       formatLocale={formatLocale}
       isOptional={isOptional}
-      tooltipText={tooltipText}
       onChange={fieldProps.onChange}
     />
   );
@@ -443,16 +435,14 @@ export const TimeInput = ({
   timeFormat,
   formatLocale,
   isOptional,
-  tooltipText,
   onChange,
 }: {
   id: string;
-  label: string;
+  label: React.ReactNode;
   value: string | undefined;
   timeFormat: string;
   formatLocale: TimeLocaleObject;
   isOptional: boolean | undefined;
-  tooltipText?: string;
   onChange: (e: ChangeEvent<HTMLInputElement>) => void;
 }) => {
   const [inputValue, setInputValue] = useState(
@@ -492,7 +482,6 @@ export const TimeInput = ({
       name={id}
       label={label}
       value={inputValue}
-      tooltipText={tooltipText}
       onChange={onInputChange}
     />
   );
@@ -541,14 +530,12 @@ export const MetaInputField = ({
   locale,
   value,
   disabled,
-  tooltipText,
 }: {
   label: string | ReactNode;
   metaKey: string;
   locale: string;
   value?: string;
   disabled?: boolean;
-  tooltipText?: string;
 }) => {
   const field = useMetaField({
     metaKey,
@@ -556,14 +543,7 @@ export const MetaInputField = ({
     value,
   });
 
-  return (
-    <Input
-      label={label}
-      {...field}
-      disabled={disabled}
-      tooltipText={tooltipText}
-    />
-  );
+  return <Input label={label} {...field} disabled={disabled} />;
 };
 
 const useMultiFilterColorPicker = (value: string) => {
diff --git a/app/locales/de/messages.po b/app/locales/de/messages.po
index 0bbda0c9b..ee1a24990 100644
--- a/app/locales/de/messages.po
+++ b/app/locales/de/messages.po
@@ -62,6 +62,10 @@ msgstr "Alle Datensätze"
 msgid "browse.datasets.description"
 msgstr "Erkunden Sie die vom LINDAS Linked Data Service bereitgestellten Datensätze, indem Sie entweder nach Kategorien oder Organisationen filtern oder direkt nach bestimmten Stichworten suchen. Klicken Sie auf einen Datensatz, um detailliertere Informationen zu erhalten und Ihre eigenen Visualisierungen zu erstellen."
 
+#: app/components/metadata-panel.tsx:318
+msgid "button.back"
+msgstr "Zurück"
+
 #: app/pages/v/[chartId].tsx:166
 msgid "button.copy.visualization"
 msgstr "Diese Visualisierung kopieren und editieren"
@@ -396,16 +400,16 @@ msgstr "Italienisch"
 msgid "controls.measure"
 msgstr "Messwert"
 
-#: app/components/metadata-panel.tsx:234
-#: app/components/metadata-panel.tsx:246
+#: app/components/metadata-panel.tsx:251
+#: app/components/metadata-panel.tsx:263
 msgid "controls.metadata-panel.metadata"
 msgstr "Metadata"
 
-#: app/components/metadata-panel.tsx:214
+#: app/components/metadata-panel.tsx:231
 msgid "controls.metadata-panel.section.data"
 msgstr "Daten"
 
-#: app/components/metadata-panel.tsx:204
+#: app/components/metadata-panel.tsx:221
 msgid "controls.metadata-panel.section.general"
 msgstr "Allgemeines"
 
@@ -951,7 +955,7 @@ msgstr "visualize.admin.ch"
 msgid "select.controls.filters.search"
 msgstr "Suche"
 
-#: app/components/metadata-panel.tsx:301
+#: app/components/metadata-panel.tsx:329
 msgid "select.controls.metadata.search"
 msgstr "Springen zu..."
 
diff --git a/app/locales/en/messages.po b/app/locales/en/messages.po
index c3f3f86d8..ee21eaf40 100644
--- a/app/locales/en/messages.po
+++ b/app/locales/en/messages.po
@@ -62,6 +62,10 @@ msgstr "All datasets"
 msgid "browse.datasets.description"
 msgstr "Explore datasets provided by the LINDAS Linked Data Service by either filtering by categories or organisations or search directly for specific keywords. Click on a dataset to see more detailed information and start creating your own visualizations."
 
+#: app/components/metadata-panel.tsx:318
+msgid "button.back"
+msgstr "Back"
+
 #: app/pages/v/[chartId].tsx:166
 msgid "button.copy.visualization"
 msgstr "Copy and edit this visualization"
@@ -396,16 +400,16 @@ msgstr "Italian"
 msgid "controls.measure"
 msgstr "Measure"
 
-#: app/components/metadata-panel.tsx:234
-#: app/components/metadata-panel.tsx:246
+#: app/components/metadata-panel.tsx:251
+#: app/components/metadata-panel.tsx:263
 msgid "controls.metadata-panel.metadata"
 msgstr "Metadata"
 
-#: app/components/metadata-panel.tsx:214
+#: app/components/metadata-panel.tsx:231
 msgid "controls.metadata-panel.section.data"
 msgstr "Data"
 
-#: app/components/metadata-panel.tsx:204
+#: app/components/metadata-panel.tsx:221
 msgid "controls.metadata-panel.section.general"
 msgstr "General"
 
@@ -951,7 +955,7 @@ msgstr "visualize.admin.ch"
 msgid "select.controls.filters.search"
 msgstr "Search"
 
-#: app/components/metadata-panel.tsx:301
+#: app/components/metadata-panel.tsx:329
 msgid "select.controls.metadata.search"
 msgstr "Jump to..."
 
diff --git a/app/locales/fr/messages.po b/app/locales/fr/messages.po
index 0e73c68f6..cf211dd5b 100644
--- a/app/locales/fr/messages.po
+++ b/app/locales/fr/messages.po
@@ -62,6 +62,10 @@ msgstr "Tous les jeux de données"
 msgid "browse.datasets.description"
 msgstr "Explorez les jeux de données liés fournis par LINDAS, en filtrant par catégories ou organisations, ou en recherchant par mots-clés. Cliquez sur un ensemble de données pour afficher des informations plus détaillées et commencer à créer vos propres visualisations. "
 
+#: app/components/metadata-panel.tsx:318
+msgid "button.back"
+msgstr "Précédent"
+
 #: app/pages/v/[chartId].tsx:166
 msgid "button.copy.visualization"
 msgstr "Copier et éditer cette visualisation"
@@ -396,16 +400,16 @@ msgstr "Italien"
 msgid "controls.measure"
 msgstr "Variable mesurée"
 
-#: app/components/metadata-panel.tsx:234
-#: app/components/metadata-panel.tsx:246
+#: app/components/metadata-panel.tsx:251
+#: app/components/metadata-panel.tsx:263
 msgid "controls.metadata-panel.metadata"
 msgstr "Metadata"
 
-#: app/components/metadata-panel.tsx:214
+#: app/components/metadata-panel.tsx:231
 msgid "controls.metadata-panel.section.data"
 msgstr "Données"
 
-#: app/components/metadata-panel.tsx:204
+#: app/components/metadata-panel.tsx:221
 msgid "controls.metadata-panel.section.general"
 msgstr "Général"
 
@@ -951,7 +955,7 @@ msgstr "visualize.admin.ch"
 msgid "select.controls.filters.search"
 msgstr "Chercher"
 
-#: app/components/metadata-panel.tsx:301
+#: app/components/metadata-panel.tsx:329
 msgid "select.controls.metadata.search"
 msgstr "Sauter à..."
 
diff --git a/app/locales/it/messages.po b/app/locales/it/messages.po
index a23c5c02e..7287e6a52 100644
--- a/app/locales/it/messages.po
+++ b/app/locales/it/messages.po
@@ -62,6 +62,10 @@ msgstr "Tutti i set di dati"
 msgid "browse.datasets.description"
 msgstr "Esplora i set di dati forniti dal LINDAS Linked Data Service filtrando per categorie o organizzazioni oppure cercando direttamente per parole chiave specifiche. Clicca su un set di dati per vedere informazioni più dettagliate e iniziare a creare le tue visualizzazioni."
 
+#: app/components/metadata-panel.tsx:318
+msgid "button.back"
+msgstr "Torna indietro"
+
 #: app/pages/v/[chartId].tsx:166
 msgid "button.copy.visualization"
 msgstr "Copia e modifica questa visualizzazione"
@@ -396,16 +400,16 @@ msgstr "Italiano"
 msgid "controls.measure"
 msgstr "Misura"
 
-#: app/components/metadata-panel.tsx:234
-#: app/components/metadata-panel.tsx:246
+#: app/components/metadata-panel.tsx:251
+#: app/components/metadata-panel.tsx:263
 msgid "controls.metadata-panel.metadata"
 msgstr "Metadata"
 
-#: app/components/metadata-panel.tsx:214
+#: app/components/metadata-panel.tsx:231
 msgid "controls.metadata-panel.section.data"
 msgstr "Dati"
 
-#: app/components/metadata-panel.tsx:204
+#: app/components/metadata-panel.tsx:221
 msgid "controls.metadata-panel.section.general"
 msgstr "Generale"
 
@@ -951,7 +955,7 @@ msgstr "visualize.admin.ch"
 msgid "select.controls.filters.search"
 msgstr "Cerca"
 
-#: app/components/metadata-panel.tsx:301
+#: app/components/metadata-panel.tsx:329
 msgid "select.controls.metadata.search"
 msgstr "Salta a..."
 
diff --git a/app/package.json b/app/package.json
index b1d3e7d86..8dce9063e 100644
--- a/app/package.json
+++ b/app/package.json
@@ -51,6 +51,7 @@
     "@visx/zoom": "^2.10.0",
     "@zazuko/cube-hierarchy-query": "^1.0.2",
     "apollo-server-micro": "^2.25.2",
+    "autosuggest-highlight": "^3.3.4",
     "catalog": "^4.0.1-canary.2",
     "clipboard-polyfill": "^3.0.1",
     "core-js": "^3.15.1",
@@ -138,6 +139,7 @@
     "@svgr/cli": "^5.5.0",
     "@testing-library/react": "^12.1.2",
     "@testing-library/react-hooks": "^7.0.2",
+    "@types/autosuggest-highlight": "^3.2.0",
     "@types/clownface": "^1.0.3",
     "@types/cors": "^2.8.8",
     "@types/d3": "^6.7.2",
diff --git a/app/pages/create/[chartId].tsx b/app/pages/create/[chartId].tsx
index a4e9d93c3..69df8577f 100644
--- a/app/pages/create/[chartId].tsx
+++ b/app/pages/create/[chartId].tsx
@@ -3,6 +3,10 @@ import Head from "next/head";
 import * as React from "react";
 
 import { AppLayout } from "@/components/layout";
+import {
+  createMetadataPanelStore,
+  MetadataPanelStoreContext,
+} from "@/components/metadata-panel";
 import { Configurator, EditorConfiguratorStateProvider } from "@/configurator";
 
 type PageProps = {
@@ -23,6 +27,11 @@ export const getServerSideProps: GetServerSideProps<PageProps> = async ({
 };
 
 const ChartConfiguratorPage: NextPage<PageProps> = ({ chartId }) => {
+  const metadataPanelStore = React.useMemo(
+    () => createMetadataPanelStore(),
+    []
+  );
+
   return (
     <>
       <Head>
@@ -31,7 +40,9 @@ const ChartConfiguratorPage: NextPage<PageProps> = ({ chartId }) => {
       </Head>
       <AppLayout>
         <EditorConfiguratorStateProvider chartId={chartId}>
-          <Configurator />
+          <MetadataPanelStoreContext.Provider value={metadataPanelStore}>
+            <Configurator />
+          </MetadataPanelStoreContext.Provider>
         </EditorConfiguratorStateProvider>
       </AppLayout>
     </>
diff --git a/yarn.lock b/yarn.lock
index e92c94e20..d1f6bf688 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -133,21 +133,26 @@
   resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.19.3.tgz#707b939793f867f5a73b2666e6d9a3396eb03151"
   integrity sha512-prBHMK4JYYK+wDjJF1q99KK4JLL+egWS4nmNqdlMUgCExMZ+iZW0hGhyC3VEbsPjvaN0TBhW//VIFwBrk8sEiw==
 
+"@babel/compat-data@^7.20.0":
+  version "7.20.5"
+  resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.20.5.tgz#86f172690b093373a933223b4745deeb6049e733"
+  integrity sha512-KZXo2t10+/jxmkhNXc7pZTqRvSOIvVv/+lJwHS+B2rErwOyjuVRh60yVpb7liQ1U5t7lLJ1bz+t8tSypUZdm0g==
+
 "@babel/core@7.12.9", "@babel/core@^7.0.0", "@babel/core@^7.1.0", "@babel/core@^7.10.5", "@babel/core@^7.12.3", "@babel/core@^7.12.9", "@babel/core@^7.14.6", "@babel/core@^7.7.2", "@babel/core@^7.7.5", "@babel/core@^7.7.7":
-  version "7.19.6"
-  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.19.6.tgz#7122ae4f5c5a37c0946c066149abd8e75f81540f"
-  integrity sha512-D2Ue4KHpc6Ys2+AxpIx1BZ8+UegLLLE2p3KJEuJRKmokHOtl49jQ5ny1773KsGLZs8MQvBidAF6yWUJxRqtKtg==
+  version "7.20.5"
+  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.20.5.tgz#45e2114dc6cd4ab167f81daf7820e8fa1250d113"
+  integrity sha512-UdOWmk4pNWTm/4DlPUl/Pt4Gz4rcEMb7CY0Y3eJl5Yz1vI8ZJGmHWaVE55LoxRjdpx0z259GE9U5STA9atUinQ==
   dependencies:
     "@ampproject/remapping" "^2.1.0"
     "@babel/code-frame" "^7.18.6"
-    "@babel/generator" "^7.19.6"
-    "@babel/helper-compilation-targets" "^7.19.3"
-    "@babel/helper-module-transforms" "^7.19.6"
-    "@babel/helpers" "^7.19.4"
-    "@babel/parser" "^7.19.6"
+    "@babel/generator" "^7.20.5"
+    "@babel/helper-compilation-targets" "^7.20.0"
+    "@babel/helper-module-transforms" "^7.20.2"
+    "@babel/helpers" "^7.20.5"
+    "@babel/parser" "^7.20.5"
     "@babel/template" "^7.18.10"
-    "@babel/traverse" "^7.19.6"
-    "@babel/types" "^7.19.4"
+    "@babel/traverse" "^7.20.5"
+    "@babel/types" "^7.20.5"
     convert-source-map "^1.7.0"
     debug "^4.1.0"
     gensync "^1.0.0-beta.2"
@@ -181,6 +186,15 @@
     "@jridgewell/gen-mapping" "^0.3.2"
     jsesc "^2.5.1"
 
+"@babel/generator@^7.20.5":
+  version "7.20.5"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.20.5.tgz#cb25abee3178adf58d6814b68517c62bdbfdda95"
+  integrity sha512-jl7JY2Ykn9S0yj4DQP82sYvPU+T3g0HFcWTqDLqiuA9tGRNIj9VfbtXGAYTTkyNEnQk1jkMGOdYka8aG/lulCA==
+  dependencies:
+    "@babel/types" "^7.20.5"
+    "@jridgewell/gen-mapping" "^0.3.2"
+    jsesc "^2.5.1"
+
 "@babel/helper-annotate-as-pure@^7.14.5":
   version "7.14.5"
   resolved "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.14.5.tgz"
@@ -208,6 +222,16 @@
     browserslist "^4.21.3"
     semver "^6.3.0"
 
+"@babel/helper-compilation-targets@^7.20.0":
+  version "7.20.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.20.0.tgz#6bf5374d424e1b3922822f1d9bdaa43b1a139d0a"
+  integrity sha512-0jp//vDGp9e8hZzBc6N/KwA5ZK3Wsm/pfm4CrY7vzegkVxc65SgSn6wYOnwHe9Js9HRQ1YTCKLGPzDtaS3RoLQ==
+  dependencies:
+    "@babel/compat-data" "^7.20.0"
+    "@babel/helper-validator-option" "^7.18.6"
+    browserslist "^4.21.3"
+    semver "^6.3.0"
+
 "@babel/helper-create-class-features-plugin@^7.14.5":
   version "7.14.6"
   resolved "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.14.6.tgz"
@@ -319,6 +343,20 @@
     "@babel/traverse" "^7.19.6"
     "@babel/types" "^7.19.4"
 
+"@babel/helper-module-transforms@^7.20.2":
+  version "7.20.2"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.20.2.tgz#ac53da669501edd37e658602a21ba14c08748712"
+  integrity sha512-zvBKyJXRbmK07XhMuujYoJ48B5yvvmM6+wcpv6Ivj4Yg6qO7NOZOSnvZN9CRl1zz1Z4cKf8YejmCMh8clOoOeA==
+  dependencies:
+    "@babel/helper-environment-visitor" "^7.18.9"
+    "@babel/helper-module-imports" "^7.18.6"
+    "@babel/helper-simple-access" "^7.20.2"
+    "@babel/helper-split-export-declaration" "^7.18.6"
+    "@babel/helper-validator-identifier" "^7.19.1"
+    "@babel/template" "^7.18.10"
+    "@babel/traverse" "^7.20.1"
+    "@babel/types" "^7.20.2"
+
 "@babel/helper-optimise-call-expression@^7.14.5", "@babel/helper-optimise-call-expression@^7.15.4":
   version "7.15.4"
   resolved "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.15.4.tgz"
@@ -365,6 +403,13 @@
   dependencies:
     "@babel/types" "^7.19.4"
 
+"@babel/helper-simple-access@^7.20.2":
+  version "7.20.2"
+  resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.20.2.tgz#0ab452687fe0c2cfb1e2b9e0015de07fc2d62dd9"
+  integrity sha512-+0woI/WPq59IrqDYbVGfshjT5Dmk/nnbdpcF8SnMhhXObpTq2KNBdLFRFrkVdbDOyUmHBCxzm5FHV1rACIkIbA==
+  dependencies:
+    "@babel/types" "^7.20.2"
+
 "@babel/helper-skip-transparent-expression-wrappers@^7.14.5":
   version "7.14.5"
   resolved "https://registry.npmjs.org/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.14.5.tgz"
@@ -435,6 +480,15 @@
     "@babel/traverse" "^7.19.4"
     "@babel/types" "^7.19.4"
 
+"@babel/helpers@^7.20.5":
+  version "7.20.6"
+  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.20.6.tgz#e64778046b70e04779dfbdf924e7ebb45992c763"
+  integrity sha512-Pf/OjgfgFRW5bApskEz5pvidpim7tEDPlFtKcNRXWmfHGn9IEI2W2flqRQXTFb7gIPTyK++N6rVHuwKut4XK6w==
+  dependencies:
+    "@babel/template" "^7.18.10"
+    "@babel/traverse" "^7.20.5"
+    "@babel/types" "^7.20.5"
+
 "@babel/highlight@^7.10.4", "@babel/highlight@^7.18.6":
   version "7.18.6"
   resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.18.6.tgz#81158601e93e2563795adcbfbdf5d64be3f2ecdf"
@@ -453,10 +507,10 @@
     chalk "^2.0.0"
     js-tokens "^4.0.0"
 
-"@babel/parser@7.12.16", "@babel/parser@^7.0.0", "@babel/parser@^7.1.0", "@babel/parser@^7.11.5", "@babel/parser@^7.12.13", "@babel/parser@^7.14.6", "@babel/parser@^7.14.7", "@babel/parser@^7.15.4", "@babel/parser@^7.18.10", "@babel/parser@^7.19.4", "@babel/parser@^7.19.6", "@babel/parser@^7.7.2":
-  version "7.20.1"
-  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.20.1.tgz#3e045a92f7b4623cafc2425eddcb8cf2e54f9cc5"
-  integrity sha512-hp0AYxaZJhxULfM1zyp7Wgr+pSUKBcP3M+PHnSzWGdXOzg/kHWIgiUWARvubhUKGOEw3xqY4x+lyZ9ytBVcELw==
+"@babel/parser@7.12.16", "@babel/parser@^7.0.0", "@babel/parser@^7.1.0", "@babel/parser@^7.11.5", "@babel/parser@^7.12.13", "@babel/parser@^7.14.6", "@babel/parser@^7.14.7", "@babel/parser@^7.15.4", "@babel/parser@^7.18.10", "@babel/parser@^7.19.4", "@babel/parser@^7.19.6", "@babel/parser@^7.20.5", "@babel/parser@^7.7.2":
+  version "7.20.5"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.20.5.tgz#7f3c7335fe417665d929f34ae5dceae4c04015e8"
+  integrity sha512-r27t/cy/m9uKLXQNWWebeCUHgnAZq0CpG1OwKRxzJMP1vpSU4bSIK2hq+/cp0bQxetkXx38n09rNu8jVkcK/zA==
 
 "@babel/plugin-proposal-class-properties@^7.0.0":
   version "7.14.5"
@@ -883,6 +937,22 @@
     debug "^4.1.0"
     globals "^11.1.0"
 
+"@babel/traverse@^7.20.1", "@babel/traverse@^7.20.5":
+  version "7.20.5"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.20.5.tgz#78eb244bea8270fdda1ef9af22a5d5e5b7e57133"
+  integrity sha512-WM5ZNN3JITQIq9tFZaw1ojLU3WgWdtkxnhM1AegMS+PvHjkM5IXjmYEGY7yukz5XS4sJyEf2VzWjI8uAavhxBQ==
+  dependencies:
+    "@babel/code-frame" "^7.18.6"
+    "@babel/generator" "^7.20.5"
+    "@babel/helper-environment-visitor" "^7.18.9"
+    "@babel/helper-function-name" "^7.19.0"
+    "@babel/helper-hoist-variables" "^7.18.6"
+    "@babel/helper-split-export-declaration" "^7.18.6"
+    "@babel/parser" "^7.20.5"
+    "@babel/types" "^7.20.5"
+    debug "^4.1.0"
+    globals "^11.1.0"
+
 "@babel/types@7.12.13":
   version "7.12.13"
   resolved "https://registry.npmjs.org/@babel/types/-/types-7.12.13.tgz"
@@ -951,6 +1021,15 @@
     "@babel/helper-validator-identifier" "^7.19.1"
     to-fast-properties "^2.0.0"
 
+"@babel/types@^7.20.2", "@babel/types@^7.20.5":
+  version "7.20.5"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.20.5.tgz#e206ae370b5393d94dfd1d04cd687cace53efa84"
+  integrity sha512-c9fst/h2/dcF7H+MJKZ2T0KjEQ8hY/BNnDk/H3XY8C4Aw/eWQXWn/lWntHF9ooUBnGmEvbfGrTgLWc+um0YDUg==
+  dependencies:
+    "@babel/helper-string-parser" "^7.19.4"
+    "@babel/helper-validator-identifier" "^7.19.1"
+    to-fast-properties "^2.0.0"
+
 "@bcoe/v8-coverage@^0.2.3":
   version "0.2.3"
   resolved "https://registry.npmjs.org/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz"
@@ -3497,6 +3576,11 @@
   resolved "https://registry.npmjs.org/@types/aria-query/-/aria-query-4.2.2.tgz"
   integrity sha512-HnYpAE1Y6kRyKM/XkEuiRQhTHvkzMBurTHnpFLYLBGPIylZNPs9jJcuOOYWxPLJCSEtmZT0Y8rHDokKN7rRTig==
 
+"@types/autosuggest-highlight@^3.2.0":
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/@types/autosuggest-highlight/-/autosuggest-highlight-3.2.0.tgz#716a1408b8d987a6b636cf30048cba101d9f1cae"
+  integrity sha512-bTcsL4YYypjhKfPaImxuoMPiTyiUp7VGKytMr15/413IoazrOIfV/gca2ysI/IW0ftZYCPI5xppRm6IVX1Efqw==
+
 "@types/babel__core@^7.0.0", "@types/babel__core@^7.1.14":
   version "7.1.16"
   resolved "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.1.16.tgz"
@@ -5229,6 +5313,13 @@ auto-bind@~4.0.0:
   resolved "https://registry.npmjs.org/auto-bind/-/auto-bind-4.0.0.tgz"
   integrity sha512-Hdw8qdNiqdJ8LqT0iK0sVzkFbzg6fhnQqqfWhBDxcHZvU75+B+ayzTy8x+k5Ix0Y92XOhOUlx74ps+bA6BeYMQ==
 
+autosuggest-highlight@^3.3.4:
+  version "3.3.4"
+  resolved "https://registry.yarnpkg.com/autosuggest-highlight/-/autosuggest-highlight-3.3.4.tgz#d71b575ba8eab40b5adba73df9244e9ba88cc387"
+  integrity sha512-j6RETBD2xYnrVcoV1S5R4t3WxOlWZKyDQjkwnggDPSjF5L4jV98ZltBpvPvbkM1HtoSe5o+bNrTHyjPbieGeYA==
+  dependencies:
+    remove-accents "^0.4.2"
+
 available-typed-arrays@^1.0.2:
   version "1.0.4"
   resolved "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.4.tgz"
@@ -13527,6 +13618,11 @@ remedial@^1.0.7:
   resolved "https://registry.npmjs.org/remedial/-/remedial-1.0.8.tgz"
   integrity sha512-/62tYiOe6DzS5BqVsNpH/nkGlX45C/Sp6V+NtiN6JQNS1Viay7cWkazmRkrQrdFj2eshDe96SIQNIoMxqhzBOg==
 
+remove-accents@^0.4.2:
+  version "0.4.4"
+  resolved "https://registry.yarnpkg.com/remove-accents/-/remove-accents-0.4.4.tgz#73704abf7dae3764295d475d2b6afac4ea23e4d9"
+  integrity sha512-EpFcOa/ISetVHEXqu+VwI96KZBmq+a8LJnGkaeFw45epGlxIZz5dhEEnNZMsQXgORu3qaMoLX4qJCzOik6ytAg==
+
 remove-trailing-separator@^1.0.1:
   version "1.1.0"
   resolved "https://registry.npmjs.org/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz"