From 652fafea3c093f189936cddecbbad103d322bdcc Mon Sep 17 00:00:00 2001
From: Oisin Coveney <oisin@metabase.com>
Date: Thu, 7 Nov 2024 16:30:49 +0200
Subject: [PATCH] fix(sdk): Fix visualization default size (#49672)
---
.../components/Visualization.tsx | 50 ++++++++++++-------
.../InteractiveQuestionResult.tsx | 4 +-
2 files changed, 35 insertions(+), 19 deletions(-)
diff --git a/enterprise/frontend/src/embedding-sdk/components/private/InteractiveQuestion/components/Visualization.tsx b/enterprise/frontend/src/embedding-sdk/components/private/InteractiveQuestion/components/Visualization.tsx
index 10d213b3914..48180e5c6e1 100644
--- a/enterprise/frontend/src/embedding-sdk/components/private/InteractiveQuestion/components/Visualization.tsx
+++ b/enterprise/frontend/src/embedding-sdk/components/private/InteractiveQuestion/components/Visualization.tsx
@@ -1,17 +1,24 @@
import cx from "classnames";
import { t } from "ttag";
+import { FlexibleSizeComponent } from "embedding-sdk";
import {
SdkError,
SdkLoader,
} from "embedding-sdk/components/private/PublicComponentWrapper";
+import type { FlexibleSizeProps } from "embedding-sdk/components/private/util/FlexibleSizeComponent";
import CS from "metabase/css/core/index.css";
import QueryVisualization from "metabase/query_builder/components/QueryVisualization";
import type Question from "metabase-lib/v1/Question";
import { useInteractiveQuestionContext } from "../context";
-export const QuestionVisualization = () => {
+export const QuestionVisualization = ({
+ height,
+ width,
+ className,
+ style,
+}: FlexibleSizeProps) => {
const {
question,
queryResults,
@@ -35,22 +42,29 @@ export const QuestionVisualization = () => {
const card = question.card();
return (
- <QueryVisualization
- className={cx(CS.flexFull, CS.fullWidth, CS.fullHeight)}
- question={question}
- rawSeries={[{ card, data: result && result.data }]}
- isRunning={isQueryRunning}
- isObjectDetail={false}
- isResultDirty={false}
- isNativeEditorOpen={false}
- result={result}
- noHeader
- mode={mode}
- navigateToNewCardInsideQB={navigateToNewCard}
- onNavigateBack={onNavigateBack}
- onUpdateQuestion={(question: Question) =>
- updateQuestion(question, { run: false })
- }
- />
+ <FlexibleSizeComponent
+ height={height}
+ width={width}
+ className={className}
+ style={style}
+ >
+ <QueryVisualization
+ className={cx(CS.flexFull, CS.fullWidth, CS.fullHeight)}
+ question={question}
+ rawSeries={[{ card, data: result && result.data }]}
+ isRunning={isQueryRunning}
+ isObjectDetail={false}
+ isResultDirty={false}
+ isNativeEditorOpen={false}
+ result={result}
+ noHeader
+ mode={mode}
+ navigateToNewCardInsideQB={navigateToNewCard}
+ onNavigateBack={onNavigateBack}
+ onUpdateQuestion={(question: Question) =>
+ updateQuestion(question, { run: false })
+ }
+ />
+ </FlexibleSizeComponent>
);
};
diff --git a/enterprise/frontend/src/embedding-sdk/components/private/InteractiveQuestionResult/InteractiveQuestionResult.tsx b/enterprise/frontend/src/embedding-sdk/components/private/InteractiveQuestionResult/InteractiveQuestionResult.tsx
index 8dc511392ee..e84a2cec90f 100644
--- a/enterprise/frontend/src/embedding-sdk/components/private/InteractiveQuestionResult/InteractiveQuestionResult.tsx
+++ b/enterprise/frontend/src/embedding-sdk/components/private/InteractiveQuestionResult/InteractiveQuestionResult.tsx
@@ -45,7 +45,9 @@ const ContentView = ({
.with("editor", () => (
<InteractiveQuestion.Editor onApply={onReturnToVisualization} />
))
- .otherwise(() => <InteractiveQuestion.QuestionVisualization />);
+ .otherwise(() => (
+ <InteractiveQuestion.QuestionVisualization height="100%" />
+ ));
export const InteractiveQuestionResult = ({
height,
--
GitLab