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

Origin / Destination matrix User Interface #313

Open
52 tasks
louisgreiner opened this issue Oct 15, 2024 · 2 comments
Open
52 tasks

Origin / Destination matrix User Interface #313

louisgreiner opened this issue Oct 15, 2024 · 2 comments

Comments

@louisgreiner
Copy link
Collaborator

louisgreiner commented Oct 15, 2024

Description

Last part of #126

Acceptance criteria

  • "O/D matrixes" button replaces the actual "Analytics" button and opens a new view (as "Streckengrafik" does)
  • Node selection and filtering:
    • if no node selection, displays the matrixes of all not filtered nodes
    • if no selection, displays the matrixes of the selected and not filtered nodes
  • Matrixes:
    • 3 types are available : "Travel time", "Connections" and "Cost"
    • "Travel time" and "Connections" are shown at first opening after calculation (default behavior) ; then user's selection is kept
    • user can select the displayed matrixes, as a combinaison (0 to 3) of the available types of matrixes (cf. Screenshot 1)
    • the matrixes have an optimal size depending on the number of matrixes displayed (cf. Mock-ups 0, 1, 2, 3)
    • the output of the matrixes calculation is saved (and the list of nodes involved in it) and displayed in the "O/D matrixes" view until the "Refresh" button is clicked
    • Cells:
      • inside each cell is written the value, depending on the matrix the cell is in, for the pair origin / destination
      • the size of a cell is responsive and optimizes the space available in the matrix, depending on the number of nodes represented
      • on mouse hover, a tooltip appears : "{origin.betriebspunktname} / {destination.betriebspunktname} : {value} ; value depending on the matrix the cell is in (i.e., LTH / OL : 16)
    • Zoom:
      • user can zoom in a matrix, using the application zoom button (re-use) and mouse / pad scroll
      • must be synchronized between all the matrixes displayed
    • Pan:
      • user can pan (= move) in a matrix, the same way user can move in a netzgrafik (re-use)
      • must be synchronized between all the matrixes displayed
  • Inside the O/D matrixes view:
    • user can download all the matrixes at once (the 3 of them in a single file), as .svg and .png
    • Refresh button (see Mock-ups 3, 4):
      • is disabled if user didn't change anything relevant for O/D calculation (default)
      • enabled if needed for recalculation
    • inside this view only, if the filters selection has changed, recalculate the O/D matrix with the selection and active filters
      • bonus : add a loader when the O/D matrix calculation is running (to prevent browser freeze + crash for large networks), see SBB loader component

Mock-ups (can it be something here ??):

  • 0: 0 matrix displayed
  • 1: 1 matrix displayed, 2x2 cells
  • 2: 2 matrixes displayed, 5x5 cells
  • 3: 3 matrixes displayed, 5x5 cells, "Refresh" button disabled
  • 4: 3 matrixes displayed, 5x5 cells, "Refresh" button enabled

Questions (@aiAdrian):

  • button : "O/D matrixes" or "Origin / Destination matrixes" ?
  • the list of nodes used for calculation is saved (= fixed) to be reused : how ? where ?
  • "Refresh" or "Recalculate" button ? disabled or hidden ?
  • how do know when "Refresh" is enabled? when netzgrafikDto changes ? or nodes (isNonStopTransit, ...), nodes or filters selections, or trainrun(sections) modification compared to the last O/D matrix calculation ?
  • is the size of the font for the text within a cell also adaptive ? (= bigger font when 2x2 matrix than for 5x5 matrix)
  • need to know the precise dimensions (in px) of the matrixes (small, medium, large)
  • need to prioritize / schedule the most important features, as the feature is actually too big for an iteration

Screenshot 1:
image

Note : requirements are flexibles, the feature will grow with the time, we start simple

Implementation plan (not updated, see comments below)

Many components to implement / re-use:

  • "O/D matrixes" button on the bottom of the application, between "Analytics" and "Streckengrafik", not replacing "Analytics" - but the analytics caluclation must be replaced with the O/D algorithm (not scope of this feature)
  • Cell:
    • responsive size
    • value
    • tooltip on mouse hover
  • Matrix (need a design document for this one ; could be base on d3.js heatmap ?):
    • adaptive size (small / medium / large)
    • nodes (= [Node])
    • data (= [Cell][Cell])
    • zoom
    • pan
  • O/D Matrix view
  • Refresh button
  • Download button

Rest:

  • to be defined

Definition of ready

  • UX

    • A wireframe is ready
    • A mock-up is ready
  • PO

    • Acceptance criteria are clear and understandable
    • The acceptance criteria are validated by users
  • Technical

    • Implementation plan is detailed and validated by maintainers
  • General

    • Validated by the PM
@louisgreiner
Copy link
Collaborator Author

louisgreiner commented Dec 20, 2024

Technical refinement 20/12

Participants: @emersion @louisgreiner

Split in parallelisable features

  • Use d3.js for heatmap visualization of O/D matrices from JSON data resulting of O/D algorithm => implement a protoype (sandbox style) with data, mouse hover, responsiveness

  • Create O/D matrices window and d3.js SVGs (@Uriel-Sautron, I recommend to start by this, which is the core of the feature, enabling the rest)

    1. First, look at the structure of editor-main-view-component (= network graphic component) as example implementation of d3.js:
    • entry point : src/app/view/editor-main-view/editor-main-view.component.html, then create empty <svg>
    • subscribe to updates : subscribeViewToServices() subscribes to updates from services and call displayXXX() methods of editor views (i.e., ConnectionsView.displayConnections()) in src/app/view/editor-main-view/editor-main-view.component.ts
    • src/app/view/editor-main-view/data-views/editor.view.ts handle interactions, child of EditorMainViewComponent
    1. Then create code structure for O/D feature:
    • Create dedicated folder origin-destination and follow patterns from src/app/streckengrafik/ for folder structure
    • Allow to switch from EditorMainView window to OriginDestinationView window (verify that nodes selection and filters are accessible and shared from both windows)
    • Create a <svg> for each O/D matrix to display
  • Once both upper features done, integrate the prototype in the OriginDestination component, launching an O/D matrix calculation, taking in input the output of the algorithm

  • Implement download button (re-use svg download)

  • Implement shared zooming and panning

Proposition of re-design

Do not display 1, 2 or 3 matrixes, but only 1 (default is Travel time) and navigate between the matrixes using the keyboard key Tab. The displayed matrix can be bigger, and we can easier share zoom and paning between the matrixes for each display

This re-design would affect only the number of matrixes displayed, and simplify the navigation in and between the matrixes

@aiAdrian
Copy link
Collaborator

Might the navigation should as well with work with buttons

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

No branches or pull requests

3 participants