attemping to hide columns with toggles

Author: sophiasam96

references/ast-WHERE-multiple.png

@@ -7,60 +7,60 @@
  * @param second Second number
  * @returns The sum of the two numbers.
  */
-export function add(first: number, second: number): number {
-  return first + second;
-}
+// export function add(first: number, second: number): number {
+//   return first + second;
+// }
 
 /**
  * Displays the current time once a second.
  * @customfunction
  * @param invocation Custom function handler
  */
-export function clock(invocation: CustomFunctions.StreamingInvocation<string>): void {
-  const timer = setInterval(() => {
-    const time = currentTime();
-    invocation.setResult(time);
-  }, 1000);
+// export function clock(invocation: CustomFunctions.StreamingInvocation<string>): void {
+//   const timer = setInterval(() => {
+//     const time = currentTime();
+//     invocation.setResult(time);
+//   }, 1000);
 
-  invocation.onCanceled = () => {
-    clearInterval(timer);
-  };
-}
+//   invocation.onCanceled = () => {
+//     clearInterval(timer);
+//   };
+// }
 
 /**
  * Returns the current time.
  * @returns String with the current time formatted for the current locale.
  */
-export function currentTime(): string {
-  return new Date().toLocaleTimeString();
-}
+// export function currentTime(): string {
+//   return new Date().toLocaleTimeString();
+// }
 
 /**
  * Increments a value once a second.
  * @customfunction
  * @param incrementBy Amount to increment
  * @param invocation Custom function handler
  */
-export function increment(incrementBy: number, invocation: CustomFunctions.StreamingInvocation<number>): void {
-  let result = 0;
-  const timer = setInterval(() => {
-    result += incrementBy;
-    invocation.setResult(result);
-  }, 1000);
+// export function increment(incrementBy: number, invocation: CustomFunctions.StreamingInvocation<number>): void {
+//   let result = 0;
+//   const timer = setInterval(() => {
+//     result += incrementBy;
+//     invocation.setResult(result);
+//   }, 1000);
 
-  invocation.onCanceled = () => {
-    clearInterval(timer);
-  };
-}
+//   invocation.onCanceled = () => {
+//     clearInterval(timer);
+//   };
+// }
 
 /**
  * Writes a message to console.log().
  * @customfunction LOG
  * @param message String to write.
  * @returns String to write.
  */
-export function logMessage(message: string): string {
-  console.log(message);
+// export function logMessage(message: string): string {
+//   console.log(message);
 
-  return message;
-}
+//   return message;
+// }

references/ast-WHERE.png

@@ -1,9 +1,10 @@
-import React, { useState, useEffect, useMemo } from "react";
+import React, { useState, useEffect, useMemo, useRef } from "react";
 import { Parser } from "node-sql-parser"; // Used for onSubmit
 import Querybox from "./query/Querybox";
 import QueryTable from "./query/QueryTable"; // reactTable
 import reloadSheets from "./query/queryFunctions/reloadSheets"; // sets allWorksheets with useEffect
 import handleQuery from "./query/queryFunctions/handleQuery";
+import hideColumns from "./query/queryFunctions/hideColumns";
 
 /* global JSX console document */
 
@@ -32,7 +33,7 @@ export default (): JSX.Element => {
   /**
    * ourTable renders the allColumns and data into the react table
    */
-  const ourTable = useMemo(() => <QueryTable columns={allColumns} data={data} />, [allWorksheets]);
+  const ourTable = useMemo(() => <QueryTable columns={allColumns} data={data}/>, [allWorksheets]);
 
   /**
    * Loads Current sheets and sets current state
@@ -59,8 +60,10 @@ export default (): JSX.Element => {
 
       console.log("queryHeaders:", queryHeaders);
       console.log("conditions:", queryConditions);
-
       setShowTable(true);
+
+      // QueryTable.ourFunction({ queryHeaders, allColumns });
+
     } catch (err) {
       console.log("Invalid query:", err);
       setShowTable(false);
@@ -71,7 +74,8 @@ export default (): JSX.Element => {
   return (
     <>
       <Querybox onSubmit={onSubmit} />
-      {showTable ? ourTable : null}
+      {/* {showTable ? ourTable : null} */}
+      {ourTable}
       <button
         onClick={() => {
           setShowTable(false);

references/togglecheckboxFunction.png

@@ -1,8 +1,8 @@
 import React from "react";
 import { useTable, useFilters } from "react-table";
 
-/* global */
-export default (props: any) => {
+/* global console */
+export default (props: any): any => {
   const { columns, data } = props;
 
   const tableInstance: any = useTable(
@@ -15,14 +15,33 @@ export default (props: any) => {
 
   const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow, allColumns } = tableInstance;
 
+  // type hideColumnsProps = {
+  //   queryHeaders: any;
+  //   allColumns: any;
+  // };
+
+  // const ourFunction = ({ queryHeaders, allColumns }: hideColumnsProps) => {
+  //   const columnIDs: any = {};
+
+  //   for (const headerInfo of queryHeaders) {
+  //     columnIDs[headerInfo.accessor] = true;
+  //     console.log("columnIDs ", columnIDs[headerInfo.accessor]);
+  //   }
+
+  //   allColumns.map((column: any) => {
+  //     column.toggleHidden(columnIDs[column.id]);
+  //   });
+  // };
+
   return (
     <div id="query-table">
       <div>
         <div>
           {allColumns.map((column: any) => (
             <div key={column.id}>
               <label>
-                <input id={column.id} type="checkbox" {...column.getToggleHiddenProps()} />
+                <input id={`check${column.id}`} type="checkbox" {...column.getToggleHiddenProps()} />
+                {console.log(column.getToggleHiddenProps().onChange)}
                 {column.Header}
               </label>
             </div>

src/functions/functions.ts

@@ -4,9 +4,12 @@ import { QueryBoxProps } from "src/types";
 /* global JSX */
 
 export default (props: QueryBoxProps): JSX.Element => {
+  const str: string = "SELECT country FROM world_population";
   return (
     <>
-      <textarea id="sqlQueryBox" placeholder="Enter SQL Query"></textarea>
+      <textarea id="sqlQueryBox" placeholder="Enter SQL Query">
+        {str}
+      </textarea>
       <br />
       <button onClick={props.onSubmit}>Submit</button>
     </>

src/taskpane/components/Query.tsx

@@ -0,0 +1,33 @@
+/* global document console */
+
+type hideColumnsProps = {
+  queryHeaders: any;
+  allColumns: any;
+};
+
+export default ({ queryHeaders, allColumns }: hideColumnsProps) => {
+  console.log("queryHeaders from hideColumns", queryHeaders);
+
+  const columnIDs: any = {};
+
+  // queryHeaders { Header: column, accessor: `${accessorValue++}`, Filter: ColumnFilter }
+
+  for (const headerInfo of queryHeaders) {
+    columnIDs[headerInfo.accessor] = true;
+
+    console.log("columnIDs ", columnIDs[headerInfo.accessor]);
+  }
+
+  // console.log('hashmap:',columnIDs);
+
+  // console.log("an html element:", document.getElementById("sqlQueryBox") as HTMLInputElement);
+  
+  // const checkbox = document.getElementById('check0') as HTMLInputElement;
+  // console.log("checkbox", checkbox);
+
+  for (const column of allColumns) {
+    const checkbox = document.getElementById(`check${column.accessor}`) as HTMLInputElement;
+    checkbox.checked = columnIDs[column.accessor];
+    // checkbox.dispatchEvent("change");
+  }
+};

src/taskpane/components/query/QueryTable.tsx

@@ -1,5 +1,7 @@
 /* global  console */
-
+/**
+ * setting the types for the result of the AST parser
+ */
 type astType = {
   columns: any;
   from: any;
@@ -9,47 +11,63 @@ type astType = {
   having: any;
 };
 
-
 /**
- * Get all headers selected in the query
+ * returns the selected headers and selected conditions of the query (i.e. WHERE, FROM, GROUPBY, ORDER_By)
  */
 export default ({ columns, from, where, groupby, orderby, having }: astType, allWorksheets: any) => {
   // get the headers for the tables that are requested in FROM arguments
+  /**
+   * Populating queryHeaders with all the selected column names/ headers
+   * an array of objects that has the column name, accessor and Filter: ColumnFilter (built-in from react table)
+   * ex.) { Header: column, accessor: `${accessorValue++}`, Filter: ColumnFilter };
+   */
   let queryHeaders: any = [];
 
   // Create an object will to hold requested columns with O(1) lookup time
+  /**
+   * Creating an object with all headers if SELECT *
+   */
   const objWithColumns: any = {};
+
   if (columns === "*") {
     objWithColumns["*"] = true;
   } else {
     for (const column of columns) {
       objWithColumns[column.expr.column] = true;
     }
   }
-  
+
+  /**
+   * destructuring fromObj to get the worksheet names (.table is worksheet name)
+   * reformatting AST data for use in react-table
+   */
   for (const fromObj of from) {
     // make sure that the table they are looking for is in
     if (allWorksheets[fromObj.table]) {
       const headersArray = allWorksheets[fromObj.table].headerInfo;
-
+      /**
+       * checking if SELECT * exists in objWithColumns, we are selecting all the headers
+       */
       if (objWithColumns["*"]) {
         queryHeaders = queryHeaders.concat(headersArray);
       } else {
         for (const headerInfo of headersArray) {
           if (objWithColumns[headerInfo.Header]) queryHeaders.push(headerInfo);
         }
       }
+    } else {
+      //error handling for if the table they requested isn't in the worksheets
     }
   }
 
   // here is only 1 condition then return it in an array
-  let queryConditions = {
+  const queryConditions = {
     where: [where],
     groupby: groupby,
     orderby: orderby,
     having: having,
   };
-  if (where?.value) queryConditions = where.value;
+  if (queryConditions.where[0]?.value) queryConditions.where = where.value;
 
   console.log("headers, conditions", queryHeaders, queryConditions);