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

Event column #646

Open
wants to merge 19 commits into
base: develop
Choose a base branch
from
Open

Event column #646

wants to merge 19 commits into from

Conversation

jzethofer
Copy link

@jzethofer jzethofer commented Dec 20, 2023

prerequisites:

  • branch is up-to-date with the branch to be merged with, i.e. develop
  • build is successful
  • code is cleaned up and formatted

Summary

  • Added event data column
    • Show events of different types for each data row on a time scale
    • Interactive time scale: Zoom and drag functionality
    • Box plot: Visualize the spread of a future event based on similar observed data
    • Events in LineUp overview mode: tiny rectangles provide a compact view of events
    • Event reference column for comparing events that occured at different points in time
    • Heatmap summary visualization to compare distribution of events
    • Tooltips with popper.js
    • Dialogues for event column
      • Sorting by event type and box plot values
      • Color Mapping
      • Event display settings
        • select which events to show in normal mode and overview mode
        • toggle boxplot and zero line
      • Event references
        • Reference event for all events (current timestamp or other event)
        • Reference event for box plot
    • Additional configuration options in event column builder
      • Event scale unit in (milliseconds, days, years, ...)
      • Boxplot data unit
      • Event type names (other names in data are ignored if specified)
      • Event scale bounds (data outside is shown on zooming out)
      • heatmap bin count
      • legend update callback (function that is called when events or event color mapping are updated to draw a legend outside of lineup)
2023-12-20.09-25-48.mp4

Copy link

netlify bot commented Dec 20, 2023

Deploy Preview for lineupjs ready!

Name Link
🔨 Latest commit 3776f8f
🔍 Latest deploy log https://app.netlify.com/sites/lineupjs/deploys/65b9f7ec4977cb00080767f1
😎 Deploy Preview https://deploy-preview-646--lineupjs.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@jzethofer jzethofer changed the title Develop Event column Dec 20, 2023
Copy link
Member

@sgratzl sgratzl left a comment

Choose a reason for hiding this comment

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

so far just looked at the code without testing it out.

overall looks good and will provide a nice new event type

some general comments

  • please add an example with two event columns
  • avoid that the model is rendering something, the model is pure data not updating of html
  • please generalize the tooltip similar to dialog management, having a magic unique id defined in one and used in the other doesn't scale
  • please update to the latest develop branch + make sure that yarn fix runs without problems.

src/ui/dialogs/sortEvent.ts Outdated Show resolved Hide resolved
src/ui/dialogs/EventReferenceDialog.ts Outdated Show resolved Hide resolved
src/ui/dialogs/EventReferenceDialog.ts Outdated Show resolved Hide resolved
src/ui/dialogs/EventReferenceDialog.ts Outdated Show resolved Hide resolved
src/ui/dialogs/EventDisplaySettingsDialog.ts Outdated Show resolved Hide resolved
src/model/EventColumn.ts Outdated Show resolved Hide resolved
src/model/EventColumn.ts Outdated Show resolved Hide resolved
src/model/EventColumn.ts Outdated Show resolved Hide resolved
src/model/EventColumn.ts Outdated Show resolved Hide resolved
src/model/EventColumn.ts Outdated Show resolved Hide resolved
@sgratzl sgratzl added type: feature New feature or request release: minor PR merge results in a new minor version labels Jan 21, 2024
.yarnrc.yml Outdated Show resolved Hide resolved
src/ui/TooltipManager.ts Show resolved Hide resolved
src/ui/dialogs/sortEventColumnMethods.ts Outdated Show resolved Hide resolved
src/model/EventColumn.ts Outdated Show resolved Hide resolved
src/model/EventColumn.ts Outdated Show resolved Hide resolved
src/renderer/EventCellRenderer.ts Outdated Show resolved Hide resolved
src/renderer/EventCellRenderer.ts Outdated Show resolved Hide resolved
src/renderer/EventCellRenderer.ts Outdated Show resolved Hide resolved
src/renderer/EventCellRenderer.ts Outdated Show resolved Hide resolved
const svg = div.select('svg') as Selection<SVGSVGElement, unknown, null, undefined>;
svg.selectAll('*').remove();

if (n.classList.contains('lu-side-panel-summary')) {
Copy link
Member

Choose a reason for hiding this comment

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

take a look at the StringCellRenderer, it uses the interactive flag to separate the side panel from the regular summary

added flag for axis adaption to data or global min/max
switched to regular d3 updates
fixed popper page slowing by using virtual element instead of creating new instances
@thinkh
Copy link
Member

thinkh commented Mar 25, 2024

@sgratzl: @jzethofer has addressed all points from your feedback. Could you please take another look? For me it looks good.

}

onDataUpdate(_rows: ISequence<IDataRow>): void {
super.onDataUpdate(_rows);
Copy link
Member

Choose a reason for hiding this comment

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

I don't understand.

let's say you have 3 events: A, B, C
and 3 rows; [{A: 1, B: 2, C: 3}, {A: 2, B: 3, C: 4}, {A: 3, B: 4, C: 5}]
the user can select which combination of A, B, C to show and you need the min/max of the current selection.

what you can precompute is:
A: min/max of all As: 1,3
B: min/max of all Bs: 2,4
C: min/max of all Cs: 3,5

then you can compute on the fly based on the selection the current selection min max,

e.g
selection = A,B -> min(A.min, B.min), max(A.max, B.max) =1,4

Copy link
Member

Choose a reason for hiding this comment

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

why do you need to compute all possible combinations?

Copy link
Author

Choose a reason for hiding this comment

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

The user can also dynamically select a reference event during the analysis.
I add this data row {A:4, B:-2, C:5} to the example and select A as a reference event
Then the value A is subtracted from in each row: [{A: 0, B: 1, C: 2}, {A: 0, B: 1, C: 2}, {A: 0, B: 1, C: 2}, {A:0, B:-6, C:1}]

Also the boxplot values dynamically linked to one column.
for example they are [{min:-2, max 5}, {min:3, max 5}, {min:0, max 8}, {min:0, max 1}]]
then setting the boxplot reference to A would lead to
[{A: 0, B: 1, C: 2, min:-2, max 5}, {A: 0, B: 1, C: 2, min:3, max 5}, {A: 0, B: 1, C: 2, min:0, max 8}, {A:0, B:-6, C:1, min:0, max 1}]
and a min/max of -6/8

setting the boxplot reference to B leads to min/max of -6/9
setting the boxplot reference to C leads to min/max of 0/10

If a column is deselected or the reference event changes min/max can change again.
The min/max therefore depends on the selected columns, reference event, boxplot reference event and the visible data rows. Or am I missing something here?

What I could do is making the min/max calculation independant of the visible data rows and only cache a global min/max for each combination

Copy link
Author

Choose a reason for hiding this comment

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

@sgratzl
Copy link
Member

sgratzl commented Mar 25, 2024

@sgratzl: @jzethofer has addressed all points from your feedback. Could you please take another look? For me it looks good.

for me the main point is that the renderer is changing the data of the model, which is a first.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
release: minor PR merge results in a new minor version type: feature New feature or request
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants