@solidxai/core-ui 0.1.1 → 0.1.2

package/src/components/core/common/SolidXAiIframe.tsx

@@ -1,77 +0,0 @@
-import React, { useEffect, useRef, useState } from "react";
-
-interface SolidXAiIframeProps {
-  url: string;
-}
-
-export const SolidXAiIframe: React.FC<SolidXAiIframeProps> = ({ url }) => {
-  const [reachable, setReachable] = useState<boolean | null>(null);
-
-
-  useEffect(() => {
-  const handler = (event:any) => {
-    if (event.data?.action === "REFRESH_PARENT") {
-      window.location.reload();
-    }
-  };
-
-  window.addEventListener("message", handler);
-  return () => window.removeEventListener("message", handler);
-}, []);
-
-
-
-  useEffect(() => {
-    const checkServer = async () => {
-      try {
-        // Try to fetch the page HEAD (fast, no content)
-        const res = await fetch(url, { method: "HEAD" });
-
-        if (res.ok) {
-          setReachable(true);
-        } else {
-          setReachable(false);
-        }
-      } catch (err) {
-        setReachable(false);
-      }
-    };
-
-    checkServer();
-  }, [url]);
-
-  // Loading state
-  if (reachable === null) {
-    return (
-      <div className="flex items-center justify-center h-full text-gray-600">
-        Checking SolidX AI server...
-      </div>
-    );
-  }
-
-  // Error state
-  if (reachable === false) {
-    return (
-      <div className="flex  items-center justify-center align-items-center h-full text-center p-4 overflow-x-auto	">
-        <h3>Mcp Server not reachable. <br></br>
-          <span className="opacity-60 mt-2">
-            <strong>{url}</strong>
-          </span>
-        </h3>
-      </div>
-    );
-  }
-  // SUCCESS → load iframe
-  return (
-    <iframe
-      src={url}
-      style={{
-        width: "100%",
-        height: "100%",
-        border: "none",
-      }}
-      allow="clipboard-write; clipboard-read"
-      title="SolidX AI JSON Viewer"
-    />
-  );
-};

package/src/components/core/dashboard/SolidDashboard.module.css

@@ -1,79 +0,0 @@
-.SolidDashboardTitle {
-    margin: 4.3px 0 !important
-}
-
-.SolidDashboardContentWrapper {
-    background-color: var(--hightlight-bg-secondary);
-    height: calc(100vh - 64px) !important;
-}
-
-.SolidChartCardWrapper {
-    box-shadow: 0px 6px 15px 1px rgba(0, 0, 0, 0.05);
-    border-radius: 8px;
-    background-color: var(--surface-card);
-}
-
-.SolidChartTitle {
-    color: var(--solid-dark-title);
-}
-
-.SolidDashboardDateRangeFilterWrapper {
-    border: 1px solid var(--gray-300);
-    border-radius: 6px;
-}
-
-.SolidDashboardDateRangeFilter input {
-    border: none !important;
-}
-
-
-.SolidDashboardPageContentWrapper {
-    transition: width 0.3s ease;
-    min-width: 0;
-    border-right: 1px solid var(--primary-light-color);
-}
-
-.SolidXAIFloatingBtn {
-    position: absolute;
-    top: 50%;
-    right: -1px;
-    /* transform: translateY(-50%) rotate(-90deg); */
-    z-index: 1000;
-    font-size: 0.875rem;
-    background-color: #eff1f4;
-    color: var(--secondary-dark-color);
-    white-space: nowrap;
-    padding: 0.75rem 0.5rem;
-    border-radius: 4px 4px 4px 0;
-    border-top: 1px solid var(--primary-light-color);
-    border-right: 1px solid var(--primary-light-color);
-    border-bottom: 1px solid var(--primary-light-color);
-    border-left: none;
-    display: inline-block;
-    writing-mode: vertical-rl;
-    transform: rotate(180deg);
-    width: 30px;
-    transition: right 0.3s;
-    margin-top: -50px;
-    cursor: pointer;
-    box-shadow:
-        0 -4px 6px -4px rgba(0, 0, 0, 0.1),
-        4px 0 6px -4px rgba(0, 0, 0, 0.1),
-        0 4px 6px -4px rgba(0, 0, 0, 0.1);
-}
-
-.SolidXAIListPanel {
-    position: fixed !important;
-    top: 0;
-    right: -380px;
-    /* Hidden by default */
-    width: 380px;
-    height: 100vh;
-    transition: right 0.3s ease;
-    z-index: 999;
-    border-left: 1px solid var(--primary-light-color);
-}
-
-.SolidXAIListPanelOpen {
-    right: 0;
-}

package/src/components/core/dashboard/SolidDashboard.tsx

@@ -1,332 +0,0 @@
-
-import { DashboardResponse, useGetDashboardQuery } from '../../../redux/api/dashboardApi';
-import { SqlExpression } from '../../../types/solid-core';
-import { Button } from 'primereact/button';
-import { Tooltip } from "primereact/tooltip";
-import qs from 'qs';
-import { Dispatch, SetStateAction, useEffect, useState } from 'react';
-import { SolidXAIIcon } from '../solid-ai/SolidXAIIcon';
-import styles from './SolidDashboard.module.css';
-import SolidDashboardBody from './SolidDashboardBody';
-import SolidDashboardVariable from './SolidDashboardVariable';
-import { SolidAiMainWrapper } from '../solid-ai/SolidAiMainWrapper';
-import { SolidDashboardFilterRequired } from './SolidDashboardFilterRequired';
-import { SolidDashboardLoading } from './SolidDashboardLoading';
-import { SolidDashboardRenderError } from './SolidDashboardRenderError';
-import { useDispatch, useSelector } from "react-redux";
-import { showNavbar, toggleNavbar } from "../../../redux/features/navbarSlice";
-import SolidDashboardNotAvailable from './SolidDashboardNotAvailable';
-import { useLazyGetMcpUrlQuery, useLazyGetSolidSettingsQuery } from '../../../redux/api/solidSettingsApi';
-
-export enum DashboardVariableType {
-  DATE = 'date',
-  SELECTION_STATIC = 'selectionStatic',
-  SELECTION_DYNAMIC = 'selectionDynamic',
-}
-
-enum SOURCE_TYPE {
-  SQL = 'sql',
-  PROVIDER = 'provider',
-}
-
-export interface DashboardVariableRecord {
-  id: number;
-  variableName: string;
-  variableType: DashboardVariableType;
-  selectionStaticValues?: string[];
-  selectionDynamicSourceType?: SOURCE_TYPE;
-  selectionDynamicProviderName?: string;
-  selectionDynamicSQL?: string;
-  isMultiSelect?: boolean;
-  defaultValue?: string;
-  defaultOperator?: string;
-}
-
-function handleDashboardData(
-  data: DashboardResponse,
-  setDashboardVariables: Dispatch<SetStateAction<DashboardVariableRecord[]>>,
-  setQuestions: Dispatch<SetStateAction<any[]>>,
-) {
-  const { records, meta } = data;
-  if (records && records.length > 0) {
-    // Set the layout options for the dashboard body
-    const dashboardData = records[0]; // Assuming we want the first dashboard
-
-    // Set the dashboard variables
-    setDashboardVariables(dashboardData.dashboardVariables || []);
-
-    // Set the dashboard questions
-    setQuestions(dashboardData.questions)
-
-  }
-}
-
-function getQueryParams(moduleName: string, dashboardId?: number, dashboardName?: string) {
-  const filters: any = {
-    module: {
-      name: {
-        $eq: moduleName
-      }
-    }
-  };
-
-  if (dashboardId !== undefined) {
-    filters.id = { $eq: dashboardId };
-  } else if (dashboardName !== undefined) {
-    filters.name = { $eq: dashboardName };
-  }
-
-  const query = {
-    filters,
-    populate: ['dashboardVariables', 'questions']
-  };
-  const urlQuery = qs.stringify(query, {
-    encodeValuesOnly: true,
-  });
-  return urlQuery;
-}
-
-// Render the dashboard body only if:
-// 1. There are dashboard questions
-// AND
-// (
-// 1. There are dashboard variables and all dashboard variable filter rules have been applied i.e (all dashboard variables have been selected)
-//. OR
-// 2. There are no dashboard variables
-// )
-// 
-function isRenderDashboardBody(questions: any[], dashboardVariables: DashboardVariableRecord[], filters: SqlExpression[]) {
-  if (questions.length === 0) {
-    return false;
-  }
-
-  if (dashboardVariables.length === 0) {
-    return true;
-  }
-
-  // Check if all dashboard variables have corresponding filters applied
-  const allVariablesFiltered = dashboardVariables.every(variable =>
-    filters.some(filter => filter.variableName === variable.variableName)
-  );
-
-  return allVariablesFiltered;
-}
-
-type SolidDashboardViewProps = {
-  moduleName: string;
-  dashboardId?: number;
-  dashboardName?: string;
-};
-
-const SolidDashboard = (params: SolidDashboardViewProps) => {
-  const { data, isLoading, error } = useGetDashboardQuery(getQueryParams(params.moduleName, params.dashboardId, params.dashboardName)) // FIXME : error handling should be done properly
-  // Define a state called layoutOption and pass it after destructing the widgetOptions and dashboardOptions from layoutOption
-  // TODO [HP]: Shouldn't the type of this state variable be something different? Why are we muddling this with layout but calling it body props? 
-  // TODO [HP]: Body props should be clearly made up of Gridstack layout options, the questions that make up the body & the filter[] which is an array of SqlExpressions
-  // TODO [HP]: This is fully CONFUSED
-  // const [layoutOption, setLayoutOption] = useState<SolidDashboardBodyProps>({
-  //   filters: [],
-  //   questions: [],
-  // });
-
-  // TODO [HP]: replace dashboardVariableFilterRules with filters everywhere...
-  // const [dashboardVariableFilterRules, setDashboardVariableFilterRules] = useState<ISolidDashboardVariableFilterRule[]>([]);
-  const dispatch = useDispatch();
-  const visibleNavbar = useSelector((state: any) => state.navbarState?.visibleNavbar);
-  const [filters, setFilters] = useState<SqlExpression[]>([]);
-  const [isOpenSolidXAiPanel, setIsOpenSolidXAiPanel] = useState(false);
-  const [chatterWidth, setChatterWidth] = useState(380);
-  const [isResizing, setIsResizing] = useState(false);
-  const [questions, setQuestions] = useState<any[]>([]);
-  const [dashboardVariables, setDashboardVariables] = useState<DashboardVariableRecord[]>([]);
-
-
-  useEffect(() => {
-    // Invoke the dashboard api to fetch the dashboard data
-    // console.log('Dashboard Data testing:', isLoading, data, error);
-    if (!isLoading && data) {
-      // Assuming data contains the layout options
-      handleDashboardData(data, setDashboardVariables, setQuestions);
-    }
-  }, [isLoading, data]);
-
-  useEffect(() => {
-    const storedOpen = localStorage.getItem('d_solidxai_open');
-    const storedWidth = localStorage.getItem('d_solidxai_width');
-
-    if (storedOpen !== null) {
-      setIsOpenSolidXAiPanel(storedOpen === 'true');
-    }
-
-    if (storedWidth !== null) {
-      const width = parseInt(storedWidth, 10);
-      if (!isNaN(width)) {
-        setChatterWidth(width);
-      }
-    }
-  }, []);
-
-
-  useEffect(() => {
-    if (isResizing) {
-      const handleMouseMove = (e: MouseEvent) => {
-        const newWidth = window.innerWidth - e.clientX;
-        const clampedWidth = Math.max(280, Math.min(newWidth, 700));
-        setChatterWidth(clampedWidth);
-        localStorage.setItem('d_solidxai_width', clampedWidth.toString());
-      };
-
-      const handleMouseUp = () => {
-        setIsResizing(false);
-      };
-
-      window.addEventListener('mousemove', handleMouseMove);
-      window.addEventListener('mouseup', handleMouseUp);
-
-      return () => {
-        window.removeEventListener('mousemove', handleMouseMove);
-        window.removeEventListener('mouseup', handleMouseUp);
-      };
-    }
-  }, [isResizing]);
-
-
-  const handleOpen = () => {
-    setIsOpenSolidXAiPanel(true);
-    localStorage.setItem('d_solidxai_open', 'true');
-  };
-
-  const handleClose = () => {
-    setIsOpenSolidXAiPanel(false);
-    localStorage.setItem('d_solidxai_open', 'false');
-  };
-
-  const toggleBothSidebars = () => {
-    if (visibleNavbar) {
-      dispatch(toggleNavbar());   // close both
-    } else {
-      dispatch(showNavbar());     // open both
-    }
-  };
-
-
-
-  const [mcpUrl, setMcpUrl] = useState<string | null>(null);
-  const [getMcpUrl] = useLazyGetMcpUrlQuery();
-
-  const [trigger, { data: solidSettingsData }] = useLazyGetSolidSettingsQuery();
-  useEffect(() => {
-    trigger("") // Fetch settings on mount
-  }, [])
-
-  useEffect(() => {
-    if (solidSettingsData?.data?.mcpEnabled && solidSettingsData?.data?.mcpServerUrl) {
-      enableSolidXAiPanel();
-    }
-  }, [solidSettingsData]);
-
-  const enableSolidXAiPanel = async () => {
-    try {
-      const queryData = {
-        showHeader: "true",
-        inListView: "true"
-      };
-      const queryString = qs.stringify({ ...queryData }, { encodeValuesOnly: true });
-      const response = await getMcpUrl(queryString).unwrap();
-      console.log("response", response);
-      if (response && response?.data?.mcpUrl) {
-        setMcpUrl(response?.data?.mcpUrl);
-      }
-    } catch (error) {
-
-    }
-  }
-
-
-  return (
-    <div className={`h-screen surface-0 flex`}>
-      <div className={`h-full flex-grow-1 ${styles.SolidDashboardPageContentWrapper}`}>
-        {isLoading && <SolidDashboardLoading />}
-        {error && <SolidDashboardRenderError />}
-        {!isLoading && !error && data && data.records.length === 0 && (
-          <SolidDashboardNotAvailable />
-        )}
-        {!isLoading && !error && data && data.records.length > 0 && (
-          <>
-            <div className="page-header" style={{ borderBottom: '1px solid var(--primary-light-color)' }}>
-              <div className='flex align-items-center gap-2'>
-                <div className="apps-icon block md:hidden cursor-pointer" onClick={toggleBothSidebars}>
-                  <i className="pi pi-th-large"></i>
-                </div>
-                <p className={`view-title solid-text-wrapper flex align-items-center gap-1 ${styles.SolidDashboardTitle}`}>
-                  {data?.records[0]?.displayName ? data?.records[0]?.displayName : data?.records[0]?.name}
-                  {data?.records[0]?.description &&
-                    <>
-                      <Tooltip className='solid-field-tooltip' target=".solid-field-tooltip-icon" />
-                      <i className="pi pi-info-circle solid-field-tooltip-icon"
-                        data-pr-tooltip={data?.records[0]?.description}
-                        data-pr-position={'right'}
-                      />
-                    </>
-                  }
-                </p>
-              </div>
-              {dashboardVariables && dashboardVariables.length > 0 && <SolidDashboardVariable dashboardVariables={dashboardVariables} filters={filters} setFilters={setFilters} />}
-            </div>
-            {!isRenderDashboardBody(questions, dashboardVariables, filters) && <SolidDashboardFilterRequired />}
-            {isRenderDashboardBody(questions, dashboardVariables, filters) && <SolidDashboardBody questions={questions} filters={filters} />}
-          </>
-        )}
-      </div>
-      {mcpUrl && (
-        <div className={`chatter-section ${isOpenSolidXAiPanel === false ? 'collapsed' : 'open'}`} style={{ width: chatterWidth }}>
-          {isOpenSolidXAiPanel && (
-            <div
-              style={{
-                width: 5,
-                cursor: 'col-resize',
-                position: 'absolute',
-                left: 0,
-                top: 0,
-                bottom: 0,
-                height: '100%',
-                zIndex: 9,
-              }}
-              onMouseDown={() => setIsResizing(true)}
-            />
-          )}
-          {isOpenSolidXAiPanel &&
-            <Button
-              icon="pi pi-angle-double-right"
-              size="small"
-              text
-              className="chatter-collapse-btn"
-              style={{ width: 30, height: 30, aspectRatio: '1/1' }}
-              onClick={handleClose}
-            />
-          }
-
-          {isOpenSolidXAiPanel === false ?
-            <div className="flex flex-column gap-2 justify-content-center p-2">
-              <div className="chatter-collapsed-content" onClick={handleOpen}>
-                <div className="flex gap-2"> <SolidXAIIcon /> SolidX AI </div>
-              </div>
-              <Button
-                icon="pi pi-chevron-left"
-                size="small"
-                className="px-0"
-                style={{ width: 30 }}
-                onClick={handleOpen}
-              />
-            </div>
-            :
-            <SolidAiMainWrapper mcpUrl={mcpUrl} />
-          }
-        </div>
-      )}
-
-    </div>
-  );
-}
-
-export default SolidDashboard;

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

@@ -1,117 +0,0 @@
-
-import 'gridstack/dist/gridstack.min.css';
-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';
-
-export interface SolidDashboardBodyProps {
-  dashboardOptions?: GridStackOptions;
-  widgetOptions?: GridStackWidget[];
-  // Replace `any` with a proper `Question` type when available
-  questions: any[];
-  filters: SqlExpression[];
-}
-
-const SolidDashboardBody = ({ questions, filters = [] }: SolidDashboardBodyProps) => {
-  // const gridRef = useRef<HTMLDivElement>(null);
-
-  // 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;
-  });
-
-
-  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>
-              </div>
-            )
-          })}
-      </div>
-    </div>
-  );
-};
-
-export default SolidDashboardBody;

package/src/components/core/dashboard/SolidDashboardFilterRequired.tsx

@@ -1,28 +0,0 @@
-
-export const SolidDashboardFilterRequired = () => {
-  return (
-    <div className="flex align-items-center justify-content-center" style={{ minHeight: '400px', padding: '2rem' }}>
-      <div className="flex flex-column align-items-center gap-3 text-center" style={{ maxWidth: '500px' }}>
-        <div
-          className="flex align-items-center justify-content-center border-circle"
-          style={{
-            width: '80px',
-            height: '80px',
-            backgroundColor: 'var(--blue-50)',
-            color: 'var(--blue-500)'
-          }}
-        >
-          <i className="pi pi-filter" style={{ color: "var(--primary-color)", fontSize: '2.5rem' }} />
-        </div>
-        <div>
-          <div className="flex flex-column gap-2">
-            <h3 className="m-0" style={{ color: 'var(--text-color)', fontSize: '1.25rem', fontWeight: 600 }}>Filters Required</h3>
-            <p className="m-0" style={{ color: 'var(--text-color-secondary)', fontSize: '0.95rem', lineHeight: '1.5' }}>
-              Please select the required filters to render your dashboard.
-            </p>
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-}

package/src/components/core/dashboard/SolidDashboardHeader.tsx

@@ -1,10 +0,0 @@
-
-const SolidDashboardHeader = () => {
-  return (
-    <div className="flex flex-col items-center justify-center h-screen">
-      <h1 className="text-2xl font-bold mb-4">Solid Dashboard Header</h1>
-      <p className="text-lg">This is a placeholder for the Solid Dashboard Header component.</p>
-    </div>
-  );
-}
-export default SolidDashboardHeader;