[CLDN-1968] Added new array which tracks JSON cell state

superset-frontend/src/cccs-viz/plugins/plugin-chart-cccs-grid/src/CccsGrid.tsx

@@ -93,9 +93,41 @@ export default function CccsGrid({
   const [principalColumnFilters, setPrincipalColumnFilters] = useState({});
   const [searchValue, setSearchValue] = useState('');
   const [pageSize, setPageSize] = useState<number>(page_length);
+  const [jsonFields, setJsonFields] = useState<any[]>([]);
 
   const gridRef = useRef<AgGridReactType>(null);
 
+  const setJSONCell = (colId: string, rowIndex: number, boolVal: boolean) => {
+    // Make a copy of the current array in state
+    const jsonCellState = jsonFields;
+
+    // Update the cell based on the functions parameters
+    const newJSONCellState: any = (jsonCellState[rowIndex][colId] = boolVal);
+
+    // Set the state to be equal to the updated array
+    setJsonFields(newJSONCellState);
+  };
+
+  const getJSONCells = () => jsonFields;
+
+  // Create a new set of column definitions, where the columns with
+  // JSON data or the expand all JSON column have an extra `cellRendererParams` field
+  const newColumnDefs = columnDefs.map((instance: any) => {
+    if (
+      instance?.cellRenderer === 'jsonValueRenderer' ||
+      instance?.cellRenderer === 'expandAllValueRenderer'
+    ) {
+      return {
+        ...instance,
+        cellRendererParams: {
+          getJSONCells,
+          setJSONCell,
+        },
+      };
+    }
+    return instance;
+  });
+
   const handleChange = useCallback(
     filters => {
       if (!emitFilter) {
@@ -258,17 +290,41 @@ export default function CccsGrid({
 
   const onFirstDataRendered = (params: any) => {
     // Get all of the columns in the grid
-    const instances = params.columnApi.getAllColumns();
+    const columns = params.columnApi.getAllColumns();
 
     // Filter on columns that have JSON data
-    const newInstances = instances.filter(
+    const jsonColumns = columns.filter(
       (instance: any) => instance.colDef?.cellRenderer === 'jsonValueRenderer',
     );
 
     // Set the columns which have JSON data to be 350 pixels wide
-    newInstances.map((instance: any) =>
+    jsonColumns.map((instance: any) =>
       params.columnApi.setColumnWidth(instance.colId, 350),
     );
+
+    // Get all of the JSON cells in the grid
+    const jsonCells = params.api
+      .getCellRendererInstances()
+      .filter(
+        (instance: any) =>
+          instance.params.column.colDef.cellRenderer === 'jsonValueRenderer',
+      );
+
+    const jsonCellState: any = [];
+
+    // Get every JSON cell in the row and set the dictionary key for it to false
+    for (let i = 0; i < params.api.getDisplayedRowCount(); i += 1) {
+      const jsonDictionary = {};
+      jsonCells
+        .filter((instance: any) => instance.params.rowIndex === i)
+        .map((instance: any) => instance.params.column.colId)
+        // eslint-disable-next-line no-return-assign
+        .forEach((colId: string) => (jsonDictionary[colId] = true));
+      jsonCellState.push(jsonDictionary);
+    }
+
+    // Set the state which tracks all of the JSON cells and whether they are expanded or not
+    setJsonFields(jsonCellState);
   };
 
   const onSelectionChanged = (params: any) => {
@@ -432,7 +488,7 @@ export default function CccsGrid({
         <AgGridReact
           ref={gridRef}
           modules={AllModules}
-          columnDefs={columnDefs}
+          columnDefs={newColumnDefs}
           defaultColDef={DEFAULT_COLUMN_DEF}
           frameworkComponents={frameworkComponents}
           enableBrowserTooltips={true}

superset-frontend/src/cccs-viz/plugins/plugin-chart-cccs-grid/src/JsonValueRenderer.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable react/no-unused-state */
 import React, { Component } from 'react';
 import JSONTree from 'react-json-tree';
 
@@ -75,14 +76,25 @@ function expandJSON(this: any, reverseState: any, cellData: any) {
 
 export default class JsonValueRenderer extends Component<
   {},
-  { cellValue: any; expanded: boolean }
+  {
+    cellValue: any;
+    expanded: boolean;
+    colId: string;
+    rowIndex: number;
+    getJSONCells: any;
+    setJSONCell: any;
+  }
 > {
   constructor(props: any) {
     super(props);
 
     this.state = {
       cellValue: JsonValueRenderer.getValueToDisplay(props),
       expanded: false,
+      colId: props.colDef.colId,
+      rowIndex: props.rowIndex,
+      getJSONCells: props.getJSONCells,
+      setJSONCell: props.setJSONCell,
     };
   }
 
@@ -95,6 +107,10 @@ export default class JsonValueRenderer extends Component<
 
   // Set the current `expanded` field to the opposite of what it currently is
   reverseState = () => {
+    const jsonCellArray = this.state.getJSONCells();
+
+    console.log(jsonCellArray);
+
     this.setState(prevState => ({
       ...prevState,
       expanded: !prevState.expanded,
@@ -109,17 +125,30 @@ export default class JsonValueRenderer extends Component<
     }));
   };
 
+  getCellStatus = () => {
+    const jsonCellArray = this.state.getJSONCells();
+
+    // console.log(jsonCellArray);
+
+    try {
+      return jsonCellArray[this.state.rowIndex][this.state.colId];
+    } catch (e) {
+      // console.log(e);
+      return false;
+    }
+  };
+
   render() {
     const cellData = this.state.cellValue;
     const jsonObject = safeJsonObjectParse(this.state.cellValue);
 
     // If there is a JSON object, either show it expanded or minimized based
     // on the value which the `expanded` field is set to
     if (jsonObject) {
-      if (this.state.expanded === false) {
-        return expandJSON(this.reverseState, cellData);
+      if (this.getCellStatus()) {
+        return minimizeJSON(this.reverseState, jsonObject);
       }
-      return minimizeJSON(this.reverseState, jsonObject);
+      return expandJSON(this.reverseState, cellData);
     }
     return cellData ?? null;
   }