Question 266531 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Having trouble displaying correct calculated values? (React JS Redux Store)

After fetching Data I set it to my redux store, I send the data to my plot function that uses library react Plotly.js which calculates the data and plots it. I have a table component that renders the plot based on "Barcodes", the thing is if I were to select a different barcode and go back to the original it does not contain the same values. It seems to mutate the original array, even if I do a deep copy it still mutates the original data. I fixed this problem using localStorage but now I’m getting data that exceeds the amount localStorage can handle so I’m going back to using redux state. I’ve tried creating a NEW state containing the barcodes with already calculated data but results are the same.

This is my useEffect which fetchs data from store and sends data to plotly function.

useEffect(() => {
    try {
        dispatch(setBarcodeCoveragePlotIsLoading(true));
        setBarcodeCoveragePlotDataPNG(undefined);

        var exists = state.barcode_coverage_plots.filter(f => f.runid === Utils.getRunIdWithoutCamera(state.runId));
        if (exists.length > 0 && exists[0].data !== undefined) {
            if (exists[0].data !== undefined) {
                dispatch(setBarcodeCoveragePlotIsLoading(false));
                var dataByBarcode = exists[0].data.data.filter(f => f.barcode === selectedBarcode);
                if (dataByBarcode && dataByBarcode.length > 0) {
                    var bc = RenderBCPlots.PlotBarcodeCoveragePlot(state.runId, dataByBarcode[0].data, dataByBarcode[0].barcode, false);
                    setBarcodeCoveragePlotData([bc]);
                    var rl = RenderReadLengthPlots.RenderReadLengthBarcodeDetailsPlot(dataByBarcode[0].data, state.runId, selectedBarcode);
                    setBarcodeDetailsReadLengthPlot(rl);
                }
            } else {
                setBarcodeCoveragePlotDataPNG(undefined);
                setRl3PlotData(undefined);
                dispatch(setBarcodeCoveragePlotIsLoading(false));
            }
        }
        else {
            setBarcodeCoveragePlotDataPNG(undefined);
            setRl3PlotData(undefined);
        }
    } catch {
        setBarcodeCoveragePlotDataPNG(undefined);
        setRl3PlotData(undefined);
    }
}, [state.barcode_coverage_plots, selectedBarcode]);

// Barcode table header click handler, it updates state selectedBarcode

const handleQtableHeaderClick = barcode => {
    setSelectedBarcode(barcode);
}

// Returning component

{(selectedBarcode && barcodeCoveragePlotData !== undefined && barcodeCoveragePlotData.length > 0) &&
    barcodeCoveragePlotData.map((item, i) => {
        if (item !== 'object' && item !== undefined) {
            return (
                <Col lg={6} key={`BCJSON${(i + 1) * 4}`} style={{ marginTop: 15 }}>
                    <Row>
                        <Col lg={12} key={`BCJSON${(i + 1) * 2}`}>
                            <RenderPlot
                                id={`BCJSON${i}`}
                                key={`BCJSON${(i + 1) * 3}`}
                                data={item.data !== undefined && item.data}
                                layout={item.layout !== undefined && item.layout}
                                config={item.config !== undefined && item.config}
                                isLoading={state.is_barcode_coverage_plot_loading}
                                type={'rounded'}
                                width={'100%'}
                                height={400}
                            />
                        </Col>
                    </Row>
                </Col>
            );
        }
    })
}
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Updated code that works @Victor

        useEffect(() => {
    try {
        dispatch(setBarcodeCoveragePlotIsLoading(true));
        setBarcodeCoveragePlotDataPNG(undefined);

        var exists = state.barcode_coverage_plots.filter(f => f.runid === Utils.getRunIdWithoutCamera(state.runId));
        if (exists.length > 0 && exists[0].data !== undefined) {
            if (exists[0].data !== undefined) {
                if (exists[0].data.type === 'from_file') {
                    setBarcodeCoveragePlotDataPNG(exists[0].data.data);
                }
                else if (exists[0].data.type === 'from_db') {
                    var bcAll = [];
                    var tt = exists[0].data.data.filter(f => f.barcode === selectedBarcode);
                    if (tt && tt.length > 0) {
                        //setReadLengthBaseQualityPlotData(tt[0].data);
                        if (tt[0].data) {
                            var data = tt[0].data.bqx;
                            if (data && data.length > 0) {
                                try {
                                    var q30 = data.map(m => m.slice(30, 60).reduce((a, b) => a + b)).reduce((a, b) => a + b);
                                    var q60 = data.map(m => m.slice(0, 60).reduce((a, b) => a + b)).reduce((a, b) => a + b);
                                    var res = q30 / q60;
                                    setTotalBasesValue(parseInt(res * 100));
                                }
                                catch {
                                    setTotalBasesValue(undefined);
                                }
                                var rl3 = RenderReadLengthPlots.RenderReadLengthBaseQualityPlot(data, state.runId, state.by_camera_value_global, selectedBarcode);
                                setRl3PlotData(rl3);
                                dispatch(setBarcodeCoveragePlotIsLoading(false));
                            }
                            else setRl3PlotData(undefined);
                        }
                        else setRl3PlotData(undefined);
                    }
                    else setRl3PlotData(undefined);
                    dispatch(setBarcodeCoveragePlotIsLoading(false));
                    var dataByBarcode = exists[0].data.data.filter(f => f.barcode === selectedBarcode);
                    if (dataByBarcode && dataByBarcode.length > 0) {
                        renderCalcData(dataByBarcode)
                        var rl = RenderReadLengthPlots.RenderReadLengthBarcodeDetailsPlot(dataByBarcode[0].data, state.runId, selectedBarcode);
                        setBarcodeDetailsReadLengthPlot(rl);
                    }
                }
                else {
                    setBarcodeCoveragePlotDataPNG(undefined);
                    setRl3PlotData(undefined);
                    dispatch(setBarcodeCoveragePlotIsLoading(false));
                }
            }
        }
        else {
            setBarcodeCoveragePlotDataPNG(undefined);
            setRl3PlotData(undefined);
        }
    }
    catch {
        setBarcodeCoveragePlotDataPNG(undefined);
        setRl3PlotData(undefined);
    }
}, [state.barcode_coverage_plots, state.calculate_coverage_data, selectedBarcode, state.runId]);

const renderCalcData = data => {
    try {
        if(data){
            try {
                setBarcodeCoveragePlotData(undefined);
                let exists = state.calculate_coverage_data?.filter(x => x.barcode === selectedBarcode);
                if(exists[0].calculatedData !== undefined && exists.length > 0){
                    if(exists[0].calculatedData !== undefined){
                        let gcData = [];
                        var bc = RenderBCPlots.PlotBarcodeCoveragePlot(state.runId, exists[0].calculatedData, exists[0].barcode, false);
                        setBarcodeCoveragePlotData([bc]);
                        exists[0].calculatedData.forEach(element => {
                            let key = element.genome;
                            let sum = element.data;
                            if (key === 'GC 10-20' || key === 'GC 20-30' || key === 'GC 70-80' || key === 'GC 80-90') {
                                gcData.push({ genome: key, median: sum.median, p25: sum.q1, p75: sum.q3 });
                            }
                        }); 
                        setGcBeasTableData(gcData);
                    }
                } else setBarcodeCoveragePlotData(undefined);
                
            } catch {
                setBarcodeCoveragePlotData(undefined);
            }
        } else setBarcodeCoveragePlotData(undefined);
    } catch {
        setBarcodeCoveragePlotData(undefined);
        setGcBeasTableData(undefined);
    }
};

  2. 0

    Can you show us your data asignation in the store?
    I understand your problem is your data is mutated when you change your plot view, I think if you are setting it in a store attribute you could be replacing the first data so you can try using destructuring assignment, but I would like to see the assignation in the store for be sure.
    Another option is you are calling an api for obtain data and it has async issues.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search