Add vue skeleton to host map #26

cnell-usgs · 2021-07-07T17:02:56Z

Built out vue application to host svg map output from data processing pipeline. The app is currently a single component GWU.vue that imports anomaly_peaks.svg using vue-svg-loader. This allows us to directly inject the svg into the DOM and use it like inline svg, including being manipulated with css and js. vue-svg-loader runs the svg through svgo when the page is built which includes some default optimization steps, helping with #18.

This also adds a step to the pipeline to copy svg exports into vue, include the date range in the file name, and generate a csv with each of the file paths and dates. That way, down the line we can use it to select between different time periods. It's easier to do this from R than with vue/webpack.

Because of the issue with NA's noted in #25, the vue app currently depends on a modified svg with those elements deleted. The map is not yet animated, I think we are at a point that requires some back and forth between R and Vue to find the best way to do so.

Should produce this!

lindsayplatt

Cool stuff! Did my best to look over the Vue/SVG content, but spend more time on the pipeline part. I think there are some changes we need to make to ensure that the pipeline will rebuild appropriately, but the dynamic filenames make it tricky. Still stewing over the best way to do that, but if you want to move forward, let's capture those pipeline quirks in an issue and come back to them.

Eventually, I would like us to not commit those big .svg files (especially since we will be adding more and more as time goes on). I think pushing the SVGs to S3 and then somehow injecting them (or copy/moving them) during the Jenkins build is what we should do so that they can still be publicly accessible.

lindsayplatt · 2021-07-08T14:36:11Z

3_visualize.yml

+  3_visualize/out/svg_list.csv:
+    command: list_svg_files(
+      target_name, 
+      I("src/assets"))


I like the cleverness of creating a list_svg_files() function to pattern match and find svg files, but with how scipiper works, this target will only build once and will not update even if new SVGs are added to src/assets. I think it would be better to set it up, where you pass in the files that you want to make it into your list explicitly.

^ though, in trying to figure out what to do, I realized that the filenames are created dynamically. This is making me wonder if we need a task table with dates instead ...

What if there was an added input here that depends on the current time period dates from the config file so it is rebuilt every time that changes?

Removed this process for now. Similar to below, this seems like it will depend on how we store and access data in the jenkins build, and can be explored when that is resolved.

lindsayplatt · 2021-07-08T14:37:57Z

3_visualize/src/build_peaks_svg.R

+  # Copy to vue
+  file.copy(out_file, 
+            sprintf("src/assets/anomaly_peaks_%s_%s.svg",
+                    gsub("-", "", min(data_in$Date)),
+                    gsub("-", "", max(data_in$Date))),  
+            overwrite = TRUE)


It's good practice for each target function to only create one file. If you were just looking at the makefile, you would have no idea that a second file gets created here. Let's move this code chunk to its own function and be its own target.

This is tricky though because of how we want to name these files dynamically. I wonder if moving and listing SVGs to a CSV is the best way.

I've separated this function out into a new target now, and removed the dynamic naming for the time being. The reason for the dynamic naming was to be able to create an archive of past dates when we re-generate the viz, but this can be addressed later when we have sorted out how to store and access the data associated with past time periods, as I expect that will influence how this is done.

lindsayplatt · 2021-07-08T14:39:18Z

public/index.html

+      <meta property="og:url" content="https://labs.waterdata.usgs.gov/visualizations/gw-conditions/index.html#/">
+      <meta property="og:title" content="U.S. Groundwater Conditions">
+      <meta property="og:description" content="">
+      <meta property="og:image" content="https://labs.waterdata.usgs.gov/visualizations/gw-conditions/SnowToFlowMetacard.jpg">


Should we make an issue or something to remember to change this?

This is on the viz "final steps to release" checklist which I can add to the issues.

Oh no worries if it is captured elsewhere!

lindsayplatt · 2021-07-08T14:39:37Z

public/index.html

+      { "@context": "http://www.schema.org",
+        "@type": "WebSite", "name": "U.S. Groundwater Conditions",
+        "url": "https://labs.waterdata.usgs.gov/visualizations/gw-conditions/index.html#/",
+        "about": "The low down on flow down low",


lindsayplatt · 2021-07-08T14:41:50Z

src/components/Error404.vue

+        Whoa, we have a problem.
+      </h1>
+    </div>
+    <p>
+      In techie terms, what has happened is called a 404 Error.
+    </p>
+    <p>
+      It means the web page for which you are looking cannot be found in the
+      place where you told the computer to look. Perhaps this elusive item really does not exist or perhaps while manually
+      entering the URL something didn't go quite right. Either way, a good option is to give it one more shot.
+    </p>
+    <p>
+      If that fails, the other option is to click the button below, which will take you to the {{ title }} main page. You can probably find the
+      item for which you are looking there.
+    </p>
+    <router-link to="/">
+      <button
+        v-ga="$ga.commands.trackName.bind(this, 'Button - 404', 'click', 'user went from error page to index')"
+        class="usa-button--inverse"
+      >
+        {{ title }} main page
+      </button>
+    </router-link>
+    <p>
+      Good luck, and sorry for the inconvenience.


lol this is such a cute error

lindsayplatt · 2021-07-08T14:43:21Z

src/components/GWL.vue

+<template>
+  <section>
+    <div id="title-container">
+      <h1>U.S. Groundwater conditions</h1></div>


capital "C"?

cnell-usgs · 2021-07-08T15:24:03Z

Not committing big svgs: Sounds good. I don't think it will be necessary to have multiple svgs in the long term, but this depends on how we animate it. What seems most likely is that we will have a single svg that draws the map and contains the site locations etc, but the data for each iteration will be stored in csv or other data format and bound to the svg. That will still require the same consideration about where to keep the data. It seems like we need a way to stash the data files we want in s3 from the R pipeline, and then pull them down from s3 in vue or jenkins build. This might be useful https://github.com/jenkinsci/pipeline-aws-plugin

I think it should be a goal to be able to revisit past years through a drop down menu and select the appropriate data to play the animation. Unsure of how challenging that will be to do, but in theory we store the data on S3 in theory and trigger pulling past data through selection, with the default being the most recent dates. This can also be put on the back burner until we are looking to generate the next time period.

cnell-usgs · 2021-07-08T16:48:15Z

I've captured the R to Vue considerations here #27

lindsayplatt · 2021-07-08T18:19:25Z

3_visualize.yml

+  src/assets/anomaly_peaks.svg:
+    command: send_to_vue(
+      target_name,
+      in_file = '3_visualize/out/anomaly_peaks.svg')


not necessary but one final thing is that you don't need a separate function here. You can simply make file.copy() the function for the target.

src/assets/anomaly_peaks.svg: command: file.copy( to = target_name, from = '3_visualize/out/anomaly_peaks.svg')

lol totally

just need to use to = and from = because target_name has to be passed in as the first arg

Also need overwrite = TRUE in the file.copy function so this works as expected, otherwise it silently doesn't replace the to target even when the from file has changed. Remember this issue @lindsayplatt ?

Apparently I still haven't learned my lesson! Thanks @jread-usgs. They had that in the custom function below but I neglected to carry it over to this suggestion :)

Add vue skeleton to host map

cnell-usgs added 11 commits July 6, 2021 21:14

shell app structure

8869bf8

build js env

54fbd17

reduce clutter

77d49f8

generate list of svg files for selection

718a213

add peaks svg to vue assets

9cc7d9f

add path data to vue to help d3 animation

893cb2f

feed vue list of svg files from R

f9c9f43

define peaks with defs

7ba5621

remove test transitions

f24df08

delete extra components

844ca84

drop carousel

b4070b7

cnell-usgs requested a review from lindsayplatt July 7, 2021 17:03

adding back vuecarousel for mystery dependency

4e16ad3

cnell-usgs mentioned this pull request Jul 7, 2021

Peaks map - style exploration #15

Closed

lindsayplatt reviewed Jul 8, 2021

View reviewed changes

capital C

106952e

cnell-usgs mentioned this pull request Jul 8, 2021

structuring pipeline from R to Vue #27

Open

cnell-usgs added 3 commits July 8, 2021 12:26

separate file copy to new target

b76493c

drop dynamic file naming but keeping dummy svg for now

58b014e

remove list of svg files

9f1cdf5

lindsayplatt reviewed Jul 8, 2021

View reviewed changes

lindsayplatt approved these changes Jul 8, 2021

View reviewed changes

cnell-usgs added 2 commits July 8, 2021 15:53

use file copy as command

164cf97

add to yml

2cfc9b5

cnell-usgs merged commit d30bf38 into DOI-USGS:main Jul 8, 2021

cnell-usgs added a commit to cnell-usgs/gw-conditions that referenced this pull request Jul 14, 2021

Merge pull request DOI-USGS#26 from collnell/vue-map

d77ef4b

Add vue skeleton to host map

cnell-usgs deleted the vue-map branch July 14, 2021 16:43

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add vue skeleton to host map #26

Add vue skeleton to host map #26

cnell-usgs commented Jul 7, 2021 •

edited

Loading

lindsayplatt left a comment

lindsayplatt Jul 8, 2021

lindsayplatt Jul 8, 2021

cnell-usgs Jul 8, 2021 •

edited

Loading

cnell-usgs Jul 8, 2021

lindsayplatt Jul 8, 2021

lindsayplatt Jul 8, 2021

cnell-usgs Jul 8, 2021

lindsayplatt Jul 8, 2021

cnell-usgs Jul 8, 2021

lindsayplatt Jul 8, 2021

lindsayplatt Jul 8, 2021

lindsayplatt Jul 8, 2021

lindsayplatt Jul 8, 2021

cnell-usgs commented Jul 8, 2021

cnell-usgs commented Jul 8, 2021

lindsayplatt Jul 8, 2021

cnell-usgs Jul 8, 2021

lindsayplatt Jul 8, 2021

jordansread Jul 8, 2021

lindsayplatt Jul 8, 2021

Add vue skeleton to host map #26

Add vue skeleton to host map #26

Conversation

cnell-usgs commented Jul 7, 2021 • edited Loading

lindsayplatt left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

cnell-usgs Jul 8, 2021 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

cnell-usgs commented Jul 8, 2021

cnell-usgs commented Jul 8, 2021

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

cnell-usgs commented Jul 7, 2021 •

edited

Loading

cnell-usgs Jul 8, 2021 •

edited

Loading