Investigate spectrogram pixelation compared to industry standard tools

[aashish24]

Current spectrograms appear more pixelated than what manual vetters expect from standard tools

Research needed:
Compare rendering quality with industry standard output
Determine if resolution improvement is technically feasible
Assess impact on performance
Gather user feedback on acceptable quality vs performance tradeoffs

Acceptance Criteria:
Analysis complete on technical feasibility
User research conducted on quality requirements
Implementation plan created if improvements are warranted

[BryonLewis]

Possibly utilize https://opengeoscience.github.io/geojs/tutorials/contour/ countours from GeoJS.

[naglepuff]

I've taken some time to see if SVG filters can be used to help here, especially if this is a presentation-only concern.

For example, take this reference image of a spectrogram:

Using contrast/Gaussian blur

Not shown in the snippet below is the filter that applies the color scheme. Here is an example of applying Gaussian blur and then contrast to the image, blended with the original:

      <feGaussianBlur
        in="colorscheme"
        stdDeviation="1.5"
        result="blurred"
      />
      <!-- increase contrast for defined edges -->
      <feComponentTransfer
        in="blurred"
        result="contrasted"
      >
        <feFuncR
          type="linear"
          slope="1.2"
          intercept="-0.1"
        />
        <feFuncG
          type="linear"
          slope="1.2"
          intercept="-0.1"
        />
        <feFuncB
          type="linear"
          :slope="1.2"
          :intercept="-0.1"
        />
      </feComponentTransfer>
      <feBlend
        in="colorscheme"
        in2="contrasted"
        mode="overlay"
      />

And here is the resultant image:

Subjectively, the zoomed out image looks nicer/smoother to me. That might be mostly due to the noise reduction that's going on. Zoomed in on a single pulse, there's clearly still some blocky pixelation. I don't know if this filter removes any vital information for identifying bat species however.

Using feConvolveMatrix

This example uses a convolution matrix instead of the feGaussianBlur element. It similarly blends the blurred image with the original. Here's an example of the filter:

      <feConvolveMatrix
        in="colorscheme"
        out="blurred"
        :order="3"
        :kernelMatrix="
1 1 1
1 1 1
1 1 1
        "
        :divisor="9"
      />
      <!-- blend for even more refined edges -->
      <feBlend
        in="colorscheme"
        in2="blurred"
        mode="overlay"
      />

And the results:

These filters, as well as a third option that combines the two, have been implemented in the spectro-smoothing branch. The filters are defined in the template of the LayerManager.vue component, and are applied to the quad feature in geoJSUtils.ts::useGeoJS::initializeViewer. See #251 for implementation details.

[naglepuff]

See https://github.com/aashish24/contour_tools for a tool that uses marching squares to generate svg files for spectrogram contours.