diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml index 487eb5458d8..a7e86f92ad1 100644 --- a/.github/workflows/deploy.yml +++ b/.github/workflows/deploy.yml @@ -16,9 +16,9 @@ jobs: - uses: actions/setup-node@v4 with: - node-version: latest - cache: 'npm' - registry-url: 'https://registry.npmjs.org' + node-version: latest + cache: 'npm' + registry-url: 'https://registry.npmjs.org' - name: Get dist files uses: actions/cache@v4 @@ -30,8 +30,8 @@ jobs: id: get-docs-cache uses: actions/cache@v4 with: - path: docs - key: docs-${{ inputs.cache_sha }} + path: docs + key: docs-${{ inputs.cache_sha }} - name: Add docs folder to dist if: steps.get-docs-cache.outputs.cache-hit == 'true' @@ -48,15 +48,15 @@ jobs: - name: Publish to NPM if: github.repository == 'ramp4-pcar4/ramp4-pcar4' && startsWith(github.ref, 'refs/tags/v') run: | - TAG_VERSION=${GITHUB_REF#refs/tags/v} - PACKAGE_VERSION=$(node -p "require('./package.json').version") - if [ "$TAG_VERSION" != "$PACKAGE_VERSION" ]; then - npm version --allow-same-version --no-git-tag-version $TAG_VERSION - fi + TAG_VERSION=${GITHUB_REF#refs/tags/v} + PACKAGE_VERSION=$(node -p "require('./package.json').version") + if [ "$TAG_VERSION" != "$PACKAGE_VERSION" ]; then + npm version --allow-same-version --no-git-tag-version $TAG_VERSION + fi - npm publish + npm publish env: - NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }} + NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }} - uses: actions/github-script@v6 name: Post link to demo for PR's @@ -69,6 +69,11 @@ jobs: repo: context.repo.repo, body: `Your demo site is ready! 🚀 + Enhanced Testing: + Samples: https://${{github.repository_owner}}.github.io/ramp4-pcar4/${{github.head_ref}}/demos/enhanced-samples.html + Catalogue: https://${{github.repository_owner}}.github.io/ramp4-pcar4/${{github.head_ref}}/demos/enhanced-all.html + + Legacy Testing: Main: https://${{github.repository_owner}}.github.io/ramp4-pcar4/${{github.head_ref}}/ Catalogue: https://${{github.repository_owner}}.github.io/ramp4-pcar4/${{github.head_ref}}/demos/index-all.html Samples: https://${{github.repository_owner}}.github.io/ramp4-pcar4/${{github.head_ref}}/demos/index-samples.html` diff --git a/.vscode/launch.json b/.vscode/launch.json index 94ec952234b..736c84b19de 100644 --- a/.vscode/launch.json +++ b/.vscode/launch.json @@ -5,7 +5,7 @@ "type": "chrome", "request": "launch", "name": "Launch Chrome", - "url": "https://localhost:5173/demos/index-samples.html", // If your vite server launches at 127.0.0.1, update the url to 127.0.0.1:5173. + "url": "https://localhost:5173/demos/enhanced-samples.html", // If your vite server launches at 127.0.0.1, update the url to 127.0.0.1:5173. "webRoot": "${workspaceFolder}/src", "sourceMapPathOverrides": { "webpack:///src/*": "$(webRoot)/*" diff --git a/README.md b/README.md index e2fe2c526a1..dd51fb57484 100644 --- a/README.md +++ b/README.md @@ -44,8 +44,8 @@ npm ci ```sh npm run dev ``` - -Open `https://localhost:5173/demos/index-samples.html` in your browser. +Current Samples: `https://localhost:5173/demos/enhanced-samples.html`. +Legacy Samples: `https://localhost:5173/demos/index-samples.html`. #### Serve via `http` @@ -123,6 +123,6 @@ During build, the `public` folder contents are placed into the `dist` folder. ### Demo Builds -The demos of the most recent build are available at https://ramp4-pcar4.github.io/ramp4-pcar4/main/demos/index-all.html. +The demos of the most recent build are available at https://ramp4-pcar4.github.io/ramp4-pcar4/main/demos/enhanced-all.html. Demo builds are automatically generated for pull requests if you are a member of the [ramp4-pcar4 organization](https://github.com/orgs/ramp4-pcar4/people) and have your visibility set to public. diff --git a/demos/enhanced-all.html b/demos/enhanced-all.html new file mode 100644 index 00000000000..a77eedd4a64 --- /dev/null +++ b/demos/enhanced-all.html @@ -0,0 +1,126 @@ + + + R4MP Enhanced Samples Yellow Pages + + + +

RAMP 4 Enhanced Samples Catalogue

+

Classic Samples

+

Are found here.

+ +

Simple Samples

+

+ Samples with no fancy configuration. Useful for testing the basics. +

+ + +

Fancy Samples

+

Samples with gnarlier configuration.

+ + +

Respect for Apps

+

+ Maps that are currently being used on real sites, demonstrated with + RAMP4. Note that some not all the features on the real sites are + currently supported. +

+ + +

Various Templates

+

Maps that are embedded in pages with different templates.

+ + + diff --git a/demos/enhanced-samples.html b/demos/enhanced-samples.html new file mode 100644 index 00000000000..0c6af02d8b0 --- /dev/null +++ b/demos/enhanced-samples.html @@ -0,0 +1,859 @@ + + + + + + + Enhanced RAMP4 Samples + + + + + + +
+
+ + + + + + diff --git a/demos/enhanced-scripts/000-template.js b/demos/enhanced-scripts/000-template.js new file mode 100644 index 00000000000..3de8fdfc723 --- /dev/null +++ b/demos/enhanced-scripts/000-template.js @@ -0,0 +1,46 @@ +/* +This file is not linked to a test. Use it to copy for a fresh test script. +The two methods must exist and be exported, regardless if they are used. +*/ + +/* +Test ##: Description +- test thing one +- test thing two +*/ + +/* +Utils guide. Delete after script is copied and finalized. +Update when new util methods get added. + +// adds a layer to both languages +addLayer(layerConfig) + +// adds a layer to the config of the given language key (en, fr) +addLayerLang: (layerConfig, langKey) + +// adds layer & root basic legend entry for both languages +addLayerLegend(layerConfig) + +// adds layer & root basic legend entry for given language (en, fr) +addLayerLegendLang(layerConfig, langKey) + +// adds a legend config to the root level legend entry for both languages +addLegend(legendConfig) + +// adds a legend config to the root level legend entryof the given language key (en, fr) +addLegendLang(legendConfig, langKey) + +*/ + +const runPreTest = (config, options, utils) => { + // Do any config setup & options setup here, if any + + return { config, options }; +}; + +const runPostTest = (instance, utils) => { + // Do any test steps on the instantiated instnace, if any +}; + +export { runPreTest, runPostTest }; diff --git a/demos/enhanced-scripts/001-happy.js b/demos/enhanced-scripts/001-happy.js new file mode 100644 index 00000000000..5bb17001921 --- /dev/null +++ b/demos/enhanced-scripts/001-happy.js @@ -0,0 +1,25 @@ +/* +Test 01: Happy +- Loads Happy.json layer in the legend. Very basic. Test 1 for fast loadup. + */ + +const runPreTest = (config, options, utils) => { + const happy = { + id: 'Happy', + name: 'Happy Tester', + layerType: 'file-geojson', + url: '../file-layers/geojson.json', + colour: '#4ef542', + nameField: 'name' + }; + + utils.addLayerLegend(happy); + + return { config, options }; +}; + +const runPostTest = (instance, utils) => { + // Not used in this test +}; + +export { runPreTest, runPostTest }; diff --git a/demos/enhanced-scripts/002-simple-empty.js b/demos/enhanced-scripts/002-simple-empty.js new file mode 100644 index 00000000000..a1968fc5c5b --- /dev/null +++ b/demos/enhanced-scripts/002-simple-empty.js @@ -0,0 +1,24 @@ +/* +Test 02: An empty map. +- Just adds legend text to make it look not broken +*/ + +const runPreTest = (config, options, utils) => { + config.configs.en.fixtures.legend.root.children.push({ + infoType: 'text', + content: 'I start with no layers' + }); + + config.configs.fr.fixtures.legend.root.children.push({ + infoType: 'text', + content: 'Je commence sans couches' + }); + + return { config, options }; +}; + +const runPostTest = (instance, utils) => { + // Do any test steps on the instantiated instnace, if any +}; + +export { runPreTest, runPostTest }; diff --git a/demos/enhanced-scripts/003-simple-feature.js b/demos/enhanced-scripts/003-simple-feature.js new file mode 100644 index 00000000000..54bc1e5d4db --- /dev/null +++ b/demos/enhanced-scripts/003-simple-feature.js @@ -0,0 +1,29 @@ +/* +Test 03: Simple Feature Layers +- Loads two feature layers from EcoGeo. + */ + +const runPreTest = (config, options, utils) => { + const nature = { + id: 'Nature', + layerType: 'esri-feature', + url: 'https://section917.canadacentral.cloudapp.azure.com/arcgis/rest/services/TestData/EcoAction/MapServer/6' + }; + + const water = { + id: 'Water', + layerType: 'esri-feature', + url: 'https://section917.canadacentral.cloudapp.azure.com/arcgis/rest/services/TestData/EcoAction/MapServer/8' + }; + + utils.addLayerLegend(nature); + utils.addLayerLegend(water); + + return { config, options }; +}; + +const runPostTest = (instance, utils) => { + // Not used in this test +}; + +export { runPreTest, runPostTest }; diff --git a/demos/enhanced-scripts/004-simple-mil.js b/demos/enhanced-scripts/004-simple-mil.js new file mode 100644 index 00000000000..530c3472a88 --- /dev/null +++ b/demos/enhanced-scripts/004-simple-mil.js @@ -0,0 +1,32 @@ +/* +Test 04: Simple Map Image Layers +- Loads one map image layer from EcoGeo. +- Has two sublayers, distinct bound legend blocks (no treegrow) + */ + +const runPreTest = (config, options, utils) => { + const ecoGeoMIL = { + id: 'EcoGeo', + layerType: 'esri-map-image', + url: 'https://section917.canadacentral.cloudapp.azure.com/arcgis/rest/services/TestData/EcoAction/MapServer/', + sublayers: [{ index: 6 }, { index: 8 }] + }; + + utils.addLayer(ecoGeoMIL); + utils.addLegend({ + layerId: 'EcoGeo', + sublayerIndex: 6 + }); + utils.addLegend({ + layerId: 'EcoGeo', + sublayerIndex: 8 + }); + + return { config, options }; +}; + +const runPostTest = (instance, utils) => { + // Not used in this test +}; + +export { runPreTest, runPostTest }; diff --git a/demos/enhanced-scripts/005-simple-file.js b/demos/enhanced-scripts/005-simple-file.js new file mode 100644 index 00000000000..7bad449b5f4 --- /dev/null +++ b/demos/enhanced-scripts/005-simple-file.js @@ -0,0 +1,41 @@ +/* +Test 05: Simple File Layers +- Loads three file layers. A CSV, a GeoJSON, and a zipped Shape + */ + +const runPreTest = (config, options, utils) => { + const csv = { + id: 'CSV', + name: 'CSV', + layerType: 'file-csv', + url: '../file-layers/csv.csv', + latField: 'Y', + longField: 'X', + colour: '#FF0000' // So that its not the same colour as the shape one + }; + const geoJson = { + id: 'GeoJson', + name: 'GeoJson', + layerType: 'file-geojson', + url: '../file-layers/geojson.json', + caching: true + }; + const shape = { + id: 'Shape', + name: 'Shape', + layerType: 'file-shape', + url: '../file-layers/shape.zip' + }; + + utils.addLayerLegend(csv); + utils.addLayerLegend(geoJson); + utils.addLayerLegend(shape); + + return { config, options }; +}; + +const runPostTest = (instance, utils) => { + // Not used in this test +}; + +export { runPreTest, runPostTest }; diff --git a/demos/enhanced-scripts/006-simple-data.js b/demos/enhanced-scripts/006-simple-data.js new file mode 100644 index 00000000000..decf3628557 --- /dev/null +++ b/demos/enhanced-scripts/006-simple-data.js @@ -0,0 +1,88 @@ +/* +Test 06: Simple Data Layers +- Loads two data layers. A custom json dataset, and an ESRI Table service +- Has a fancy detail template for the custom json + */ + +const runPreTest = (config, options, utils) => { + const customJson = { + id: 'dataJson', + name: 'Tasty Eats', + layerType: 'data-json', + rawData: + '{"fields":["Resto Name","Resto Type","Stars"],"data":[["Grouse Burgers","Burger",5],["Greasy Patties","Burger",2],["Big Dirty Slice","Pizza",3]]}', + nameField: 'Resto-Name', + fixtures: { + details: { + template: 'Tasty-Template' + } + } + }; + + const esriTable = { + id: 'table', + name: 'JOSM Theme Count', + layerType: 'data-esri-table', + url: 'https://section917.canadacentral.cloudapp.azure.com/arcgis/rest/services/TestData/Oilsands/MapServer/5' + }; + + utils.addLayerLegend(customJson); + utils.addLayerLegend(esriTable); + + return { config, options }; +}; + +const runPostTest = (instance, utils) => { + instance.$element.component('Tasty-Template', { + props: ['identifyData'], + template: ` +
+
+
+
+
+ `, + methods: { + createSection(title, id) { + var val = this.identifyData.loaded + ? this.identifyData.data[id] + : 'Loading...'; + + return ` +
+ + ${title} + + + ${val} + +
+ `; + }, + createStars(n) { + var stars = + 'star--v1\n'.repeat( + parseInt(this.identifyData.data[n]) + ); + var remaining = + 'star--v1'.repeat( + 5 - this.identifyData.data[n] + ); + + return ` +
+ + Stars + +
+ ${stars} + ${remaining} +
+
+ `; + } + } + }); +}; + +export { runPreTest, runPostTest }; diff --git a/demos/enhanced-scripts/007-main-classic.js b/demos/enhanced-scripts/007-main-classic.js new file mode 100644 index 00000000000..fcc4cfa69f9 --- /dev/null +++ b/demos/enhanced-scripts/007-main-classic.js @@ -0,0 +1,219 @@ +/* +Test 07: Classic Main Sample +- Replicates the main sample from the classic test page +- Removes some of the wild stuff ?? +- WFS layer with custom details template, ordered fields +- Poly feature layer with permanent filter +- Line feature layer with permanent filter, custom cover icon +- Three child MIL layer (cesi) +- Custom legend structure + - Group that is also layer-bound + - Info sections +- areas of interest fixture + + */ + +const runPreTest = (config, options, utils) => { + const wfsLayer = { + id: 'WFSLayer', + layerType: 'ogc-wfs', + url: 'https://api.weather.gc.ca//collections/ahccd-trends/items?measurement_type__type_mesure=total_precip&period__periode=Ann&offset=0&limit=150&province__province=on', + xyInAttribs: true, + colour: '#55ffff', + fixtures: { + details: { + template: 'WFSLayer-Custom' + } + }, + fieldMetadata: { + fieldInfo: [ + { name: 'station_name__nom_station' }, + { name: 'station_id__id_station' }, + { name: 'province__province' }, + { name: 'identifier__identifiant' }, + { name: 'year_range__annees' } + ], + exclusiveFields: false, + enforceOrder: true + } + }; + + const polyFeatureLayer = { + id: 'TerritoriesPoly', + layerType: 'esri-feature', + url: 'https://section917.canadacentral.cloudapp.azure.com/arcgis/rest/services/TestData/SupportData/MapServer/3', + permanentFilteredQuery: `Name = 'Nunavut' OR Name = 'Northwest Territories' OR Name = 'Yukon Territory'` + }; + + const lineFeatureLayer = { + id: 'BasinLine', + layerType: 'esri-feature', + url: 'https://section917.canadacentral.cloudapp.azure.com/arcgis/rest/services/CESI/MapServer/2', + permanentFilteredQuery: `OBJECTID > 80` + }; + + const milCesiLayer = { + id: 'CESI', + layerType: 'esri-map-image', + url: 'https://section917.canadacentral.cloudapp.azure.com/arcgis/rest/services/CESI/MapServer/', + sublayers: [{ index: 36 }, { index: 37 }, { index: 38 }] + }; + + const legendRootEn = [ + { + infoType: 'title', + name: 'Vector Layers', + children: [ + { + layerId: 'WFSLayer' + }, + { + layerId: 'TerritoriesPoly', + name: 'TerritoriesPoly' + }, + { + layerId: 'BasinLine', + name: 'BasinLine', + coverIcon: + 'https://cdn-icons-png.flaticon.com/512/136/136893.png?w=826&t=st=1687287352~exp=1687287952~hmac=10dfcb5cc9522c65066d495e3f17973ecf30dc948bdbdfcb073c647b3b616365' + } + ] + }, + { + layerId: 'CESI', + name: 'Releases of cadmium', + sublayerIndex: 36, + children: [ + { + layerId: 'CESI', + name: 'Releases of mercury', + sublayerIndex: 37 + }, + { + layerId: 'CESI', + name: 'Releases of lead', + sublayerIndex: 38 + } + ] + }, + { + infoType: 'title', + content: 'Open me for a surprise!', + expanded: false, + children: [ + { + infoType: 'text', + content: 'Keep opening!', + expanded: false, + children: [ + { + name: 'Custom Info Section', + infoType: 'template', + content: `
+ +
` + } + ] + } + ] + } + ]; + + const legendRootFr = [ + { + infoType: 'title', + name: 'Couches Vectorielles', + children: [ + { + layerId: 'WFSLayer' + }, + { + layerId: 'TerritoriesPoly', + name: 'TerritoriesPoly' + }, + { + layerId: 'BasinLine', + name: 'BasinLine', + coverIcon: + 'https://cdn-icons-png.flaticon.com/512/136/136893.png?w=826&t=st=1687287352~exp=1687287952~hmac=10dfcb5cc9522c65066d495e3f17973ecf30dc948bdbdfcb073c647b3b616365' + } + ] + }, + { + layerId: 'CESI', + name: 'Rejets de cadmium', + sublayerIndex: 36, + children: [ + { + layerId: 'CESI', + name: 'Rejets de mercure', + sublayerIndex: 37 + }, + { + layerId: 'CESI', + name: 'Rejets de plomb', + sublayerIndex: 38 + } + ] + }, + { + infoType: 'title', + content: 'Ouvrez-moi pour une surprise!', + expanded: false, + children: [ + { + infoType: 'text', + content: 'Continuer à ouvrir!', + expanded: false, + children: [ + { + name: 'Custom Info Section', + infoType: 'template', + content: `
+ +
` + } + ] + } + ] + } + ]; + + // add layers (same across langs) + utils.addLayer(wfsLayer); + utils.addLayer(polyFeatureLayer); + utils.addLayer(lineFeatureLayer); + utils.addLayer(milCesiLayer); + + // add legend blocks to appropriate langs + [ + ['en', legendRootEn], + ['fr', legendRootFr] + ].forEach(legendNugget => { + // go through every root legend item to add + legendNugget[1].forEach(rootLegendItem => { + // add to appropriate lang config + utils.addLegendLang(rootLegendItem, legendNugget[0]); + }); + }); + + return { config, options }; +}; + +const runPostTest = (instance, utils) => { + // template with our friend Rick. + instance.$element.component('WFSLayer-Custom', { + props: ['identifyData'], + template: ` +
+ This is an example template that contains an image. + +
+ ` + }); + + // add areas of interest fixture + instance.fixture.add('areas-of-interest'); +}; + +export { runPreTest, runPostTest }; diff --git a/demos/index-all.html b/demos/index-all.html index 332ed07d54e..f5bd75d4271 100644 --- a/demos/index-all.html +++ b/demos/index-all.html @@ -1,6 +1,6 @@ - R4MP Samples Yellow Pages + R4MP Classic Samples Yellow Pages -

RAMP 4 Samples Catalogue

-

Classic Samples

+

RAMP 4 Classic Samples Catalogue

+

Enhanced Samples

+ Are found here. +

Classic2 Samples

Samples from development which were ported to the Samples suite.
  • diff --git a/demos/index-samples.html b/demos/index-samples.html index e4c6d974b92..64d8813b0e7 100644 --- a/demos/index-samples.html +++ b/demos/index-samples.html @@ -1,4 +1,4 @@ - + @@ -7,115 +7,105 @@ ramp-core -