localisation.tsx

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

import 'bootstrap/dist/css/bootstrap.min.css';
import Badge from 'react-bootstrap/Badge';
import { Map, Marker, Popup, TileLayer } from 'react-leaflet';
import * as L from 'leaflet';
import 'leaflet/dist/leaflet.css';

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

import './localisation.css';

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 CULT = $rdf.Namespace('http://graphe-culture.fr/');

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: {
        uri: `${process.env.DOMAIN ?? 'http://localhost:8080'}/view_localisation.js`,
    },
};

interface BienCulturelProps {
    typeUris: string[];
    label: string;
    locationUri: string;
    dataFetcher?: implementation.DataFetcher;
}

interface BienCulturelInfoProps {
    types: string[];
    label: string;
}

interface Location {
    lat: number;
    lng: number;
}

const BienCulturelInfo: React.FC<BienCulturelInfoProps> = ({ types, label }) => (
    <>
        <h1>{label}</h1>
        <h5>
            {types.map((typeLabel) => (
                <Badge style={{ margin: '5px' }} key={typeLabel} variant="primary">
                    {typeLabel}
                </Badge>
            ))}
        </h5>
    </>
);

const BienCulturel: React.FC<BienCulturelProps> = ({ typeUris, label, locationUri, dataFetcher }) => {
    const [urisLabel, setUrisLabel] = React.useState<{ uri: string; label: string | null }[]>(
        typeUris.map((typeUri) => ({ uri: typeUri, label: null }))
    );
    const [location, setLocation] = React.useState<Location | null>(null);
    React.useEffect(() => {
        if (dataFetcher !== undefined) {
            Promise.all(
                typeUris.map((typeUri) =>
                    dataFetcher.fetchDataFromURI(typeUri, { label: 'http://www.w3.org/2000/01/rdf-schema#label' })
                )
            )
                .then((fetchedLabels: { label?: string | string[] }[]) => {
                    const newUrisLabel: { uri: string; label: string }[] = [];
                    for (const [i, { label }] of fetchedLabels.entries()) {
                        if (label === undefined) {
                            continue;
                        }
                        if (i >= 0 && i < typeUris.length) {
                            newUrisLabel.push({
                                uri: typeUris[i],
                                label: label instanceof Array ? label[0] : label,
                            });
                        }
                    }
                    setUrisLabel(newUrisLabel);
                })
                .catch((e) => console.error(e));
        }
    }, [dataFetcher, typeUris]);

    React.useEffect(() => {
        if (dataFetcher !== undefined) {
            dataFetcher
                .fetchDataFromURI(locationUri, {
                    lat: 'http://www.w3.org/2003/01/geo/wgs84_pos#latitude',
                    lng: 'http://www.w3.org/2003/01/geo/wgs84_pos#longitude',
                })
                .then(({ lat, lng }) =>
                    setLocation({
                        lat: Number(lat),
                        lng: Number(lng),
                    })
                );
        }
    }, [locationUri, dataFetcher]);

    const typesLabel = urisLabel.map((uriLabel) => uriLabel.label ?? uriLabel.uri);

    let locationComponent = <></>;
    if (location !== null) {
        L.Icon.Default.imagePath = `${process.env.DOMAIN}/images/`;
        const position = { lat: location.lat, lng: location.lng };
        locationComponent = (
            <Map zoom={13} center={position} style={{ height: '600px' }}>
                <TileLayer
                    attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
                    url="http://{s}.tile.osm.org/{z}/{x}/{y}.png"
                />
                <Marker position={position}>
                    <Popup>
                        <BienCulturelInfo types={typesLabel} label={label} />
                    </Popup>
                </Marker>
            </Map>
        );
    }

    return (
        <>
            <BienCulturelInfo types={typesLabel} label={label} />
            <div>{locationComponent}</div>
        </>
    );
};

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('TODO', context.store, target.uri),
            suggestedResources: [],
        };
    }

    simpleRender(
        nodeId: string,
        context: $rdf.Formula,
        target: string,
        dataFetcher?: implementation.DataFetcher
    ): Element {
        const targetSym = $rdf.sym(target);

        const bienCulturel: BienCulturelProps = {
            typeUris: context.each(targetSym, RDF('type')).map((node) => node.value) as string[],
            label: context.anyJS(targetSym, RDFS('label')),
            locationUri: context.anyJS(targetSym, CULT('aPourLocalisation')).value,
            dataFetcher,
        };

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

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