fix: support histogram svg with path tag (#383)

# Pull Request

## Description
<!-- Provide a brief description of the changes made in this pull request. -->
- Updated histogram.js to highlight SVG including path elements, which are generated from Matplotlib/Seaborn

## Related Issues
<!-- Specify any related issues or tickets that this pull request addresses. -->
- Closes 
  - #380
  - #382 

## Changes Made
<!-- Describe the specific changes made in this pull request. -->
- If the querySelector selects path elements, then handled the Select() and Unselect() functionality

## Screenshots (if applicable)
<!-- Include any relevant screenshots or images to help visualize the changes. -->
<!-- You can take a gif animation screenshot very easily without any additional installation by using this browser-based tool: -->
<!-- https://gifcap.dev -->

## Checklist
<!-- Please select all applicable options. -->
<!-- To select your options, please put an 'x' in the all boxes that apply. -->

- [x] I have read the [Contributor Guidelines](../CONTRIBUTING.md).
- [x] I have performed a self-review of my own code and ensured it follows the project's coding standards.
- [x] I have tested the changes locally following `ManualTestingProcess.md`, and all tests related to this pull request pass.
- [x] I have commented my code, particularly in hard-to-understand areas.
- [ ] I have updated the documentation, if applicable.
- [ ] I have added appropriate unit tests, if applicable.

## Additional Notes
<!-- Add any additional notes or comments here. -->
<!-- Template credit: This pull request template is based on Embedded Artistry {https://github.com/embeddedartistry/templates/blob/master/.github/PULL_REQUEST_TEMPLATE.md}, Clowder {https://github.com/clowder-framework/clowder/blob/develop/.github/PULL_REQUEST_TEMPLATE.md}, and TalAter {https://github.com/TalAter/open-source-templates} templates. -->

src/js/histogram.js

@@ -136,9 +136,31 @@ class Histogram {
     if (this.bars) {
       this.activeElement = this.bars[position.x];
       if (this.activeElement) {
-        this.activeElementColor = this.activeElement.getAttribute('fill');
-        let newColor = constants.GetBetterColor(this.activeElementColor);
-        this.activeElement.setAttribute('fill', newColor);
+        // Case where fill is a direct attribute
+        if (this.activeElement.hasAttribute('fill')) {
+          this.activeElementColor = this.activeElement.getAttribute('fill');
+          // Get new color to highlight and replace fill value
+          this.activeElement.setAttribute(
+              'fill',
+              constants.GetBetterColor(this.activeElementColor)
+          );
+          // Case where fill is within the style attribute
+        } else if (
+            this.activeElement.hasAttribute('style') &&
+            this.activeElement.getAttribute('style').indexOf('fill') !== -1
+        ) {
+          let styleString = this.activeElement.getAttribute('style');
+          // Extract all style attributes and values
+          let styleArray = constants.GetStyleArrayFromString(styleString);
+          this.activeElementColor = styleArray[styleArray.indexOf('fill') + 1];
+          // Get new color to highlight and replace fill value in style array
+          styleArray[styleArray.indexOf('fill') + 1] = constants.GetBetterColor(
+              this.activeElementColor
+          );
+          // Recreate style string and set style attribute
+          styleString = constants.GetStyleStringFromArray(styleArray);
+          this.activeElement.setAttribute('style', styleString);
+        }
       }
     }
   }
@@ -154,8 +176,21 @@ class Histogram {
   UnSelectPrevious() {
     if (this.activeElement) {
       // set fill attribute to the original color
-      this.activeElement.setAttribute('fill', this.activeElementColor);
-      this.activeElement = null;
+      if (this.activeElement.hasAttribute('fill')) {
+        this.activeElement.setAttribute('fill', this.activeElementColor);
+        this.activeElement = null;
+      } else if (
+          this.activeElement.hasAttribute('style') &&
+          this.activeElement.getAttribute('style').indexOf('fill') !== -1
+      ) {
+        let styleString = this.activeElement.getAttribute('style');
+        let styleArray = constants.GetStyleArrayFromString(styleString);
+        styleArray[styleArray.indexOf('fill') + 1] = this.activeElementColor;
+        // Recreate style string and set style attribute
+        styleString = constants.GetStyleStringFromArray(styleArray);
+        this.activeElement.setAttribute('style', styleString);
+        this.activeElement = null;
+      }
     }
   }
 }