RAMP4 Vue Templating Support

[james-rae]

Capturing the discussion that happened at 5-Jul-2023 RAMP meeting.

Related / blocking items: #216 , ramp4-pcar4/story-ramp#312

Custom Templating

RAMP4 currently supports custom templating for the details panel. This can be applied per-layer, and an instance can have multiple templates. There is also a proposal (ramp4-pcar4/ramp4-pcar4#1783) and investigation (ramp4-pcar4/ramp4-pcar4#1786) to add something similar for grid cell content.

In RAMP2, templates are assigned in the config by targeting files containing Angular templates and javascript. E.g.

{
  id: "AHCCD_prec_APR_en",
  layerType: "ogcWfs",  
  url: "http://toms-server.ca/cccs",
  name: "Total precipitation",  
  details: {
	template: "assets/templates/ahccd/variables-template.html",
	parser: "assets/templates/ahccd/variables-script.js"
  }
}

In RAMP4, templates are Vue templates and are registered via API calls on the RAMP instance.

// layer config
{
  id: "AHCCD_prec_APR_en",
  layerType: "ogc-wfs",  
  url: "http://toms-server.ca/cccs",
  name: "Total precipitation",  
  fixtures: {
    details: {
      template: 'WFSLayer-Custom'
    }
  }
}

// startup script
const rInstance = RAMP.createInstance(domDiv, config);

rInstance.$element.component('WFSLayer-Custom', {
  props: ['identifyData'],
  template: `
    <div>
      <span>This is a fun template .</span>
      <img src="https://i.imgur.com/WtY0tdC.gif" />
    </div>
 `
});

Storylines Support

Storylines is driven by the config. This makes sense, as one does not want to have to spin up customized variants of the storylines engine and host page template for each Storylines site.

Doing a similar approach to the RAMP4 example above, that would require custom scripts on each storylines site. The idea proposed to mitigate the issue goes somewhat like this.

Current Storylines RAMP4 pseudo-code:

slConfigArray.forEach(config => {
  if (config type is RAMP map) {
     RAMP.createInstance(config.rampDiv, config.rampConfig);
  }
})

Proposed Storylines RAMP4 pseudo-code:

slConfigArray.forEach(config => {
  if (config type is RAMP map) {
     const arrr = RAMP.createInstance(config.rampDiv, config.rampConfig);
     config.rampTemplates.forEach(template => {
       arrr.$element.component(template.key, template.value);
     });
  }
});

Details would need to be worked out on how templates are stored (string format, files), and how to integrate into RESPECT editor (likely a very basic upload/paste type of input, no WYSIWYG template editor madness).