fix(scatterplot): support svg from matplotlib (#406)

# Pull Request

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

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

## Changes Made
<!-- Describe the specific changes made in this pull request. -->
- Updated scatterplot to handle all kinds of layers along with SVG path
element

## 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/controls.js

@@ -90,7 +90,11 @@ class Control {
           }
 
           // switch layer controls
-          if (Array.isArray(singleMaidr.type)) {
+          if (
+            Array.isArray(singleMaidr.type) &&
+            [].concat(singleMaidr.type).includes('point') &&
+            [].concat(singleMaidr.type).includes('smooth')
+          ) {
             // page down /(fn+down arrow): change chart type (layer)
             if (e.key == 'PageDown' && constants.brailleMode == 'off') {
               display.changeChartLayer('down');
@@ -1611,7 +1615,7 @@ class Control {
       }
     } else if (
       [].concat(singleMaidr.type).includes('point') ||
-      singleMaidr.type == 'point'
+      [].concat(singleMaidr.type).includes('smooth')
     ) {
       // variable initialization
       constants.plotId = 'geom_point.points.12.1';

src/js/display.js

@@ -271,8 +271,8 @@ class Display {
 
       constants.brailleInput.setSelectionRange(adjustedPos, adjustedPos);
     } else if (
-      singleMaidr.type == 'point' ||
-      singleMaidr.type.includes('point')
+      singleMaidr.type == 'smooth' ||
+      singleMaidr.type.includes('smooth')
     ) {
       constants.brailleInput.setSelectionRange(positionL1.x, positionL1.x);
     }
@@ -469,8 +469,8 @@ class Display {
       else if (constants.textMode == 'terse')
         output = '<p>' + textTerse + '</p>\n';
     } else if (
-      singleMaidr.type == 'point' ||
-      singleMaidr.type.includes('point')
+      [].concat(singleMaidr.type).includes('point') ||
+      [].concat(singleMaidr.type).includes('smooth')
     ) {
       if (constants.chartType == 'point') {
         // point layer