OVE: primer.color not working

[manulera]

Hi @tnrich, I was playing around with the primer functionality for the app, and I noticed that the color property of the primers does not seem to work. Also, it seems that what is set in a given editor is applied to other editors as well. In my dummy example I have the component below, where all primers are shown in red, even if they have different colors.

I noticed the same happens in the hosted demo when loading a tesela json with different colors in primers.

hosted example: https://ove-playground.netlify.app/
Full code example: https://github.com/manulera/ove_playground

function EditorComparison() {
    // Read a genbank file and display it in the main editor
    const { parsedSequence } = genbankToJson(`LOCUS       Untitled_Sequence           9 bp    DNA     circular SYN 03-JUN-2024
    FEATURES             Location/Qualifiers
         misc_feature    complement(2..6)
                         /label="Mr Feature"
         misc_feature    2..6
                         /label="Mr Feature 2"
    ORIGIN      
            1 gagagagag     
    //`)[0];
    // Change the strand and circularity of the sequence based on props
    const processedSequence = tidyUpSequenceData(parsedSequence);
    processedSequence.primers = [
        {

            type: "primer_bind",
            strand: -1,
            forward: false,
            name: "T7",
            start: 1,
            end: 3,
            annotationTypePlural: "primers",
            id: "1",
            color: "blue" // <<<<
        },
        {

            type: "primer_bind",
            strand: 1,
            forward: true,
            name: "blah",
            start: 2,
            end: 4,
            annotationTypePlural: "primers",
            id: "2",
            color: "red" // <<<<
        },
    ];
    const store = useStore();
    // Rendering code
    const nodeRef = React.useRef(null);
    React.useEffect(() => {
        const editorProps = {
            sequenceData: processedSequence,
            ...defaultMainEditorProps,
        };
        updateEditor(store, 'mainEditor', editorProps);
        editorProps.sequenceData.primers.forEach(p => (p.color = 'green')) // <<<<
        updateEditor(store, 'mainEditor2', editorProps);
    }, [parsedSequence]);

    return (
        <div className="App">
            <Editor editorName='mainEditor' height='400'/>
            <Editor editorName='mainEditor2' height='400'/>
        </div>
    );
}

[tnrich]

@manulera do you think you can tinker with the code and try to come up with a fix for this issue? Hopefully won't be too crazy of a fix?

[manulera]

Ok! Will have a look. I was wondering if it was a known issue.

[manulera]

Well, that was easier than anticipated!