kgabryje commented on code in PR #26155: URL: https://github.com/apache/superset/pull/26155#discussion_r1435005633
########## superset-frontend/src/components/AlteredSliceTag/index.jsx: ########## @@ -107,67 +142,38 @@ export default class AlteredSliceTag extends React.Component { if (['filters', 'having', 'where'].includes(fdKey)) { return; } - if (!this.isEqualish(ofd[fdKey], cfd[fdKey])) { + if (!isEqualish(ofd[fdKey], cfd[fdKey])) { diffs[fdKey] = { before: ofd[fdKey], after: cfd[fdKey] }; } }); return diffs; - } - - isEqualish(val1, val2) { - return isEqual(alterForComparison(val1), alterForComparison(val2)); - } - - formatValue(value, key, controlsMap) { - // Format display value based on the control type - // or the value type - if (value === undefined) { - return 'N/A'; - } - if (value === null) { - return 'null'; - } - if (controlsMap[key]?.type === 'AdhocFilterControl') { - if (!value.length) { - return '[]'; + }, []); + + useEffect(() => { + const diffs = getDiffs(props); + const controlsMap = getControlsForVizType(props.origFormData?.viz_type); + const rows = getRowsFromDiffs(diffs, controlsMap); + const hasDiffs = !isEmpty(diffs); + setRows(rows); + setHasDiffs(hasDiffs); + }, []); + + useEffect(() => { + const diffs = getDiffs(props); + + const updateStateWithDiffs = newProps => { + if (isEqual(prevProps.current, newProps)) { + return; } - return value - .map(v => { - const filterVal = - v.comparator && v.comparator.constructor === Array - ? `[${v.comparator.join(', ')}]` - : v.comparator; - return `${v.subject} ${v.operator} ${filterVal}`; - }) - .join(', '); - } - if (controlsMap[key]?.type === 'BoundsControl') { - return `Min: ${value[0]}, Max: ${value[1]}`; - } - if (controlsMap[key]?.type === 'CollectionControl') { - return value.map(v => safeStringify(v)).join(', '); - } - if ( - controlsMap[key]?.type === 'MetricsControl' && - value.constructor === Array - ) { - const formattedValue = value.map(v => v?.label ?? v); - return formattedValue.length ? formattedValue.join(', ') : '[]'; - } - if (typeof value === 'boolean') { - return value ? 'true' : 'false'; - } - if (value.constructor === Array) { - const formattedValue = value.map(v => v?.label ?? v); - return formattedValue.length ? formattedValue.join(', ') : '[]'; - } - if (typeof value === 'string' || typeof value === 'number') { - return value; - } - return safeStringify(value); - } + setRows(prevRows => getRowsFromDiffs(diffs, prevRows)); + setHasDiffs(!isEmpty(diffs)); + }; + + updateStateWithDiffs(props); + prevProps.current = props; + }, [getDiffs, props]); - renderModalBody() { + const renderModalBodyHandler = useCallback(() => { Review Comment: nit: I wonder if `Handler` suffix makes sense here? Since it doesn't really "handle" anything, and really it could be a value instead of a function ########## superset-frontend/src/components/AlteredSliceTag/index.jsx: ########## @@ -188,39 +194,39 @@ export default class AlteredSliceTag extends React.Component { return ( <TableView columns={columns} - data={this.state.rows} + data={rows} pageSize={50} className="table-condensed" columnsForWrapText={columnsForWrapText} /> ); - } + }, [rows]); - renderTriggerNode() { - return ( + const renderTriggerNodeHandler = useCallback( Review Comment: Same as above -- This is an automated message from the Apache Git Service. To respond to the message, please log on to GitHub and use the URL above to go to the specific comment. To unsubscribe, e-mail: notifications-unsubscr...@superset.apache.org For queries about this service, please contact Infrastructure at: us...@infra.apache.org --------------------------------------------------------------------- To unsubscribe, e-mail: notifications-unsubscr...@superset.apache.org For additional commands, e-mail: notifications-h...@superset.apache.org