fix: violin plot x-axis labels misalignment (#123)

Closes Violin plot axis issue of #99

### Developer Checklist (Definition of Done)

**Issue**

- [x] All acceptance criteria from the issue are met
- [x] Tested in latest Chrome/Firefox

**UI/UX/Vis**

- [x] Requires UI/UX/Vis review
  - [x] Reviewer(s) are notified @dvdanielamoitzi 
  - [ ] Review has occurred (_link to notes_)
  - [ ] Feedback is included in this PR
  - [ ] Reviewer(s) approve of concept and design

**Code**

- [x] Branch is up-to-date with the branch to be merged with, i.e.,
develop
- [x] Code is cleaned up and formatted
- [ ] Unit tests are written (frontend/backend if applicable)
- [ ] Integration tests are written (if applicable)

**PR**

- [x] Descriptive title for this pull request is provided (will be used
for release notes later)
- [x] Reviewer and assignees are defined
- [x] Add type label (e.g., *bug*, *feature*) to this pull request
- [x] Add release label (e.g., `release: minor`) to this PR following
[semver](https://semver.org/)
- [x] The PR is connected to the corresponding issue (via `Closes #...`)
- [x] [Summary of changes](#summary-of-changes) is written


### Summary of changes

- Violin plot axis are now properly aligned

### Screenshots


https://github.com/datavisyn/visyn_core/assets/115616380/956441b1-d0f8-4b4f-a9a7-b1c05cb876b5

### Additional notes for the reviewer(s)

-  N/A

src/vis/violin/ViolinVis.tsx

@@ -1,8 +1,7 @@
 import { Stack } from '@mantine/core';
 import * as d3v7 from 'd3v7';
 import uniqueId from 'lodash/uniqueId';
-import * as React from 'react';
-import { useEffect, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { useAsync } from '../../hooks';
 import { PlotlyComponent, PlotlyTypes } from '../../plotly';
 import { Plotly } from '../../plotly/full';
@@ -14,8 +13,9 @@ import { IViolinConfig } from './interfaces';
 
 export function ViolinVis({ config, columns, scales, dimensions, selectedList, selectedMap, selectionCallback }: ICommonVisProps<IViolinConfig>) {
   const { value: traces, status: traceStatus, error: traceError } = useAsync(createViolinTraces, [columns, config, scales, selectedList, selectedMap]);
+  const [clearTimeoutValue, setClearTimeoutValue] = useState(null);
 
-  const id = React.useMemo(() => uniqueId('ViolinVis'), []);
+  const id = useMemo(() => uniqueId('ViolinVis'), []);
 
   const [layout, setLayout] = useState<Partial<Plotly.Layout>>(null);
 
@@ -50,22 +50,41 @@ export function ViolinVis({ config, columns, scales, dimensions, selectedList, s
     }
   };
 
+  // NOTE: @dv-usama-ansari: This is an alternative way to delay the resize of plotly plots, but the dependencies of the `useCallback` are unknown if the function is wrapped in lodash `debounce`.
+  // const resizePlotly = useCallback(
+  //   debounce((plotDiv) => {
+  //     Plotly.Plots.resize(plotDiv);
+  //   }),
+  //   [],
+  // );
+
   useEffect(() => {
     const plotDiv = document.getElementById(`plotlyDiv${id}`);
     if (plotDiv) {
-      Plotly.Plots.resize(plotDiv);
+      // NOTE: @dv-usama-ansari: This is a hack to update the plotly plots on resize.
+      //  The `setTimeout` is used to pass the resize function to the next event loop, so that the plotly plots are rendered first.
+      const n = setTimeout(() => Plotly.Plots.resize(plotDiv));
+      setClearTimeoutValue(n);
     }
-  }, [id, dimensions]);
+  }, [id, dimensions, traces]);
+
+  // NOTE: @dv-usama-ansari: Clear the timeout on unmount.
+  useEffect(() => {
+    return () => {
+      if (clearTimeoutValue) {
+        clearTimeout(clearTimeoutValue);
+      }
+    };
+  }, [clearTimeoutValue]);
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (!traces) {
       return;
     }
 
     const innerLayout: Partial<Plotly.Layout> = {
       showlegend: true,
       legend: {
-        // @ts-ignore
         itemclick: false,
         itemdoubleclick: false,
       },
@@ -84,9 +103,7 @@ export function ViolinVis({ config, columns, scales, dimensions, selectedList, s
       shapes: [],
     };
 
-    setLayout({ ...layout, ...beautifyLayout(traces, innerLayout, layout, true) });
-    // WARNING: Do not update when layout changes, that would be an infinite loop.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+    setLayout((prev) => ({ ...prev, ...beautifyLayout(traces, innerLayout, prev, true) }));
   }, [traces]);
 
   return (