describe the visualization interface (#33196)

frontend/src/metabase-lib/queries/drills/types.ts

@@ -26,7 +26,7 @@ export interface ClickObject {
   dimensions?: ClickObjectDimension[];
   dimension?: Dimension; // used in table visualization for QuickFilterDrill
   event?: MouseEvent;
-  element?: HTMLElement;
+  element?: Element;
   seriesIndex?: number;
   settings?: Record<string, unknown>;
   origin?: {

frontend/src/metabase/dashboard/actions/cards.js

@@ -52,7 +52,7 @@ export const addCardToDashboard =
     const card = Questions.selectors
       .getObject(getState(), { entityId: cardId })
       .card();
-    const { visualization } = getVisualizationRaw([{ card }]);
+    const visualization = getVisualizationRaw([{ card }]);
     const createdCardSize = visualization.defaultSize || DEFAULT_CARD_SIZE;
 
     const dashcard = {
@@ -104,7 +104,7 @@ export const addDashCardToDashboard = function ({
   tabId,
 }) {
   return function (dispatch, getState) {
-    const { visualization } = getVisualizationRaw([dashcardOverrides]);
+    const visualization = getVisualizationRaw([dashcardOverrides]);
     const createdCardSize = visualization.defaultSize || DEFAULT_CARD_SIZE;
 
     const dashcard = {

frontend/src/metabase/dashboard/components/DashCard/DashCardActionButtons/AddSeriesButton/AddSeriesButton.tsx

@@ -15,12 +15,11 @@ import {
 const { ICON_SIZE } = DashCardActionButton;
 
 function getSeriesIconName(series: Series) {
-  try {
-    const display = series[0].card.display;
-    return visualizations.get(display === "scalar" ? "bar" : display).iconName;
-  } catch (e) {
-    return "bar";
-  }
+  const display = series[0]?.card.display;
+  return (
+    visualizations.get(display === "scalar" ? "bar" : display)?.iconName ??
+    "bar"
+  );
 }
 
 function AddSeriesButton({

frontend/src/metabase/dashboard/components/DashCard/DashCardActionButtons/DashCardActionButtons.tsx

@@ -61,7 +61,7 @@ function DashCardActionButtons({
     supportPreviewing,
     supportsSeries,
     disableClickBehavior,
-  } = getVisualizationRaw(series).visualization;
+  } = getVisualizationRaw(series) ?? {};
 
   const buttons = [];
 

frontend/src/metabase/dashboard/components/DashCard/DashCardVisualization.tsx

@@ -128,8 +128,8 @@ function DashCardVisualization({
 }: DashCardVisualizationProps) {
   const renderVisualizationOverlay = useCallback(() => {
     if (isClickBehaviorSidebarOpen) {
-      const { disableClickBehavior } =
-        getVisualizationRaw(series).visualization;
+      const disableClickBehavior =
+        getVisualizationRaw(series)?.disableClickBehavior;
       if (isVirtualDashCard(dashcard) || disableClickBehavior) {
         const virtualDashcardType = getVirtualCardType(
           dashcard,

frontend/src/metabase/dashboard/components/DashboardGrid.jsx

@@ -187,7 +187,7 @@ class DashboardGrid extends Component {
   };
 
   getLayoutForDashCard = dashcard => {
-    const { visualization } = getVisualizationRaw([{ card: dashcard.card }]);
+    const visualization = getVisualizationRaw([{ card: dashcard.card }]);
     const initialSize = DEFAULT_CARD_SIZE;
     const minSize = visualization.minSize || DEFAULT_CARD_SIZE;
 

frontend/src/metabase/models/components/ModelDetailPage/ModelUsageDetails/ModelUsageDetails.tsx

@@ -2,7 +2,7 @@ import { t } from "ttag";
 
 import Button from "metabase/core/components/Button";
 import Link from "metabase/core/components/Link";
-import { Icon } from "metabase/core/components/Icon";
+import { Icon, IconName } from "metabase/core/components/Icon";
 
 import * as Urls from "metabase/lib/urls";
 import Questions, {
@@ -58,7 +58,7 @@ function ModelUsageDetails({ model, questions, hasNewQuestionLink }: Props) {
             to={Urls.question(question.card())}
             aria-label={question.displayName() ?? ""}
           >
-            <Icon name={getQuestionIcon(question.card()).name} />
+            <Icon name={getQuestionIcon(question.card()).name as IconName} />
             <CardTitle>{question.displayName()}</CardTitle>
           </CardListItem>
         </li>

frontend/src/metabase/query_builder/components/view/sidebars/ChartTypeSidebar.tsx

@@ -7,10 +7,10 @@ import SidebarContent from "metabase/query_builder/components/SidebarContent";
 
 import visualizations from "metabase/visualizations";
 import { sanatizeResultData } from "metabase/visualizations/shared/utils/data";
-import { Visualization } from "metabase/visualizations/shared/types/visualization";
 
 import { UpdateQuestionOpts } from "metabase/query_builder/actions";
 
+import type { Visualization } from "metabase/visualizations/types";
 import Question from "metabase-lib/Question";
 import Query from "metabase-lib/queries/Query";
 
@@ -70,14 +70,14 @@ const ChartTypeSidebar = ({
       _.union(
         DEFAULT_ORDER,
         Array.from(visualizations).map(([vizType]) => vizType),
-      ).filter(vizType => !visualizations.get(vizType).hidden),
+      ).filter(vizType => !visualizations?.get(vizType)?.hidden),
       vizType => {
         const visualization = visualizations.get(vizType);
         return (
           result &&
           result.data &&
-          visualization.isSensible &&
-          visualization.isSensible(sanatizeResultData(result.data), query)
+          visualization?.isSensible &&
+          visualization?.isSensible(sanatizeResultData(result.data), query)
         );
       },
     );
@@ -102,7 +102,7 @@ const ChartTypeSidebar = ({
       } else {
         let newQuestion = question.setDisplay(display).lockDisplay(); // prevent viz auto-selection
         const visualization = visualizations.get(display);
-        if (visualization.onDisplayUpdate) {
+        if (visualization?.onDisplayUpdate) {
           const updatedSettings = visualization.onDisplayUpdate(
             newQuestion.settings(),
           );

frontend/src/metabase/static-viz/components/RowChart/RowChart.tsx

@@ -11,12 +11,8 @@ import {
   trimData,
 } from "metabase/visualizations/shared/utils/data";
 import { getChartGoal } from "metabase/visualizations/lib/settings/goal";
-import { VisualizationSettings } from "metabase-types/api";
-import { ColorGetter } from "metabase/static-viz/lib/colors";
-import {
-  RemappingHydratedChartData,
-  TwoDimensionalChartData,
-} from "metabase/visualizations/shared/types/data";
+import type { DatasetData, VisualizationSettings } from "metabase-types/api";
+import type { ColorGetter } from "metabase/static-viz/lib/colors";
 import { getTwoDimensionalChartSeries } from "metabase/visualizations/shared/utils/series";
 import {
   getAxesVisibility,
@@ -29,6 +25,7 @@ import {
   getStaticFormatters,
 } from "metabase/static-viz/lib/format";
 import { extractRemappedColumns } from "metabase/visualizations";
+import type { RemappingHydratedChartData } from "metabase/visualizations/types";
 import { calculateLegendRows } from "../Legend/utils";
 import { Legend } from "../Legend";
 
@@ -46,7 +43,7 @@ const WIDTH = 620;
 const HEIGHT = 440;
 
 interface StaticRowChartProps {
-  data: TwoDimensionalChartData;
+  data: DatasetData;
   settings: VisualizationSettings;
   getColor: ColorGetter;
 }

frontend/src/metabase/static-viz/lib/format.ts

@@ -20,7 +20,7 @@ import {
 import { ChartColumns } from "metabase/visualizations/lib/graph/columns";
 import { getStackOffset } from "metabase/visualizations/lib/settings/stacking";
 import { getLabelsMetricColumn } from "metabase/visualizations/shared/utils/series";
-import { RemappingHydratedDatasetColumn } from "metabase/visualizations/shared/types/data";
+import type { RemappingHydratedDatasetColumn } from "metabase/visualizations/types";
 import {
   isCoordinate,
   isDate,

frontend/src/metabase/visualizations/click-actions/Mode/Mode.ts

+import type {
+  ClickAction,
+  ClickObject,
+  QueryMode,
+} from "metabase/visualizations/types";
 import Question from "metabase-lib/Question";
-import type { ClickAction, ClickObject, QueryMode } from "../types";
-
 export class Mode {
   _question: Question;
   _queryMode: QueryMode;

frontend/src/metabase/visualizations/click-actions/actions/ColumnFormattingAction/ColumnFormattingAction.tsx

@@ -6,7 +6,7 @@ import type { VisualizationSettings } from "metabase-types/api";
 import type {
   ClickActionPopoverProps,
   Drill,
-} from "metabase/visualizations/click-actions/types";
+} from "metabase/visualizations/types";
 import { getColumnKey } from "metabase-lib/queries/utils/get-column-key";
 
 import { PopoverRoot } from "./ColumnFormattingAction.styled";

frontend/src/metabase/visualizations/click-actions/actions/DashboardClickAction.tsx

@@ -7,7 +7,7 @@ import type {
   Drill,
   AlwaysDefaultClickAction,
   AlwaysDefaultClickActionSubAction,
-} from "metabase/visualizations/click-actions/types";
+} from "metabase/visualizations/types";
 import type Question from "metabase-lib/Question";
 import {
   getDashboardDrillLinkUrl,

frontend/src/metabase/visualizations/click-actions/actions/NativeQueryClickFallback.ts

 import { t } from "ttag";
 import { isWithinIframe } from "metabase/lib/dom";
 import { getEngineNativeType } from "metabase/lib/engine";
-import type {
-  RegularClickAction,
-  Drill,
-} from "metabase/visualizations/click-actions/types";
+import type { RegularClickAction, Drill } from "metabase/visualizations/types";
 import { nativeDrillFallback } from "metabase-lib/queries/drills/native-drill-fallback";
 
 export const NativeQueryClickFallback: Drill = ({ question }) => {

frontend/src/metabase/visualizations/click-actions/components/ColumnFilterDrillPopover.tsx

 /* eslint-disable react/display-name */
-import { ClickActionPopoverProps } from "metabase/visualizations/click-actions/types";
+import { ClickActionPopoverProps } from "metabase/visualizations/types";
 import { FilterPopover } from "metabase/query_builder/components/filters/FilterPopover";
 import type { Card } from "metabase-types/api";
 import type StructuredQuery from "metabase-lib/queries/StructuredQuery";

frontend/src/metabase/visualizations/click-actions/components/TimeseriesModeFooter.tsx

 import { t } from "ttag";
-import type { ModeFooterComponentProps } from "metabase/visualizations/click-actions/types";
+import type { ModeFooterComponentProps } from "metabase/visualizations/types";
 import type Question from "metabase-lib/Question";
 import { TimeseriesFilterWidget } from "./TimeseriesFilterWidget";
 import { TimeseriesGroupingWidget } from "./TimeseriesGroupingWidget";

frontend/src/metabase/visualizations/click-actions/drills/AutomaticInsightsDrill.tsx

@@ -5,7 +5,7 @@ import type {
   ClickActionProps,
   PopoverClickAction,
   UrlClickAction,
-} from "metabase/visualizations/click-actions/types";
+} from "metabase/visualizations/types";
 import MetabaseSettings from "metabase/lib/settings";
 import { ClickActionsView } from "metabase/visualizations/components/ClickActions";
 import {

frontend/src/metabase/visualizations/click-actions/drills/AutomaticInsightsDrill.unit.spec.tsx

@@ -9,7 +9,7 @@ import {
   PEOPLE_ID,
 } from "metabase-types/api/mocks/presets";
 import { checkNotNull } from "metabase/core/utils/types";
-import type { ClickActionProps } from "../types";
+import type { ClickActionProps } from "metabase/visualizations/types";
 import { AutomaticInsightsDrill } from "./AutomaticInsightsDrill";
 
 describe("AutomaticInsightsDrill", () => {

frontend/src/metabase/visualizations/click-actions/drills/ColumnFilterDrill.ts

 import { t } from "ttag";
-import type { Drill } from "metabase/visualizations/click-actions/types";
+import type { Drill } from "metabase/visualizations/types";
 import { getColumnFilterDrillPopover } from "metabase/visualizations/click-actions/components/ColumnFilterDrillPopover";
 import { columnFilterDrill } from "metabase-lib/queries/drills/column-filter-drill";
 

frontend/src/metabase/visualizations/click-actions/drills/DistributionDrill.ts

 import { t } from "ttag";
-import type { Drill } from "metabase/visualizations/click-actions/types";
+import type { Drill } from "metabase/visualizations/types";
 import {
   distributionDrill,
   distributionDrillQuestion,