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

[Lens] Split up dimension panel code #80423

Merged
merged 9 commits into from
Oct 19, 2020

Conversation

wylieconlon
Copy link
Contributor

There are three main changes in this PR, all refactorings that I found important as part of creating a reference-based editor for operations:

  1. Pass around the entire layer object instead of columns. This lets us use different parts of the layer in the future.
  2. Split up the dimension_panel into three files:
    a. dimension_panel keeps only the UI components, and only UI tests
    b. droppable deals with only dragging and dropping logic, including what happens on drop
    c. operation_support is the function which is used to show functions + fields in the panels. Splitting it into a separate file so that it can be mocked.

Checklist

@wylieconlon wylieconlon added Team:Visualizations Visualization editors, elastic-charts and infrastructure v8.0.0 release_note:skip Skip the PR/issue when compiling release notes Feature:Lens v7.11.0 labels Oct 13, 2020
@wylieconlon wylieconlon requested review from dej611, flash1293, mbondyra and a team October 13, 2020 22:12
@elasticmachine
Copy link
Contributor

Pinging @elastic/kibana-app (Team:KibanaApp)

Copy link
Contributor

@dej611 dej611 left a comment

Choose a reason for hiding this comment

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

The code looks ok 👍 . Useful mergeLayer function, we should normalize the whole lens codebase with it!
I've left only some minor comments here and there.


// Time to replace
props.setState({
...props.state,
Copy link
Contributor

Choose a reason for hiding this comment

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

nit: can you use mergeLayer here?

Comment on lines 41 to 51
if (supportedOperationsByField[operation.field]) {
supportedOperationsByField[operation.field]!.push(operation.operationType);
} else {
supportedOperationsByField[operation.field] = [operation.operationType];
}

if (supportedFieldsByOperation[operation.operationType]) {
supportedFieldsByOperation[operation.operationType]!.push(operation.field);
} else {
supportedFieldsByOperation[operation.operationType] = [operation.field];
}
Copy link
Contributor

Choose a reason for hiding this comment

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

nitpick: I always find a bit harder to read these conditionals that handles add or create in different ways. What about check the existence of the entry and just push?

supportedOperationsByField[operation.field] = supportedOperationsByField[operation.field] || [];
supportedOperationsByField[operation.field].push(operation.operationType);

supportedFieldsByOperation[operation.operationType] = supportedFieldsByOperation[operation.operationType] || [];
supportedFieldsByOperation[operation.operationType].push(operation.field);

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I think I understand your point, but I'm not sure your proposal is more clear. I'm going to try using the spread operator, but maybe this is just as bad?

        supportedFieldsByOperation[operation.operationType] = [
          ...(supportedFieldsByOperation[operation.operationType] ?? []),
          operation.field,
        ];

@@ -91,25 +90,29 @@ export function changeColumn<C extends IndexPatternColumn>({
updatedColumn.label = oldColumn.label;
}

const layer = {
Copy link
Contributor

Choose a reason for hiding this comment

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

This is used below with the spread operator: maybe it can be saved here?

const layer = state.layers[layerId];

Copy link
Contributor

@flash1293 flash1293 left a comment

Choose a reason for hiding this comment

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

LGTM, tested in Chrome and didn't notice any regressions.

@wylieconlon
Copy link
Contributor Author

@elasticmachine merge upstream

@wylieconlon
Copy link
Contributor Author

@elasticmachine merge upstream

@mbondyra
Copy link
Contributor

@elasticmachine merge upstream

@kibanamachine
Copy link
Contributor

💚 Build Succeeded

Metrics [docs]

@kbn/optimizer bundle module count

id before after diff
lens 564 566 +2

async chunks size

id before after diff
lens 1.0MB 1.0MB +928.0B

History

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

@wylieconlon wylieconlon merged commit f0023ed into elastic:master Oct 19, 2020
@wylieconlon wylieconlon deleted the lens/refactor-dimensions branch October 19, 2020 18:02
wylieconlon pushed a commit to wylieconlon/kibana that referenced this pull request Oct 19, 2020
* [Lens] Split up dimension panel code

* Fix test failures

* Style updates

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
wylieconlon pushed a commit that referenced this pull request Oct 19, 2020
* [Lens] Split up dimension panel code

* Fix test failures

* Style updates

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Feature:Lens release_note:skip Skip the PR/issue when compiling release notes Team:Visualizations Visualization editors, elastic-charts and infrastructure v7.11.0 v8.0.0
Projects
None yet
Development

Successfully merging this pull request may close these issues.

6 participants