@solidxai/core-ui 0.1.5-beta.6 → 0.1.5-beta.9

package/dist/components/core/dashboard/SolidDashboardBody.tsx

@@ -4,113 +4,165 @@ import { GridStackOptions, GridStackWidget } from 'gridstack';
 import styles from './SolidDashboard.module.css'
 import { SolidQuestionRenderer } from './SolidQuestionRenderer';
 import { SqlExpression } from '../../../types/solid-core';
-import PrimeReactDatatableRenderer from './chart-renderers/PrimeReactDatatableRenderer';
-import { useGetDashboardQuestionDataByIdQuery } from '../../../redux/api/dashboardQuestionApi';
-import qs from 'qs';
-import { ProgressSpinner } from 'primereact/progressspinner';
+import ReactGridLayout, { useContainerWidth, Layout, LayoutItem } from "react-grid-layout";
+import { useEffect, useRef, useState } from 'react';
+import PrimeDataTableWrapper from './PrimeDataTableWrapper';
+import 'react-grid-layout/css/styles.css';
+import 'react-resizable/css/styles.css';
+import { useLazyGetUserDashboardLayoutByDashboardIdQuery } from '../../../redux/api/dashboardLayoutApi';
+import showToast from '../../../helpers/showToast';
+import { ERROR_MESSAGES } from '../../../constants/error-messages';
+import { Toast } from 'primereact/toast';
 
 export interface SolidDashboardBodyProps {
   dashboardOptions?: GridStackOptions;
   widgetOptions?: GridStackWidget[];
   // Replace `any` with a proper `Question` type when available
+  dashboardId: string;
   questions: any[];
   filters: SqlExpression[];
+  dashboardLayout: GridItem[];
+  setDashboardLayout: (dashboardLayout: GridItem[]) => void;
 }
 
-const SolidDashboardBody = ({ questions, filters = [] }: SolidDashboardBodyProps) => {
-  // const gridRef = useRef<HTMLDivElement>(null);
+export type GridItem = {
+  i: string;
+  x: number;
+  y: number;
+  w: number;
+  h: number;
+};
 
-  // useEffect(() => {
-  //   if (!gridRef.current) return;
-
-  //   // Initialize Gridstack on the specific ref
-  //   const grid = GridStack.init(dashboardOptions || {}, gridRef.current);
-
-  //   // Load widgets if provided
-  //   if (widgetOptions && widgetOptions.length > 0) {
-  //     grid.load(
-  //       widgetOptions.map((widget) => ({
-  //         ...widget,
-  //         content: `${widget.content ?? 'Widget'}`,
-  //       }))
-  //     );
-  //   }
-
-  //   // Cleanup on unmount
-  //   return () => {
-  //     grid.destroy(false);
-  //   };
-  // }, [dashboardOptions, widgetOptions]);
-
-
-  // Fallback sequencing
-  const questionsWithDefaultIndex = questions.map((q, index) => ({
-    ...q,
-    defaultIndex: index + 1,
-  }));
-
-
-  const sortedQuestions = [...questionsWithDefaultIndex].sort((a, b) => {
-    const aSeq = a.sequenceNumber ?? a.defaultIndex;
-    const bSeq = b.sequenceNumber ?? b.defaultIndex;
-    return aSeq - bSeq;
+// Layout is Layout[] at runtime in v2 — the type definition is misleading
+type LayoutArray = LayoutItem[];
+
+
+const generateDefaultLayout = (questions: any[]): GridItem[] => {
+  return questions.map((q, index) => {
+    const col = index % 3;
+    const row = Math.floor(index / 3);
+    return {
+      i: String(q.name),
+      x: col * 4,   // 0, 4, 8 in a 12-col grid
+      y: row * 4,
+      w: 4,
+      h: 4,
+    };
   });
+};
+
+
+const SolidDashboardBody = ({ dashboardId, questions, filters = [], dashboardLayout, setDashboardLayout }: SolidDashboardBodyProps) => {
+  const toast = useRef<Toast>(null);
+
+  const sortedQuestions = [...questions]
+    .map((q, index) => ({ ...q, defaultIndex: index + 1 }))
+    .sort((a, b) => (a.sequenceNumber ?? a.defaultIndex) - (b.sequenceNumber ?? b.defaultIndex));
+
+  const { width, containerRef, mounted } = useContainerWidth();
+  const isLayoutReady = useRef(false);
+
+  const [fetchUserLayout, { data: userLayoutData, isSuccess, isLoading }] =
+    useLazyGetUserDashboardLayoutByDashboardIdQuery();
+
+  useEffect(() => {
+    if (!dashboardId || questions.length === 0) return;
+    const loadLayout = async () => {
+      try {
+        const response = await fetchUserLayout(dashboardId).unwrap();
+        const raw = response?.data?.layout;
+        const savedLayout = typeof raw === 'string' ? JSON.parse(raw) : raw;
+
+        const layout = savedLayout
+          ? sortedQuestions.map((q) => {
+            const saved = (savedLayout as GridItem[]).find(s => s.i === String(q.name));
+            return saved ?? generateDefaultLayout([q])[0];
+          })
+          : generateDefaultLayout(sortedQuestions);
+
+        setDashboardLayout(layout);
+        setTimeout(() => { isLayoutReady.current = true; }, 100);
+      } catch (error: any) {
+        if (error.status === 403) {
+          showToast(toast, "error", ERROR_MESSAGES.FORBIDDEN_ERROR, ERROR_MESSAGES.FORBIDDEN_ERROR);
+        } else {
+          showToast(toast, "error", ERROR_MESSAGES.SOMETHING_WRONG, ERROR_MESSAGES.SOMETHING_WRONG);
+        }
+      }
+    };
+
+    loadLayout();
+  }, [questions, dashboardId]);
+
+
+  // useEffect(() => {
+  //   if (questions.length === 0) return;
+  //   const saved = getSavedLayout();
+  //   setDashboardLayout(generateLayout(sortedQuestions, saved));
+  //   // Delay the ready flag so onLayoutChange doesn't fire before we're set
+  //   setTimeout(() => { isLayoutReady.current = true; }, 100);
+  // }, [questions]);
+
+
+  const handleLayoutChange = (newLayout: Layout) => {
+    if (!isLayoutReady.current) return;
+
+    // v2 passes LayoutItem[] at runtime despite the type saying Layout
+    const layoutArray = newLayout as unknown as LayoutItem[];
+
+    const updated: GridItem[] = layoutArray.map(item => ({
+      i: item.i,
+      x: item.x,
+      y: item.y,
+      w: item.w,
+      h: item.h,
+    }));
 
+    setDashboardLayout(updated);
+    // saving is handled by the parent/caller
+  };
 
   return (
-    <div className={`p-4 overflow-y-auto ${styles.SolidDashboardContentWrapper}`}>
-      {/* <div className="grid-stack" ref={gridRef}></div> */}
-      <div className='grid'>
-        {/* {questions && questions.map((question: any) => {
-          return (
-            <div className='col-4 p-3'>
-              <SolidQuestionRenderer question={question} filters={filters} key={question.id} isPreview={false} />
-            </div>
-          )
-        })} */}
-        {sortedQuestions
-          .filter((question: any) => question.visualisedAs !== 'prime-datatable')
-          .map((question: any) => (
-            <div className="col-4 p-3" key={question.id}>
-              <SolidQuestionRenderer
-                question={question}
-                filters={filters}
-                isPreview={false}
-              />
-            </div>
-          ))}
-
-        {sortedQuestions
-          .filter((question: any) => question.visualisedAs === 'prime-datatable')
-          .map((question: any) => {
-            const queryParams = qs.stringify({ isPreview: false, filters }, { arrayFormat: 'brackets' });
-
-            const { data: questionData, isLoading } = useGetDashboardQuestionDataByIdQuery({
-              id: question.id,
-              qs: queryParams,
-            });
-
-            if (isLoading) return <ProgressSpinner />;
-            const textAlign = question?.textAlign ?? 'start'
-
-            return (
-              <div className="col-12 p-3" key={question.id}>
-                <div className={`${styles.SolidChartCardWrapper} p-4`} style={{ maxHeight: '40vh', overflowY: 'scroll' }}>
-                  <div className={`font-medium text-${textAlign} ${styles.SolidChartTitle}`}>{question.name}</div>
-                  <div className={`mt-2 font-bold text-3xl text-${textAlign} ${styles.SolidChartTitle}`}>{questionData.data.kpi}</div>
-                  <div className='mt-3'>
-
-                    <PrimeReactDatatableRenderer
-                      options={JSON.parse(question?.chartOptions)}
-                      visualizationData={questionData?.data?.visualizationData}
-                    />
-                  </div>
-                </div>
+    <>
+      <Toast ref={toast} />
+      <div
+        ref={containerRef as React.RefObject<HTMLDivElement>}
+        className={`p-4 ${styles.SolidDashboardContentWrapper}`}
+        style={{ width: '100%', overflowY: 'auto', minHeight: 0 }}
+
+      >
+        {mounted && dashboardLayout.length > 0 && (
+          <ReactGridLayout
+            width={width}
+            layout={dashboardLayout}
+            gridConfig={{
+              cols: 12,
+              rowHeight: 120,
+            }}
+            dragConfig={{
+              handle: ".drag-handle",
+            }}
+            resizeConfig={{
+              enabled: true,
+            }}
+            onLayoutChange={handleLayoutChange}
+          >
+            {sortedQuestions.map((question: any) => (
+              <div key={String(question.name)} className="drag-handle cursor-move rounded shadow p-2 overflow-hidden" style={{ backgroundColor: 'transparent' }}>
+                {/* <div className=" mb-2 font-bold">
+                {question.name}
+              </div> */}
+                {question.visualisedAs === "prime-datatable" ? (
+                  <PrimeDataTableWrapper question={question} filters={filters} />
+                ) : (
+                  <SolidQuestionRenderer question={question} filters={filters} isPreview={false} />
+                )}
               </div>
-            )
-          })}
+            ))}
+          </ReactGridLayout>
+        )}
       </div>
-    </div>
+    </>
   );
 };
 

package/dist/components/core/dashboard/SolidQuestionRenderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SolidQuestionRenderer.d.ts","sourceRoot":"","sources":["../../../../src/components/core/dashboard/SolidQuestionRenderer.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAS1D,KAAK,0BAA0B,GAAG;IAC9B,QAAQ,EAAE,GAAG,CAAC;IACd,OAAO,EAAE,aAAa,EAAE,CAAC;IACzB,SAAS,EAAE,OAAO,CAAC;CACtB,CAAC;AAQF,eAAO,MAAM,qBAAqB,qCAAmD,0BAA0B,4CAsD9G,CAAA"}
+{"version":3,"file":"SolidQuestionRenderer.d.ts","sourceRoot":"","sources":["../../../../src/components/core/dashboard/SolidQuestionRenderer.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAS1D,KAAK,0BAA0B,GAAG;IAC9B,QAAQ,EAAE,GAAG,CAAC;IACd,OAAO,EAAE,aAAa,EAAE,CAAC;IACzB,SAAS,EAAE,OAAO,CAAC;CACtB,CAAC;AAQF,eAAO,MAAM,qBAAqB,qCAAmD,0BAA0B,4CAwD9G,CAAA"}

package/dist/components/core/dashboard/SolidQuestionRenderer.js

@@ -32,6 +32,6 @@ export var SolidQuestionRenderer = function (_a) {
     // const visualizationData = questionData.data.visualizationData;
     // const visualizedAs = question.data.visualisedAs;
     return (_jsxs(_Fragment, { children: [questionDataIsLoading && _jsx(ProgressSpinner, {}), !questionDataIsLoading &&
-                _jsxs("div", { className: "".concat(styles.SolidChartCardWrapper, " p-4 h-full"), children: [_jsx("div", { className: "font-medium text-".concat(textAlign, " ").concat(styles.SolidChartTitle), children: question.name }), _jsx("div", { className: "mt-2 font-bold text-3xl text-".concat(textAlign, " ").concat(styles.SolidChartTitle), children: questionData.data.kpi }), _jsxs("div", { className: 'mt-3', children: [['bar', 'line', 'pie'].includes(question.visualisedAs) && _jsx(ChartJsRenderer, { options: options, visualizationData: questionData.data.visualizationData, visualizedAs: question.visualisedAs }), question.visualisedAs === 'prime-meter-group' && _jsx(MeterGroup, { values: questionData.data.visualizationData.dataset, max: (_e = (_d = (_c = questionData === null || questionData === void 0 ? void 0 : questionData.data) === null || _c === void 0 ? void 0 : _c.visualizationData) === null || _d === void 0 ? void 0 : _d.dataset) === null || _e === void 0 ? void 0 : _e.reduce(function (total, item) { return total + item.value; }, 0) }), question.visualisedAs === 'prime-datatable' && _jsx(PrimeReactDatatableRenderer, { options: options, visualizationData: questionData.data.visualizationData })] })] })] }));
+                _jsxs("div", { className: "".concat(styles.SolidChartCardWrapper, " h-full"), children: [_jsxs("div", { className: 'flex flex-col p-4 pb-3', style: { borderBottom: "1px solid #e4e3e3" }, children: [_jsx("div", { className: "font-medium text-".concat(textAlign, " ").concat(styles.SolidChartTitle), children: question.name }), _jsx("div", { className: "mt-2 font-bold text-3xl text-".concat(textAlign, " ").concat(styles.SolidChartTitle), children: questionData.data.kpi })] }), _jsxs("div", { className: 'mt-3 flex-1 min-h-0 p-4 pt-2', children: [['bar', 'line', 'pie'].includes(question.visualisedAs) && _jsx(ChartJsRenderer, { options: options, visualizationData: questionData.data.visualizationData, visualizedAs: question.visualisedAs }), question.visualisedAs === 'prime-meter-group' && _jsx(MeterGroup, { values: questionData.data.visualizationData.dataset, max: (_e = (_d = (_c = questionData === null || questionData === void 0 ? void 0 : questionData.data) === null || _c === void 0 ? void 0 : _c.visualizationData) === null || _d === void 0 ? void 0 : _d.dataset) === null || _e === void 0 ? void 0 : _e.reduce(function (total, item) { return total + item.value; }, 0) }), question.visualisedAs === 'prime-datatable' && _jsx(PrimeReactDatatableRenderer, { options: options, visualizationData: questionData.data.visualizationData })] })] })] }));
 };
 //# sourceMappingURL=SolidQuestionRenderer.js.map

package/dist/components/core/dashboard/SolidQuestionRenderer.js.map

@@ -1 +1 @@
-{"version":3,"file":"SolidQuestionRenderer.js","sourceRoot":"","sources":["../../../../src/components/core/dashboard/SolidQuestionRenderer.tsx"],"names":[],"mappings":"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","sourcesContent":["\nimport { useGetDashboardQuestionDataByIdQuery } from '../../../redux/api/dashboardQuestionApi';\nimport { SqlExpression } from '../../../types/solid-core';\nimport { Message } from 'primereact/message';\nimport { MeterGroup } from 'primereact/metergroup';\nimport { ProgressSpinner } from 'primereact/progressspinner';\nimport qs from 'qs';\nimport { ChartJsRenderer } from './chart-renderers/ChartJsRenderer';\nimport PrimeReactDatatableRenderer from './chart-renderers/PrimeReactDatatableRenderer';\nimport styles from './SolidDashboard.module.css';\n\ntype SolidQuestionRendererProps = {\n    question: any;\n    filters: SqlExpression[];\n    isPreview: boolean;\n};\n\ntype DataItem= {\n    value: number;\n    label?: string | HTMLElement;\n    color?: string;\n}\n\nexport const SolidQuestionRenderer = ({ question, filters = [], isPreview = false }: SolidQuestionRendererProps) => {\n    if (!question) {\n        return (\n            <div className={`${styles.SolidChartCardWrapper} p-4`}>\n                <Message text=\"Preview Unavailable\" />\n            </div>\n        );\n    }\n\n    const textAlign = question?.textAlign ?? 'start'\n    if (!question) {\n        return (\n            <>\n                <Message text=\"Preview Unavailable\" />\n            </>\n        )\n    }\n    // console.log(`Rendering BarChartRenderer using question id: ${question.id}`);\n\n    // load the question data.\n    const queryParams = qs.stringify(\n        {\n            isPreview,\n            filters,\n        },\n        // ensures proper handling of arrays\n        // { arrayFormat: 'indices' }\n    );\n    const { data: questionData, isLoading: questionDataIsLoading, error: questionDataError } = useGetDashboardQuestionDataByIdQuery({ id: question.id, qs: queryParams });\n\n\n    // console.log(`Question data: `); console.log(questionData);\n    // console.log(`Question data is loading: `); console.log(questionDataIsLoading);\n    // console.log(`Question data error: `); console.log(questionDataError);\n    const options = JSON.parse(question?.chartOptions);\n    // const kpi = questionData.data.kpi;\n    // const visualizationData = questionData.data.visualizationData;\n    // const visualizedAs = question.data.visualisedAs;\n    return (\n        <>\n            {questionDataIsLoading && <ProgressSpinner />}\n            {!questionDataIsLoading &&\n            <div className={`${styles.SolidChartCardWrapper} p-4 h-full`}>\n                <div className={`font-medium text-${textAlign} ${styles.SolidChartTitle}`}>{question.name}</div>\n                <div className={`mt-2 font-bold text-3xl text-${textAlign} ${styles.SolidChartTitle}`}>{questionData.data.kpi}</div>\n                <div className='mt-3'>\n                    {['bar', 'line', 'pie'].includes(question.visualisedAs) && <ChartJsRenderer options={options} visualizationData={questionData.data.visualizationData} visualizedAs={question.visualisedAs}  />}\n                    {question.visualisedAs === 'prime-meter-group' && <MeterGroup values={questionData.data.visualizationData.dataset}  max={questionData?.data?.visualizationData?.dataset?.reduce((total: number, item: DataItem) => total + item.value, 0)}/>}\n                    {question.visualisedAs === 'prime-datatable' && <PrimeReactDatatableRenderer options={options} visualizationData={questionData.data.visualizationData} />}\n                </div>\n            </div>\n    }\n        </>\n    )\n}"]}
+{"version":3,"file":"SolidQuestionRenderer.js","sourceRoot":"","sources":["../../../../src/components/core/dashboard/SolidQuestionRenderer.tsx"],"names":[],"mappings":"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","sourcesContent":["\nimport { useGetDashboardQuestionDataByIdQuery } from '../../../redux/api/dashboardQuestionApi';\nimport { SqlExpression } from '../../../types/solid-core';\nimport { Message } from 'primereact/message';\nimport { MeterGroup } from 'primereact/metergroup';\nimport { ProgressSpinner } from 'primereact/progressspinner';\nimport qs from 'qs';\nimport { ChartJsRenderer } from './chart-renderers/ChartJsRenderer';\nimport PrimeReactDatatableRenderer from './chart-renderers/PrimeReactDatatableRenderer';\nimport styles from './SolidDashboard.module.css';\n\ntype SolidQuestionRendererProps = {\n    question: any;\n    filters: SqlExpression[];\n    isPreview: boolean;\n};\n\ntype DataItem = {\n    value: number;\n    label?: string | HTMLElement;\n    color?: string;\n}\n\nexport const SolidQuestionRenderer = ({ question, filters = [], isPreview = false }: SolidQuestionRendererProps) => {\n    if (!question) {\n        return (\n            <div className={`${styles.SolidChartCardWrapper} p-4`}>\n                <Message text=\"Preview Unavailable\" />\n            </div>\n        );\n    }\n\n    const textAlign = question?.textAlign ?? 'start'\n    if (!question) {\n        return (\n            <>\n                <Message text=\"Preview Unavailable\" />\n            </>\n        )\n    }\n    // console.log(`Rendering BarChartRenderer using question id: ${question.id}`);\n\n    // load the question data.\n    const queryParams = qs.stringify(\n        {\n            isPreview,\n            filters,\n        },\n        // ensures proper handling of arrays\n        // { arrayFormat: 'indices' }\n    );\n    const { data: questionData, isLoading: questionDataIsLoading, error: questionDataError } = useGetDashboardQuestionDataByIdQuery({ id: question.id, qs: queryParams });\n\n\n    // console.log(`Question data: `); console.log(questionData);\n    // console.log(`Question data is loading: `); console.log(questionDataIsLoading);\n    // console.log(`Question data error: `); console.log(questionDataError);\n    const options = JSON.parse(question?.chartOptions);\n    // const kpi = questionData.data.kpi;\n    // const visualizationData = questionData.data.visualizationData;\n    // const visualizedAs = question.data.visualisedAs;\n    return (\n        <>\n            {questionDataIsLoading && <ProgressSpinner />}\n            {!questionDataIsLoading &&\n                <div className={`${styles.SolidChartCardWrapper} h-full`}>\n                    <div className='flex flex-col p-4 pb-3' style={{ borderBottom: \"1px solid #e4e3e3\" }}>\n                        <div className={`font-medium text-${textAlign} ${styles.SolidChartTitle}`}>{question.name}</div>\n                        <div className={`mt-2 font-bold text-3xl text-${textAlign} ${styles.SolidChartTitle}`}>{questionData.data.kpi}</div>\n                    </div>\n                    <div className='mt-3 flex-1 min-h-0 p-4 pt-2'>\n                        {['bar', 'line', 'pie'].includes(question.visualisedAs) && <ChartJsRenderer options={options} visualizationData={questionData.data.visualizationData} visualizedAs={question.visualisedAs} />}\n                        {question.visualisedAs === 'prime-meter-group' && <MeterGroup values={questionData.data.visualizationData.dataset} max={questionData?.data?.visualizationData?.dataset?.reduce((total: number, item: DataItem) => total + item.value, 0)} />}\n                        {question.visualisedAs === 'prime-datatable' && <PrimeReactDatatableRenderer options={options} visualizationData={questionData.data.visualizationData} />}\n                    </div>\n                </div>\n            }\n        </>\n    )\n}"]}

package/dist/components/core/dashboard/SolidQuestionRenderer.tsx

@@ -15,7 +15,7 @@ type SolidQuestionRendererProps = {
     isPreview: boolean;
 };
 
-type DataItem= {
+type DataItem = {
     value: number;
     label?: string | HTMLElement;
     color?: string;
@@ -63,16 +63,18 @@ export const SolidQuestionRenderer = ({ question, filters = [], isPreview = fals
         <>
             {questionDataIsLoading && <ProgressSpinner />}
             {!questionDataIsLoading &&
-            <div className={`${styles.SolidChartCardWrapper} p-4 h-full`}>
-                <div className={`font-medium text-${textAlign} ${styles.SolidChartTitle}`}>{question.name}</div>
-                <div className={`mt-2 font-bold text-3xl text-${textAlign} ${styles.SolidChartTitle}`}>{questionData.data.kpi}</div>
-                <div className='mt-3'>
-                    {['bar', 'line', 'pie'].includes(question.visualisedAs) && <ChartJsRenderer options={options} visualizationData={questionData.data.visualizationData} visualizedAs={question.visualisedAs}  />}
-                    {question.visualisedAs === 'prime-meter-group' && <MeterGroup values={questionData.data.visualizationData.dataset}  max={questionData?.data?.visualizationData?.dataset?.reduce((total: number, item: DataItem) => total + item.value, 0)}/>}
-                    {question.visualisedAs === 'prime-datatable' && <PrimeReactDatatableRenderer options={options} visualizationData={questionData.data.visualizationData} />}
+                <div className={`${styles.SolidChartCardWrapper} h-full`}>
+                    <div className='flex flex-col p-4 pb-3' style={{ borderBottom: "1px solid #e4e3e3" }}>
+                        <div className={`font-medium text-${textAlign} ${styles.SolidChartTitle}`}>{question.name}</div>
+                        <div className={`mt-2 font-bold text-3xl text-${textAlign} ${styles.SolidChartTitle}`}>{questionData.data.kpi}</div>
+                    </div>
+                    <div className='mt-3 flex-1 min-h-0 p-4 pt-2'>
+                        {['bar', 'line', 'pie'].includes(question.visualisedAs) && <ChartJsRenderer options={options} visualizationData={questionData.data.visualizationData} visualizedAs={question.visualisedAs} />}
+                        {question.visualisedAs === 'prime-meter-group' && <MeterGroup values={questionData.data.visualizationData.dataset} max={questionData?.data?.visualizationData?.dataset?.reduce((total: number, item: DataItem) => total + item.value, 0)} />}
+                        {question.visualisedAs === 'prime-datatable' && <PrimeReactDatatableRenderer options={options} visualizationData={questionData.data.visualizationData} />}
+                    </div>
                 </div>
-            </div>
-    }
+            }
         </>
     )
 }

package/dist/components/core/dashboard/chart-renderers/ChartJsRenderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChartJsRenderer.d.ts","sourceRoot":"","sources":["../../../../../src/components/core/dashboard/chart-renderers/ChartJsRenderer.tsx"],"names":[],"mappings":"AACA,OAAO,oEAAoE,CAAC;AAG5E,KAAK,oBAAoB,GAAG;IACxB,OAAO,EAAE,GAAG,CAAC;IACb,iBAAiB,EAAE,GAAG,CAAC;IACvB,YAAY,EAAE,KAAK,GAAG,MAAM,GAAG,KAAK,CAAC;CACxC,CAAC;AACF,eAAO,MAAM,eAAe,iDAAkD,oBAAoB,4CAQjG,CAAA"}
+{"version":3,"file":"ChartJsRenderer.d.ts","sourceRoot":"","sources":["../../../../../src/components/core/dashboard/chart-renderers/ChartJsRenderer.tsx"],"names":[],"mappings":"AAEA,OAAO,oEAAoE,CAAC;AAI5E,KAAK,oBAAoB,GAAG;IACxB,OAAO,EAAE,GAAG,CAAC;IACb,iBAAiB,EAAE,GAAG,CAAC;IACvB,YAAY,EAAE,KAAK,GAAG,MAAM,GAAG,KAAK,CAAC;CACxC,CAAC;AACF,eAAO,MAAM,eAAe,iDAAkD,oBAAoB,4CAoCjG,CAAA"}

package/dist/components/core/dashboard/chart-renderers/ChartJsRenderer.js

@@ -1,8 +1,35 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
 import "../../../../components/core/dashboard/chart-renderers/init-chartjs";
 import { Bar, Line, Pie } from "react-chartjs-2";
 export var ChartJsRenderer = function (_a) {
     var options = _a.options, visualizationData = _a.visualizationData, visualizedAs = _a.visualizedAs;
-    return (_jsxs(_Fragment, { children: [visualizedAs === 'bar' && _jsx(Bar, { options: options, data: visualizationData }), visualizedAs === 'line' && _jsx(Line, { options: options, data: visualizationData }), visualizedAs === 'pie' && _jsx(Pie, { data: visualizationData })] }));
+    var chartRef = useRef(null);
+    var containerRef = useRef(null);
+    useEffect(function () {
+        if (!containerRef.current)
+            return;
+        var observer = new ResizeObserver(function () {
+            if (chartRef.current) {
+                chartRef.current.resize(); // ✅ tell Chart.js to refit
+            }
+        });
+        observer.observe(containerRef.current);
+        return function () { return observer.disconnect(); };
+    }, []);
+    // Merge in responsive options
+    var mergedOptions = __assign(__assign({}, options), { responsive: true, maintainAspectRatio: false });
+    return (_jsx(_Fragment, { children: _jsxs("div", { ref: containerRef, style: { position: "relative", width: "100%", height: "100%" }, children: [visualizedAs === 'bar' && _jsx(Bar, { ref: chartRef, options: mergedOptions, data: visualizationData }), visualizedAs === 'line' && _jsx(Line, { ref: chartRef, options: mergedOptions, data: visualizationData }), visualizedAs === 'pie' && _jsx(Pie, { ref: chartRef, options: mergedOptions, data: visualizationData })] }) }));
 };
 //# sourceMappingURL=ChartJsRenderer.js.map

package/dist/components/core/dashboard/chart-renderers/ChartJsRenderer.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChartJsRenderer.js","sourceRoot":"","sources":["../../../../../src/components/core/dashboard/chart-renderers/ChartJsRenderer.tsx"],"names":[],"mappings":";AACA,OAAO,oEAAoE,CAAC;AAC5E,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,iBAAiB,CAAC;AAOjD,MAAM,CAAC,IAAM,eAAe,GAAG,UAAC,EAAkE;QAAhE,OAAO,aAAA,EAAE,iBAAiB,uBAAA,EAAE,YAAY,kBAAA;IACtE,OAAO,CACH,8BACK,YAAY,KAAK,KAAK,IAAI,KAAC,GAAG,IAAC,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,iBAAiB,GAAI,EAC5E,YAAY,KAAK,MAAM,IAAI,KAAC,IAAI,IAAC,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,iBAAiB,GAAI,EAC9E,YAAY,KAAK,KAAK,IAAI,KAAC,GAAG,IAAC,IAAI,EAAE,iBAAiB,GAAI,IAC5D,CACN,CAAC;AACN,CAAC,CAAA","sourcesContent":["\nimport \"../../../../components/core/dashboard/chart-renderers/init-chartjs\";\nimport { Bar, Line, Pie } from \"react-chartjs-2\";\n\ntype ChartJsRendererProps = {\n    options: any;\n    visualizationData: any;\n    visualizedAs: 'bar' | 'line' | 'pie';\n};\nexport const ChartJsRenderer = ({ options, visualizationData, visualizedAs }: ChartJsRendererProps) => {\n    return (\n        <>\n            {visualizedAs === 'bar' && <Bar options={options} data={visualizationData} />}\n            {visualizedAs === 'line' && <Line options={options} data={visualizationData} />}\n            {visualizedAs === 'pie' && <Pie data={visualizationData} />}\n        </>\n    );\n}"]}
+{"version":3,"file":"ChartJsRenderer.js","sourceRoot":"","sources":["../../../../../src/components/core/dashboard/chart-renderers/ChartJsRenderer.tsx"],"names":[],"mappings":";;;;;;;;;;;;AACA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,oEAAoE,CAAC;AAC5E,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,iBAAiB,CAAC;AAQjD,MAAM,CAAC,IAAM,eAAe,GAAG,UAAC,EAAkE;QAAhE,OAAO,aAAA,EAAE,iBAAiB,uBAAA,EAAE,YAAY,kBAAA;IAEtE,IAAM,QAAQ,GAAG,MAAM,CAAqB,IAAI,CAAC,CAAC;IAClD,IAAM,YAAY,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAElD,SAAS,CAAC;QACN,IAAI,CAAC,YAAY,CAAC,OAAO;YAAE,OAAO;QAElC,IAAM,QAAQ,GAAG,IAAI,cAAc,CAAC;YAChC,IAAI,QAAQ,CAAC,OAAO,EAAE;gBAClB,QAAQ,CAAC,OAAO,CAAC,MAAM,EAAE,CAAC,CAAE,2BAA2B;aAC1D;QACL,CAAC,CAAC,CAAC;QAEH,QAAQ,CAAC,OAAO,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;QACvC,OAAO,cAAM,OAAA,QAAQ,CAAC,UAAU,EAAE,EAArB,CAAqB,CAAC;IACvC,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,8BAA8B;IAC9B,IAAM,aAAa,yBACZ,OAAO,KACV,UAAU,EAAE,IAAI,EAChB,mBAAmB,EAAE,KAAK,GAC7B,CAAC;IAGF,OAAO,CACH,4BACI,eAAK,GAAG,EAAE,YAAY,EAAE,KAAK,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,aAEjF,YAAY,KAAK,KAAK,IAAI,KAAC,GAAG,IAAC,GAAG,EAAE,QAAe,EAAE,OAAO,EAAE,aAAa,EAAE,IAAI,EAAE,iBAAiB,GAAI,EACxG,YAAY,KAAK,MAAM,IAAI,KAAC,IAAI,IAAC,GAAG,EAAE,QAAe,EAAE,OAAO,EAAE,aAAa,EAAE,IAAI,EAAE,iBAAiB,GAAI,EAC1G,YAAY,KAAK,KAAK,IAAI,KAAC,GAAG,IAAC,GAAG,EAAE,QAAe,EAAE,OAAO,EAAE,aAAa,EAAE,IAAI,EAAE,iBAAiB,GAAI,IACvG,GACP,CACN,CAAC;AACN,CAAC,CAAA","sourcesContent":["\nimport { useEffect, useRef } from \"react\";\nimport \"../../../../components/core/dashboard/chart-renderers/init-chartjs\";\nimport { Bar, Line, Pie } from \"react-chartjs-2\";\nimport { ChartJSOrUndefined } from \"node_modules/react-chartjs-2/dist/types\";\n\ntype ChartJsRendererProps = {\n    options: any;\n    visualizationData: any;\n    visualizedAs: 'bar' | 'line' | 'pie';\n};\nexport const ChartJsRenderer = ({ options, visualizationData, visualizedAs }: ChartJsRendererProps) => {\n\n    const chartRef = useRef<ChartJSOrUndefined>(null);\n    const containerRef = useRef<HTMLDivElement>(null);\n\n    useEffect(() => {\n        if (!containerRef.current) return;\n\n        const observer = new ResizeObserver(() => {\n            if (chartRef.current) {\n                chartRef.current.resize();  // ✅ tell Chart.js to refit\n            }\n        });\n\n        observer.observe(containerRef.current);\n        return () => observer.disconnect();\n    }, []);\n\n    // Merge in responsive options\n    const mergedOptions = {\n        ...options,\n        responsive: true,\n        maintainAspectRatio: false,  // ✅ allows chart to fill container height\n    };\n\n\n    return (\n        <>\n            <div ref={containerRef} style={{ position: \"relative\", width: \"100%\", height: \"100%\" }}>\n\n                {visualizedAs === 'bar' && <Bar ref={chartRef as any} options={mergedOptions} data={visualizationData} />}\n                {visualizedAs === 'line' && <Line ref={chartRef as any} options={mergedOptions} data={visualizationData} />}\n                {visualizedAs === 'pie' && <Pie ref={chartRef as any} options={mergedOptions} data={visualizationData} />}\n            </div>\n        </>\n    );\n}"]}

package/dist/components/core/dashboard/chart-renderers/ChartJsRenderer.tsx

@@ -1,6 +1,8 @@
 
+import { useEffect, useRef } from "react";
 import "../../../../components/core/dashboard/chart-renderers/init-chartjs";
 import { Bar, Line, Pie } from "react-chartjs-2";
+import { ChartJSOrUndefined } from "node_modules/react-chartjs-2/dist/types";
 
 type ChartJsRendererProps = {
     options: any;
@@ -8,11 +10,39 @@ type ChartJsRendererProps = {
     visualizedAs: 'bar' | 'line' | 'pie';
 };
 export const ChartJsRenderer = ({ options, visualizationData, visualizedAs }: ChartJsRendererProps) => {
+
+    const chartRef = useRef<ChartJSOrUndefined>(null);
+    const containerRef = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+        if (!containerRef.current) return;
+
+        const observer = new ResizeObserver(() => {
+            if (chartRef.current) {
+                chartRef.current.resize();  // ✅ tell Chart.js to refit
+            }
+        });
+
+        observer.observe(containerRef.current);
+        return () => observer.disconnect();
+    }, []);
+
+    // Merge in responsive options
+    const mergedOptions = {
+        ...options,
+        responsive: true,
+        maintainAspectRatio: false,  // ✅ allows chart to fill container height
+    };
+
+
     return (
         <>
-            {visualizedAs === 'bar' && <Bar options={options} data={visualizationData} />}
-            {visualizedAs === 'line' && <Line options={options} data={visualizationData} />}
-            {visualizedAs === 'pie' && <Pie data={visualizationData} />}
+            <div ref={containerRef} style={{ position: "relative", width: "100%", height: "100%" }}>
+
+                {visualizedAs === 'bar' && <Bar ref={chartRef as any} options={mergedOptions} data={visualizationData} />}
+                {visualizedAs === 'line' && <Line ref={chartRef as any} options={mergedOptions} data={visualizationData} />}
+                {visualizedAs === 'pie' && <Pie ref={chartRef as any} options={mergedOptions} data={visualizationData} />}
+            </div>
         </>
     );
 }

package/dist/components/core/extension/solid-core/dashboard/dashboardFormViewChangeHandler.d.ts

@@ -0,0 +1,10 @@
+import { SolidUiEvent } from "../../../../../types";
+declare const dashboardFormViewChangeHandler: (event: SolidUiEvent) => {
+    layoutChanged: boolean;
+    dataChanged: boolean;
+    newFormData: {
+        name: any;
+    };
+} | undefined;
+export default dashboardFormViewChangeHandler;
+//# sourceMappingURL=dashboardFormViewChangeHandler.d.ts.map

package/dist/components/core/extension/solid-core/dashboard/dashboardFormViewChangeHandler.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dashboardFormViewChangeHandler.d.ts","sourceRoot":"","sources":["../../../../../../src/components/core/extension/solid-core/dashboard/dashboardFormViewChangeHandler.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAEpD,QAAA,MAAM,8BAA8B,UAAW,YAAY;;;;;;aAc1D,CAAA;AACD,eAAe,8BAA8B,CAAC"}

package/dist/components/core/extension/solid-core/dashboard/dashboardFormViewChangeHandler.js

@@ -0,0 +1,16 @@
+import { getSingularAndPlural } from "../../../../../helpers/helpers";
+var dashboardFormViewChangeHandler = function (event) {
+    var modifiedField = event.modifiedField, modifiedFieldValue = event.modifiedFieldValue, formData = event.formData;
+    var toKebabCase = getSingularAndPlural(modifiedFieldValue).toKebabCase;
+    if (modifiedField === 'displayName') {
+        return {
+            layoutChanged: false,
+            dataChanged: true,
+            newFormData: {
+                name: toKebabCase
+            },
+        };
+    }
+};
+export default dashboardFormViewChangeHandler;
+//# sourceMappingURL=dashboardFormViewChangeHandler.js.map

package/dist/components/core/extension/solid-core/dashboard/dashboardFormViewChangeHandler.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dashboardFormViewChangeHandler.js","sourceRoot":"","sources":["../../../../../../src/components/core/extension/solid-core/dashboard/dashboardFormViewChangeHandler.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,gCAAgC,CAAC;AAGtE,IAAM,8BAA8B,GAAG,UAAC,KAAmB;IAE/C,IAAA,aAAa,GAAmC,KAAK,cAAxC,EAAE,kBAAkB,GAAe,KAAK,mBAApB,EAAE,QAAQ,GAAK,KAAK,SAAV,CAAW;IACtD,IAAA,WAAW,GAAK,oBAAoB,CAAC,kBAAkB,CAAC,YAA7C,CAA8C;IAEjE,IAAI,aAAa,KAAK,aAAa,EAAE;QACjC,OAAO;YACH,aAAa,EAAE,KAAK;YACpB,WAAW,EAAE,IAAI;YACjB,WAAW,EAAE;gBACT,IAAI,EAAE,WAAW;aACpB;SACJ,CAAA;KACJ;AACL,CAAC,CAAA;AACD,eAAe,8BAA8B,CAAC","sourcesContent":["import { getSingularAndPlural } from \"../../../../../helpers/helpers\";\nimport { SolidUiEvent } from \"../../../../../types\";\n\nconst dashboardFormViewChangeHandler = (event: SolidUiEvent) => {\n\n    const { modifiedField, modifiedFieldValue, formData } = event;\n    const { toKebabCase } = getSingularAndPlural(modifiedFieldValue);\n\n    if (modifiedField === 'displayName') {\n        return {\n            layoutChanged: false,\n            dataChanged: true,\n            newFormData: {\n                name: toKebabCase\n            },\n        }\n    }\n}\nexport default dashboardFormViewChangeHandler;\n"]}

package/dist/components/core/extension/solid-core/dashboard/dashboardFormViewChangeHandler.ts

@@ -0,0 +1,19 @@
+import { getSingularAndPlural } from "../../../../../helpers/helpers";
+import { SolidUiEvent } from "../../../../../types";
+
+const dashboardFormViewChangeHandler = (event: SolidUiEvent) => {
+
+    const { modifiedField, modifiedFieldValue, formData } = event;
+    const { toKebabCase } = getSingularAndPlural(modifiedFieldValue);
+
+    if (modifiedField === 'displayName') {
+        return {
+            layoutChanged: false,
+            dataChanged: true,
+            newFormData: {
+                name: toKebabCase
+            },
+        }
+    }
+}
+export default dashboardFormViewChangeHandler;

package/dist/components/core/extension/solid-core/dashboard/dashboardQuestionFieldChangeHandler.d.ts

@@ -0,0 +1,8 @@
+import { SolidUiEvent } from "../../../../../types";
+declare const dashboardQuestionFieldChangeHandler: (event: SolidUiEvent) => Promise<{
+    layoutChanged: boolean;
+    dataChanged: boolean;
+    newLayout: import("../../../../../types").LayoutNode;
+}>;
+export default dashboardQuestionFieldChangeHandler;
+//# sourceMappingURL=dashboardQuestionFieldChangeHandler.d.ts.map

package/dist/components/core/extension/solid-core/dashboard/dashboardQuestionFieldChangeHandler.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dashboardQuestionFieldChangeHandler.d.ts","sourceRoot":"","sources":["../../../../../../src/components/core/extension/solid-core/dashboard/dashboardQuestionFieldChangeHandler.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAGpD,QAAA,MAAM,mCAAmC,UAAiB,YAAY;;;;EAuBrE,CAAA;AAGD,eAAe,mCAAmC,CAAC"}

package/dist/components/core/extension/solid-core/dashboard/dashboardQuestionFieldChangeHandler.js

@@ -0,0 +1,64 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import { SolidViewLayoutManager } from "../../../../../components/core/common/SolidViewLayoutManager";
+var dashboardQuestionFieldChangeHandler = function (event) { return __awaiter(void 0, void 0, void 0, function () {
+    var modifiedField, modifiedFieldValue, formViewLayout, layout, layoutManager;
+    return __generator(this, function (_a) {
+        modifiedField = event.modifiedField, modifiedFieldValue = event.modifiedFieldValue, formViewLayout = event.formViewLayout;
+        layout = formViewLayout;
+        layoutManager = new SolidViewLayoutManager(layout);
+        if (modifiedField === 'sourceType') {
+            if (modifiedFieldValue.value === 'sql') {
+                layoutManager.updateNodeAttributes('labelSql', { visible: true });
+                layoutManager.updateNodeAttributes('kpiSql', { visible: true });
+                layoutManager.updateNodeAttributes('providerName', { visible: false });
+            }
+            if (modifiedFieldValue.value === 'provider') {
+                layoutManager.updateNodeAttributes('labelSql', { visible: false });
+                layoutManager.updateNodeAttributes('kpiSql', { visible: false });
+                layoutManager.updateNodeAttributes('providerName', { visible: true });
+            }
+        }
+        return [2 /*return*/, {
+                layoutChanged: true,
+                dataChanged: false,
+                newLayout: layoutManager.getLayout(),
+            }];
+    });
+}); };
+export default dashboardQuestionFieldChangeHandler;
+//# sourceMappingURL=dashboardQuestionFieldChangeHandler.js.map

package/dist/components/core/extension/solid-core/dashboard/dashboardQuestionFieldChangeHandler.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dashboardQuestionFieldChangeHandler.js","sourceRoot":"","sources":["../../../../../../src/components/core/extension/solid-core/dashboard/dashboardQuestionFieldChangeHandler.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AACA,OAAO,EAAE,sBAAsB,EAAE,MAAM,8DAA8D,CAAC;AAEtG,IAAM,mCAAmC,GAAG,UAAO,KAAmB;;;QAC1D,aAAa,GAAyC,KAAK,cAA9C,EAAE,kBAAkB,GAAqB,KAAK,mBAA1B,EAAE,cAAc,GAAK,KAAK,eAAV,CAAW;QAE9D,MAAM,GAAG,cAAc,CAAC;QAExB,aAAa,GAAG,IAAI,sBAAsB,CAAC,MAAM,CAAC,CAAC;QACzD,IAAI,aAAa,KAAK,YAAY,EAAE;YAChC,IAAI,kBAAkB,CAAC,KAAK,KAAK,KAAK,EAAE;gBACpC,aAAa,CAAC,oBAAoB,CAAC,UAAU,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;gBAClE,aAAa,CAAC,oBAAoB,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;gBAChE,aAAa,CAAC,oBAAoB,CAAC,cAAc,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,CAAC;aAC1E;YACD,IAAI,kBAAkB,CAAC,KAAK,KAAK,UAAU,EAAE;gBACzC,aAAa,CAAC,oBAAoB,CAAC,UAAU,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,CAAC;gBACnE,aAAa,CAAC,oBAAoB,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,CAAC;gBACjE,aAAa,CAAC,oBAAoB,CAAC,cAAc,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;aACzE;SACJ;QACD,sBAAO;gBACH,aAAa,EAAE,IAAI;gBACnB,WAAW,EAAE,KAAK;gBAClB,SAAS,EAAE,aAAa,CAAC,SAAS,EAAE;aACvC,EAAA;;KACJ,CAAA;AAGD,eAAe,mCAAmC,CAAC","sourcesContent":["import { SolidUiEvent } from \"../../../../../types\";\nimport { SolidViewLayoutManager } from \"../../../../../components/core/common/SolidViewLayoutManager\";\n\nconst dashboardQuestionFieldChangeHandler = async (event: SolidUiEvent) => {\n    const { modifiedField, modifiedFieldValue, formViewLayout } = event;\n\n    const layout = formViewLayout;\n\n    const layoutManager = new SolidViewLayoutManager(layout);\n    if (modifiedField === 'sourceType') {\n        if (modifiedFieldValue.value === 'sql') {\n            layoutManager.updateNodeAttributes('labelSql', { visible: true });\n            layoutManager.updateNodeAttributes('kpiSql', { visible: true });\n            layoutManager.updateNodeAttributes('providerName', { visible: false });\n        }\n        if (modifiedFieldValue.value === 'provider') {\n            layoutManager.updateNodeAttributes('labelSql', { visible: false });\n            layoutManager.updateNodeAttributes('kpiSql', { visible: false });\n            layoutManager.updateNodeAttributes('providerName', { visible: true });\n        }\n    }\n    return {\n        layoutChanged: true,\n        dataChanged: false,\n        newLayout: layoutManager.getLayout(),\n    }\n}\n\n\nexport default dashboardQuestionFieldChangeHandler;\n"]}