search

usgs-makerspace / makerspace-sandbox

Some initial R code for playing with data processing (maybe some light visualization).
Other
0 stars 5 forks source link

Transition Items #607

Open abriggs-usgs opened 4 years ago

abriggs-usgs commented 4 years ago

I (Aaron) have started to compile a list of tasks/tutorials/demonstrations that might be useful to complete before I move to Internet of Water. Please feel free to add/modify as desired. Also add your name behind the tutorials if you wish to be included.

jordansread commented 4 years ago

Could you add?

With that, was thinking that we've got tools to build svgs (including using node or R), but then there is a manual copy/pasta step into the .vue file that ends up being brittle. It would be great to know a couple of things:

abriggs-usgs commented 4 years ago

Those are very good questions, and I'm not sure that I have good answers for them. Right now I only know of one way to inject the SVG as a component, which works really well, in that it allows the SVG to be added from a file and placed into a single component tag. However, when we used that, the SVG lost the ability to resize. So, that is a large draw back (that may be related to poor implementation on my part), I have been looking into solutions. I'll dig into the other questions and see if I can find some answers.

abriggs-usgs commented 4 years ago

I'm working through some of the questions asked above, and I am working out some examples. I just want to make note here of things I come across. For the question of can we disable linting on SVG. The answer is definitely yes if we can figure out how to how to make the SVG retain their resizing abilities when loaded as a component.

We can lint ignore entire files by creating a '.eslintignore' file at the root of the project. then we can list any files in that folder that we want ignored. We can also as line comment to ignore sections.
image

jordansread commented 4 years ago

Aaron, not sure if this is helpful or not, but we were able to inject external SVG files into the DOM with svginject in the past which retained the ability to resize. Here is one example

mhines-usgs commented 4 years ago

Added myself to a handful of these, hopefully it's not too late to jump on the bandwagon. I am not sure where I am heading in the future exactly, so hopefully it's worth while for me to participate.

abriggs-usgs commented 4 years ago

Oh Megan, you just missed project setup part one and two, but Ellen had the foresight to record it. I also made a complete write up. Ellen is storing all the related files in her personal OneDrive. I'll send you the link in teams.

abriggs-usgs commented 4 years ago

As a follow up, all of the checkbox topics have been covered. There are step by step write ups for each and most have a recorded screen share that covers the demos, but be warned many of the demos are in the hour to two hour time range, so they are not for the faint of heart :).

Also, I did spend some time investigating the SVG injection issue. It seems that the NPM package that we have used to add SVG files as components, https://vue-svg-loader.js.org/, in the past does work as expected, at least with some SVG files. I tested this with Colleen's 'newer' salt front SVG animations, and when added as a component with SVG Loader, they resized as would be expected. The lack of resizing was the only issue that occurred using the Vue SVG Loader, but now I am fairly sure that the lack of resizing is related to the formatting of the SVG and not the Loader.