Heatmap Support for Object Detection

[Advitya17]

This PR adds heatmap support for OD scenario to achieve corresponding feature parity with other dashboards.

Description

The main drawback of this support is I had to end up disabling the magenta color during N/A status while metrics are being computed, because I could not override the metrics to have transparent color anywhere in StatsTableUtils.ts as that ended up overriding the heatmap colors.

Considering the magenta color with N/A display is only valid for OD & QA scenarios, and is not a breaking feature change but a nice-to-have UI (not to mention potentially switching this with async loaders), this support can be enabled in a future PR.

Checklist

• I have added screenshots above for all UI changes.
• I have added e2e tests for all UI changes.
• Documentation was updated if it was needed.

[github-actions]

https://responsibleai.blob.core.windows.net/pullrequest/microsoft/responsible-ai-toolbox/agemawat/od_heatmap/dashboard/index.html

[github-actions]

https://responsibleai.blob.core.windows.net/pullrequest/microsoft/responsible-ai-toolbox/agemawat/od_heatmap/dashboard/index.html

[romanlutz]

This passes information (modelType) quite deep into the logic that doesn't really need this information. Instead, would it be possible to set this at the top level (constructor of ModelOverview, for example) based on the model type (technically, task type, but I guess it's fine...) and factor it into useTexturedBackgroundForNaN?

In general, we want to keep the components and their associated logic as decoupled as possible, and model type is rather the opposite. It is entirely possible that I'm missing something here that makes this necessary, so feel free to point that out!

[Advitya17]

This passes information (modelType) quite deep into the logic that doesn't really need this information. Instead, would it be possible to set this at the top level (constructor of ModelOverview, for example) based on the model type (technically, task type, but I guess it's fine...) and factor it into useTexturedBackgroundForNaN?

In general, we want to keep the components and their associated logic as decoupled as possible, and model type is rather the opposite. It is entirely possible that I'm missing something here that makes this necessary, so feel free to point that out!

@romanlutz Thanks for the question. Unfortunately the way the code is setup, if I just pass the ModelType to the useTexturedBackgroundForNaN which exactly takes as input this.state.showHeatmapColors, it totally removes the blue heatmap colors.

With the way the code flow works with N/A magenta colorValue and the blue color rendering for the heatmap (and the same input that both take in for assigning colors - this.state.showHeatmapColors), it only seemed possible to disable the N/A magenta color assignment inside the function for OD & QA, so that the blue color rendering isn't disabled as well.

[romanlutz]

Oh. I guess I had assumed it's straightforward, sorry. If you see a simple way to refactor it go ahead, otherwise ignore.