Task Assignments pertaining to Adding support for in-browser interactive averaging of physics results (CERN)
| 1 - Simple navigation/display exercise | 2 - Interactive python | |
|---|---|---|
| Motivation | The simple page could do with better organizing perhaps, as the user is forced to navigate to a different page everytime to view static results. It offers for a cluttered look when viewed by someone on a first glance. Likely does not use any fundamental design concepts either. The plots are static images rather than interactive plots. The map ooverlays are used over there static images, which could be made into a whole new experience. While we can't really do away with multiple dropdowns, we could make the whole process of viewing the branching functions much more pleasant. Once the graphs are made interactive, showing thr advanced averagining results becomes an easier affair. Using existing technology and frameworks which are used already in the website, we can provide a much better approach to using our web interface. Here's a link to the figma file I've created for this purpose: https://www.figma.com/file/RfzQ6hq5ovGDT2piSrEVAZ/CERN-HFLAV-New-Design?node-id=0%3A1 (but this would also require a major rewrite!) | The graphs in the website are static, and don't offer a way to be interactive upon user input. We build a system using graphing software to produce graphs that are interactable and clear. This computation is done in the browser itself. |
| Solution | Tagging Branching Functions to promote Dynamic Table Filtering and Searching We first populate the table entries of branching functions instead and render interactive graphs instead of images. As the name suggests, we tag the branching functions based on the "Category", "Latex" and "Name" field entry. Next, we introduce a search feature which helps us filter out the branching functions based on these tags. Even a client based approach will be sufficient here for the size that we are dealing with. The tagging part can be made more robust as well in the future. For the barebones implmentation, the tags consist of all data we have for each branching function. The graphs are also not yet scaled according to the order of magnitude. |
Voila Dashboard for Interactive Plotly Averaging We select the branching function, and then we choose the measurements, which give an updated graph every single time. The average and error is dyanmically calculated, and displayed in the form of both, a list and a graph. The graph can be hovered to get real time average. The whole application is deployed and made available for everyone. Further improvements can be made to this rudimentary model. |
| Tech Stack | HTML, CSS, JS, Bootstrap, JQuery, KaTex (for rendering LaTex), Highcharts (for charting purposes), firebase (hosting) | jupyter notebook, python3, ipywidgets, numpy, voila, plotly, heroku (hosting) |
| Installation | cd Task\ 1 & open the index.html in local web. To use the search feature, you need to hit the enter key, after typing in something like "Bbaryon" or 4450. |
In dev mode: cd Task\ 2 && pip install -r requirements.txt && jupyter notebook (and then proceed to running the notebook BeautyOfCharm.ipynb') In prod mode: cd Task\ 2 && pip install -r requirements.txt && voila BeautyOfCharm.ipynb --theme=dark (followed by opening localhost:8866 in your browser) |
| Live demo links | https://hflavbtocharm.web.app | https://hflav-interact.herokuapp.com |