Clinical Review Timeline Chart: Trainees should be able to see the state transitions so that they can identify the time blocks that identify vital states

[gunalmel]

Scatter plot has color shaded areas that shows state transitions. In #2 those areas are hard coded to find out how to implement shaded areas on scatter plot using plotly.js

User Story

Feature: Trainees should be able to see the state transitions on clinical review timeline chart so that they can identify the time blocks that identify vital states
Scenario: Trainees view the clinical review timeline chart to identify state transitions
    Given the trainee is on dashboard
     When the scatter plot of actions, compression periods are plotted on a timeline
     Then the chart (plot area) should be divided into color coded blocks that identify state transitions as specified by the rules to parse the csv data for the boundaries of transitions.

References

Requirements

[gunalmel]

I used the code in the demo app at https://github.com/thedevagyasharma/mteam-dashboard to display the transition areas on the graph. The first 2 transitions overlapped and there are gaps which makes me think that it does not correspond to the rules in the requirements (follow the link in the issue body's references).

isTransitionBoundary function in dashboard/page.tsx controls the boundaries for transitions.

[gunalmel]

We have a problem with Vercel. React plotly component doesn't render the chart correctly. https://mteam-dashboard.vercel.app/dashboard displays the chart without data points or transitions and a trace line legend on the left hand side.

[gunalmel]

You can reproduce the problem after being deployed to https://mteam-dashboard.vercel.app/dashboard by running build first and then running in prod mode: npm run build npm start

https://plotly.com/javascript/react/ may be helpful in troubleshooting

[gunalmel]

Turned out that the problem was with the webpack minification during production build. Modified webpack build optimization (minification) to use TerserPlugin which fixed the problem of plotly not rendering the chart correctly. Turning off the minification could also work.

Turning off it in next.config.js

// next.config.js
module.exports = {
  webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
    if (!dev) {
      config.optimization.minimize = false;
    }
    return config;
  },
};

configuring TerserPlugin to modify minification process

const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  webpack: (config, { dev, isServer }) => {
    if (!dev && !isServer) {
      config.optimization.minimizer = [
        new TerserPlugin({
          terserOptions: {
            mangle: false,
            keep_classnames: true,
            keep_fnames: true,
          },
        }),
      ];
    }

    return config;
  },
};

[kalibrain]

I used the code in the demo app at https://github.com/thedevagyasharma/mteam-dashboard to display the transition areas on the graph. The first 2 transitions overlapped and there are gaps which makes me think that it does not correspond to the rules in the requirements (follow the link in the issue body's references).

isTransitionBoundary function in dashboard/page.tsx controls the boundaries for transitions.

I don't see any specific requirement stating that there will be no overlapping stages or no gap in between stages. Code seems to be finding the stages appropriately.

[kalibrain]

Tested the code using the local timeline-multiplayer CSV file provided by Vitaliy in dropbpx. While there are still some gaps between game stages, the issue of overlapping stages didn't occur. See the output image below.

[gunalmel]

We'd better annotate the beginning and end of transitions and let clicking on borders to scroll within the video