missing ">" in breadcrumbs

[kswang1029]

frontend dev
origin/dev 5303424 2020-01-28 16:03:37 CST

[veggiesaurus]

Our dev server still has the arrows. Perhaps a build issue?

[veggiesaurus]

@kswang1029 I still can't reproduce this anywhere. Can you test again?

[kswang1029]

Hmm, this still happens with the dev server at ASIAA
http://carta.asiaa.sinica.edu.tw/frontend/dev/?socketUrl=wss://carta.asiaa.sinica.edu.tw/socketdev

Also happens in the Mac alpha test package.

[veggiesaurus]

Assigning to @ajm-asiaa as it appears to be a build issue. I wonder if it's the version of BlueprintJS being used?

edit: tried 3.19 an 3.23, both look fine

[ajm-ska]

@veggiesaurus Did you test it with npm run start or npm run build? When I do npm run start and check localhost:3000, I do see the symbols. But when I do npm run build and deploy it properly, then I do not see the symbols. Would you have any idea what could be different?

[ajm-ska]

I checked back through all the older frontend dev commits (These are all done with npm run build).
It still worked at: origin/dev c54e057 2020-01-16 13:49:06 CST
http://carta.asiaa.sinica.edu.tw/frontend/c54e057/?socketUrl=wss://carta.asiaa.sinica.edu.tw/socket

But wasn't working by: origin/dev 05e27f1 2020-01-22 22:34:01 CST
http://carta.asiaa.sinica.edu.tw/frontend/05e27f1/?socketUrl=wss://carta.asiaa.sinica.edu.tw/socket

Going through all the commits between those, the point where the problem started appears to be origin/jason/json_schema 2ffd8c5 2020-01-21 09:18:42 CST
http://carta.asiaa.sinica.edu.tw/frontend/2ffd8c5/?socketUrl=wss://carta.asiaa.sinica.edu.tw/socket
Maybe it is be from adding "@blueprintjs/table": "^3.8.2", ?
05e27f1

Or maybe not... I just removed that line, did npm run build again and put the built frontend in place. @veggiesaurus Do you see anything in that commit that could stop the symbols appearing when we do npm run build?

[ajm-ska]

I found a workaround to fix this issue, but it is not ideal.

The problem is that when we do the production build, a bunch of NaN appear in the .bp3-breadcrumbs background field. An easy way to see this problem after doing npm run build is to open the build/static/css/main.*.css file and search for "M10" or "NaN". You will probably see the offending line like this:

d='M10.71 7.29l-4-4a1.003 1.003 0 0-1.42 1.42 
NaNl.46 NaNL5.3 NaNC5.11 NaN 5 NaN 5 NaNa1.003 1.003 0 1.71.71 NaN NaNlNaN NaNcNaN NaN NaN NaN NaN NaN NaN NaN NaN NaN NaN NaNz'

However, the same line in the main.*.css.map file appears to be fine:

d='M10.71 7.29l-4-4a1.003 1.003 0 00-1.42 
1.42L8.59 8 5.3 11.29c-.19.18-.3.43-.3.71a1.003 1.003 0 001.71.71l4-4c.18-.18.29-.43.29-.71 0-.28-.11-.53-.29-.71z'

So my workaround is to simply manually edit the built .css file and replace the bad line with the good line from the .css.map file. After that, the ">" magically appear again in the Filebrowser!

I know there seems to be similar issues discussed on Github. For example, I tried doing the fix mentioned here, but it didn't seem to work. Unless I was doing it wrong. I'm not an expert with the frontend. Maybe @veggiesaurus has a better insight as to what could be causing this. If not, perhaps it is a bug with blueprintjs that might be fixed in a new version and meanwhile we can just use this workaround for the CARTA v1.3 release?

(Thanks to @duidae for letting me know about Chrome's Inspect element mouse cursor selector option)

[veggiesaurus]

ok, now it's happening for me as well when I build a production version. Very odd.

I tried to apply their fix as well, but I think their issue is actually a separate one. @ajm-asiaa perhaps for now, just write a script to apply a patch tot that file? It might be a sass-loader bug

[veggiesaurus]

@ajm-asiaa I think this is the issue: https://blueprintjs.com/docs/#core/classes.namespacing

We should be importing the SCSS files at build time. This requires us to update our create-react-app. See #527 for some details

edit: nevermind, I think that's only if you want to use custom namespaces

[kswang1029]

fixed via #1222