localisation.tsx

import * as React from 'react';
import * as ReactDOM from 'react-dom';

import { application, implementation, definition } from '@logilab/libview';
import * as $rdf from 'rdflib';

const RDF = $rdf.Namespace('http://www.w3.org/1999/02/22-rdf-syntax-ns#');
const RDFS = $rdf.Namespace('http://www.w3.org/2000/01/rdf-schema#');

const DESCRIPTOR_LOCALISATION: definition.ViewDescriptor = {
    identifier: '::Culture::Localisation',
    name: 'Culture: Localisation de bien culturel',
    description:
        'Affiche une carte contenant la localisation des biens culturels dans les données ouvertes du ministère de la culture',
    entrypoint: 'VIEW_ENTRYPOINT',
    resourceCss: [],
    resourceJs: [],
    resourceMain: {
        location: 'remote',
        uri: `${process.env.DOMAIN ?? "http://localhost:8080"}/view_localisation.js`,
    } as definition.ViewResourceRemote,
};

interface BienCulturelProps {
    typeUris: string[];
    label: string;
}

const BienCulturel: React.FC<BienCulturelProps> = ({ typeUris, label }) => (
    <h1>
        {label} -- {typeUris.join(', ')}
    </h1>
);

class LocalisationRendering implements implementation.ViewImplementation {
    descriptor: definition.ViewDescriptor = DESCRIPTOR_LOCALISATION;
    priorityFor(context: $rdf.Formula, target: application.Resource): number {
        let score = 0;

        const targetSym = $rdf.sym(target.uri);

        // has at least one type
        const firstType = context.any(targetSym, RDF('type'));
        if (firstType !== null) {
            score += 10;
        }

        // has at least one label
        const firstLabel = context.any(targetSym, RDFS('label'));
        if (firstLabel !== null) {
            score += 10;
        }
        return score;
    }

    render(
        renderer: application.ViewRenderer,
        context: application.RenderingContext,
        target: application.Resource
    ): implementation.ViewRendering {
        return {
            dom: this.simpleRender(context.store, target.uri),
            suggestedResources: [],
        };
    }

    simpleRender(context: $rdf.Formula, target: string): Element {
        const targetSym = $rdf.sym(target);

        const bienCulturel: BienCulturelProps = {
            typeUris: context.each(targetSym, RDF('type')).map($rdf.Node.toJS) as string[],
            label: context.anyJS(targetSym, RDFS('label')).value as string,
        };

        const result = document.createElement('div');
        ReactDOM.render(<BienCulturel {...bienCulturel} />, result);
        return result;
    }
}

/**
 * Export the view
 */
export const VIEW_LOCALISATION_ENTRYPOINT: LocalisationRendering = new LocalisationRendering();
export const VIEW_ENTRYPOINT = VIEW_LOCALISATION_ENTRYPOINT;