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

Improve filter based on feedback #27

Merged
merged 25 commits into from
Jun 12, 2024

Conversation

brauliorivas
Copy link
Member

@brauliorivas brauliorivas commented Jun 2, 2024

BEGINRELEASENOTES

  • The filter menu is now smaller (numerical inputs take less space).
  • The simStatus options are now populated based on the data, meaning that options are extracted from the json.
  • A very important fix for filters, now when dragging particles, if there was a filter applied, the filtered particles remain the same. Before, if someone dragged a particle, then filters effect will disappear.
  • Some functions were moved to new files, and now objects are used to pass one or another type of particles dynamically.

ENDRELEASENOTES
These improvements were discussed at the meeting on May 31.

Copy link

github-actions bot commented Jun 2, 2024

PR Preview Action v1.4.7
Preview removed because the pull request was closed.
2024-06-12 21:47 UTC

@brauliorivas
Copy link
Member Author

I've just tested this using the CLD simulation and it works well. The simulator statuses are varied (other than 0).

@tmadlener
Copy link
Contributor

Nice, can we also have a filter for generator status?

@tmadlener
Copy link
Contributor

For a very nitpicky comment, the fields that take numerical values should have units on them to not be confusing.

@kjvbrt
Copy link
Collaborator

kjvbrt commented Jun 4, 2024

image

This way the filter should get even more condensed vertically, but I'm not sure if it will work well with the text boxes in the upper part.
Can you try to do the sim/gen status part first?

@kjvbrt
Copy link
Collaborator

kjvbrt commented Jun 4, 2024

Can you make the filter trigger on hitting enter?

@kjvbrt
Copy link
Collaborator

kjvbrt commented Jun 4, 2024

Also, remove the exclamation marks from ¡Welcome to dmX! :)

@brauliorivas
Copy link
Member Author

Hey @kjvbrt, I've implemented your suggestions (remove exclamation marks and filter on enter press). Also, I want to show you how would the filter look making it more condensed.
Making statuses smaller
Selection_001
Statuses smaller and one line input for numbers
Selection_002

(Sorry, I took too much time, but one event listener was being removed. Never using innerHTML again 😵‍💫. The good part is that now it works as expected)

Comment on lines 168 to 177
const bitFieldDisplayValues = {
23: "BitOverlay",
24: "BitStopped",
25: "BitLeftDetector",
26: "BitDecayedInCalorimeter",
27: "BitDecayedInTracker",
28: "BitVertexIsNotEndpointOfParent",
29: "BitBackscatter",
30: "BitCreatedInSimulation",
};
Copy link
Contributor

Choose a reason for hiding this comment

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

Very nice. The one "complaint" I have about this is that now the BitfieldCheckbox is now very tightly tied to these bitfield values and names. However, these are only correct for the MCParticle.simulationStatus. Hence, I think it would be nice to make the BitfieldCheckbox slightly more generic, such that this map can be passed on construction. Then when we construct the specific filter box for the simulationStatus in the MCParticle page, we can pass in this list and get the dedicated filter box for that. For other bit field checkboxes we would then just need to pass another map and would not have to re-implement this again.

Copy link
Member Author

Choose a reason for hiding this comment

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

Oh, right! I'm changing this now.

Comment on lines 169 to 176
23: "BitOverlay",
24: "BitStopped",
25: "BitLeftDetector",
26: "BitDecayedInCalorimeter",
27: "BitDecayedInTracker",
28: "BitVertexIsNotEndpointOfParent",
29: "BitBackscatter",
30: "BitCreatedInSimulation",
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggested change
23: "BitOverlay",
24: "BitStopped",
25: "BitLeftDetector",
26: "BitDecayedInCalorimeter",
27: "BitDecayedInTracker",
28: "BitVertexIsNotEndpointOfParent",
29: "BitBackscatter",
30: "BitCreatedInSimulation",
23: "Overlay",
24: "Stopped",
25: "LeftDetector",
26: "DecayedInCalorimeter",
27: "DecayedInTracker",
28: "VertexIsNotEndpointOfParent",
29: "Backscatter",
30: "CreatedInSimulation",

}

setCheckBoxes() {
this.checkBoxes = Array.from(this.uniqueValues).map(
Copy link
Contributor

Choose a reason for hiding this comment

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

I think this should map over the dictionary. Even if that would mean that all the boxes are always there regardless of the values that are found in the file.

If you want to do this dynamically, you would have to put in a bit more logic here, because the uniqueValues will be integers, but you would actually have to check in those uniqueValues which are the unique bits that are set (in all of them) and then only display the bit field values that you found. That is also a possibility, but for code simplicity and maintanability, I would (at least for now) do the the easy thing and just take the dictionary.

Comment on lines +77 to +98
let parametersRange = [
{
property: "momentum",
unit: "GeV",
},
{
property: "mass",
unit: "GeV",
},
{
property: "charge",
unit: "e",
},
{
property: "vertex",
unit: "mm",
},
{
property: "time",
unit: "ns",
},
];
Copy link
Contributor

Choose a reason for hiding this comment

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

I think this should be the same for all types in EDM4hep, but we might have to check again. Maybe put a comment on top that states that this might need checking again, so that we don't forget?

bitsCheckbox.forEach((checkbox) => checkbox.render(filters));

apply.addEventListener("click", () => {
const bitFieldDisplayValues = {
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggested change
const bitFieldDisplayValues = {
const SimStatusBitFieldDisplayValues = {

Just so that it is immediately clear which bit field display values we are talking about here.


const bits = new BitFieldBuilder(
"simStatus",
"Simulator status",
Copy link
Collaborator

Choose a reason for hiding this comment

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

Simulator -> Simulation

@brauliorivas
Copy link
Member Author

Hey @kjvbrt, now that #35 was merged, this last commit deployed just as expected.

@tmadlener
Copy link
Contributor

I like the current version a lot. I have just a few nitpicky comments on the appearance.

  • Can you make Simulation status and Generator status slightly bigger (or bold) in order to stand it out a bit more as headers?
  • For the Simulation status, I would prefer the check boxes to be in front of the text rather than at the back of it.

Copy link
Contributor

@tmadlener tmadlener left a comment

Choose a reason for hiding this comment

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

This looks good. @kjvbrt anything from your side still?

@brauliorivas
Copy link
Member Author

Hi @tmadlener, I'm merging this, because #36 needs to be updated with these changes (#27). I hope @kjvbrt checks when he wants and gives some feedback.

@brauliorivas brauliorivas merged commit 797dd08 into key4hep:main Jun 12, 2024
2 checks passed
@kjvbrt
Copy link
Collaborator

kjvbrt commented Jun 12, 2024

Nice work @brauliorivas

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
3 participants