index.qmd

---
format: 
  html:
    grid:
      body-width: 1400px
      margin-width: 20px
      sidebar-width: 20px
---

```{ojs}
//| echo: false
//| output: false
headervars=["year","index","timeseries","metric","SEup","SElo"]
headervarsmon=["time","index","timeseries","metric","SEup","SElo"]
data = FileAttachment("data/items_meta.json").json()
pis=data.pis
esr_year=data.esr_year
last_year=data.last_year
name = pis.map(obj => obj.name);
indx=name.indexOf(pi)
components=pis[indx].components
```


::: {.panel-input}

```{ojs}
//| echo: false

viewof pi = Inputs.select(name,{value:name[0], label: "Data Provider" });

viewof component = Inputs.select(components,{format: x => x.name, label: "Component" });
```

:::

::: {.panel-tabset .nav-tabs}

## View Indicators

::: {.callout-note collapse="true" style="width: 60%;"}
## [Use this page to check your current metadata *(click to expand)* ]{style="font-weight: normal;"}

*  Choose a data provider **above** (and component if data falls under more than one component category)
*  Select each indicator on the left **below** to see the current indicator metadata
    + Is your metadata correct?
        - If so, there's no need to download last year's metadata
    + Does your metadata need updating?
        - If so: go to tab 2, "Download Last Year", to download a csv file of your current metadata
*  Confused? See the [work flow diagram](work_flow1.html)
    
:::


::: {layout="[[1],[1,1]]"}

```{ojs}
//| echo: false

html`
			<div>
				<div><span>Metadata for <span class="bold">${m.Title}</span>:</span></div><br>
				${m.default_figure != ""  ? html `<div><img class="blm" src="${m.default_figure}"></iron-image></div>` : html `<div>No image found for this indicator</div>`}
</div>`

```

::: {.scrolling}

```{ojs}
//| echo: false

viewof indicator=Inputs.radio(component.indices,{value: component.indices[0]})

```

:::

```{ojs}
//| echo: false

meta = await FileAttachment("data/CCIEA_metadata.csv").csv();
filtered = meta.filter(metadata =>{
   return metadata.Title===indicator && metadata.Component_Section===component.name
});
meta_download = meta.filter(metadownload=>{
   return metadownload.PI_ID===pi && metadownload.Component_Section===component.name
});

downloadColumns = ['ID', 'Name', 'Funds'];

m=filtered[0]
		function year(longdate){
			var datestr=String(longdate);
			if(datestr)return (datestr.replace("-01-01T00:00:00Z",""));
			}
		function yesno(flag){
			return (flag==1) ? "yes" : "no";
			}
		function geterddapurl(id,queryparam,value,variable,type){
			var erddaploc='https://oceanview.pfeg.noaa.gov/erddap/tabledap/';
			var query='';
			if(queryparam!==''&&value!==''){
				query='&'+queryparam+'="'+value+'"';
				if(queryparam=="latitude")query='&'+queryparam+'='+value;
				}
			var url=erddaploc+id+'.'+type+'?time,'+variable+query;
			if(type.search(/png/i)>=0||type.search('graph')>=0){url+='&.draw=lines';}
			return url;
			}


html`
			<div>
				<div><span class="bold">Component: </span><span>${m.Component_Section}</span></div>
				<div><span class="bold">Subcomponent: </span><span>${m.Subcomponent}</span></div>
				<div><span class="bold">Dataset Title: </span><span>${m.Dataset_Title}</span></div>
				<div><span class="bold">Indicator Title: </span><span>${m.Title}</span></div>
				<div><span class="bold">Indicator Long Name: </span><span>${m.Long_variable_name}</span></div>
				<div><span class="bold">Background Info: </span><span><a href="${m.Background_Info}" target="_blank">${m.Background_Info}</a></span></div>
				<div><span class="bold">Institution: </span><span>${m.Institution}</span></div>
				<div><span class="bold">Units: </span><span>${m.Units}</span></div>
				<div>
				${m.region ? html `<span class="bold">Region: </span><span>${m.region}</span>` : html ``}
				${m.latitude ? html `<span class="bold">Latitude: </span><span>${m.latitude} N</span>` : ``}
				${m.latitude2 ? html `<span class="bold"> - </span><span>${m.latitude2} N</span>` : ``}
				${m.longitude ? html `<span class="bold">Longitude: </span><span>${m.longitude} E</span>` : ``}
				${m.longitude2 ? html `<span class="bold"> - </span><span>${m.longitude2}</span>` : ``}
				</div>
				<div>
				${m.sampling_frequency ? html `<span class="bold">Sampling frequency: </span><span>${m.Sampling_frequency}</span>` : ``}
				</div>
				<div>
				${m.Sampling_frequency ? html `<span class="bold">Sampling frequency: </span><span>${m.Sampling_frequency}</span>` : ``}
				</div>
				<div>
				${m.scientific_name ? html `<span class="bold">Scientific name: </span><span>${m.scientific_name}</span>` : ``}
				</div>
				<div>
				${m.Source_Data ? html `<span class="bold">Source Data: </span><span>${m.Source_Data}</span>` : ``}
				</div>
				<div>
				${m.Additional_Calculations ? html `<span class="bold">Additional Calculations: </span><span>${m.Additional_Calculations}</span>` : ``}
				</div>
				<div>
				${m.filename ? html `<span class="bold">PI filename: </span><span>${m.filename}</span>` : ``}
				</div>
				<div>
				${m.year_begin ? html `<span class="bold">Date range: </span><span>${year(m.year_begin)} - ${year(m.year_end)}</span>` : ``}
				</div>
				<div>
				${m.min ? html `<span class="bold">Indicator range: </span><span>min: ${m.min} max: ${m.max}</span>` : ``}
				</div>
				<div>
				<span class="bold">Serve this data for CCIEA? </span><span>${yesno(m.currently_served)}</span> <span class="bold">Whale Entanglement dataset? </span><span>${yesno(m.whale_entanglement_flag)}</span> <span class="bold">Salmon web page? </span><span>${yesno(m.salmon_web_flag)}</span>
				</div>
				<div>
				${m.no_download_flag ? html `<span class="bold">No download, private data</span>`
					: html `<span class="bold">ERDDAP data links:</span> <span>(ERDDAP dataset id: ${m.ERDDAP_Dataset_ID}) </span>
						&nbsp;|&nbsp;<span><a class="noline" href='${geterddapurl(m.ERDDAP_Dataset_ID,m.ERDDAP_query_parameter,m.ERDDAP_query_value,m.ERDDAP_variable_name,"htmlTable")}' target='_blank'>View data as html</a></span>
						&nbsp;|&nbsp;<span><a class="noline" href='${geterddapurl(m.ERDDAP_Dataset_ID,m.ERDDAP_query_parameter,m.ERDDAP_query_value,m.ERDDAP_variable_name,"csv")}' target='_blank'>Download a csv file</a></span>
						&nbsp;|&nbsp;<span><a class="noline" href='${geterddapurl(m.ERDDAP_Dataset_ID,m.ERDDAP_query_parameter,m.ERDDAP_query_value,m.ERDDAP_variable_name,"html")}' target='_blank'>ERDDAP link</a></span>
					`}
				</div>
				<div>
				${m.last_metadata_update ? html `<span class="bold">Last netadata update: </span><span>${m.last_metadata_update}</span>` : ``}
				
				${m.last_data_update ? html `<span class="bold">Last data update: </span><span>${m.last_data_update}</span>` : ``}
				</div>
			</div>
        `
```

:::

<!--- Metadata for: ${m.Title}

* *Subcomponent:* ${m.Subcomponent}
* *Dataset Title:*  ${m.Dataset_Title}
* *Institution:*  ${m.Institution}  -->


## Download Last Year

::: {.callout-note collapse="true" style="width: 60%;"}
## [Use this page to (optionally) download previous data and metadata *(click to expand)*]{style="font-weight: normal;"}

*  **Metadata**: download a csv file of your current metadata if it needs updating
    + Edit the csv file as needed, but
        - Please keep the column headers as they are.
        - Avoid special characters. We may be able to deal with them but they can cause various issues
        - If you import the csv file into a spreadsheet application (ie Excel) please export back out as a csv file
    + After you edit the metadata, go to tab 3 "Upload This Year" to go to a Google Drive folder where you can upload the new (csv) metadata


* **Data**: you can either:
    + download last year's files and manually update them, or use them as a template for this year (click the button to go to a Google Drive folder where your data from last year is available)
    + or just upload new files (go to tab 3 "Upload This Year")

:::


```{ojs}
//| echo: false
html`<h3>View and edit current metadata and ${last_year} data for:  ${pis[indx].name}</h3>
<div class="sml"><i>Use this page to download csv files of current data and/or metadata and edit as needed.</i></div>
<br><i>Current metadata:</i><br>`

//last_meta='https://oceanview.pfeg.noaa.gov/erddap/tabledap/CCIEA_metadata.csv?dataset_title,indicator_title,long_variable_name,units,info_URL,institution,region,latitude,max_latitude,longitude,max_longitude,sampling_frequency,source_data_summary,additional_calculations,cciea_timeseries_id&currently_served=1&principal_investigator_id="'+pis[indx].id+'"'
downloadcolumns1 = ['Dataset_Title', 'Title','Long_variable_name','Units','Background_Info','Institution','region','latitude','latitude2','longitude','longitude2','Sampling_frequency','Source_Data','Additional_Calculations','CCIEA_timeseries_ID','serve_flag','PI_ID'];
//downloadcolumns = ['Dataset_Title', 'Title'];
subsetdata = meta_download.map(obj => {
  const newObj = {};
  downloadcolumns1.forEach(key => {
   if (obj.hasOwnProperty(key)) {
      newObj[key] = obj[key];
    }
  });
  return newObj;
});
viewof download = Inputs.table(subsetdata,{select:false, rows: 5})
```

```{ojs}
//| echo: false
html`<br><div class="sml"><i>Directly download a csv file of the above current metadata for editing:</i></div>`

metafile="CCIEA_metadata_"+pis[indx].name+".csv"
import {downloadButton} from "@jeremiak/buttons-that-download-json-as-csv"
downloadButton(subsetdata,metafile)

//viewof lastmeta = Inputs.button("Download "+last_year+" Metadata",{value: pis[indx].this_year, reduce: () => window.open(last_meta)})

```


```{ojs}
//| echo: false
html`<br><br><i>Open the Google Drive folder containing ${pis[indx].name} ${last_year} data:</i>`

viewof lastyear = Inputs.button("Download "+last_year+" Data",{value: pis[indx].last_year, reduce: () => window.open("https://drive.google.com/drive/folders/"+pis[indx].last_year,"_blank")})
```

## Upload This Year

::: {.callout-note collapse="true" style="width: 60%;"}
## [Use this page to upload metadata, data and other files *(click to expand)*]{style="font-weight: normal;"}

* Upload your new data and/or metadata
    + When your data or metadata is ready (either the updated previous files or new files), this tab directs you to go to a Google Drive folder where you can upload this year's data and (optionally) edited metadata, both into the same folder
* Before you upload, please check your files to make sure they can be automatically ingested
    + Please name your files as in the list of acceptable file names shown
    + Browse to the data file you want to upload
        - a table of your data will appear
        - below the table are the results of basic checks of your files. This tool checks for
            1. Is it a csv file?
            1. Does it follow the CCIEA file name convention listed in the table for your files?
            2. Do all the column follow the CCIEA convention?
                a. time column named"year" for yearly data and "time" for monthly data
                b.
:::

```{ojs}
//| echo: false
//| output: false

file_naming = FileAttachment("data/cciea_naming_conventions.json").json()
filenames = file_naming.filter(files =>{
   return files.id==pis[indx].id
});
temp = filenames[0].files
newfiles=temp.filter(files =>{
   return files.newname !== null && files.title !== null
});
```

```{ojs}
//| echo: false

html`<h3>Upload ${pis[indx].name} ${esr_year} data and metadata</h3>`

html`<h5><i>1. Please name your files as follows:</i></h5>`
viewof file_conventions = Inputs.table(newfiles,{header:{title:"Dataset Title",newname:"CCIEA filename convention"},select: false, rows: 5})
```

```{ojs}
//| echo: false
html`<hr><p><h5><i>2. Check your csv data file:</i></h5></p>`

viewof csvfile = Inputs.file({accept: ".csv", required: true})

newfile = csvfile.csv({typed: true})
columns = Object.keys(newfile[0])
filename=csvfile.name
monthly = filename.search("_M.csv")>0 || filename.search("Monthly")>0

Inputs.table(newfile,{select: false, format:{year: x => x.toLocaleString("en-US").replace(/\,/,''), time: (x) => { return typeof x === 'number' ? x.toLocaleString("en-US").replace(/\,/,'') : x.toISOString().substr(0,10)}}})

html`<hr>`

html`<h5><i>Checking file:</i> ${filename}:</h5>`

html`<p><h5><i>We are checking for the following:</i></h5>`

html` Does it follow the ${pis[indx].name} filename convention?`
allowednames = newfiles.map(obj => obj.newname);

{return allowednames.includes(filename)==true ? html`<span class="yes">yes</span>` : html`<span class="no">no</span>`}

html` Is the time column named <b>${headervars[0]}</b> for yearly data or <b>${headervarsmon[0]}</b> for monthly data?`;

{
if(monthly==true)return columns.includes(headervarsmon[0])==true ? html`<span class="yes">yes</span>` : html`<span class="no">no</span>`
if(monthly==false)return columns.includes(headervars[0])==true ? html`<span class="yes">yes</span>` : html`<span class="no">no</span>`
}

html` Is the indicator value column named <b>${headervars[1]}</b>?`

{return columns.includes(headervars[1])==true ? html`<span class="yes">yes</span>` : html`<span class="no">no</span>`}

html` Is there a column named <b>${headervars[2]}</b> describing each indicator?`

{return columns.includes(headervars[2])==true ? html`<span class="yes">yes</span>` : html`<span class="no">no</span>`}


```

```{ojs}
//| echo: false
html`<br><p><h5><i>3. If your files all pass the check, go the Google Drive folder for uploading your data:</i></h5></p>`

viewof thisyear = Inputs.button("Upload "+esr_year+" data and metadata",{value: pis[indx].this_year, reduce: () => window.open("https://drive.google.com/drive/folders/"+pis[indx].upload,"_blank")})
//url="https://drive.google.com/drive/folders/"+last
//html`<a href=${url} target=_blank>${url}</a>`

ind_url="https://oceanview.pfeg.noaa.gov/erddap/tabledap/CCIEA_metadata.json?&currently_served=1&indicator_title="+'"'+encodeURIComponent(indicator)+'"'

html`<br><p><i>Note that you can also place other files such as images and text you want to share with CCIEA in this folder</i></p>`


```



:::