Styles? Am I missing something?

[sacdallago]

Hey @MercifulCode ,

I saw you updated quite a few things. Cool.

I'll keep it simple: I wanna visualize a PDB file (stored somewhere) in a react app I'm writing. I noticed the rewamped NGL component here. I did exactly as written there

import React from 'react';
import {NGLContainer} from 'bioblocks-viz';

function NGL({fetchURL}) {

    return (
        <NGLContainer
            experimentalProteins={[]}
            predictedProteins={['http://localhost:3030/C1901/pdbs/C1901_mixed/final.pdb']}
        />
    )


}

export default NGL;

but the results are not as expected:

The good: the PDB shows up :) The bad: it's a bit all messed up :(

Looking forward for any suggestions :)

[sacdallago]

Oh, and for completeness, here's what popped up right after I added the component to console:

Reducer 'bioblocks/secondaryStructure/hovered already exists, not replacing
index.js:148 Reducer 'bioblocks/secondaryStructure/selected already exists, not replacing
index.js:148 Reducer 'bioblocks/pdb already exists, not replacing
index.js:148 Reducer 'bioblocks/residuePair already exists, not replacing
index.js:148 Reducer 'bioblocks/secondaryStructure/hovered already exists, not replacing
index.js:148 Reducer 'bioblocks/secondaryStructure/selected already exists, not replacing
index.js:148 Reducer 'bioblocks/pdb already exists, not replacing
index.js:148 Reducer 'bioblocks/residuePair already exists, not replacing
index.js:148 Reducer 'bioblocks/secondaryStructure/hovered already exists, not replacing
index.js:148 Reducer 'bioblocks/secondaryStructure/selected already exists, not replacing
index.js:148 Reducer 'bioblocks/pdb already exists, not replacing
index.js:148 Reducer 'bioblocks/residuePair already exists, not replacing
index.js:1 Warning: Using UNSAFE_componentWillReceiveProps in strict mode is not recommended and may indicate bugs in your code. See https://fb.me/react-unsafe-component-lifecycles for details.

* Move data fetching code or side effects to componentDidUpdate.
* If you're updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. Learn more at: https://fb.me/react-derived-state

Please update the following components: t
console.<computed> @ index.js:1
printWarning @ react-dom.development.js:88
error @ react-dom.development.js:60
push../node_modules/react-dom/cjs/react-dom.development.js.ReactStrictModeWarnings.flushPendingUnsafeLifecycleWarnings @ react-dom.development.js:11359
flushRenderPhaseStrictModeWarningsInDEV @ react-dom.development.js:23112
commitRootImpl @ react-dom.development.js:22396
unstable_runWithPriority @ scheduler.development.js:653
runWithPriority$1 @ react-dom.development.js:11039
commitRoot @ react-dom.development.js:22381
finishSyncRender @ react-dom.development.js:21807
performSyncWorkOnRoot @ react-dom.development.js:21793
(anonymous) @ react-dom.development.js:11089
unstable_runWithPriority @ scheduler.development.js:653
runWithPriority$1 @ react-dom.development.js:11039
flushSyncCallbackQueueImpl @ react-dom.development.js:11084
flushSyncCallbackQueue @ react-dom.development.js:11072
scheduleUpdateOnFiber @ react-dom.development.js:21199
dispatchAction @ react-dom.development.js:15660
(anonymous) @ App.js:19
Promise.then (async)
fetchData @ App.js:19
async function (async)
fetchData @ App.js:18
(anonymous) @ App.js:26
commitHookEffectListMount @ react-dom.development.js:19731
commitPassiveHookEffects @ react-dom.development.js:19769
callCallback @ react-dom.development.js:188
invokeGuardedCallbackDev @ react-dom.development.js:237
invokeGuardedCallback @ react-dom.development.js:292
flushPassiveEffectsImpl @ react-dom.development.js:22853
unstable_runWithPriority @ scheduler.development.js:653
runWithPriority$1 @ react-dom.development.js:11039
flushPassiveEffects @ react-dom.development.js:22820
(anonymous) @ react-dom.development.js:22699
workLoop @ scheduler.development.js:597
flushWork @ scheduler.development.js:552
performWorkUntilDeadline @ scheduler.development.js:164
index.js:1 Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of RefFindNode which is inside StrictMode. Instead, add a ref directly to the element you want to reference. Learn more about using refs safely here: https://fb.me/react-strict-mode-find-node
    in a (created by t)
    in t (created by n)
    in RefFindNode (created by Ref)
    in Ref (created by t)
    in t (created by t)
    in t (created by n)
    in div (created by t)
    in t (created by n)
    in div (created by t)
    in t (created by n)
    in div (created by t)
    in t (created by n)
    in div (created by n)
    in n (created by t)
    in div (created by t)
    in div (created by t)
    in t (created by t)
    in t (created by n)
    in n (created by t)
    in div (created by Ko)
    in Ko (created by t)
    in div (created by Qo)
    in Qo (created by t)
    in t (created by A)
    in A
    in c
    in Unknown (at NGL.js:7)
    in NGL (at App.js:45)
    in div (at App.js:40)
    in div (at App.js:32)
    in div (at App.js:30)
    in App (at src/index.js:9)
    in StrictMode (at src/index.js:8)