Fix canvas rendering bug

Signed-off-by: Willie Hung <[email protected]>
willie-hung · Nov 30, 2023 · 05855cb · 05855cb
1 parent 41dc3aa
commit 05855cb
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 8 deletions.
diff --git a/src/plugins/vis_type_drilldown/public/components/card_form.tsx b/src/plugins/vis_type_drilldown/public/components/card_form.tsx
@@ -21,8 +21,8 @@ interface CardFormProps {
   card: Card;
   updateCard: (index: number, card: Card) => void;
   options: any;
-  activeVisName: string;
-  handleVisTypeChange: () => void;
+  valueOfSelected: string;
+  onChange: () => void;
 }
 
 const CardForm = ({
@@ -35,7 +35,7 @@ const CardForm = ({
 }: CardFormProps) => {
   return (
     <EuiAccordion
-      id={index}
+      id={String(index)}
       buttonContent={`Drilldown ${index + 1}`}
       paddingSize="s"
       initialIsOpen={true}

diff --git a/src/plugins/vis_type_drilldown/public/drilldown_fn.ts b/src/plugins/vis_type_drilldown/public/drilldown_fn.ts
@@ -28,7 +28,7 @@ export const createDrilldownVisFn = (): DrilldownVisExpressionFunctionDefinition
   }),
   args: {
     cards: {
-      types: [],
+      types: ['string'],
       help: i18n.translate('visTypeDrilldown.function.cards.help', {
         defaultMessage: 'Cards',
       }),

diff --git a/src/plugins/vis_type_drilldown/public/drilldown_vis_controller.tsx b/src/plugins/vis_type_drilldown/public/drilldown_vis_controller.tsx
@@ -8,17 +8,18 @@ import { EuiCard, EuiFlexItem, EuiIcon } from '@elastic/eui';
 import { DrilldownVisParams, Card } from './types';
 
 interface DrilldownVisComponentProps extends DrilldownVisParams {
-  cards: Card[];
   renderComplete: () => void;
 }
 
 const DrilldownVisComponent = ({ cards, renderComplete }: DrilldownVisComponentProps) => {
   useEffect(renderComplete); // renderComplete will be called after each render to signal, that we are done with rendering.
 
+  const parsedCardData = JSON.parse(cards);
+
   return (
     <>
-      {cards &&
-        cards.map((card, index) => (
+      {parsedCardData &&
+        parsedCardData.map((card: Card, index: number) => (
           <EuiFlexItem key={index}>
             <EuiCard
               icon={<EuiIcon size="xl" type="dashboardApp" />}

diff --git a/src/plugins/vis_type_drilldown/public/to_ast.ts b/src/plugins/vis_type_drilldown/public/to_ast.ts
@@ -13,7 +13,7 @@ export const toExpressionAst = (vis: Vis) => {
   const drilldownVis = buildExpressionFunction<DrilldownVisExpressionFunctionDefinition>(
     'drilldownVis',
     {
-      cards,
+      cards: JSON.stringify(cards),
     }
   );
-Original file line number
+Diff line change
@@ Expand Up / @@ -13,7 +13,7 @@ export const toExpressionAst = (vis: Vis) => { @@
       const drilldownVis = buildExpressionFunction<DrilldownVisExpressionFunctionDefinition>(
         'drilldownVis',
         {
-          cards,
+          cards: JSON.stringify(cards),
         }
       );
@@ Expand Down @@