3.0.3. Right click in the Layout pane (still) hides all the content from it

Hi!

I have originally reported this in the support forum few days ago. When doing a right-click in the layout pane, everything disappears.

Hi Misho,

I’ve tried this in 3.0.3 and it’s working ok on my end. Let me know you have any errors in the console from right after it all disappears.

Sorry, forgot to get the console log. It was happening on two separate installs for me.

react-dom.production.min.js:117 TypeError: Cannot read property '_type' of null
    at Function.mapToProps (cs-app.min.js:2298)
    at n (cs-app-vendor.min.js:9794)
    at p (cs-app-vendor.min.js:9804)
    at cs-app-vendor.min.js:9804
    at Object.run (cs-app-vendor.min.js:9778)
    at s.u.onStateChange (cs-app-vendor.min.js:9780)
    at Object.notify (cs-app-vendor.min.js:9767)
    at e.t.notifyNestedSubs (cs-app-vendor.min.js:9766)
    at s.u.onStateChange (cs-app-vendor.min.js:9780)
    at m (cs-app-vendor.min.js:5665)
Bg @ react-dom.production.min.js:117
Ig.f.componentDidCatch.c.callback @ react-dom.production.min.js:126
Ag @ react-dom.production.min.js:116
zg @ react-dom.production.min.js:116
qi @ react-dom.production.min.js:130
ui @ react-dom.production.min.js:133
(anonymous) @ react-dom.production.min.js:158
unstable_runWithPriority @ react.production.min.js:27
Vc @ react-dom.production.min.js:158
Sc @ react-dom.production.min.js:158
Z @ react-dom.production.min.js:156
Kc @ react-dom.production.min.js:155
ya @ react-dom.production.min.js:153
enqueueSetState @ react-dom.production.min.js:202
t.setState @ react.production.min.js:20
u.onStateChange @ cs-app-vendor.min.js:9780
notify @ cs-app-vendor.min.js:9767
t.notifyNestedSubs @ cs-app-vendor.min.js:9766
u.onStateChange @ cs-app-vendor.min.js:9780
m @ cs-app-vendor.min.js:5665
(anonymous) @ cs-app.min.js:4585
(anonymous) @ cs-app-vendor.min.js:9891
(anonymous) @ cs-app.min.js:4576
(anonymous) @ cs-app.min.js:4581
uiToggleContextMenu @ cs-app.min.js:2301
(anonymous) @ cs-app.min.js:2285
(anonymous) @ cs-app.min.js:2389
cs-app.min.js:2481 TypeError: Cannot read property '_type' of null
    at Function.mapToProps (cs-app.min.js:2298)
    at n (cs-app-vendor.min.js:9794)
    at p (cs-app-vendor.min.js:9804)
    at cs-app-vendor.min.js:9804
    at Object.run (cs-app-vendor.min.js:9778)
    at s.u.onStateChange (cs-app-vendor.min.js:9780)
    at Object.notify (cs-app-vendor.min.js:9767)
    at e.t.notifyNestedSubs (cs-app-vendor.min.js:9766)
    at s.u.onStateChange (cs-app-vendor.min.js:9780)
    at m (cs-app-vendor.min.js:5665) {componentStack: "↵    in Connect(o)↵    in l↵    in n↵    in Connect(n)↵    in Unknown↵    in a"}

I have managed to fix it by turning SG Optimizer off and back on. Clearing cache did not help, and also minification was turned off while it was happening.

Thans!

After turning the SG Optimizer off and on, It is now giving me a lots of new errors. Clearing the cache does not help. Turning it off does not help either. Not sure if these are theme related.

cs.a06e1ae.js:82 Unable to resolve color: global-color:4272616e64205365636f6e64617279 Error: Unable to parse color from string: global-color:4272616e64205365636f6e64617279
    at new l (cs-vendor.a06e1ae.js:6964)
    at l (cs-vendor.a06e1ae.js:6958)
    at n (cs.a06e1ae.js:82)
    at r.lookupSingleColor (cs.a06e1ae.js:85)
    at cs.a06e1ae.js:82
    at Array.map (<anonymous>)
    at r.lookupColor (cs.a06e1ae.js:82)
    at Object.color (cs.a06e1ae.js:4837)
    at cs.a06e1ae.js:4838
    at RegExp.[Symbol.replace] (<anonymous>)
n @ cs.a06e1ae.js:82
6cs.a06e1ae.js:82 Unable to resolve color: global-color:4272616e64205072696d617279 Error: Unable to parse color from string: global-color:4272616e64205072696d617279
    at new l (cs-vendor.a06e1ae.js:6964)
    at l (cs-vendor.a06e1ae.js:6958)
    at n (cs.a06e1ae.js:82)
    at r.lookupSingleColor (cs.a06e1ae.js:85)
    at cs.a06e1ae.js:82
    at Array.map (<anonymous>)
    at r.lookupColor (cs.a06e1ae.js:82)
    at Object.color (cs.a06e1ae.js:4837)
    at cs.a06e1ae.js:4838
    at RegExp.[Symbol.replace] (<anonymous>)
n @ cs.a06e1ae.js:82
3cs.a06e1ae.js:82 Unable to resolve color: global-color:4272616e64205365636f6e64617279 Error: Unable to parse color from string: global-color:4272616e64205365636f6e64617279
    at new l (cs-vendor.a06e1ae.js:6964)
    at l (cs-vendor.a06e1ae.js:6958)
    at n (cs.a06e1ae.js:82)
    at r.lookupSingleColor (cs.a06e1ae.js:85)
    at cs.a06e1ae.js:82
    at Array.map (<anonymous>)
    at r.lookupColor (cs.a06e1ae.js:82)
    at Object.globalColor (cs.a06e1ae.js:4837)
    at cs.a06e1ae.js:4842
    at RegExp.[Symbol.replace] (<anonymous>)
n @ cs.a06e1ae.js:82
6cs.a06e1ae.js:82 Unable to resolve color: global-color:4272616e64205072696d617279 Error: Unable to parse color from string: global-color:4272616e64205072696d617279
    at new l (cs-vendor.a06e1ae.js:6964)
    at l (cs-vendor.a06e1ae.js:6958)
    at n (cs.a06e1ae.js:82)
    at r.lookupSingleColor (cs.a06e1ae.js:85)
    at cs.a06e1ae.js:82
    at Array.map (<anonymous>)
    at r.lookupColor (cs.a06e1ae.js:82)
    at Object.globalColor (cs.a06e1ae.js:4837)
    at cs.a06e1ae.js:4842
    at RegExp.[Symbol.replace] (<anonymous>)
n @ cs.a06e1ae.js:82
3cs.a06e1ae.js:82 Unable to resolve color: global-color:4272616e64205365636f6e64617279 Error: Unable to parse color from string: global-color:4272616e64205365636f6e64617279
    at new l (cs-vendor.a06e1ae.js:6964)
    at l (cs-vendor.a06e1ae.js:6958)
    at n (cs.a06e1ae.js:82)
    at r.lookupSingleColor (cs.a06e1ae.js:85)
    at cs.a06e1ae.js:82
    at Array.map (<anonymous>)
    at r.lookupColor (cs.a06e1ae.js:82)
    at Object.color (cs.a06e1ae.js:4837)
    at cs.a06e1ae.js:4838
    at RegExp.[Symbol.replace] (<anonymous>)
n @ cs.a06e1ae.js:82
6cs.a06e1ae.js:82 Unable to resolve color: global-color:4272616e64205072696d617279 Error: Unable to parse color from string: global-color:4272616e64205072696d617279
    at new l (cs-vendor.a06e1ae.js:6964)
    at l (cs-vendor.a06e1ae.js:6958)
    at n (cs.a06e1ae.js:82)
    at r.lookupSingleColor (cs.a06e1ae.js:85)
    at cs.a06e1ae.js:82
    at Array.map (<anonymous>)
    at r.lookupColor (cs.a06e1ae.js:82)
    at Object.color (cs.a06e1ae.js:4837)
    at cs.a06e1ae.js:4838
    at RegExp.[Symbol.replace] (<anonymous>)
n @ cs.a06e1ae.js:82
jquery-migrate.min.js:2 JQMIGRATE: Migrate is installed, version 1.4.1
cs.a06e1ae.js:4434 Error: <polygon> attribute points: Expected number, "{%%{data.section…".
d @ cs.a06e1ae.js:4434
3cs.a06e1ae.js:82 Unable to resolve color: global-color:4272616e64205365636f6e64617279 Error: Unable to parse color from string: global-color:4272616e64205365636f6e64617279
    at new l (cs-vendor.a06e1ae.js:6964)
    at l (cs-vendor.a06e1ae.js:6958)
    at n (cs.a06e1ae.js:82)
    at r.lookupSingleColor (cs.a06e1ae.js:85)
    at cs.a06e1ae.js:82
    at Array.map (<anonymous>)
    at r.lookupColor (cs.a06e1ae.js:82)
    at Object.color (cs.a06e1ae.js:4837)
    at cs.a06e1ae.js:4838
    at RegExp.[Symbol.replace] (<anonymous>)
n @ cs.a06e1ae.js:82
6cs.a06e1ae.js:82 Unable to resolve color: global-color:4272616e64205072696d617279 Error: Unable to parse color from string: global-color:4272616e64205072696d617279
    at new l (cs-vendor.a06e1ae.js:6964)
    at l (cs-vendor.a06e1ae.js:6958)
    at n (cs.a06e1ae.js:82)
    at r.lookupSingleColor (cs.a06e1ae.js:85)
    at cs.a06e1ae.js:82
    at Array.map (<anonymous>)
    at r.lookupColor (cs.a06e1ae.js:82)
    at Object.color (cs.a06e1ae.js:4837)
    at cs.a06e1ae.js:4838
    at RegExp.[Symbol.replace] (<anonymous>)
n @ cs.a06e1ae.js:82
124cs.a06e1ae.js:3941 Uncaught TypeError: o.querySelectorAll(...).map is not a function
    at cs.a06e1ae.js:3941
    at cs.a06e1ae.js:3943

Hi @Misho,

Glad to hear that’s working now that the SG optimizer is disabled. The last error in that last has been fixed. I’m not quite sure what’s going on with those color errors.

Are any of the elements on that page missing Global Colors?

Hi @alexander,

no, all Global Colors are applied. Yes, very strange. I have re-tested now and there are still lots of Console errors.

I have tried to turn-off all plugins, but that doesn’t change anything. Also, the errors are seen on other pages too.
I think it was all good before turning off the SG optimizer.

I have also disabled the Supercacher’s Static cache, Dynamic cache and Memcached on the server, but that also didn’t do any change.

Thanks!

I’ve installed “Easy Theme and Plugin upgrades” and installed 3.0.4 on your site. This has resolved the querySelector errors.

For the color warnings, it just looks like a color may have been deleted at some point. I’ve recovered the color and left it as transparent which is the fallback used when a color no longer exists.

You could try setting that color to something to see what elements are set to use it. I was able to identify that it was used as the secondary particle color on the buttons in the References section, but there are still a few more places I think it’s being called.

Hi @alexander

Wow, thank you for your valuable time!

Yes, it was used on the buttons. My mistake to delete it. But I have made another mistake: I have assigned a different color to the References Buttons, and thought that it is safe to delete that color afterwards. However, the Errors have returned and now I have no idea how you have performed the magic of recovering it. :slight_smile:

I haven’t found any other place where it is assigned.

This is strange actually. Deleting Global colors despite they are assigned somewhere seems like a likely scenario. Can there be a warning or some defense mechanism that would avoid the errors?

Gotcha! No problem. I’ve actually added a script into the next version that will make this easier (still from the console) but for now you can do this:

window.csRecoverColor = function (id) {
  if (!document.querySelector('.cs-color-workspace.cs-active')) return console.warn('Please open the color manager first');
  if (!id) id = prompt('Enter the ID of the color you wish to restore');
  try {
    window.cornerstoneApp.lookup('service:store').createRecord('color-manager/selection', { id, title: 'Recovered Color', value: 'transparent' });
    console.log('Color recovered. Save colors to persist.');
  } catch (e) {
    console.warn('Unable to recover color', e);
  }
}
  1. Copy/Paste the code above into the console.
  2. Check your error message and copy the ID. Don’t include the global-block: part. Just the string of numbers and letters.
  3. Open the color manager
  4. Type this into the console and press enter: csRecoverColor('abc123') (where abc123 is the ID you want to restore.)

It is a good point that deleting assigned colors might be done from time to time. It would be difficult to track all that information across all the different contexts colors can be used, so for now I think we’ll just fallback to transparent if it gets deleted.

Worked like a charm. :slight_smile:

Thank you! :thumbsup:

Great! You’re welcome. :slight_smile:

1 Like