Can't replicate the Plotly Express Python Scatter Plot in Plotly JS

Hi, so I have made a scatter plot in using Plotly Express, shown below:

fig = px.scatter(x=x, y=y, color=color, symbol = symbol,
                title = 'Patient Health Plot', 
                 labels = {'color':'Patient', 'symbol':'Time','size':'Severity', '0':labels['0'], '1':labels['1']}, 
                 size = size)

Here each data is in the form of a Numpy array. I am working on a project where I have to plot the data using PlotlyJS on a react app (I know Dash would be the one stop solution, but my teammate :confused: is working on a react app). So I have created a flask api which sends all of the data as a json, so that we can plot the same on Frontend using PlotlyJS.

However, I am unable to replicate the entire graph in PlotlyJS, I’ve searched a lot in documentation, but could not find a help, neither in Stackoverflow

Here is the code in JS till now:

import React, { Component } from 'react'
import './page.css'
import Plotly from "plotly.js-basic-dist";
import createPlotlyComponent from "react-plotly.js/factory";
const Plot = createPlotlyComponent(Plotly);

export default class PCA extends Component {
  render() {
    return (
      <div className='PCA'>
              x: [-5.691238139127018,
              y: [0.078247758751456,
              hovertemplate: '<br><b>Patient</b>: %{marker.color}<br>' +
                '<br><b>Severity</b>: <b>%{marker.size}</b>'+
                '<br><b>Time</b>: <b>%TODO</b>',
              text: ["Text A", "Text B", "Text C", "Text D", "Text E"],
              showlegend: false,  
              mode: 'markers',
              type: 'scatter',
              marker: {
              size:[0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.6306122448979591, 0.7530612244897958, 0.3857142857142857, 1.0999999999999999, 0.5897959183673469, 0.6306122448979591, 0.1, 0.7530612244897958],
              color: ["1","2","3","4","6","11","12","14","1","2","3","4","6","11","12","14"]
          layout={{ width: 1200, height: 600, title: 'Patient Health Plot' }}

The Issues I am facing are as follows:

  1. The markers are not visible after giving the size
  2. I want DISCRETE colors, here it is giving continuous. I learnt in Plotly Express Python that by converting the numbers into strings, we can get discrete colors, but I can not get the same result here in Plotly JS
  3. SYMBOLS: In Plotly Express, I passed an array into symbol: (which consisted of two entities S and E, so it automatically assigned Circle and Diamond to it as shown in the first picture), but I am unable to do it in plotlyJS.

Kindly help, I am really stuck into replicating the same in PlotlyJS, thanks.