ALTO exists but Overlay-Tool is not visible

[datazuul]

I build my own Mirador with textoverlay-plugin 0.3.8:

import Mirador from 'mirador/dist/es/src/index';
import downloadDialogPlugin from 'mirador-downloaddialog/es';
import imageCropperPlugin from 'mirador-imagecropper/es';
import keyboardShortcutsPlugin from 'mirador-keyboardshortcuts/es';
//import miradorDownloadPlugin from 'mirador-dl-plugin/es';
import { miradorImageToolsPlugin } from 'mirador-image-tools';
import miradorSharePlugin from 'mirador-share-plugin';
import textOverlayPlugin from 'mirador-textoverlay/es';

window.initMirador = function initMirador(config) {
  Mirador.viewer(config, [
    ...downloadDialogPlugin,
    ...imageCropperPlugin,
    ...keyboardShortcutsPlugin,
    //...miradorDownloadPlugin,
    ...miradorImageToolsPlugin,
    ...miradorSharePlugin,
    ...textOverlayPlugin
  ]);
}

I embedded it into html with this settings:

<div id="my-mirador"    style="position: relative !important; min-height: 500px;"></div>
                <script src="[/js/mirador/main.js](view-source:http://localhost:8080/js/mirador/main.js)"></script>
                <script type="text/javascript">
                    const config = {
                        id : 'my-mirador',
                        textOverlay: true,
                        windows : [ {
                            imageToolsEnabled : true,
                            imageToolsOpen : false,
                            manifestId : 'https://alexana.org/ResCarta-Web/iiif/api/presentation/3/49ce0abe-dfce-4e8d-b982-dfc768f760ea%252FALX00000%252F00000001%252F00000012/manifest',
                            // "canvasId": "",
                            // "canvasIndex": 1,
                            textOverlay : {
                                enabled : true
                            },
                            "thumbnailNavigationPosition" : 'far-bottom'
                        } ],
                        theme : {
                            palette : {
                                primary : {
                                    main : '#1967d2',
                                },
                            },
                        },
                        window : {
                            allowClose : false,
                            allowFullscreen : true,
                            allowMaximize : false,
                            textOverlay : {
                                enabled : true,
                                selectable : true,
                                visible : false
                            }
                        },
                        workspace : {
                            type : "not-mosaic-or-elastic"
                        },
                        workspaceControlPanel : {
                            enabled : false
                        },
                    };
                    initMirador(config);
                </script>

But tool button is not shown on any canvas. Setup should be fine, because it works with a manifest with hOCR.

Is it a problem with my ALTO-Format?

My manifest is:

https://alexana.org/ResCarta-Web/iiif/api/presentation/3/49ce0abe-dfce-4e8d-b982-dfc768f760ea%252FALX00000%252F00000001%252F00000012/manifest

[jbaiter]

Which version of Mirador are you using? The plugin is currently incompatible with the bleeding edge version, if you use that, try switching to the last stable release (3.3.0, I think). Once the next stable version is released, the plugin will follow suit with a new release that fixes compatibility.

[datazuul]

Thank you for your fast response!

Even pinning mirador from "^3.3.0" to 3.3.0 (npm install --save --save-exact mirador@3.3.0) and deactivating all other plugins in index.js before webpacking didn't help... (no javascript errors shown in console, maybe an info output would be fine, why textoverlay widget is not shown ("no OCR found", "OCR parsing problem", etc.?)

(the widget still is shown and working for hOCR-manifest https://api.digitale-sammlungen.de/iiif/presentation/v2/bsb11163886/manifest)

My package.json:

{
  "name": "mirador-integration",
  "version": "0.0.0",
  "description": "",
  "private": true,
  "scripts": {
    "parcel": "parcel parcel/index.html",
    "webpack": "webpack --config webpack/webpack.config.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "css-loader": "^3.6.0",
    "mirador": "3.3.0",
    "mirador-dl-plugin": "^0.13.0",
    "mirador-downloaddialog": "^0.3.0",
    "mirador-image-tools": "^0.11.0",
    "mirador-imagecropper": "^0.1.7",
    "mirador-keyboardshortcuts": "^0.2.1",
    "mirador-share-plugin": "^0.11.0",
    "mirador-textoverlay": "0.3.8",
    "parcel-bundler": "^1.12.4",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "style-loader": "^1.2.1",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.12"
  }
}

reduced index.js:

import Mirador from 'mirador/dist/es/src/index';
//import downloadDialogPlugin from 'mirador-downloaddialog/es';
//import imageCropperPlugin from 'mirador-imagecropper/es';
//import keyboardShortcutsPlugin from 'mirador-keyboardshortcuts/es';
//import miradorDownloadPlugin from 'mirador-dl-plugin/es';
//import { miradorImageToolsPlugin } from 'mirador-image-tools';
//import miradorSharePlugin from 'mirador-share-plugin';
import textOverlayPlugin from 'mirador-textoverlay/es';

window.initMirador = function initMirador(config) {
  Mirador.viewer(config, [
    //...downloadDialogPlugin,
    //...imageCropperPlugin,
    //...keyboardShortcutsPlugin,
    //...miradorDownloadPlugin,
    //...miradorImageToolsPlugin,
    //...miradorSharePlugin,
    ...textOverlayPlugin
  ]);
}

my webpack.config.js (that did a good job / result produces mirador with plugins, even textoverlay shown for hocr):

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/js/mirador/',  // production path
    //publicPath: './dist/', // local development path
  },
};

Another Mirador 3 installation is able to show ALTO-Fulltext of the same manifest (I do not know how they packaged/built mirador): https://alexana.org/ResCarta-Web/mirador/?doc_id=49ce0abe-dfce-4e8d-b982-dfc768f760ea/ALX00000/00000001/00000012

Maybe writing a test for the ALTO-manifest will help? I will try to fork the plugin and dive into writing a test with my manifest.

[datazuul]

meanwhile I checked out mirador-textoverlay code and put my manifest url into demo/src/index.js:

import Mirador from 'mirador/dist/es/src/index';
import textOverlayPlugin from '../../src';

const config = {
  catalog: [
    { manifestId: 'https://iiif.europeana.eu/presentation/9200396/BibliographicResource_3000118436165/manifest', provider: 'Europeana (Annotations)' },
    { manifestId: 'https://wellcomelibrary.org/iiif/b19956435/manifest', provider: 'Wellcome Library (ALTO)' },
    { manifestId: 'https://wellcomelibrary.org/iiif/b18035723/manifest', provider: 'Wellcome Library (ALTO)' },
    { manifestId: 'https://scta.info/iiif/graciliscommentary/lon/manifest', provider: 'SCTA (Annotations)' },
    { manifestId: 'https://purl.stanford.edu/fg165hz3589/iiif/manifest', provider: 'Stanford University Libraries (ALTO)' },
  ],
  id: 'demo',
  window: {
    textOverlay: {
      enabled: true,
      selectable: true,
      visible: false,
    },
  },
  windows: [{
    canvasIndex: 8,
    manifestId: 'https://alexana.org/ResCarta-Web/iiif/api/presentation/3/49ce0abe-dfce-4e8d-b982-dfc768f760ea%252FALX00000%252F00000001%252F00000012/manifest',
  }],
};

Mirador.viewer(config, [
  ...textOverlayPlugin,
]);

after npm install and npm start the book is shown in demo app under http://localhost:3000/. Textoverlay widget also not present.

Testing the manifest on https://mirador-textoverlay.netlify.app/ also did not show widget...

[datazuul]

maybe it is a problem with the content type.

the request for getting an alto (xml) file: https://alexana.org/ResCarta-Web/servlet/RcWebAltoData?ext_obj_id=49ce0abe-dfce-4e8d-b982-dfc768f760ea/ALX00000/00000001/00000012&pg_idx=14&create=true

returns a contenty-type of application/json instead application/xml. I qill have a look into the server software (ResCartaWeb) if there is a chance to change this and then do another test.

[datazuul]

Fixing content-type (locally in ResCartaWeb webapp) to application/xml or even to application/xml+alto brought no success.

[jbaiter]

Found the problem, the ALTO endpoint is missing the CORS header, which prevents the plugin from accessing the XML for parsing. Add the Access-Control-Allow-Origin: * header on the ALTO response and it should work as expected. This is what it looks like in Firefox for me:

[DigitLib]

I have the same problem with ResCarta manifest https://milutinbojic.digitalna.rs/iiif/api/presentation/3/f77afd7c-334c-4c96-b962-b58775ca5044%252F00000001%252Fvilijam1%252F00000005/manifest

it shows (Left) on their build and also on my nuxt app https://mirador-nuxt-example.vercel.app/iiif/zimskam

ALTO files are in xml format on link

No CORS error.

@datazuul Thank you for raise this question. Still trying to build a new M3 with additional plugins. @jbaiter Thank you for help.

[jbaiter]

Sorry guys, having a baby must have messed me up more than I noticed... Both of your manifests are IIIFv3, which currently is only supported on a development branch: https://github.com/dbmdz/mirador-textoverlay/tree/iiifv3

@DigitLib Your manifest works with the demo of that branch: https://iiifv3--mirador-textoverlay.netlify.app

@datazuul Your manifest doesn't, but that's probably because of the missing CORS header.

I'll try to make a new release soon, sorry about that!