@matdata/yasr 4.6.1

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "@matdata/yasr",
+  "description": "Yet Another SPARQL Resultset GUI",
+  "version": "4.6.1",
+  "main": "build/yasr.min.js",
+  "types": "build/ts/src/index.d.ts",
+  "license": "MIT",
+  "author": "Triply <info@triply.cc>",
+  "homepage": "https://github.com/Matdata-eu/Yasgui",
+  "engines": {
+    "node": ">= 8"
+  },
+  "keywords": [
+    "JavaScript",
+    "SPARQL",
+    "Editor",
+    "Semantic Web",
+    "Linked Data"
+  ],
+  "bugs": "https://github.com/Matdata-eu/Yasgui/issues/",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Matdata-eu/Yasgui.git",
+    "directory": "packages/yasr"
+  },
+  "dependencies": {
+    "@fortawesome/free-solid-svg-icons": "^5.14.0",
+    "@json2csv/plainjs": "^7.0.4",
+    "@matdata/yasgui-utils": "^4.6.1",
+    "@matdata/yasqe": "^4.6.1",
+    "codemirror": "^5.51.0",
+    "colors": "^1.4.0",
+    "column-resizer": "^1.4.0",
+    "datatables.net": "^2.0.5",
+    "datatables.net-dt": "^2.0.5",
+    "dompurify": "^3.2.4",
+    "jquery": "^3.7.1",
+    "lodash-es": "^4.17.15",
+    "n3": "^1.3.5",
+    "papaparse": "^5.3.1"
+  },
+  "devDependencies": {
+    "@types/codemirror": "0.0.100",
+    "@types/jquery": "^3.5.32",
+    "@types/lodash-es": "^4.17.3",
+    "@types/n3": "^1.1.5",
+    "@types/node": "^22.5.4",
+    "@types/papaparse": "^5.3.2",
+    "@types/sanitize-html": "^1.20.2",
+    "better-npm-run": "^0.1.1",
+    "ts-essentials": "^7.0.1"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/bin/takeScreenshot.js

@@ -0,0 +1,373 @@
+const puppeteer = require("puppeteer");
+const static = require("node-static");
+const http = require("http");
+const PORT = 40001;
+
+// const endpoint = "https://api.nightly.triply.cc/datasets/gerwinbosch/Triply-pets/services/Triply-pets/sparql";
+// const plugin = "gallery";
+// const query = `
+//
+//
+// PREFIX wrongrdfs: <https://www.w3.org/2000/01/rdf-schema#>
+// PREFIX foaf: <http://xmlns.com/foaf/0.1/>
+// PREFIX rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#>
+// PREFIX rdfs: <http://www.w3.org/2000/01/rdf-schema#>
+// SELECT Distinct ?cat ?image ?name ?widget WHERE {
+//   ?cat foaf:depiction ?image .
+//   bind('<div><img src="{{image}}"/></div>' as ?widget)
+// } LIMIT 10
+//
+//
+// `;
+
+// const endpoint = "https://api.druid.datalegend.net/datasets/dataLegend/Catasto/services/Catasto/sparql";
+// const plugin = "table";
+// const query = `
+//
+//
+// PREFIX rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#>
+// PREFIX skos: <http://www.w3.org/2004/02/skos/core#>
+// PREFIX rdfs: <http://www.w3.org/2000/01/rdf-schema#>
+// PREFIX catastodim: <https://iisg.amsterdam/catasto/dimension/>
+// PREFIX catasto: <https://iisg.amsterdam/catasto/>
+// PREFIX catastoregion: <https://iisg.amsterdam/catasto/code/NUMSER/>
+//
+// SELECT ?occupation (count(distinct ?sub) as ?n_hh) (round(avg(?wealth)) as ?avg_wealth_rounded) (avg(?hh_members) as ?avg_hh_members) WHERE
+// { SELECT (count(?members) as ?hh_members) ?occupation ?sub ?wealth
+//
+// WHERE {
+//
+// ?sub catastodim:householdMember ?members ;
+//      catastodim:TOTAL ?wealth ;
+//      catastodim:DEDUCT ?debt ;
+//      catastodim:CREANCE ?pubcred ;
+//      catastodim:CREDPUB ?privcred ;
+//      catastodim:NUMSER catastoregion:1 .
+// ?sub catastodim:METIER ?occ .
+// ?occ skos:altLabel ?occupationlabel .
+//
+//  BIND(STR(?occupationlabel) as ?occupation)
+//  FILTER(?wealth > 1500)
+//   }}
+//
+//  ORDER BY  DESC(?n_hh)
+// LIMIT 10
+//
+//
+//
+// `;
+
+const endpoint =
+  "https://api.druid.datalegend.net/datasets/netwerk-maritieme-bronnen/demo-netwerk-maritieme-bronnen/services/demo-netwerk-maritieme-bronnen/sparql";
+const plugin = "geo";
+const query = `
+
+
+prefix dce: <http://purl.org/dc/elements/1.1/>
+prefix das: <https://demo.triply.cc/huygens-ing/dutch-asiatic-shipping/>
+prefix edm: <http://www.europeana.eu/schemas/edm/>
+prefix foaf: <http://xmlns.com/foaf/0.1/>
+prefix geo: <http://www.opengis.net/ont/geosparql#>
+prefix misc: <https://demo.triply.cc/huygens-ing/graph/misc/>
+prefix owl: <http://www.w3.org/2002/07/owl#>
+prefix ship: <https://demo.triply.cc/huygens-ing/dutch-asiatic-shipping/id/ship/>
+prefix wgs84: <http://www.w3.org/2003/01/geo/wgs84_pos#>
+prefix xsd: <http://www.w3.org/2001/XMLSchema#>
+select * {
+  bind(ship:DAS_ship0010 as ?ship)# 't Vliegend Hart' == DAS_ship0010
+  ?voyage
+    das:shipid ?ship;
+    das:voyarrivalplaceid [
+      das:toponym_original ?arrivalName;
+      owl:sameAs [ wgs84:lat ?arrivalLat; wgs84:long ?arrivalLong]];
+    das:voydepartureplaceid [
+      das:toponym_original ?departureName;
+      owl:sameAs [ wgs84:lat ?departureLat; wgs84:long ?departureLong]].
+  bind(strdt(concat('Point(',?arrivalLong,' ',?arrivalLat,')'),geo:wktLiteral) as ?arrivalShape)
+  bind(strdt(concat('Point(',?departureLong,' ',?departureLat,')'),geo:wktLiteral) as ?departureShape)
+  optional {
+    [ dce:creator ?departureImageCreator;
+      dce:description ?departureImageDescription;
+      foaf:depiction ?departureImage1;
+      misc:place ?departureName;
+      misc:year ?departureImageYear].
+    optional {
+      [ edm:isShownAt ?departureImage1;
+        edm:isShownBy ?departureImage2;
+        edm:provider ?departureProvider].
+    }
+    bind(if(bound(?departureImage1)&&strends(str(?departureImage1),'.jpg'),?departureImage1,?departureImage2) as ?departureImageUrl)
+  }
+  bind(if(bound(?departureImageUrl),'<img src="{{departureImageUrl}}" style="width:300px;height:300px;">','') as ?departureImg)
+  optional {
+    [ dce:creator ?arrivalImageCreator;
+      dce:description ?arrivalImageDescription;
+      foaf:depiction ?arrivalImage1;
+      misc:place ?arrivalName;
+      misc:year ?arrivalImageYear].
+    optional {
+      [ edm:isShownAt ?arrivalImage1;
+        edm:isShownBy ?arrivalImage2].
+    }
+    bind(if(bound(?arrivalImage1),?arrivalImage1,?arrivalImage2) as ?arrivalImageUrl)
+  }
+  bind(if(bound(?arrivalImageUrl),'<img src="{{arrivalImageUrl}}" style="width:300px;height:300px;">','') as ?arrivalImg)
+  bind(<http://sws.geonames.org/3367577/> as ?kaap)
+  ?kaap wgs84:lat ?latKaap; wgs84:long ?longKaap.
+  bind(strdt(concat('Point(',?longKaap,' ',?latKaap,')'),geo:wktLiteral) as ?restShape)
+  optional {
+    [ dce:creator ?restImageCreator;
+      dce:description ?restImageDescription;
+      foaf:depiction ?restImage;
+      misc:ExternalGeoIdentifier ?kaap;
+      misc:place ?restName;
+      misc:year ?restImageYear].
+    filter(strends(str(?restImage),'.jpg'))
+  }
+  bind(strdt(if(xsd:integer(?departureLat)>45,
+                concat('LineString(',?departureLong,' ',?departureLat,',3.07966 51.77924,1.34205 50.87258,-2.08131 49.93115,-5.33326 48.67037,-9.77174 43.27050,-11.44166 36.68907,-14.78151 28.71317,-19.00026 18.92025,-23.87345 12.6475,-30.5023 -10.39992,-33.11856 -18.33260,-31.73428 -27.76883,-29.9325 -32.07113,-27.9500 -34.08019,-26.13816 -35.75632,-23.80906 -37.13492,-20.90867 -37.65861,-15.32761 -37.86705,-6.80222 -37.41468,2.64602 -36.71335,8.0073 -36.1831,12.36839 -36.07712,',?longKaap,' ',?latKaap,',18.35680 -35.39930,20.55277 -36.59887,26.11185 -37.56297,36.15953 -37.76297,44.45902 -38.03175,72.07865 -38.13552,97.47012 -38.35985,100.16931 -37.15799,102.45447 -35.40458,103.81677 -33.19029,104.45398 -29.83812,105.09119 -24.40449,104.82752 -17.17519,103.15760 -11.10593,',?arrivalLong,' ',?arrivalLat,')'),
+                concat('LineString(',?departureLong,' ',?departureLat,',74.5229 7.69870,71.78581 7.03825,69.14909 5.55316,65.91911 2.85805,62.66716 -0.83214,60.38200 -4.60650,57.21794 -11.21877,54.93278 -16.42287,52.82341 -21.89969,49.25455 -27.66664,42.75065 -31.18710,36.07096 -33.70848,28.51237 -36.15797,21.65690 -37.14512,',?longKaap,' ',?latKaap,',17.03490 -34.35846,14.92553 -30.50223,11.11303 -23.29844,5.65209  -15.34412,-8.80494 2.39809,-17.59401 10.08075,-22.00026 16.52025,-28.7247 30.78764,-26.85550 37.54813,-21.58206 43.00792,-17.01175 46.65251,-12.0898 48.75189,-6.03727 49.37919,-0.956103 50.02224,2.53750 51.63169,',?arrivalLong,' ',?arrivalLat,')')),
+             geo:wktLiteral) as ?shape3)
+  ?voyage
+    das:voydepartureedtf ?departureDate;
+    das:voycapedepartureedtf ?depCapeDate;
+    das:voyarrivaldateedtf ?arrivalDate;
+    das:voycapearrivaledtf ?arrCapeDate.
+  bind((?arrivalDate-?departureDate) / (24*60*60) as ?days)
+  bind('''
+       Vertrokken van {{departureName}}: {{departureDate}}<br>
+       Aangekomen op {{restName}}: {{arrCapeDate}}<br>
+       Vertrokken van {{restName}}: {{depCapeDate}}<br>
+       Aangekomen in {{arrivalName}}: {{arrivalDate}}<br>
+       Duur van de reis: {{days}} dagen
+       ''' as ?shape3Label)
+  bind(if(bound(?departureImageDescription),
+          '''
+          <h3>{{departureName}}</h3>
+          <p>Vertrokken op {{departureDate}}</p>
+          <figure>
+            {{departureImg}}
+            <figcaption>
+              “{{departureImageDescription}}” door {{departureImageCreator}}, {{departureImageYear}} [Herkomstcollectie: {{departureProvider}}].
+            </figcaption>
+          </figure>
+          ''',
+          '''<h3>{{departureName}}</h3>
+          <p>Vertrokken op {{departureDate}}</p>
+          ''') as ?departureShapeLabel)
+  bind('''
+       <h3>{{arrivalName}}</h3>
+       <p>Aangekomen op {{arrivalDate}}</p>
+       <figure>
+         {{arrivalImg}}
+         <figcaption>
+           {{arrivalImageDescription}} door {{arrivalImageCreator}}, {{arrivalImageYear}} [Herkomstcollectie: Nationaal Archief].
+         </figcaption>
+       </figure>
+       ''' as ?arrivalShapeLabel)
+  bind('''
+       <h3>{{restName}}</h3>
+       <p>Aangekomen op {{arrCapeDate}}</br>Vertrokken op {{depCapeDate}}</p>
+       <figure>
+         <img src="{{restImage}}" style="width:300px;height:300px;">
+         <figcaption>
+           “{{restImageDescription}}” door {{restImageCreator}}, {{restImageYear}} [Herkomstcollectie: Nationaal Archief].
+         </figcaption>
+       </figure>
+       ''' as ?restShapeLabel)
+  bind(if(strends(str(?voyage),'6'),'green','red') as ?shape3Color)
+}
+
+
+
+`;
+
+// const endpoint = "http://dbpedia.org/sparql";
+// const plugin = "geo";
+// const query = `
+//
+//
+// prefix geo: <http://www.opengis.net/ont/geosparql#>
+// select * {
+//   #Testing points and polygons with a tooltip
+//   bind("Point(5.89118305 50.94279662)"^^geo:wktLiteral as ?tooltip_point)
+//   bind("Polygon((5.86118305 50.99279662, 5.96118305 50.99279662, 5.86118305 50.89279662))"^^geo:wktLiteral as ?tooltip_polygon)
+//   bind("Polygon((5.88118305 50.99279662, 5.96118305 50.99279662, 5.86118305 50.89279662))"^^geo:wktLiteral as ?tooltip_smallerPolygon)
+//   bind("tooltip_pointTooltip" as ?tooltip_pointTooltip)
+//   bind("tooltip_polygonTooltip" as ?tooltip_polygonTooltip)
+//   bind("tooltip_smallerPolygonTooltip" as ?tooltip_smallerPolygonTooltip)
+//
+//   #Testing points and polygons with a label
+//   bind("Point(6.19118305 50.94279662)"^^geo:wktLiteral as ?label_point)
+//   bind("Polygon((6.16118305 50.99279662, 6.96118305 50.99279662, 6.16118305 50.89279662))"^^geo:wktLiteral as ?label_polygon)
+//   bind("Polygon((6.18118305 50.99279662, 6.96118305 50.99279662, 6.16118305 50.89279662))"^^geo:wktLiteral as ?label_smallerPolygon)
+//   bind("label_pointLabel" as ?label_pointLabel)
+//   bind("rgb(255, 0, 0)" as ?label_pointColor)
+//   bind("label_polygonLabel" as ?label_polygonLabel)
+//   bind("rgb(221, 208, 0)" as ?label_polygonColor)
+//   bind("label_smallerPolygonLabel" as ?label_smallerPolygonLabel)
+//   bind("rgb(176, 153, 153)" as ?label_smallerPolygonColor)
+// }
+//
+//
+// `;
+
+const getHtml = (plugin) => `
+
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>YASR</title>
+  <link rel="icon" type="image/png" href="doc/imgs/favicon.png" />
+
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.0.0/polyfill.js"></script>
+  <style>
+    body {
+	 font-family: 'Roboto', sans-serif;
+	}
+	</style>
+  <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" />
+  <link rel="stylesheet" href="build/yasr.min.css" />
+  <link rel="stylesheet" href="build/pro-gallery.min.css">
+  <link rel="stylesheet" href="build/pro-geo.min.css">
+  <link rel="stylesheet" href="build/pro-geo3d.min.css">
+  <link rel="stylesheet" href="build/pro-gchart.min.css">
+  <link href="./node_modules/@zazuko/yasqe/build/yasqe.min.css" rel="stylesheet">
+</head>
+
+<body>
+  <div id="yasqe"></div>
+  <div id="yasr"></div>
+
+  <script src="build/yasr.min.js"></script>
+  <script src="build/pro-gallery.min.js"></script>
+  <script src="build/pro-geo.min.js"></script>
+  <script src="build/pro-geo3d.min.js"></script>
+  <script src="build/pro-gchart.min.js"></script>
+  <script src="./node_modules/@zazuko/yasqe/build/yasqe.min.js"></script>
+  <script type="text/javascript">
+    window.onload = function () {
+      console.log('onload')
+      window.yasqe = Yasqe(document.getElementById("yasqe"), {
+        requestConfig: {
+          endpoint: "${endpoint}"
+        },
+        value: \`
+        ${query}
+        \`
+      });
+      yasqe.on("queryResponse", function (yasqe, response, duration) {
+
+        console.log({
+          response: response
+        })
+        window.yasr.setResponse(response, duration);
+      });
+      yasqe.query();
+      window.yasr = Yasr(document.getElementById("yasr"), {
+        prefixes: function () {
+          yasqe.getPrefixesFromQuery();
+        },
+        defaultPlugin: "${plugin}",
+        //Disable persisting settings. Makes it easier to use this file for our puppeteer tests
+        persistenceId: null,
+      });
+
+    };
+  </script>
+</body>
+
+</html>
+
+
+
+
+`;
+
+const getScreenWidth = (plugin) => {
+  switch (plugin) {
+    case "geo":
+      // case "table":
+      return 1200;
+    // return 831;
+    case "gallery":
+      return 900;
+    default:
+      return 1920;
+  }
+};
+
+let staticFileServer = new static.Server("./");
+function setupServer () {
+  return new Promise((resolve, reject) => {
+    var server = http
+      .createServer(function (request, response) {
+        if (request.url === "/") return response.end(getHtml(plugin));
+        request
+          .addListener("end", function () {
+            staticFileServer.serve(request, response);
+          })
+          .resume();
+      })
+      .listen(PORT, "localhost", () => {
+        resolve(server);
+      })
+      .on("error", (e) => reject(e));
+  });
+}
+function wait (time) {
+  return new Promise((resolve) => setTimeout(resolve, time));
+}
+function waitForImagesToLoad (page) {
+  return page.evaluate(() => {
+    const selectors = Array.from(document.querySelectorAll("img"));
+    return Promise.all(
+      selectors.map((img) => {
+        if (img.complete) return;
+        return new Promise((resolve, reject) => {
+          img.addEventListener("load", resolve);
+          img.addEventListener("error", reject);
+        });
+      })
+    );
+  });
+}
+
+(async () => {
+  const server = await setupServer();
+  const browser = await puppeteer.launch({
+    headless: false,
+    // devtools: true,
+    args: [process.env["NO_SANDBOX"] ? "--no-sandbox" : ""],
+  });
+  const page = await browser.newPage();
+  await page.setViewport({ width: getScreenWidth(plugin), height: 1200 });
+  await page.goto(`http://localhost:${PORT}`, { waitUntil: ["load", "domcontentloaded", "networkidle0"] });
+  //Wait for results to be drawn
+  // await page.waitForFunction('document.getElementsByClassName("yasr_results")[0].childElementCount > 0');
+  // await waitForImagesToLoad(page);
+  // await wait(100);
+  const clip = await page.evaluate(() => {
+    const rect = document.querySelector(".yasr_results").getBoundingClientRect();
+    return {
+      x: rect.left,
+      y: rect.top,
+      width: rect.width,
+      height: rect.height,
+    };
+  });
+  // eslint-disable-next-line no-console
+  console.log(clip);
+  await page.screenshot({
+    path: "screenshot.png",
+    fullPage: false,
+    clip: clip,
+  });
+  await page.close();
+  await browser.close();
+  await server.close();
+})();

package/src/bindingsToCsv.ts

@@ -0,0 +1,18 @@
+import Parser from "./parsers";
+import * as json2csv from "@json2csv/plainjs";
+import { mapValues } from "lodash-es";
+export default function (result: Parser.SparqlResults) {
+  const variables = result.head.vars;
+
+  const querySolutions = result.results?.bindings;
+
+  const json2csvParser = new json2csv.Parser({ fields: variables });
+
+  return json2csvParser.parse(
+    querySolutions
+      ? querySolutions.map((s) => {
+          return mapValues(s, (binding) => binding.value);
+        })
+      : []
+  );
+}

package/src/defaults.ts

@@ -0,0 +1,28 @@
+import { Config } from "./";
+export default function get(): Config {
+  return {
+    persistenceId: function (yasr) {
+      //Traverse parents untl we've got an id
+      // Get matching parent elements
+      var id = "";
+      var elem: any = yasr.rootEl;
+      if ((<any>elem).id) id = (<any>elem).id;
+      for (; elem && elem !== <any>document; elem = elem.parentNode) {
+        if (elem) {
+          if ((<any>elem).id) id = (<any>elem).id;
+          break;
+        }
+      }
+      return "yasr_" + id;
+    },
+    getPlainQueryLinkToEndpoint: undefined,
+    persistencyExpire: 60 * 60 * 24 * 30,
+    persistenceLabelResponse: "response",
+    persistenceLabelConfig: "config",
+    maxPersistentResponseSize: 100000,
+    prefixes: {},
+    plugins: {},
+    pluginOrder: ["table", "response"], // Default plugins, others are sorted alphabetically
+    defaultPlugin: "table",
+  };
+}

package/src/helpers/addCSS.ts

@@ -0,0 +1,7 @@
+export default function addCss(href: string) {
+  var link = document.createElement("link");
+  link.setAttribute("rel", "stylesheet");
+  link.setAttribute("type", "text/css");
+  link.setAttribute("href", href);
+  document.getElementsByTagName("head")[0].appendChild(link);
+}

package/src/helpers/addScript.ts

@@ -0,0 +1,12 @@
+export default function addScript(src: string, text?: string): Promise<void> {
+  return new Promise<void>((resolve, _reject) => {
+    var s = document.createElement("script");
+    s.setAttribute("type", "text/javascript");
+    s.setAttribute("async", "");
+    s.setAttribute("src", src);
+
+    if (text) s.innerHTML = text;
+    s.onload = () => resolve();
+    document.getElementsByTagName("head")[0].appendChild(s);
+  });
+}

package/src/helpers/index.ts

@@ -0,0 +1,3 @@
+export { default as addCss } from "./addCSS";
+export { default as addScript } from "./addScript";
+export { default as sanitize } from "./sanitize";

package/src/helpers/sanitize.ts

@@ -0,0 +1,11 @@
+import DOMPurify from "dompurify";
+DOMPurify.addHook("afterSanitizeAttributes", (node) => {
+  if (node instanceof HTMLAnchorElement) {
+    node.target = "_blank";
+    node.rel = "noopener noreferrer";
+  }
+});
+
+//Casting to simple function. That way, any lib that depends on us
+//wont have to require installing dompurify types
+export default DOMPurify.sanitize as (val: string | Node) => string;

package/src/imgs.ts

@@ -0,0 +1,7 @@
+export var download =
+  '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" baseProfile="tiny" x="0" y="0" width="100%" height="100%" viewBox="0 0 100 100" xml:space="preserve"><g id="Captions"/><g id="Your_Icon"><path  d="M88,84v-2c0-2.961-0.859-4-4-4H16c-2.961,0-4,0.98-4,4v2c0,3.102,1.039,4,4,4h68 C87.02,88,88,87.039,88,84z M58,12H42c-5,0-6,0.941-6,6v22H16l34,34l34-34H64V18C64,12.941,62.939,12,58,12z"/></g></svg>';
+export var pivot = `<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" height="100%" width="100%" version="1.1" y="0px" x="0px" viewBox="-949 951 122.65 124.00456"><switch transform="matrix(-1 0 0 1 -1741 23.496)"><foreignObject y="0" x="0" requiredExtensions="http://ns.adobe.com/AdobeIllustrator/10.0/" width="1" height="1"/><g transform="matrix(.68779 .053686 -.048647 .75904 -208.42 303.24)"><path d="m-851.8 1025.3c-0.3-0.7-0.8-1.2-1.4-1.6l-28.9-18.3c-2.6-1.6-5.8 0.7-5.1 3.6l2.3 10.1c-17.7-0.4-32-14.6-32.5-32.3l10 2.3c2.9 0.7 5.2-2.5 3.6-5.1l-18.3-28.9c-0.9-1.4-2.6-2-4.2-1.3-0.7 0.3-1.2 0.8-1.6 1.4l-18.3 28.9c-1.6 2.6 0.7 5.8 3.6 5.1l10.1-2.3c0.5 25.9 21.5 46.9 47.5 47.3l-2.3 10c-0.7 2.9 2.5 5.2 5.1 3.6l28.9-18.3c1.6-0.8 2.2-2.6 1.5-4.2z"/></g><g><rect transform="scale(-1,1)" height="182.73" width="58.263" y="943.58" x="789.91"/><path d="m-555.88 62.924v-374.47h1252.1v748.94h-1252.1zm596.4 34.428c1.3908-1.3908 1.3477-2.0517-0.52029-7.9711-0.8688-2.7531-1.5838-5.0324-1.589-5.0651-0.0053-0.03273 1.2924-0.21249 2.8835-0.3995 6.1211-0.71941 14.098-3.8308 19.883-7.7551 12.823-8.6993 21.186-24.002 21.186-38.765 0-3.59 0.04131-3.7083 1.1917-3.425 0.65546 0.16137 3.3047 0.59645 5.8872 0.96682l4.6954 0.67342 1.3092-1.522c0.813-0.945 1.224-1.965 1.085-2.692-0.363-1.901-21.135-29.783-22.678-30.441-2.901-1.2375-3.406-0.57737-12.545 16.409-4.7338 8.7985-8.607 16.462-8.607 17.031 0 1.1765 2.2399 3.6338 3.3124 3.6338 0.39179 0 2.9648-0.71083 5.718-1.5796 2.7531-0.86879 5.0652-1.5838 5.138-1.589 0.36716-0.02595 0.04608 3.5333-0.65244 7.2269-2.3628 12.497-12.327 22.931-24.781 25.95-1.9718 0.47792-3.7039 0.75004-3.8492 0.6047-0.14534-0.14533 0.12002-2.6906 0.58972-5.6561 0.78639-4.9651 0.78618-5.4954-0.0053-6.6999-0.63994-0.98013-1.3213-1.308-2.7159-1.308-1.5863 0-3.9896 1.5653-16.275 10.6-15.151 11.143-16.136 12.125-14.661 14.622 0.9789 1.657 31.34 18.146 33.483 18.184 0.80111 0.01425 1.9333-0.45076 2.5159-1.0334z" transform="matrix(-1,0,0,1,-849.24,951)"/><rect transform="scale(-1,1)" height="134" width="5.8263" y="926.47" x="830.3"/><rect transform="matrix(0,1,1,0,0,0)" height="134" width="5.8263" y="-925.77" x="961.98"/></g></switch><rect height="122.65" width="11.491" y="951" x="-915.98" stroke-width="1.2986"/><rect transform="rotate(90)" height="122.65" width="11.491" y="826.35" x="985.27" stroke-width="1.2986"/></svg>`;
+export var fullscreen =
+  '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/></svg>';
+export var fullscreenExit =
+  '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z"/></svg>';