From 1a788a08670c740837af6de16728d4e48f3cb6b8 Mon Sep 17 00:00:00 2001
From: Colton Loftus <70598503+C-Loftus@users.noreply.github.com>
Date: Mon, 2 Sep 2024 22:00:32 -0400
Subject: [PATCH 01/17] start jsonld templating playground
---
docs/playground/templating.md | 9 ++
docusaurus.config.ts | 6 ++
package-lock.json | 40 ++++++++
package.json | 1 +
sidebars.ts | 6 ++
src/components/playground.tsx | 169 ++++++++++++++++++++++++++++++++++
6 files changed, 231 insertions(+)
create mode 100644 docs/playground/templating.md
create mode 100644 src/components/playground.tsx
diff --git a/docs/playground/templating.md b/docs/playground/templating.md
new file mode 100644
index 0000000..851df05
--- /dev/null
+++ b/docs/playground/templating.md
@@ -0,0 +1,9 @@
+---
+sidebarCollapsed: true
+title: ""
+sidebarCollapsible: false
+---
+
+import Playground from '@site/src/components/playground';
+
+
\ No newline at end of file
diff --git a/docusaurus.config.ts b/docusaurus.config.ts
index cf735be..8bc22b5 100644
--- a/docusaurus.config.ts
+++ b/docusaurus.config.ts
@@ -115,6 +115,12 @@ const config: Config = {
position: "left",
label: "System Architecture",
},
+ {
+ type: "docSidebar",
+ sidebarId: "PlaygroundSidebar",
+ position: "left",
+ label: "Playground",
+ },
{
href: "https://github.com/internetofwater/docs.geoconnex.us",
label: "GitHub",
diff --git a/package-lock.json b/package-lock.json
index f8ffaa1..7267266 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,6 +12,7 @@
"@docusaurus/preset-classic": "3.4.0",
"@easyops-cn/docusaurus-search-local": "^0.44.3",
"@mdx-js/react": "^3.0.0",
+ "@monaco-editor/react": "^4.6.0",
"@tippyjs/react": "^4.2.6",
"clsx": "^2.0.0",
"papaparse": "^5.4.1",
@@ -3143,6 +3144,32 @@
"react": ">=16"
}
},
+ "node_modules/@monaco-editor/loader": {
+ "version": "1.4.0",
+ "resolved": "https://registry.npmjs.org/@monaco-editor/loader/-/loader-1.4.0.tgz",
+ "integrity": "sha512-00ioBig0x642hytVspPl7DbQyaSWRaolYie/UFNjoTdvoKPzo6xrXLhTk9ixgIKcLH5b5vDOjVNiGyY+uDCUlg==",
+ "license": "MIT",
+ "dependencies": {
+ "state-local": "^1.0.6"
+ },
+ "peerDependencies": {
+ "monaco-editor": ">= 0.21.0 < 1"
+ }
+ },
+ "node_modules/@monaco-editor/react": {
+ "version": "4.6.0",
+ "resolved": "https://registry.npmjs.org/@monaco-editor/react/-/react-4.6.0.tgz",
+ "integrity": "sha512-RFkU9/i7cN2bsq/iTkurMWOEErmYcY6JiQI3Jn+WeR/FGISH8JbHERjpS9oRuSOPvDMJI0Z8nJeKkbOs9sBYQw==",
+ "license": "MIT",
+ "dependencies": {
+ "@monaco-editor/loader": "^1.4.0"
+ },
+ "peerDependencies": {
+ "monaco-editor": ">= 0.25.0 < 1",
+ "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+ "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+ }
+ },
"node_modules/@napi-rs/wasm-runtime": {
"version": "0.2.4",
"resolved": "https://registry.npmjs.org/@napi-rs/wasm-runtime/-/wasm-runtime-0.2.4.tgz",
@@ -11544,6 +11571,13 @@
"url": "https://github.com/sponsors/ljharb"
}
},
+ "node_modules/monaco-editor": {
+ "version": "0.51.0",
+ "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.51.0.tgz",
+ "integrity": "sha512-xaGwVV1fq343cM7aOYB6lVE4Ugf0UyimdD/x5PWcWBMKENwectaEu77FAN7c5sFiyumqeJdX1RPTh1ocioyDjw==",
+ "license": "MIT",
+ "peer": true
+ },
"node_modules/mrmime": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/mrmime/-/mrmime-2.0.0.tgz",
@@ -14527,6 +14561,12 @@
"url": "https://github.com/sponsors/sindresorhus"
}
},
+ "node_modules/state-local": {
+ "version": "1.0.7",
+ "resolved": "https://registry.npmjs.org/state-local/-/state-local-1.0.7.tgz",
+ "integrity": "sha512-HTEHMNieakEnoe33shBYcZ7NX83ACUjCu8c40iOGEZsngj9zRnkqS9j1pqQPXwobB0ZcVTk27REb7COQ0UR59w==",
+ "license": "MIT"
+ },
"node_modules/statuses": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz",
diff --git a/package.json b/package.json
index f1b269c..64c26f3 100644
--- a/package.json
+++ b/package.json
@@ -19,6 +19,7 @@
"@docusaurus/preset-classic": "3.4.0",
"@easyops-cn/docusaurus-search-local": "^0.44.3",
"@mdx-js/react": "^3.0.0",
+ "@monaco-editor/react": "^4.6.0",
"@tippyjs/react": "^4.2.6",
"clsx": "^2.0.0",
"papaparse": "^5.4.1",
diff --git a/sidebars.ts b/sidebars.ts
index 3e56b34..eeefba9 100644
--- a/sidebars.ts
+++ b/sidebars.ts
@@ -31,6 +31,12 @@ const sidebars: SidebarsConfig = {
dirName: "reference",
},
],
+ PlaygroundSidebar: [
+ {
+ type: "autogenerated",
+ dirName: "playground",
+ },
+ ],
};
export default sidebars;
diff --git a/src/components/playground.tsx b/src/components/playground.tsx
new file mode 100644
index 0000000..d179a84
--- /dev/null
+++ b/src/components/playground.tsx
@@ -0,0 +1,169 @@
+import React, { useState, useEffect } from 'react';
+import Editor from '@monaco-editor/react';
+
+const MONACO_EDITOR_OPTIONS = {
+ automaticLayout: true,
+ formatOnType: true,
+ formatOnPaste: true,
+};
+
+const OPTIONS_WITH_READONLY = {
+ readOnly: true,
+ automaticLayout: true,
+};
+
+const Playground = () => {
+ const [raw, setRaw] = useState('{}');
+ const [template, setTemplate] = useState('{}');
+ const [result, setResult] = useState('// Here is where your jinja template will be applied');
+ const [error, setError] = useState('');
+
+ useEffect(() => {
+ const asides = document.querySelectorAll('aside');
+ asides.forEach((aside) => {
+ aside.style.display = 'none';
+ });
+ }, []);
+
+ const updateResult = async () => {
+ try {
+ setError('');
+
+ const templateValue = template || '{}';
+ const dataValue = raw || '{}';
+
+ let parsedData;
+ try {
+ parsedData = JSON.parse(dataValue);
+ } catch (e) {
+ setError('Invalid JSON data');
+ setResult('');
+ return;
+ }
+
+ const response = await fetch('http://127.0.0.1:8000/render/', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({
+ template: templateValue,
+ data: parsedData,
+ }),
+ });
+
+ const resultJson = await response.json();
+ if (resultJson.error) {
+ setError(resultJson.error);
+ setResult('');
+ } else {
+ setResult(resultJson.result);
+ }
+ } catch (e) {
+ if (e instanceof Error && e.message.includes('NetworkError')) {
+ setError('Could not connect to the backend');
+ } else {
+ console.error(e);
+ setError('An error occurred');
+ }
+ setResult('');
+ }
+ };
+
+ const containerStyle = {
+ display: 'flex',
+ height: '80vh',
+ width: '80vw', // Ensure full viewport width
+ overflow: 'hidden',
+ margin: 0,
+ padding: 0, // Remove padding to prevent extra width
+ };
+
+ const editorContainerStyle = {
+ display: 'flex',
+ flexDirection: 'row',
+ flex: 1,
+ overflow: 'hidden',
+ };
+
+ const columnStyle = {
+ flex: 1,
+ display: 'flex',
+ flexDirection: 'column',
+ overflow: 'hidden',
+ margin: "2px"
+ };
+
+ const editorStyle = {
+ flex: 1,
+ height: 'calc(100% - 3rem)', // Adjust based on header size
+ };
+
+ const headerStyle = {
+ margin: 0,
+ textAlign: 'center',
+ };
+
+ const errorStyle = {
+ color: 'red',
+ padding: '1rem',
+ textAlign: 'center',
+ };
+
+ return (
+ <>
+
+
+
+
+
+
Raw JSON Output
+ setRaw(value)}
+ style={editorStyle}
+ />
+
+
+
+
Jinja Template
+
+
+
setTemplate(value)}
+ options={MONACO_EDITOR_OPTIONS}
+ theme="vs-dark"
+ language="jinja"
+ style={editorStyle}
+ />
+
+
+
Templated Result
+ {!error ? (
+
+ ) : (
+
{error}
+ )}
+
+
+
+ >
+
+
+ );
+};
+
+export default Playground;
+
From a35b85256c80c0f01e8dd73634957205d83f601b Mon Sep 17 00:00:00 2001
From: Colton Loftus <70598503+C-Loftus@users.noreply.github.com>
Date: Mon, 2 Sep 2024 22:29:27 -0400
Subject: [PATCH 02/17] slightly bigger font size
---
src/components/playground.tsx | 7 +++++++
1 file changed, 7 insertions(+)
diff --git a/src/components/playground.tsx b/src/components/playground.tsx
index d179a84..87a7619 100644
--- a/src/components/playground.tsx
+++ b/src/components/playground.tsx
@@ -5,11 +5,13 @@ const MONACO_EDITOR_OPTIONS = {
automaticLayout: true,
formatOnType: true,
formatOnPaste: true,
+ fontSize: 16,
};
const OPTIONS_WITH_READONLY = {
readOnly: true,
automaticLayout: true,
+ fontSize: 16,
};
const Playground = () => {
@@ -23,6 +25,11 @@ const Playground = () => {
asides.forEach((aside) => {
aside.style.display = 'none';
});
+ return () => {
+ asides.forEach((aside) => {
+ aside.style.display = '';
+ });
+ };
}, []);
const updateResult = async () => {
From 4654c4146325d5545ab4b0bf1f1f3698f74312d6 Mon Sep 17 00:00:00 2001
From: Colton Loftus <70598503+C-Loftus@users.noreply.github.com>
Date: Tue, 3 Sep 2024 09:10:38 -0400
Subject: [PATCH 03/17] first example working
---
docs/playground/templating.md | 2 +-
.../associated_assets/location_oriented.j2 | 193 ++++++++++++++++++
.../associated_assets/raw_output.json | 170 +++++++++++++++
src/components/associated_assets/readme.md | 1 +
src/components/playground.tsx | 67 +++---
5 files changed, 400 insertions(+), 33 deletions(-)
create mode 100644 src/components/associated_assets/location_oriented.j2
create mode 100644 src/components/associated_assets/raw_output.json
create mode 100644 src/components/associated_assets/readme.md
diff --git a/docs/playground/templating.md b/docs/playground/templating.md
index 851df05..3abe7d0 100644
--- a/docs/playground/templating.md
+++ b/docs/playground/templating.md
@@ -4,6 +4,6 @@ title: ""
sidebarCollapsible: false
---
-import Playground from '@site/src/components/playground';
+import Playground from '@site/src/components/Playground';
\ No newline at end of file
diff --git a/src/components/associated_assets/location_oriented.j2 b/src/components/associated_assets/location_oriented.j2
new file mode 100644
index 0000000..ccdb3aa
--- /dev/null
+++ b/src/components/associated_assets/location_oriented.j2
@@ -0,0 +1,193 @@
+{
+ "@context": {
+ "@vocab": "https://schema.org/",
+ "xsd": "https://www.w3.org/TR/xmlschema-2/#",
+ "rdfs": "http://www.w3.org/2000/01/rdf-schema#",
+ "dc": "http://purl.org/dc/terms/",
+ "dcat": "https://www.w3.org/ns/dcat#",
+ "freq": "http://purl.org/cld/freq/",
+ "qudt": "http://qudt.org/schema/qudt/",
+ "qudt-units": "http://qudt.org/vocab/unit/",
+ "qudt-quantkinds": "http://qudt.org/vocab/quantitykind/",
+ "gsp": "http://www.opengis.net/ont/geosparql#",
+ "locType": "http://vocabulary.odm2.org/sitetype",
+ "odm2var":"http://vocabulary.odm2.org/variablename/",
+ "odm2varType": "http://vocabulary.odm2.org/variabletype/",
+ "hyf": "https://www.opengis.net/def/schema/hy_features/hyf/",
+ "skos": "https://www.opengis.net/def/schema/hy_features/hyf/HY_HydroLocationType",
+ "ssn": "http://www.w3.org/ns/ssn/",
+ "ssn-system": "http://www.w3.org/ns/ssn/systems/"
+ },
+ "@id": "{{ data['@id'] }}",
+ "@type": [
+ "hyf:HY_HydrometricFeature",
+ "hyf:HY_HydroLocation",
+ {% if data['monitoringLocationType'] %}
+ "locType:{{ data['monitoringLocationType'] }}"
+ {% endif %}
+ ],
+
+
+ {% if data['monitoringLocationType'] %}
+ "hyf:HydroLocationType": "{{ data['monitoringLocationType'] }}",
+ {% endif %}
+
+ {#Was told to not worry about changing this for time being, no way to get this without a geospatial query #}
+ {#
+ "sameAs": {
+ "@id": "https://geoconnex.us/ref/gages/{{}}
+ },
+ #}
+
+ "identifier": {
+ "@type": "PropertyValue",
+ "propertyID": "USGS site number",
+ {% if data['monitoringLocationNumber'] %}
+ "value": "{{ data['monitoringLocationNumber'] }}"
+ {% endif %}
+ },
+ {% if data['name'] %}
+ "name": "{{ data['name'] }}",
+ {% endif %}
+
+ {% if data['locations'] and data['locations'][0]['description'] %}
+ "description": "{{ data['locations'][0]['description'] }}",
+ {% endif %}
+ "provider": {
+ "url": "https://waterdata.usgs.gov",
+ "@type": "GovernmentOrganization",
+ "name": "U.S. Geological Survey Water Data for the Nation"
+ },
+ {% if data['schema:geo'] %}
+ "geo": {{ data['schema:geo'] | to_json }},
+ {% endif %}
+ {% if data['gsp:hasGeometry'] %}
+ "gsp:hasGeometry": {
+ "@type": "{{ data['gsp:hasGeometry']['@type'] }}",
+ "gsp:asWKT": {{ data['gsp:hasGeometry']['gsp:asWKT'] | to_json }},
+ "gsp:crs": {
+ "@id": "http://www.opengis.net/def/crs/OGC/1.3/CRS84"
+ }
+ },
+ {% endif %}
+
+ {# Since @id is the only key in this block, I am assuming we can just exclude the entire block if it doesn't exist since the block would not provide any info #}
+ {% if data["Locations"][0]["properties"] is defined and data["Locations"][0]["properties"]["mainstemURL"] %}
+ "hyf:referencedPosition": {
+ "hyf:HY_IndirectPosition": {
+ "hyf:linearElement": {
+ {# Assumes we can hard code 0 since this template is location-oriented and thus all date is related to one location#}
+ "@id": "https://geoconnex.us/ref/mainstems/{{ data['Locations'][0]['properties']['mainstemURL'] }}"
+ }
+ }
+ },
+ {% endif %}
+
+ "subjectOf": [
+ {% for stream in data['Datastreams'] %}
+ {
+ {# Description ends up looking like the example below. However, we don't need the ID
+ or units when describing just the type of data so we split on , and use the first part #}
+ {# "Lake or reservoir water surface elevation above NGVD 1929, feet / USCE-07335390-727586146fff4717b8d772eb32388d85" #}
+ {% with typeOfData= stream['description'].split(',')[0] %}
+
+ "@type": "Dataset",
+
+ {% if data['name'] %}
+ {# We use the name since all datastreams are coming from the same location #}
+ "name": "{{data['name']}}",
+ {% endif %}
+
+ {% if stream['description'] %}
+ {# Description describes what type of data that is being collected #}
+ "description": "{{ stream["description"]}}",
+ {% endif %}
+
+ {# This is hardcoded, since it is not provided in the raw jsonld, but we can assume everything in the USGS template is from USGS#}
+ "provider": {
+ "url": "https://waterdata.usgs.gov",
+ "@type": "GovernmentOrganization",
+ "name": "U.S. Geological Survey Water Data for the Nation"
+ },
+
+ {% if data['monitoringLocationNumber'] %}
+ "url": "https://waterdata.usgs.gov/monitoring-location/{{data["monitoringLocationNumber"]}}/#parameterCode={{ stream["properties"]["ParameterCode"] }}",
+ {% endif %}
+
+ "variableMeasured": {
+ "@type": "PropertyValue",
+ "name": "{{ typeOfData }}",
+
+ {% if stream['unitOfMeasurement']['symbol'] %}
+ "description": "{{ typeOfData }} in {{ stream['unitOfMeasurement']['symbol'] }}",
+ {% endif %}
+
+
+ {#
+ If there are many types of data, we have to just search since we can't be confident
+ that it matches the wikipedia name
+ #}
+ "propertyID": "https://www.wikidata.org/w/index.php?search={{ typeOfData }}",
+ "url": "https://en.wikipedia.org/w/index.php?search={{ typeOfData }}",
+
+ {# For USGS, ['unitOfMeasurement']['name'] is not defined, so we use 'symbol' #}
+ {% if stream['unitOfMeasurement']['symbol'] %}
+ "unitText": "{{ stream['unitOfMeasurement']['symbol'] }}",
+ {% endif %}
+
+ {# These need to be hardcoded, qudt does not seem to be output by USGS with pygeoapi.
+ No clear way to map every permutation to a unique id all in jinja #}
+ {#
+ "qudt:hasQuantityKind": "qudt-quantkinds:VolumeFlowRate",
+ "unitCode": "qudt-units:FT3-PER-SEC",
+ #}
+ "measurementTechnique": "observation",
+
+ "measurementMethod": {
+
+ {# Can't say if it is a gaging station or another type since this is not provided in the raw jsonld.
+ Also do not have enough info to link to a remote URL for the doi #}
+ {# "url": "https://doi.org/10.3133/tm3A8", #}
+
+ "name": "{{ typeOfData }} Measurements",
+ "publisher": "U.S. Geological Survey"
+ }
+ },
+ {% if stream['phenomenonTime'] %}
+ "temporalCoverage": "{{ stream['phenomenonTime'] }}",
+ {% endif %}
+
+ {# dc and dcat are not provided in the raw jsonld, must be hardcoded #}
+ {#"dc:accrualPeriodicity": "freq:daily",
+ "dcat:temporalResolution": {"@value":"PT15M","@type":"xsd:duration"},
+ #}
+
+ "distribution": [
+ {
+ "@type": "DataDownload",
+ "name": "USGS Instantaneous Values Service",
+
+ {#`sites` is the same as the Thing id but the hyphen is replaced by a colon. if there is no hyphen, then you just pipe in the thing id #}
+ {# We then need to remove the surrounding '' to make sure the query is properly formatted #}
+ "contentUrl": "https://waterservices.usgs.gov/nwis/iv/?sites={{data['id'] | replace("-", ":" ) | replace("'", "")}}¶meterCd={{ stream["properties"]["ParameterCode"] }}&format=rdb",
+ "encodingFormat": [
+ "text/tab-separated-values"
+ ],
+ "dc:conformsTo": "https://pubs.usgs.gov/of/2003/ofr03123/6.4rdb_format.pdf"
+ },
+ {
+ "@type": "DataDownload",
+ "name": "USGS SensorThings API",
+ "contentUrl": "https://labs.waterdata.usgs.gov/sta/v1.1/Datastreams('{{stream['@iot.id']}}')?$expand=Thing,Observations",
+ "encodingFormat": [
+ "application/json"
+ ],
+ "dc:conformsTo": "https://labs.waterdata.usgs.gov/docs/sensorthings/index.html"
+ }
+ ]
+ }
+ {% if not loop.last %},{% endif %}
+ {% endwith %}
+ {% endfor %}
+ ]
+}
\ No newline at end of file
diff --git a/src/components/associated_assets/raw_output.json b/src/components/associated_assets/raw_output.json
new file mode 100644
index 0000000..39d4cf0
--- /dev/null
+++ b/src/components/associated_assets/raw_output.json
@@ -0,0 +1,170 @@
+{
+ "type":"Feature",
+ "id":"'AR008-331856091114601'",
+ "properties":{
+ "@iot.selfLink":"https://labs.waterdata.usgs.gov/sta/v1.1/Things('AR008-331856091114601')",
+ "name":"AR008-331856091114601",
+ "description":"Well",
+ "Locations":[
+ {
+ "@iot.selfLink":"https://labs.waterdata.usgs.gov/sta/v1.1/Locations('8416841e-2d1b-11ec-ac1b-a32405a27bb1')",
+ "@iot.id":"8416841e-2d1b-11ec-ac1b-a32405a27bb1",
+ "name":"AR008-331856091114601",
+ "description":"Well",
+ "encodingType":"application/vnd.geo+json",
+ "location":{
+ "type":"Point",
+ "coordinates":[
+ -91.1969333333333,
+ 33.3169611111111
+ ]
+ }
+ }
+ ],
+ "Datastreams":[
+ {
+ "@iot.selfLink":"https://labs.waterdata.usgs.gov/sta/v1.1/Datastreams('177000bd9f6c45e5909c1729e4aab7b0')",
+ "@iot.id":"177000bd9f6c45e5909c1729e4aab7b0",
+ "name":"177000bd9f6c45e5909c1729e4aab7b0",
+ "description":"Flow rate, well / AR008-331856091114601-177000bd9f6c45e5909c1729e4aab7b0",
+ "observationType":"Instantaneous",
+ "unitOfMeasurement":{
+ "name":"UNKNOWN",
+ "symbol":"US Gal/min",
+ "definition":""
+ },
+ "observedArea":{
+ "type":"Point",
+ "coordinates":[
+ -91.1969333,
+ 33.3169611
+ ]
+ },
+ "phenomenonTime":"2024-08-16T09:15:00Z/2024-08-26T16:00:00Z",
+ "properties":{
+ "Thresholds":[
+ {
+ "Name":"Operational limit (minimum)",
+ "Type":"ThresholdBelow",
+ "Periods":[
+ {
+ "EndTime":"9999-12-31T23:59:59.9999999+00:00",
+ "StartTime":"0001-01-01T00:00:00.0000000+00:00",
+ "SuppressData":true,
+ "ReferenceValue":-0.01,
+ "ReferenceValueToTriggerDisplay":null
+ }
+ ],
+ "ReferenceCode":"Operational limit - low-Public"
+ },
+ {
+ "Name":"Operational limit (maximum)",
+ "Type":"ThresholdAbove",
+ "Periods":[
+ {
+ "EndTime":"9999-12-31T23:59:59.9999999+00:00",
+ "StartTime":"0001-01-01T00:00:00.0000000+00:00",
+ "SuppressData":true,
+ "ReferenceValue":20000,
+ "ReferenceValueToTriggerDisplay":15000
+ }
+ ],
+ "ReferenceCode":"Operational limit - high-Public"
+ }
+ ],
+ "ParameterCode":"00058",
+ "StatisticCode":"00011"
+ }
+ },
+ {
+ "@iot.selfLink":"https://labs.waterdata.usgs.gov/sta/v1.1/Datastreams('9aa77f35cea344a4a0e5715e05d057c3')",
+ "@iot.id":"9aa77f35cea344a4a0e5715e05d057c3",
+ "name":"9aa77f35cea344a4a0e5715e05d057c3",
+ "description":"Precipitation, total, inches / AR008-331856091114601-9aa77f35cea344a4a0e5715e05d057c3",
+ "observationType":"Instantaneous",
+ "unitOfMeasurement":{
+ "name":"in",
+ "symbol":"in",
+ "definition":""
+ },
+ "observedArea":{
+ "type":"Point",
+ "coordinates":[
+ -91.1969333,
+ 33.3169611
+ ]
+ },
+ "phenomenonTime":"2024-08-16T09:15:00Z/2024-08-26T16:00:00Z",
+ "properties":{
+ "ParameterCode":"00045"
+ }
+ }
+ ],
+ "Locations@iot.navigationLink":"https://labs.waterdata.usgs.gov/sta/v1.1/Things('AR008-331856091114601')/Locations",
+ "HistoricalLocations@iot.navigationLink":"https://labs.waterdata.usgs.gov/sta/v1.1/Things('AR008-331856091114601')/HistoricalLocations",
+ "Datastreams@iot.navigationLink":"https://labs.waterdata.usgs.gov/sta/v1.1/Things('AR008-331856091114601')/Datastreams",
+ "state":"Arkansas",
+ "county":"Chicot County",
+ "country":"United States of America",
+ "mapScale":24000,
+ "stateCode":"AR",
+ "wellDepth":"80.0",
+ "agencyCode":"AR008",
+ "countryFIPS":"US",
+ "hydrologicUnit":"08050002",
+ "decimalLatitude":33.3169611111111,
+ "decimalLongitude":-91.1969333333333,
+ "monitoringLocationUrl":"https://waterdata.usgs.gov/monitoring-location/331856091114601",
+ "monitoringLocationName":"16S01W10CC1 CH-32 WU",
+ "monitoringLocationType":"Well",
+ "monitoringLocationNumber":"331856091114601",
+ "locationHUCTwelveDigitCode":"080500020302",
+ "decimalLatitudeStandardized":33.3169611111111,
+ "decimalLongitudeStandardized":-91.1969333333333
+ },
+ "geometry":{
+ "type":"Point",
+ "coordinates":[
+ -91.1969333333333,
+ 33.3169611111111
+ ]
+ },
+ "links":[
+ {
+ "type":"application/json",
+ "rel":"root",
+ "title":"The landing page of this server as JSON",
+ "href":"http://localhost:5000?f=json"
+ },
+ {
+ "type":"text/html",
+ "rel":"root",
+ "title":"The landing page of this server as HTML",
+ "href":"http://localhost:5000?f=html"
+ },
+ {
+ "rel":"self",
+ "type":"application/geo+json",
+ "title":"This document as JSON",
+ "href":"http://localhost:5000/collections/USGS/Things/items/'AR008-331856091114601'?f=json"
+ },
+ {
+ "rel":"alternate",
+ "type":"application/ld+json",
+ "title":"This document as RDF (JSON-LD)",
+ "href":"http://localhost:5000/collections/USGS/Things/items/'AR008-331856091114601'?f=jsonld"
+ },
+ {
+ "rel":"alternate",
+ "type":"text/html",
+ "title":"This document as HTML",
+ "href":"http://localhost:5000/collections/USGS/Things/items/'AR008-331856091114601'?f=html"
+ },
+ {
+ "rel":"collection",
+ "type":"application/json",
+ "title":"USGS Things",
+ "href":"http://localhost:5000/collections/USGS/Things"
+ }
+ ]
+}
\ No newline at end of file
diff --git a/src/components/associated_assets/readme.md b/src/components/associated_assets/readme.md
new file mode 100644
index 0000000..545d364
--- /dev/null
+++ b/src/components/associated_assets/readme.md
@@ -0,0 +1 @@
+This folde rcontains assets that are useful for the playground component
\ No newline at end of file
diff --git a/src/components/playground.tsx b/src/components/playground.tsx
index 87a7619..096b98d 100644
--- a/src/components/playground.tsx
+++ b/src/components/playground.tsx
@@ -1,17 +1,26 @@
import React, { useState, useEffect } from 'react';
import Editor from '@monaco-editor/react';
+import raw_output from './associated_assets/raw_output.json';
+
+const FONT_SIZE = 13
const MONACO_EDITOR_OPTIONS = {
automaticLayout: true,
formatOnType: true,
formatOnPaste: true,
- fontSize: 16,
+ fontSize: FONT_SIZE,
+ minimap: {
+ enabled: false,
+ },
};
const OPTIONS_WITH_READONLY = {
readOnly: true,
automaticLayout: true,
- fontSize: 16,
+ fontSize: FONT_SIZE,
+ minimap: {
+ enabled: false,
+ },
};
const Playground = () => {
@@ -48,37 +57,32 @@ const Playground = () => {
return;
}
- const response = await fetch('http://127.0.0.1:8000/render/', {
- method: 'POST',
- headers: { 'Content-Type': 'application/json' },
- body: JSON.stringify({
- template: templateValue,
- data: parsedData,
- }),
- });
-
- const resultJson = await response.json();
- if (resultJson.error) {
- setError(resultJson.error);
- setResult('');
- } else {
- setResult(resultJson.result);
- }
+ // Here, you would handle the templating logic, but we're skipping it as there's no remote fetching.
+ const templatedResult = JSON.stringify(parsedData, null, 2); // Example operation
+ setResult(templatedResult);
} catch (e) {
- if (e instanceof Error && e.message.includes('NetworkError')) {
- setError('Could not connect to the backend');
- } else {
- console.error(e);
- setError('An error occurred');
- }
+ console.error(e);
+ setError('An error occurred');
setResult('');
}
};
+ const handleExampleChange = async (event) => {
+ const selectedOption = event.target.value;
+
+ if (selectedOption === 'location') {
+
+ const location_oriented_template = await fetch("https://raw.githubusercontent.com/cgs-earth/sta-pygeoapi/main/templates/usgs-location-oriented.j2")
+
+ setTemplate( await location_oriented_template.text());
+ setRaw(JSON.stringify(raw_output, null, 2));
+ }
+ };
+
const containerStyle = {
display: 'flex',
height: '80vh',
- width: '80vw', // Ensure full viewport width
+ width: '90vw', // Ensure full viewport width
overflow: 'hidden',
margin: 0,
padding: 0, // Remove padding to prevent extra width
@@ -96,7 +100,7 @@ const Playground = () => {
display: 'flex',
flexDirection: 'column',
overflow: 'hidden',
- margin: "2px"
+ margin: '2px',
};
const editorStyle = {
@@ -117,10 +121,12 @@ const Playground = () => {
return (
<>
-