Enable an ADO Entity Loader and a Preview functionality on the Metadata Display Entity Edit Form

[DiegoPino]

What is needed?

To make users writing and testing twig templates easier we want to add a few new features to the Metadata Display Entity Edit form

• An ADO autocomplete (we may need to check if we already have the autocomplete handler, if not we may write one, simple task). This is to select any ADO object from the repository to load .. (continued)
• The SBF field Metadata/JSON into a second Text area, so users can see the sources and values present. This helps with Writing/testing twig templates
• A dual column layout, left the twig template (as it is now), right the loaded JSON to be used to preview/test the Template
• A "Preview button" that submits to a handler that does exactly what our Metadata Formatter does, render the Template using the JSON as context. Also passes our globals like the IIIF server.
• A tiny info area (fieldset) showing users which globals and their values are present
• Remove the redirect on "save" OR add a "save and continue" button, open to both options, so every time a user saves its not redirected to main Entity List of the Metadata Display entity

@pcambra please let me know if you have any questions here. I tried to explain the use case as good as I could. The purpose is only one: help site builders and metadata professionals to build better twig templates by having data to see and test against.

@alliomeria anything else we could need to aid in the twig template creation?

this relates the more advanced issue #72 but that one is a separate thing.

[DiegoPino]

Note: this way of presenting the interface got my thumbs up:
https://twigfiddle.com
We of course do not need the many options, but dual column works for our use case

[alliomeria]

@DiegoPino & @pcambra this all sounds great and will be very useful for twig template creation/editing/testing!

• both/either of the save approach options would be helpful to have in place
• twigfiddle interface also gets my thumbs up

[pcambra]

@DiegoPino I think I have good progress but I've got a few questions about this if you don't mind:

On the metadata formatter there's something like this:

        $context = [
          'data' => $jsondata,
          'node' => $items->getEntity(),
          'iiif_server' => $this->getIiifUrls()['public'],
        ];
        $original_context = $context;
        // In case someone decided to wipe the original context?
        // We bring it back!
        $context = $context + $original_context;
        $templaterenderelement = $metadatadisplayentity->processHtml($context);

And the processHtml method has the following:

  public function processHtml(array $context) {
    if (!isset($context['data']) || !is_array($context['data']) || empty($context['data'])) {
      throw new \InvalidArgumentException('Processing a Metadata Display requires a valid "data" structure to be passed');
    }
    $context = $context + $this->getTwigDefaultContext();
    $twigtemplate = $this->get('twig')->getValue();
    $twigtemplate = !empty($twigtemplate) ? $twigtemplate[0]['value'] : "{{ 'empty' }}";
    // @TODO should we have a custom theme hint here?
    $templaterenderelement = [
      '#type' => 'inline_template',
      '#template' => $twigtemplate,
      '#context' => $context,
      '#cache' => [
        'tags' => $this->getCacheTags(),
      ],
    ];
    return $templaterenderelement;
  }

I am wondering why the node is passed if not used on this function and how to get the jsondata from "out of context", do I just pick one of the SBF fields? Is there already some API to do this? Should we fallback to that if data is empty generally in processHtml?

Regarding the "easy" task on the first point, an ADO autocomplete handler, I might be overthinking this, but how would I go about this? not sure if I know how to determine what is an ADO and what not (probably related to #120 )

[DiegoPino]

Hi, sure! replying inline

And the processHtml method has the following:
public function processHtml(array $context) {
if (!isset($context['data']) || !is_array($context['data']) || empty($context['data'])) {
throw new \InvalidArgumentException('Processing a Metadata Display requires a valid "data" structure to be passed');
}
$context = $context + $this->getTwigDefaultContext();
$twigtemplate = $this->get('twig')->getValue();
$twigtemplate = !empty($twigtemplate) ? $twigtemplate[0]['value'] : "{{ 'empty' }}";
// @todo should we have a custom theme hint here?
$templaterenderelement = [
'#type' => 'inline_template',
'#template' => $twigtemplate,
'#context' => $context,
'#cache' => [
'tags' => $this->getCacheTags(),
],
];
return $templaterenderelement;
}

Not sure about the question/how that affects your current code's need but:
$node is used in every Twig template that needs it. Its just passed as part of the $context, as an PHP object E.g http://localhost:8001/metadatadisplay/1

For what I understand, you do not need to get the $node out of the context in your code (I mean, you can if you want, its just an array key in the $context), you need to do the opposite. Push the selected $node into the context during the "preview operation", same way that Formatter does in your Entity Form Edit logic (submit handler?)

Here is another example on how we do that for the same thing, but as exposed endpoints:

https://github.com/esmero/format_strawberryfield/blob/main/src/Controller/MetadataExposeDisplayController.php#L113

This Controller gets a $node via the URL (entity argument resolver) and passes a Twig template via a Config Entity and renders the output.

I am wondering why the node is passed if not used on this function and how to get the jsondata from "out of context", do I just pick one of the SBF fields? Is there already some API to do this? Should we fallback to that if data is empty generally in processHtml?

Which SBF is used (or all of them?) is not a Developer/fixed choice at this level. Since Formatters work directly on a given Field, it will totally depend on how the user sets the View Mode. So if you have the case of Multiple SBF (not a default) we can either make which field is used a selection and always default to the first one found (what normally people will get with a Vanilla Archipelago) or discuss any other option you feel is better. e.g the Controller I showed you does this in case a single SBF field is multi valued

format_strawberryfield/src/Controller/MetadataExposeDisplayController.php

Line 197 in 01b62cd

$context['data'][$offset] = $jsondata;

Regarding the "easy" task on the first point, an ADO autocomplete handler, I might be overthinking this, but how would I go about this? not sure if I know how to determine what is an ADO and what not (probably related to #120 )

Yes, you may be overthinking it! I know its not "easy", removing that word from my vocabulary (and also the word "just"), let's say it is not a lot of code and there is already code you can copy to make this work. Instead of going very complex here and instead of in this task building a full service around it (which we may, but honestly it will be just more code around what is already there), I would suggest making it work (first) the same way we do it in the rest of the environment with a simple trick:

• Your Entity Autocomplete handler needs to filter against Bundles that have a SBF. That is the definition of an ADO. Its a dynamic definition but a practical one. We can not feed the twig template with "data" if there is no JSON data we can decode.

In other words: do not use https://github.com/esmero/strawberryfield/blob/1.0.0-RC2/src/StrawberryfieldUtilityService.php#L107 (which is Entity/Node based)

Use this one
https://github.com/esmero/strawberryfield/blob/1.0.0-RC2/src/StrawberryfieldUtilityService.php#L149

• Get all Bundles for Nodes:
• Check which ones carry SBF:
• Discard the ones that do not
• Filter your Node results based on that (in the handler query), which really means not even a custom Handler for now, just a bundle filter.

 '#selection_settings' => [
    'target_bundles' => ['digital_object', ....],

If I'm not clear here, please let me know, I can extend on this further or be more concrete:

lastly: some code examples: you may have noticed that When Strawberry Runners Module is enabled you get an extra ADO tools tab on each node. That form shows you (one or more) SBF fields and an autocomplete *custom JS code to handle JMESPATH queries). The code is as standard and as repetitive as the rest of archipelago. We iterate over every possible SBF and generate Form elements. Your code will be quite similar.

https://github.com/esmero/strawberry_runners/blob/main/src/Form/StrawberryRunnersToolsForm.php#L64-L128

[pcambra]

This has been one of the wildest rides ever, and I have a lot of feedback, but first, a video:

Screen.Recording.2021-02-22.at.11.36.54.mov

[pcambra]

@DiegoPino I'm trying to structure this, so bear with me, I'll divide in chapters:

CodeMirror

We're leveraging CodeMirror module: https://www.drupal.org/project/codemirror_editor which has a fundamental flaw I discovered midway and it took most of the time on this issue:

Codemirror doesn't save to the textarea on keyup

I can't understand why this would be the case but there are barely no events on that library and it was a very difficult issue to identify as I was assumed it would save, because otherwise it would be quite unstable. Well, here it is https://git.drupalcode.org/project/codemirror_editor/-/blob/8.x-1.x/js/editor.js#L40

So what I've done is to enable a keyup event that saves to the textarea, it seems quite prone to errors otherwise and limits us from any usage in an ajax environment.

Are we set to use this module? I'm mentioning this because webform uses the CodeMirror library as well but does not use this module so I think we're including the same library twice in case we use the webform codemirror feature.

I think it also grabs the codemirror code from CDN and I think we would be safer if it would be in our codebase instead.

ADO entity_autocomplete

This was both harder and easier at the same time, and I don't think it's fully resolved, what I ended up using is https://github.com/esmero/format_strawberryfield/blob/main/src/Plugin/EntityReferenceSelection/NodeBearingStrawberryfieldSelection.php, which we might want to "fix" based on the feedback above regarding what services to use and what not to use. In any case I think the home for this plugin should be the strawberry field module and not here.

We're kinda stuck with having to add the target type on the entity_autocomplete form element, at least for the time being https://www.drupal.org/project/drupal/issues/2423093, one workaround for this would be adding some dependent ajax selector asking the user to select which entity type they want and then displaying the autocomplete.

Offcanvas CSS

Webform uses a clever trick (https://www.drupal.org/project/webform/issues/3066344) so the offcanvas looks presentable, removing the reset css that offcanvas adds for some reason, there's an issue fixed on D9 but haven't arrived so far: https://www.drupal.org/project/drupal/issues/2826722

Metadata Display Entities

Looking at the code overall, I think the right place for these should be their own module, any reason why these are embedded in format_strawberryfield?