SandDanceReact.Viewer example chart is too small

[avilella]

Hi, I've modified the initial SandDance React example to load data from a .csv file and put the x and y values of the columns in a 2d scatterplot, with colour being the cluster_id column.

The outcome is a tiny little chart area on top, and the Legend and Select & Filter sections are below, whereas I rather have them on the right-hand side, like it is shown in the example scatterplotTest, which is not a React example. (https://microsoft.github.io/SandDance/tests/v3/umd/scatterplotTest.html).

See the image below:

How do I make the chart occupy the majority of the screen, and the Legend and Select & Filter sections on the right, like in the test (see screenshot below)?

[avilella]

See my current code:

``
// src/index.js
import * as vega from 'vega';
import React, { useEffect } from 'react';
import * as ReactDOM from 'react-dom';
import * as SandDanceReact from '@msrvida/sanddance-react';
//import * as fluentui from '@fluentui/react';
import Papa from 'papaparse';

// import "@msrvida/sanddance-explorer/dist/css/sanddance-explorer.css";
// import "./style.css";

function App() {
SandDanceReact.use(React, ReactDOM, vega);
// fluentui.initializeIcons();
// use(fluentui, React, ReactDOM, vega);
const [data, setData] = React.useState([]);
const [insight, setInsight] = React.useState({
columns: {},
scheme: "set1",
chart: "scatterplot",
view: "2d" });

const handleFileUpload = (event) => {
    const file = event.target.files[0];
    if (file) {
        Papa.parse(file, {
            header: true,
            dynamicTyping: true,
            complete: (result) => {
                const csvData = result.data;

                // Check if required columns exist in the CSV                                                                                                                                                                                                                                                                                                              
                const columns = Object.keys(csvData[0]);
                if (columns.includes("x") && columns.includes("y") && columns.includes("cluster_id")) {
                    setInsight({
                        columns: {
                            x: "x",
                            y: "y",
                            color: "cluster_id",
                            uid: "CLONE_ID"
                        },
                        scheme: "set1",
                        chart: "scatterplot",
                        view: "2d",
                        size: {
                            height: 1200,
                            width: 1200
                        }
                    });
                    setData(csvData);
                } else {
                    console.error('CSV file must contain "x", "y", and "cluster_id" columns.');
                }
            },
            error: (error) => {
                console.error('Error parsing CSV file:', error);
            }
        });
    }
};

return (
    <div id="app">                                                                                                                                                                                                                                                                                                                                                         
        ZetDance v0.1.9<input type="file" accept=".csv" onChange={handleFileUpload} />                                                                                                                                                                                                                                                                                     
        <SandDanceReact.Viewer
            data={data}
            insight={insight}
        />                                                                                                                                                                                                                                                                                                                                                                 
    </div>
);

}

ReactDOM.render(, document.getElementById('app'));

Also:

<title>SandDance React App</title>

```

Also:
package.json

{

  "name": "sanddance-react-app",

  "version": "1.0.0",

  "main": "index.js",

  "scripts": {

    "start": "webpack serve --open",

    "build": "webpack"

  },

  "keywords": [],

  "author": "",

  "license": "ISC",

  "description": "",

  "dependencies": {

    "papaparse": "^5.4.1",

    "react": "^17",

    "react-dom": "^17",

    "@fluentui/react": "^8",

    "@msrvida/sanddance-explorer": "^4.1.6",

    "@msrvida/sanddance-react": "^4.0.2",

    "react-scripts": "5.0.1",

    "vega": "^5.25.0"



  },

  "devDependencies": {

    "@babel/core": "^7.24.7",

    "@babel/preset-env": "^7.24.7",

    "@babel/preset-react": "^7.24.7",

    "babel-loader": "^9.1.3",

    "html-webpack-plugin": "^5.6.0",

    "webpack": "^5.92.1",

    "webpack-cli": "^5.1.4",

    "webpack-dev-server": "^5.0.4"

  }

}

Also:
webpack.config.js

{

  "name": "sanddance-react-app",

  "version": "1.0.0",

  "main": "index.js",

  "scripts": {

    "start": "webpack serve --open",

    "build": "webpack"

  },

  "keywords": [],

  "author": "",

  "license": "ISC",

  "description": "",

  "dependencies": {

    "papaparse": "^5.4.1",

    "react": "^17",

    "react-dom": "^17",

    "@fluentui/react": "^8",

    "@msrvida/sanddance-explorer": "^4.1.6",

    "@msrvida/sanddance-react": "^4.0.2",

    "react-scripts": "5.0.1",

    "vega": "^5.25.0"



  },

  "devDependencies": {

    "@babel/core": "^7.24.7",

    "@babel/preset-env": "^7.24.7",

    "@babel/preset-react": "^7.24.7",

    "babel-loader": "^9.1.3",

    "html-webpack-plugin": "^5.6.0",

    "webpack": "^5.92.1",

    "webpack-cli": "^5.1.4",

    "webpack-dev-server": "^5.0.4"

  }

}

[danmarshall]

Hello, noticed you commented out the style sheets. Will un-commenting those bring in the styles?

[avilella]

The chart is still small when I do, only the legend moves to the right, but the select panel disappears.

…

On Wed, Jul 3, 2024, 18:20 Dan Marshall ***@***.***> wrote: Hello, noticed you commented out the style sheets. Will un-commenting those bring in the styles? — Reply to this email directly, view it on GitHub <#710 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AABGSN4BIWL7KHV6IG57C2TZKQXFXAVCNFSM6AAAAABKJKM5QGVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDEMBWHA2DONJWGY> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[danmarshall]

Can you share a repo?