Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Implement breadcrumbs in Drill By modal #23664

Merged
merged 5 commits into from
Apr 13, 2023

Conversation

kgabryje
Copy link
Member

@kgabryje kgabryje commented Apr 12, 2023

SUMMARY

This PR implements breadcrumbs component in the Drill By modal in order to:

  1. Show the history of drillings (currently applied groupings and filters)
  2. Allow user to undo drilling actions

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

Screen.Recording.2023-04-12.at.16.59.57.mov

TESTING INSTRUCTIONS

  1. Enable DRILL_BY feature flag
  2. Perform drill by action
  3. Verify that breadcrumbs display the history of drilling - in the format groupby1 (filter1) / groupby2 (filter2) / current_groupby

ADDITIONAL INFORMATION

  • Has associated issue:
  • Required feature flags: DRILL_BY
  • Changes UI
  • Includes DB Migration (follow approval process in SIP-59)
    • Migration is atomic, supports rollback & is backwards-compatible
    • Confirm DB migration upgrade and downgrade tested
    • Runtime estimates and downtime expectations provided
  • Introduces new feature or API
  • Removes existing feature or API

CC @kasiazjc

@codecov
Copy link

codecov bot commented Apr 12, 2023

Codecov Report

Merging #23664 (70d47eb) into master (587e775) will increase coverage by 0.07%.
The diff coverage is 76.02%.

❗ Current head 70d47eb differs from pull request most recent head 44c8073. Consider uploading reports for the commit 44c8073 to get more accurate results

@@            Coverage Diff             @@
##           master   #23664      +/-   ##
==========================================
+ Coverage   68.02%   68.09%   +0.07%     
==========================================
  Files        1919     1922       +3     
  Lines       73932    74039     +107     
  Branches     8067     8101      +34     
==========================================
+ Hits        50291    50417     +126     
+ Misses      21574    21551      -23     
- Partials     2067     2071       +4     
Flag Coverage Δ
javascript 54.13% <73.71%> (+0.06%) ⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

Impacted Files Coverage Δ
...d/packages/superset-ui-chart-controls/src/types.ts 100.00% <ø> (ø)
...ackages/superset-ui-core/src/utils/featureFlags.ts 100.00% <ø> (ø)
...s/plugin-chart-echarts/src/Timeseries/constants.ts 100.00% <ø> (ø)
...gin-chart-echarts/src/Timeseries/transformProps.ts 57.27% <0.00%> (-1.07%) ⬇️
...tend/plugins/plugin-chart-echarts/src/constants.ts 100.00% <ø> (ø)
...tend/plugins/plugin-chart-echarts/src/controls.tsx 76.00% <ø> (ø)
...ugins/preset-chart-xy/src/components/Line/Line.tsx 0.00% <0.00%> (ø)
...preset-chart-xy/src/utils/createMarginSelector.tsx 0.00% <0.00%> (ø)
superset-frontend/src/SqlLab/App.jsx 0.00% <0.00%> (ø)
...frontend/src/SqlLab/components/SqlEditor/index.jsx 56.68% <0.00%> (-1.92%) ⬇️
... and 24 more

... and 5 files with indirect coverage changes

📣 We’re building smart automated test selection to slash your CI/CD build times. Learn more

Copy link
Member

@villebro villebro left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM and feels very intuitive! Code looks solid, so once the tests are in this is ready to 🚢 . And a thought for post 3.0: we should standardize on the adhoc filter and groupby controls so that we always know for certain that they're drillable.

Comment on lines 131 to 152
const [currentColumn, setCurrentColumn] = useState(column);
// currentColumn can be an array when the original chart is grouped by multiple
// columns and user navigates back to the original chart by clicking the first
// breadcrumb
const [currentColumn, setCurrentColumn] = useState<
Column | Column[] | undefined
>(column);
Copy link
Member

@villebro villebro Apr 12, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just a thought - would it potentially simplify the code, if we'd do something like this (we'd also do something similar in those other similar code blocks):

  const [currentColumns, setCurrentColumns] = useState(ensureIsArray(column));

Then we wouldn't have to jump between currentColumn and currentColumns or worry about it potentially being undefined.

Copy link
Member

@lilykuang lilykuang left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

lgtm. Agreed with @villebro on the setCurrentColumns nit

@kgabryje
Copy link
Member Author

@villebro @lilykuang Thanks for comments. I decided to do a bit of refactoring so that currentColumn can only be Column | undefined, not an array, as was originally intended. I think the code and flow is simpler now since we eliminated a special case which would only occur if user clicked on the first breadcrumb of a chart that was initially grouped by 2 columns.
Also, added unit tests for breadcrumbs

@@ -127,7 +127,6 @@ export default function DrillByModal({
}: DrillByModalProps) {
const theme = useTheme();

console.log('DUPA', formData);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

image
Not like I've ever done anything similar 😆😆😆

@kgabryje kgabryje merged commit a04e635 into apache:master Apr 13, 2023
sebastianliebscher pushed a commit to sebastianliebscher/superset that referenced this pull request Apr 28, 2023
@mistercrunch mistercrunch added 🏷️ bot A label used by `supersetbot` to keep track of which PR where auto-tagged with release labels 🚢 3.0.0 labels Mar 13, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🏷️ bot A label used by `supersetbot` to keep track of which PR where auto-tagged with release labels size/L 🚢 3.0.0
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants