@quillsql/react 1.6.1 → 1.6.4

package/src/Table.tsx

@@ -10,6 +10,8 @@ import {
 } from './Context';
 import Skeleton from 'react-loading-skeleton';
 import { valueFormatter } from './Chart';
+import { SpecialTable } from './SQLEditor';
+import { QuillTheme } from './QuillProvider';
 
 const Table = ({
   chartId,
@@ -20,7 +22,8 @@ const Table = ({
 }) => {
   const { dispatch, dashboard } = useContext(DashboardContext);
   const [client, _] = useContext(ClientContext);
-  const [theme] = useContext(ThemeContext);
+  const [theme] =
+    useContext<[QuillTheme, (theme: QuillTheme) => void]>(ThemeContext);
 
   const downloadCSV = (rows, name) => {
     // report.rows
@@ -146,6 +149,9 @@ const ChartUpdater = ({
     : 6;
 
   const memoizedData = useMemo(() => {
+    if (!chartConfig || !chartConfig.rows || !chartConfig.rows.length) {
+      return [];
+    }
     // Deep copy of data
     const copiedData = JSON.parse(
       JSON.stringify(
@@ -155,7 +161,7 @@ const ChartUpdater = ({
       )
     );
 
-    return copiedData.slice(0, NUM_TO_SHOW).map(item => {
+    return copiedData.map(item => {
       const fieldsWithFormattedValues = {};
 
       for (const field of chartConfig.columns) {
@@ -169,20 +175,20 @@ const ChartUpdater = ({
 
       return fieldsWithFormattedValues;
     });
-  }, [chartConfig, NUM_TO_SHOW]);
+  }, [chartConfig]);
 
   const handleDownloadCSV = () => {
     downloadCSV(memoizedData, chartConfig.name);
   };
 
-  if (!chartConfig || loading || !memoizedData.length) {
+  if (!chartConfig || loading) {
     return (
       <div
         // className="flex flex-col flex-1 h-[100%]"
         style={{
           ...containerStyle,
-          marginLeft: 25,
-          marginRight: 25,
+          // marginLeft: 25,
+          // marginRight: 25,
           boxSizing: 'content-box',
           height: '100%',
           display: 'flex',
@@ -220,26 +226,14 @@ const ChartUpdater = ({
   }
 
   return (
-    <div
-      style={{
-        boxSizing: 'content-box',
-        height: containerStyle?.height || '100%',
-        marginTop: 20,
-        // overflow: 'hidden',
-        display: 'flex',
-        marginLeft: '1rem',
-        flexDirection: 'column',
-        // justifyContent: 'space-between',
-      }}
-    >
-      <Columns
-        columns={chartConfig.columns}
-        data={memoizedData}
-        theme={theme}
-        handleDownloadCSV={handleDownloadCSV}
-        numToShow={NUM_TO_SHOW}
-      />
-    </div>
+    <SpecialTable
+      showDownloadCsvButton
+      csvFilename={chartConfig.name}
+      columns={chartConfig.columns}
+      rows={memoizedData}
+      height={containerStyle?.height || '100%'}
+      theme={theme}
+    />
   );
 };
 

package/src/components/BigModal/BigModal.tsx

@@ -0,0 +1,108 @@
+/* eslint-disable react/display-name */
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+
+import { useOnClickOutside, useOnWindowResize } from '../../hooks';
+
+import { HorizontalPosition } from '../../lib/inputTypes';
+import { mergeRefs } from '../../lib';
+
+export interface ModalProps extends React.HTMLAttributes<HTMLDivElement> {
+  showModal: boolean;
+  setShowModal:
+    | React.Dispatch<React.SetStateAction<boolean>>
+    | ((nextState: boolean) => void);
+  parentRef?: React.RefObject<HTMLElement>;
+  width?: number;
+  maxHeight?: string;
+  anchorPosition?: HorizontalPosition;
+  children: React.ReactNode;
+  theme: any;
+}
+
+const BigModal = React.forwardRef<HTMLDivElement, ModalProps>((props, ref) => {
+  const {
+    showModal,
+    setShowModal,
+    parentRef,
+    width,
+    maxHeight = '18rem',
+    children,
+    className,
+    theme,
+    ...other
+  } = props;
+  const [modalExceedsWindow, setModalExceedsWindow] = useState(false);
+
+  const modalRef = useRef<HTMLDivElement>(null);
+
+  const checkModalExceedsWindow = useCallback(
+    (modalWidth: number, windowWidth: number): boolean => {
+      if (!parentRef.current) {
+        return false;
+      }
+      const modalBoundingRight =
+        parentRef.current.getBoundingClientRect().left + modalWidth;
+      return windowWidth - modalBoundingRight < 0;
+    },
+    [parentRef]
+  );
+
+  const getAbsoluteSpacing = () => {
+    return modalExceedsWindow ? '0' : '0';
+  };
+
+  useOnClickOutside(modalRef, e => {
+    // Exclude click on trigger button (e.g. Dropdown Button) from outside click handler
+    const isTriggerElem = parentRef
+      ? parentRef.current?.contains(e.target)
+      : false;
+    if (!isTriggerElem) {
+      setShowModal(false);
+    }
+  });
+
+  // Execute only when modal is of absolute size
+  useEffect(() => {
+    if (width) {
+      setModalExceedsWindow(checkModalExceedsWindow(width, window.innerWidth));
+    }
+  }, [checkModalExceedsWindow, parentRef, width]);
+
+  useOnWindowResize(() => {
+    if (width) {
+      setModalExceedsWindow(checkModalExceedsWindow(width, window.innerWidth));
+    }
+  });
+
+  return showModal ? (
+    <div
+      ref={mergeRefs([modalRef, ref])}
+      style={{
+        position: 'absolute',
+        zIndex: 10,
+        overflowY: 'auto',
+        backgroundColor: theme?.backgroundColor || 'white',
+        borderColor: theme?.borderColor || '#E5E7EB',
+        borderTopStyle: 'solid',
+        borderBottomStyle: 'solid',
+        borderLeftStyle: 'solid',
+        borderRightStyle: 'solid',
+        borderTopWidth: 1,
+        borderBottomWidth: 1,
+        borderLeftWidth: 1,
+        borderRightWidth: 1,
+        borderRadius: '0.375rem',
+        boxShadow:
+          '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
+        top: '50%',
+        left: '50%',
+        transform: 'translate(-50%, -50%)',
+      }}
+      {...other}
+    >
+      {children}
+    </div>
+  ) : null;
+});
+
+export default BigModal;

package/src/components/Modal/Modal.tsx

@@ -11,7 +11,7 @@ export interface ModalProps extends React.HTMLAttributes<HTMLDivElement> {
   setShowModal:
     | React.Dispatch<React.SetStateAction<boolean>>
     | ((nextState: boolean) => void);
-  parentRef: React.RefObject<HTMLElement>;
+  parentRef?: React.RefObject<HTMLElement>;
   width?: number;
   maxHeight?: string;
   anchorPosition?: HorizontalPosition;

package/src/continue_logs.txt

@@ -0,0 +1,75 @@
+This is a log of the exact prompt/completion pairs sent/received from the LLM during this step
+
+############################################
+
+Prompt: 
+
+<Assistant>
+Called function Welcome to Continue
+
+<User>
+/edit convert from rem to px using 1rem = 16px
+
+<User>
+/edit convert from rem to px using 1rem = 16px
+
+<User>
+convert from rem to px using 1rem = 16px
+
+
+
+############################################
+
+Completion: 
+
+To convert from rem to pixels, you simply multiply the rem value by 16. 
+
+For example, if you have a value of 2rem and you want to convert it to pixels, you would do: 
+
+2rem * 16 = 32px 
+
+So, 2rem is equal to 32px.
+
+############################################
+
+Prompt: 
+
+<User>
+                Diff summary: "convert from rem to px using 1rem = 16px"
+
+                ```diff
+                -               padding: '1rem',
+-               borderRadius: '0.375rem',
++               To convert from rem to pixels, you simply multiply the rem value by 16.
++               
++               For example, if you have a value of 2rem and you want to convert it to pixels, you would do:
++               
++               2rem * 16 = 32px
++               
++               So, 2rem is equal to 32px.
+                ```
+
+                Please give brief a description of the changes made above using markdown bullet points. Be concise:
+
+
+
+############################################
+
+Completion: 
+
+"- The code originally used `rem` units for padding and border radius.\n- The diff summary explains how to convert `rem` units to `px` units using the conversion factor of 1rem = 16px.\n- An example is provided to illustrate the conversion process.\n- The final statement clarifies that 2rem is equal to 32px."
+
+############################################
+
+Prompt: 
+
+<User>
+Write a very short title to describe this requested change (no quotes): 'convert from rem to px using 1rem = 16px'. This is the title:
+
+
+
+############################################
+
+Completion: 
+
+"Rem to Px Conversion: 1rem = 16px"

package/src/hooks/useQuill.ts

@@ -77,28 +77,14 @@ export const useQuill = (
         } = client;
         try {
           if (queryEndpoint) {
-            const resp = await axios.get(
-              'https://quill-344421.uc.r.appspot.com/selfhostitem',
-              {
-                params: {
-                  id: chartId,
-                  orgId: customerId,
-                  publicKey: publicKey,
-                },
-                environment: environment || undefined,
-              }
-            );
-
-            const resp1 = await axios.post(
+            const resp = await axios.post(
               queryEndpoint,
-              { query: resp.data.queryString },
+              { metadata: { id: chartId, task: 'item' } },
               { headers: queryHeaders }
             );
             setLoading(false);
             setData({
               ...resp.data,
-              rows: resp1.data.rows,
-              fields: resp1.data.fields,
             });
             dispatch({ type: 'UPDATE_DASHBOARD_ITEM', id, data: resp.data });
           } else {

package/src/index.ts

@@ -5,4 +5,5 @@ export { default as Chart } from './Chart';
 export { default as Table } from './Table';
 export { default as SQLEditor } from './SQLEditor';
 export { default as ReportBuilder } from './ReportBuilder';
+export { default as AddToDashboardModal } from './AddToDashboardModal';
 export { useQuill } from './hooks/useQuill';