localisation.tsx

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

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';

import { URIBadge } from '../utils/URIBadge';

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 OWL = $rdf.Namespace('http://www.w3.org/2002/07/owl#');
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;
    generateUrl?: (uri: string) => string;
}

export interface BienCulturelInfoProps {
    uri?: string;
    typeUris: string[];
    label: string;
    dataFetcher?: implementation.DataFetcher;
    generateUrl?: (uri: string) => string;
}

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

export const BienCulturelInfo: React.FC<BienCulturelInfoProps> = (props) => {
    const {
        uri,
        typeUris,
        label,
        dataFetcher = { fetchDataFromURI: () => Promise.reject('Not implemented') },
        generateUrl = (uri) => uri,
    } = props;

    return (
        <>
            <h1>{uri !== undefined ? <a href={generateUrl(uri)}>{label}</a> : label}</h1>
            <h5>
                {typeUris.map((uri) => (
                    <URIBadge uri={uri} dataFetcher={dataFetcher} generateUrl={generateUrl} />
                ))}
            </h5>
        </>
    );
};

const BienCulturel: React.FC<BienCulturelProps> = ({ typeUris, label, locationUri, dataFetcher, generateUrl }) => {
    const [location, setLocation] = React.useState<Location | null>(null);

    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]);

    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
                            typeUris={typeUris}
                            label={label}
                            dataFetcher={dataFetcher}
                            generateUrl={generateUrl}
                        />
                    </Popup>
                </Marker>
            </Map>
        );
    }

    return (
        <>
            <BienCulturelInfo typeUris={typeUris} label={label} dataFetcher={dataFetcher} generateUrl={generateUrl} />
            <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);

        if (
            context.any(null, RDF('type'), targetSym) !== null ||
            context.any(targetSym, RDF('type'), OWL('Class')) !== null ||
            context.any(targetSym, RDF('type'), RDFS('Class')) !== null
        ) {
            return -1; // this view is not suitable if it is a class
        }

        // 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,
        generateUrl?: (uri: string) => string
    ): 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,
            generateUrl,
        };

        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;