The mtv from sintel-dev

Sidebar calendar issues on different screen sizes

When width of the sidebar is larger than the height, the last row of the calendar is being cut:

Day Level is misaligned + additional space between rows is required:

Consider using a remote mongo server for demo

The only thing is that we need to test the speed for large data transferring.

Auto adjust panel size and allow resizing the panels and

We need to make sure that the bottom panel is not exceeding the current screen so users do not need to scroll down.

This requires us to implement the following functions:
(1) based on the current screen resolution (computer screens), compute the optimal size of each panel to make sure no scroll down action is needed.
(2) allow resize the panels in the vertical direction. This allows users to adjust the height of the overview to show more/fewer signals at the same time based on their preference.

UI improvement list

Landing page:
(1) increase the logo size;
(2) align the logo with the row title "projects", "experiments", and "pipelines";
(3) Scroll bar in each row should be more visually apparent;

(4) Use color to highlight active cards;

Or other forms such as using background color.

(5) Make hand bigger when hovering on cards;
(6) Move pipeline to second row;
(7) Pipeline card only display summary info.

Experiment page:
(1) increase the logo size;
(2) align the logo

(3) multiple time series view: use color to highlight the selected time series

(4) Event editing window:
- bigger font
- bigger window
- move position to the page center ??

(5) Make the following highlighted texts bigger

Add matrix component

add matrix component once issue #28 fixed.

Remove Security level from dataset chart info

Default tag value in the tag selection list

In Andrei's design, we have discussed that the default value should be empty. We should leave a placeholder "Select a tag" to users to ask them select one.

If users do not choose any tag, we should leave the tag of this event empty. This means that we do not suggest setting any default tag in this selection list (e.g., "investigate" is the default tag in the current implementation) unless the event has been tagged before.. @sergiu-ojoc

Audio transcription on textarea

Please provide a way for a user to use his microphone to add text in textarea boxes.
This is a feature that used to be implemented.

Code Quality Improvement

Address comments from #78 (review)

Integrate landing page to current logic

The landing page is the starting page where users can see a hierarchically organized card, showing the experiment information.

Unable to save new event

/api/v1/events returned 405 when trying to add new event:

Font size issues in very big screen

Move up pipeline row and move down experiment row

Small screen problem in landing page

Problem:
Currently we are using percentage height to plot each row (proj, exp, and pipe). So if the height of the screen is not enough, the card would look flat and have not space to show all the texts.

Solution:
Set min-height property for each info row.

An interaction issue on focused line chart

Problem:
When clicking the button "event adding mode" and then click it again to deactivate adding mode, users cannot perform zoom and pan interactions on the chart. Users have to click the zoom/pan button on the bottom right again to resume the normal interaction manner.

Solution:
When deactivate event adding mode, please resume zoom/pan interactions by default.

Inconsistency between the design and the implementation

As we have made some changes in the DB Schema and added one landing page, some contents in the detailed view should be modified or discarded.

Current implementation:

Current design:

We have to make the following changes

remove the left panel, as the information is shown in the landing page
in top multiple line charts view, the selected time segment has two small bars indicating that the segment is adjustable. Make sure it has the same style as the design.
there are only two switch buttons on the bottom of the top view, the third switcher should be removed and its function should be implemented for the button "+" in the bottom's focused chart.
on the right panel, there is a gradient light for each glyph. We should remove this effect just as the design.

When switching back to landing page, the experiment info is not updated

When mouse hovers on a event arc, add highlight effects

Highlight effects could be:
add colored border + scale the arcs

Switch button does not work in periodical view

(1) By default, the switcher should be opened and the event arcs should be displayed; when switch the button off, event arcs should be hidden.

(2) Consider moving this switch button to the header as shown in the figure

Split the integrated CSS file into multiple component-level css files.

As the title.

Optionally link the bottom panel and the right panel

Once the sync button is activated, time region (the time segment of interest) shown in the bottom focused view should be dynamically synced with the right period view.

Users select a level on the right panel to investigate the periodical patterns, now we have two situations.

situation 1: users interact with the top overview or the bottom focused view to change the time segment of interest
- case 1 (year level): no changes at all because we are at the highest level
- case 2 (month level): if the middle time point of the time segment of interest move to prev/next year, show prev/next year's 12 month-level glyphs on the right panel.
- case 3 (day level): if the middle time point of the time segment of interest move to prev/next month, show prev/next month's ~30 day-level glyphs on the right panel.
situation 2: users click a glyph or change the investigating level
- change the time region in the bottom focused view to the one that is exactly the same as the current investigating level in the right panel.

Too many config files to deploy MTV with docker now

simplify the configure files
automatically detect the running environment and let the app set the configure accordingly

Doubling the number of experiments when clicking on 'Projects'

Experiments are increasing each time when one of "Projects" is clicked multiple times:

Unit test and code coverage

In our original framework, we have prepared a set of tools to test our code.

For the server end, we provide pytest-flask to do flask-api testing as well as the python code coverage tool.

For the client end, we provide karma testing tool to run unit test and coverage test.

Based on the current framework, we need to add testing codes to test every important component.

Need further feedback from @sergiu-ojoc and @sorinvelescuB

Remove Admin LTE Theme

Remove ADMIN LTE theme.
I agree, this theme has a lots of features and graphical elements. But, we are only using the bootstrap component from it.
Do we really need this theme because I can build the whole structure for myself and get rid of the unnecessary CSS that came with ADMIN LTE theme?

When an event is tagged, the tag list will be duplicated

Update the design of the landing page

We have made some improvements to the original design of the landing page (#45 ).

Now we need to implement these new updates.

Add color indicators when choosing tags in the selection list

Update flask APIs to work with the new DBSchema

Reposition the logo

Align the logo

Remove Project and Datarun selection fields from top right area

Support searching for time regions of similar time shapes (V1)

(1) Need design solution from @IuliaElenaI first;
(2) @dyuliu will design the API

Scroll problem in exp page

After adding the page switcher, the exp page doesn't support page scroll.

If we open the app on a small screen (e.g., Mac), there could be some problems.

Cursor style when hovering on switch buttons

Problem:
No style.

Solution:
Change to "hand" style.

Bugs on tag selection list

(1) open an tagged event (e.g., the green one) -> then open an untagged event -> the default tag is the previous one, which should be "select a tag".

(2) add color indicator. We can choose a better position to place the circle~

Show multiple comments of one event

Now we only use one textarea to show one comment related to this event.

In fact, there are multiple comments from different users for one event.
We need a compact design to show these comments.

If there are too many comments, we can add "..." button to allow users to open more comments.

Add day numbers when going to daily detail level

Multiseries period range is out of boundaries when zooming

The last time series in the signal overview (top) cannot respond to mouse events

Update tag scheme to mark anomalous events

Follow the UI-design document, we need to update the related client-side code.

The tag could be:

Unknown:
- investigate
- Do not investigate
- Postpone
Known:
- Problem
- Previously seen
Normal

Less compiler contacts the same content multiple times

Loading a new experiment causes plotting charts twice

Problem:
Loading a new experiment causes plotting charts twice

Two potential solutions:

clean original charts and replot;
direct update on original charts (need carefully check the update function).

Add Restful API documentation

Highlight tagged/untagged events in focused linechart view and period view

We have six tag types which are expressed with the following colors

(1) focused linechart view

use header bar color to indicate the tag type @sergiu-ojoc

(2) period view

draw a colored thick arc to indicate an event and its tag type @sergiu-ojoc
when hovering on the thick arc, show the event tag text, start_time, and end_time (use title attr for an HTML Element) @sergiu-ojoc