Chore/cleanup js (#39)

Tidy up some of the TS, remove a bunch of unneeded comments.

js/components/ColumnsEditor.tsx

@@ -10,7 +10,6 @@ import { tableDf, bakedCommandConfig } from './staticData';
 export type OperationSetter = (ops: Operation[]) => void;
 export interface WidgetConfig {
   showCommands: boolean;
-  //  showTransformed:boolean;
 }
 
 export function ColumnsEditor({
@@ -31,7 +30,6 @@ export function ColumnsEditor({
   widgetConfig: WidgetConfig;
 }) {
   const allColumns = df.schema.fields.map((field) => field.name);
-  //console.log('Columns Editor, commandConfig', commandConfig);
   return (
     <div className="columns-editor" style={{ width: '100%' }}>
       {widgetConfig.showCommands ? (
@@ -62,7 +60,6 @@ export function ColumnsEditorEx() {
     transformed_df: EmptyDf,
     generated_py_code: 'default py code',
     transform_error: undefined,
-    //      transform_error:"asdfasf"
   };
   return (
     <ColumnsEditor

js/components/CustomHeader.tsx

@@ -1,8 +1,6 @@
 import _ from 'lodash';
 import React from 'react';
 import { createPortal } from 'react-dom';
-import { IHeaderParams } from './BaseHeader';
-
 import {
   BarChart,
   Bar,
@@ -12,12 +10,6 @@ import {
 } from 'recharts';
 import { Tooltip } from './RechartTooltip';
 import { isNumOrStr, ValueType } from './RechartExtra';
-//import { ICellRendererParams } from 'ag-grid-community';
-
-export interface ICustomHeaderParams extends IHeaderParams {
-  menuIcon: string;
-  histogram?: number[];
-}
 
 function defaultFormatter<TValue extends ValueType>(value: TValue) {
   return _.isArray(value) && isNumOrStr(value[0]) && isNumOrStr(value[1])
@@ -63,44 +55,38 @@ export const makeData = (histogram: number[]) => {
 const formatter = (value: any, name: any, props: any) => {
   if (props.payload.name === 'longtail') {
     return [value, name];
-  }
-  else {
+  } else {
     return [value, props.payload.name];
   }
 };
 
-
 export function FloatingTooltip({ items, x, y }: any) {
   const offset = 30;
-  const renderedItems = items.map((name: [string, number], value: number | string) => {
-
-    const [realName, realValue]  = name;
-    const formattedVal = realValue == 0 ? "<1" : realValue;
-    return (
-      <React.Fragment>
-        <dt>{realName}</dt>
-        <dd>{formattedVal}%</dd>
-      </React.Fragment>
-    );
-  });
+  const renderedItems = items.map(
+    (name: [string, number], value: number | string) => {
+      const [realName, realValue] = name;
+      const formattedVal = realValue === 0 ? '<1' : realValue;
+      return (
+        <React.Fragment>
+          <dt>{realName}</dt>
+          <dd>{formattedVal}%</dd>
+        </React.Fragment>
+      );
+    }
+  );
   return createPortal(
     <div
       className="floating-tooltip"
-      style={{'position':'absolute', 'top':y+offset, 'left':x+offset}}>
+      style={{ position: 'absolute', top: y + offset, left: x + offset }}
+    >
       <dl>{renderedItems}</dl>
     </div>,
     document.body
   );
 }
 
 export const ToolTipAdapter = (args: any) => {
-  const { active, formatter, payload, label } = args;
-  console.log('label', label);
-  //console.log("args", args, formatter);
-  //console.log("coordinate, box", args.coordinate, args.box);
-  //console.log("payload", payload)
-  //const anchor = useRef(null);
-
+  const { active, formatter, payload } = args;
   if (active && payload && payload.length) {
     const renderContent2 = () => {
       //const items = (itemSorter ? _.sortBy(payload, itemSorter) : payload).map((entry, i) => {
@@ -113,7 +99,7 @@ export const ToolTipAdapter = (args: any) => {
         const { value, name } = entry;
         let finalValue: React.ReactNode = value;
         let finalName: React.ReactNode = name;
-        if (finalFormatter && finalValue != null && finalName != null) {
+        if (finalFormatter && finalValue !== null && finalName !== null) {
           const formatted = finalFormatter(value, name, entry, i, payload);
           if (Array.isArray(formatted)) {
             [finalValue, finalName] = formatted;
@@ -126,13 +112,6 @@ export const ToolTipAdapter = (args: any) => {
       });
       return items;
     };
-    /*
-        <p className="label">{`${label} : ${payload[0].value}`}</p>
-        <p className="intro">{label}</p>
-        <p className="desc">Anything you want can be displayed here.</p>
-
-
-      */
     return (
       <div className="custom-tooltip">
         <FloatingTooltip
@@ -149,7 +128,7 @@ export const ToolTipAdapter = (args: any) => {
 
 //export const HistogramCell   = ({histogram}: {histogram:any}) => {
 export const HistogramCell = (props: any) => {
-  if (props == undefined || props.value == undefined) {
+  if (props === undefined || props.value === undefined) {
     return <span></span>;
   }
   const histogram = props.value.histogram;
@@ -163,8 +142,10 @@ export const HistogramCell = (props: any) => {
             height="10"
             patternUnits="userSpaceOnUse"
           >
-      <polygon               stroke="pink"
-    points="0,0 2,5 0,10 5,8 10,10 8,5 10,0 5,2" />
+            <polygon
+              stroke="pink"
+              points="0,0 2,5 0,10 5,8 10,10 8,5 10,0 5,2"
+            />
           </pattern>
           <pattern
             id="stripe"
@@ -246,7 +227,7 @@ export const HistogramCell = (props: any) => {
           formatter={formatter}
           labelStyle={{ display: 'None' }}
           wrapperStyle={{ zIndex: 999991 }}
-          contentStyle={{'color':'black'}}
+          contentStyle={{ color: 'black' }}
           content={<ToolTipAdapter />}
           offset={20}
           allowEscapeViewBox={{ x: true }}

js/components/DCFCell.tsx

@@ -15,6 +15,8 @@ export type CommandConfigSetterT = (
 
 /*
   Widget DCFCell is meant to be used with callback functions and passed values, not explicit http calls
+
+  TODO:add height settings to dfConfig rather than hardcoded.
  */
 export function WidgetDCFCell({
   origDf,

js/components/DFViewer.tsx

@@ -1,8 +1,4 @@
-import React, {
-  useRef,
-  CSSProperties,
-  //  useMemo,
-} from 'react';
+import React, { useRef, CSSProperties } from 'react';
 import _ from 'lodash';
 import { DFWhole, EmptyDf } from './staticData';
 
@@ -31,11 +27,9 @@ export function DFViewer(
     setActiveCol: () => null,
   }
 ) {
-
   const [agColsPure, agData] = dfToAgrid(df);
-  console.log("dfviewer df", df);
-  console.log("dfviewer agData", agData);
-
+  // console.log('dfviewer agData', agData);
+
   const styledColumns = updateAtMatch(
     _.clone(agColsPure),
     activeCol || '___never',
@@ -45,7 +39,6 @@ export function DFViewer(
     { cellStyle: {} }
   );
 
-  //console.log("styledColumns after updateAtMatch", activeCol, styledColumns)
   const gridOptions: GridOptions = {
     rowSelection: 'single',
     onRowClicked: (event) => console.log('A row was clicked'),
@@ -79,6 +72,12 @@ export function DFViewer(
   const gridRef = useRef<AgGridReact<unknown>>(null);
 
   const makeCondtionalAutosize = (count: number, delay: number) => {
+    /*
+      this code is buggy and I'm not confident in it. I'm very
+      surprised that automatically autosizing AG-grid requires custom
+      functions to be written vs just a flag.
+      */
+
     let counter = count;
     let timer: NodeJS.Timeout;
     let colWidthHasBeenSet = false;
@@ -99,16 +98,10 @@ export function DFViewer(
       }
     }
 
-    // console.log('first pass currentColWidth');
-
     const conditionallyAutosize = () => {
-      // console.log("conditionallyAutosize", count, delay)
       if (gridRef !== undefined) {
-        // console.log("gridref defined")
         if (gridRef.current !== undefined && gridRef.current !== null) {
-          // console.log("gridref.current defined")
           if (gridRef.current.columnApi !== undefined) {
-            // console.log("calling autosizeAllColumns", count, delay);
             gridRef.current.columnApi.autoSizeAllColumns();
             const dc = gridRef.current.columnApi.getAllDisplayedColumns();
             // console.log("bodyWidth", cm.bodyWidth)
@@ -152,18 +145,7 @@ export function DFViewer(
   };
 
   makeCondtionalAutosize(50, 350);
-  //const histograms = _.fromPairs(  _.map({'a':10, 'b':20}, function(val,key) {return [y, x] }))
-  // const histograms = _.fromPairs(  _.map(df.table_hints,
-  // 					 function(val,key) {
-  // 					   return [key, val.histogram || []] }))
   const pinnedTopRowData = [df.table_hints];
-  //const pinnedTopRowData = [histograms];
-  // const pinnedTopRowData =  [{'index': 'foo',
-  // 			  'end station name': 'bar',
-  // 	    'tripduration': 471,
-  // 	    'start station name': 'Catherine St & Monroe St',
-  // 	    'floatCol': '1.111',
-  // 			 }];
 
   return (
     <div className="df-viewer">

js/components/OperationUtils.ts

@@ -1,3 +1,6 @@
+/*
+  used for manipulating the JSON Flavored lisp of operations and commands
+  */
 import _ from 'lodash';
 import { SymbolT, ColEnumArgs, SymbolDf, symDf } from './CommandUtils';
 

js/components/Operations.tsx

@@ -56,15 +56,11 @@ export const OperationsList = ({
     { cellStyle: {} }
   );
 
-  //console.log('OperationsList columns', columns);
-
   const gridOptions: GridOptions = {
     rowSelection: 'single',
     headerHeight: 30,
-    //onRowClicked: (event) => console.log('A row was clicked'),
     onCellClicked: (event) => {
       const colName = event.column.getColId();
-      //console.log('operationsList onCellClicked');
       setActiveKey(colName);
     },
   };
@@ -191,7 +187,6 @@ export const OperationViewer = ({
     }
   };
   const { argspecs, defaultArgs } = commandConfig;
-  //console.log('OperationsViewer operationDict', operationDict, 'activeKey', activeKey);
   return (
     <div className="command-viewer">
       <OperationAdder

js/components/RechartExtra.ts

@@ -1,3 +1,7 @@
+/**
+ * This module contains the standard library from rechart so that base rechart code cna be imported with the minimum amount of rewriting
+ */
+
 import _ from 'lodash';
 import { CSSProperties, ReactNode } from 'react';
 export { Global, DefaultTooltipContent } from 'recharts';

js/components/RechartTooltip.tsx

@@ -1,6 +1,8 @@
 //@ts-nocheck
 /**
- * @fileOverview Tooltip
+ * Reimplementation of rechart tooltips.  most of this is copied from ??? in the recharts source tree because the parts we are editting are deeply embedded into functions.
+
+ Most of the point of this is to get tooltips to be absolutely positioned off of document.body, not the nearest parent element.  AG-Grid hides those tooltips otherwise.
  */
 import React, {
   CSSProperties,

js/components/StatusBar.tsx

@@ -14,13 +14,14 @@ export interface DfConfig {
   sampled: boolean;
   summaryStats: boolean;
   showCommands: boolean;
+  //reorderedColumns is currently disabled as a function, but it will be added back soon
   //reorderdColumns: boolean;
 }
 
 const columnDefs: ColDef[] = [
   {
     field: 'summaryStats',
-    headerName: 'Σ',
+    headerName: 'Σ', //note the greek symbols instead of icons which require buildchain work
     headerTooltip: 'Summary Stats',
     width: 30,
   },
@@ -87,7 +88,7 @@ export function StatusBar({
       sampleSize: intFormatter.format(sampleSize),
       sampled: sampled ? '1' : '0',
       summaryStats: summaryStats ? '1' : '0',
-      // reorderdColumns: reorderdColumns ? "Ϋ" : "ό",
+      // reorderdColumns: reorderdColumns ? "1" : "ό",
       showCommands: showCommands ? '1' : '0',
     },
   ];