working active column for DFViewerInfinite

paddymul · Nov 7, 2024 · bdef85b · bdef85b
1 parent 1c1adb8
commit bdef85b
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 27 deletions.
diff --git a/docs/examples/App.tsx b/docs/examples/App.tsx
@@ -37,7 +37,7 @@ const examples = {
   DFViewerInfiniteEx_large: {
     title: 'DFViewerInfinite large',
     file: 'DFViewerInfiniteEx_large',
-    layout: 'HBox',
+    layout: 'VBox',
   },
 
   DFViewerEx_real_summary: {

diff --git a/js/components/BuckarooWidgetInfinite.tsx b/js/components/BuckarooWidgetInfinite.tsx
@@ -72,7 +72,10 @@ export function BuckarooInfiniteWidget({
   on_buckaroo_state: React.Dispatch<React.SetStateAction<BuckarooState>>;
   buckaroo_options: BuckarooOptions;
 }) {
-  const [mainDs, respCache] = useMemo(() => getDs(on_payload_args), [operations]);
+  const [mainDs, respCache] = useMemo(
+    () => getDs(on_payload_args),
+    [operations]
+  );
   const cacheKey = getPayloadKey(payload_response.key);
   console.log('setting respCache', cacheKey, payload_response);
   respCache.put(getPayloadKey(payload_response.key), payload_response);

diff --git a/js/components/DFViewerParts/DFViewer.tsx b/js/components/DFViewerParts/DFViewer.tsx
@@ -60,10 +60,12 @@ export const getGridOptions = (
 
     onCellClicked: (event) => {
       const colName = event.column.getColId();
-      console.log("onCellClicked", event)
+      console.log('onCellClicked', event);
       if (setActiveCol === undefined || colName === undefined) {
+        console.log('returning because setActiveCol is undefined');
         return;
       } else {
+        console.log('calling setActiveCol with', colName);
         setActiveCol(colName);
       }
     },

diff --git a/js/components/DFViewerParts/DFViewerInfinite.tsx b/js/components/DFViewerParts/DFViewerInfinite.tsx
@@ -1,4 +1,10 @@
-import React, { useRef, CSSProperties, useState, useCallback } from 'react';
+import React, {
+  useRef,
+  CSSProperties,
+  useState,
+  useCallback,
+  useMemo,
+} from 'react';
 import _ from 'lodash';
 import { DFData, DFDataRow, DFViewerConfig } from './DFWhole';
 
@@ -59,18 +65,20 @@ export function DFViewerInfinite({
   activeCol?: string;
   setActiveCol?: SetColumFunc;
 }) {
-  const agColsPure = dfToAgrid(df_viewer_config, summary_stats_data || []);
-  const selectBackground =
-    df_viewer_config?.component_config?.selectionBackground ||
-    'var(--ag-range-selection-background-color-3)';
-  const styledColumns = replaceAtMatch(
-    _.clone(agColsPure),
-    activeCol || '___never',
-    {
-      cellStyle: { background: selectBackground },
-    }
-  );
-
+  const styledColumns = useMemo(() => {
+    const agColsPure = dfToAgrid(df_viewer_config, summary_stats_data || []);
+    const selectBackground =
+      df_viewer_config?.component_config?.selectionBackground ||
+      'var(--ag-range-selection-background-color-3)';
+    const styledColumns = replaceAtMatch(
+      _.clone(agColsPure),
+      activeCol || '___never',
+      {
+        cellStyle: { background: selectBackground },
+      }
+    );
+    return styledColumns;
+  }, [df_viewer_config, summary_stats_data, activeCol]);
   const defaultColDef = {
     sortable: true,
     type: 'rightAligned',
@@ -147,6 +155,7 @@ export function DFViewerInfinite({
             ref={gridRef}
             gridOptions={dsGridOptions}
             pinnedTopRowData={topRowData}
+            columnDefs={_.cloneDeep(styledColumns)}
           ></AgGridReact>
         </div>
       </div>
@@ -156,7 +165,7 @@ export function DFViewerInfinite({
   }
 }
 // used to make sure there is a different element returned when
-// Raw is used, so the component properly swaps over.  
+// Raw is used, so the component properly swaps over.
 // Otherwise pinnedRows appear above the last scrolled position
 // of the InfiniteRowSource vs having an empty data set.
 
@@ -180,6 +189,7 @@ const RowDataViewer = ({
         <AgGridReact
           gridOptions={rdGridOptions}
           pinnedTopRowData={topRowData}
+          columnDefs={_.cloneDeep(rdGridOptions.columnDefs)}
         ></AgGridReact>
       </div>
     </div>
@@ -251,7 +261,7 @@ export const StaticWrapDFViewerInfinite = ({
     data_type: 'DataSource',
     datasource: {
       getRows: (params: IGetRowsParams) => {
-        console.log("StaticWrapDFViewerInfinite", params);
+        console.log('StaticWrapDFViewerInfinite', params);
         params.successCallback(
           df_data.slice(params.startRow, params.endRow),
           df_data.length
@@ -262,14 +272,15 @@ export const StaticWrapDFViewerInfinite = ({
 
   const [activeCol, setActiveCol] = useState('stoptime');
 
-  return (<div style={{height:500}}>
-    <DFViewerInfinite
-      data_wrapper={data_wrapper}
-      df_viewer_config={df_viewer_config}
-      summary_stats_data={summary_stats_data}
-      activeCol={activeCol}
-      setActiveCol={setActiveCol}
-    />
+  return (
+    <div style={{ height: 500 }}>
+      <DFViewerInfinite
+        data_wrapper={data_wrapper}
+        df_viewer_config={df_viewer_config}
+        summary_stats_data={summary_stats_data}
+        activeCol={activeCol}
+        setActiveCol={setActiveCol}
+      />
     </div>
   );
 };
diff --git a/js/index.ts b/js/index.ts
@@ -3,7 +3,10 @@
 
 import { ColumnsEditor } from './components/ColumnsEditor';
 import { DFViewer } from './components/DFViewerParts/DFViewer';
-import { DFViewerInfinite, StaticWrapDFViewerInfinite } from './components/DFViewerParts/DFViewerInfinite';
+import {
+  DFViewerInfinite,
+  StaticWrapDFViewerInfinite,
+} from './components/DFViewerParts/DFViewerInfinite';
 
 import { WidgetDCFCell } from './components/DCFCell';
 import { BuckarooInfiniteWidget } from './components/BuckarooWidgetInfinite';