forked from apache/superset
-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Feature/cldn 1968 (Display JSON data inline) (#268)
* Add buttons to expand and minimize JSON data as well as ability to expand and/or collapse all rows in a certain column * [CLDN-1968] Added expand button for full row * [CLDN-1968] Resize JSON columns * [CLDN-1968] Added new array which tracks JSON cell state * Revert "[CLDN-1968] Added new array which tracks JSON cell state" This reverts commit dabc3da. * [CLDN-1968] Added ability for row level expand all button to track if cells are expanded or not * [CLDN-1968] Ran pre-commit hook * [CLDN-1968] Improved UI * [CLDN-1968] Update image tag for testing * [CLDN-1968] Revert image tag for testing * [CLDN-1968] Added multiple UI/UX changes based on QA feedback * [CLDN-1968] Added more UI/UX changes based on QA feedback * [CLDN-1968] Temp change to image * Revert "[CLDN-1968] Temp change to image" This reverts commit 57490bd. * Update superset-frontend/src/cccs-viz/plugins/plugin-chart-cccs-grid/src/CccsGrid.tsx Co-authored-by: cccs-rc <[email protected]> * [CLDN-1968] Remove 'TODO's as they are no longer needed * [CLDN-1968] Changed a variable name, and condensed a few lines * [CLDN-1968] Modified a setState so that only one is needed instead of 2 --------- Co-authored-by: cccs-rc <[email protected]>
- Loading branch information
1 parent
c088022
commit 592337e
Showing
14 changed files
with
934 additions
and
585 deletions.
There are no files selected for viewing
31 changes: 31 additions & 0 deletions
31
superset-frontend/src/cccs-viz/plugins/plugin-chart-cccs-grid/src/Buttons.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,31 @@ | ||
| .Button { | ||
| background-color: transparent; | ||
| border: solid rgb(137, 137, 137); | ||
| border-width: 0 2px 2px 0; | ||
| display: inline-block; | ||
| padding-right: 3px; | ||
| padding-left: 3px; | ||
| padding-top: 3px; | ||
| padding-bottom: 3px; | ||
| vertical-align: middle; | ||
| margin-right: 10px; | ||
| margin-left: 5px; | ||
| } | ||
|
|
||
| .Expand { | ||
| transform: rotate(-45deg); | ||
| -webkit-transform: rotate(-45deg); | ||
| } | ||
|
|
||
| .Collapse { | ||
| transform: rotate(45deg); | ||
| -webkit-transform: rotate(45deg); | ||
| } | ||
|
|
||
| .Row-Expand { | ||
| background-color: transparent; | ||
| text-decoration: underline; | ||
| vertical-align: middle; | ||
| border: none; | ||
| color: rgb(31, 167, 201); | ||
| } |
312 changes: 201 additions & 111 deletions
312
superset-frontend/src/cccs-viz/plugins/plugin-chart-cccs-grid/src/CccsGrid.tsx
Large diffs are not rendered by default.
Oops, something went wrong.
118 changes: 118 additions & 0 deletions
118
superset-frontend/src/cccs-viz/plugins/plugin-chart-cccs-grid/src/ExpandAllValueRenderer.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,118 @@ | ||
| import { GroupCellRenderer } from '@ag-grid-enterprise/all-modules'; | ||
| import React, { Component } from 'react'; | ||
| import './Buttons.css'; | ||
|
|
||
| // Show a button to collapse all of the JSON blobs in the row | ||
| function collapseJSON(this: any, reverseState: any) { | ||
| return ( | ||
| <button className="Row-Expand" type="button" onClick={reverseState}> | ||
| Collapse Row | ||
| </button> | ||
| ); | ||
| } | ||
|
|
||
| // Show a button to expand all of the JSON blobs in the row | ||
| function expandJSON(this: any, reverseState: any) { | ||
| return ( | ||
| <> | ||
| <button className="Row-Expand" type="button" onClick={reverseState}> | ||
| Expand Row | ||
| </button> | ||
| </> | ||
| ); | ||
| } | ||
|
|
||
| export default class ExpandAllValueRenderer extends Component< | ||
| {}, | ||
| { api: any; expanded: boolean; rowIndex: number } | ||
| > { | ||
| constructor(props: any) { | ||
| super(props); | ||
|
|
||
| this.state = { | ||
| api: props.api, | ||
| expanded: false, | ||
| rowIndex: props.rowIndex, | ||
| }; | ||
| } | ||
|
|
||
| // Get all of the cells in the AG Grid and only keep the ones that | ||
| // are in the same row as the current expand all button, and make | ||
| // sure that they have a JSON blob | ||
| getJSONCells = () => { | ||
| const instances = this.state.api.getCellRendererInstances(); | ||
|
|
||
| // Make sure row grouping is not enabled, but if it is, don't | ||
| // try to find all of the JSON blobs in the row | ||
| if ( | ||
| instances.filter((instance: any) => instance instanceof GroupCellRenderer) | ||
| .length === 0 | ||
| ) { | ||
| const newInstances = instances.filter( | ||
| (instance: any) => | ||
| instance.params.rowIndex === this.state.rowIndex && | ||
| instance.params.column.colDef.cellRenderer === 'jsonValueRenderer', | ||
| ); | ||
|
|
||
| return newInstances; | ||
| } | ||
| return []; | ||
| }; | ||
|
|
||
| // Set the current `expanded` field to the opposite of what it currently is | ||
| // as well as go through each cell renderer and if it's in the same row & | ||
| // it's a cell with a JSON blob, update whether it is expanded or not | ||
| reverseState = () => { | ||
| this.setState(prevState => ({ | ||
| ...prevState, | ||
| expanded: !prevState.expanded, | ||
| })); | ||
|
|
||
| const newInstances = this.getJSONCells(); | ||
|
|
||
| newInstances.map((instance: any) => | ||
| instance.componentInstance.updateState(!this.state.expanded), | ||
| ); | ||
| }; | ||
|
|
||
| // Set the current `expanded` field to be equal to the boolean being passed in | ||
| // as well as go through each cell renderer and if it's in the same row & | ||
| // it's a cell with a JSON blob, update whether it is expanded or not | ||
| updateState = (newFlag: any) => { | ||
| this.setState(prevState => ({ ...prevState, expanded: newFlag })); | ||
|
|
||
| const newInstances = this.getJSONCells(); | ||
|
|
||
| newInstances.map((instance: any) => | ||
| instance.componentInstance.updateState(newFlag), | ||
| ); | ||
| }; | ||
|
|
||
| // Get all of the cells in the AG Grid and only keep the ones | ||
| // that are in the same row as the current expand all button and | ||
| // make sure that they have a JSON blob (and see whether they are | ||
| // expanded or not) | ||
| checkState = () => { | ||
| const newInstances = this.getJSONCells(); | ||
|
|
||
| const jsonCellExpandedValues = newInstances.map((instance: any) => | ||
| instance.componentInstance.getExpandedValue(), | ||
| ); | ||
|
|
||
| // If there is at least one cell that can expand, the expand all | ||
| // button for the row should show 'Expand' | ||
| this.setState(prevState => ({ | ||
| ...prevState, | ||
| expanded: !jsonCellExpandedValues.includes(false), | ||
| })); | ||
| }; | ||
|
|
||
| // Show either the expand or collapse button dependent | ||
| // on the value of the `expanded` field | ||
| render() { | ||
| if (this.state.expanded === false) { | ||
| return expandJSON(this.reverseState); | ||
| } | ||
| return collapseJSON(this.reverseState); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.