@jupytergis/base 0.2.1 → 0.3.0

package/lib/tools.js

@@ -3,6 +3,8 @@ import { VectorTile } from '@mapbox/vector-tile';
 import { URLExt } from '@jupyterlab/coreutils';
 import { ServerConnection } from '@jupyterlab/services';
 import * as d3Color from 'd3-color';
+import { PathExt } from '@jupyterlab/coreutils';
+import shp from 'shpjs';
 import RASTER_LAYER_GALLERY from '../rasterlayer_gallery/raster_layer_gallery.json';
 import { getGdal } from './gdal';
 export const debounce = (func, timeout = 100) => {
@@ -337,3 +339,309 @@ export const loadGeoTIFFWithCache = async (sourceInfo) => {
         sourceUrl: sourceInfo.url
     };
 };
+/**
+ * Generalized file reader for different source types.
+ *
+ * @param fileInfo - Object containing the file path and source type.
+ * @returns A promise that resolves to the file content.
+ */
+export const loadFile = async (fileInfo) => {
+    const { filepath, type, model } = fileInfo;
+    if (filepath.startsWith('http://') || filepath.startsWith('https://')) {
+        switch (type) {
+            case 'ImageSource': {
+                try {
+                    const response = await fetch(filepath);
+                    if (!response.ok) {
+                        throw new Error(`Failed to fetch image from URL: ${filepath}`);
+                    }
+                    const contentType = response.headers.get('Content-Type');
+                    if (!contentType || !contentType.startsWith('image/')) {
+                        throw new Error(`Invalid image URL. Content-Type: ${contentType}`);
+                    }
+                    // load the image to verify it's not corrupted
+                    await validateImage(await response.blob());
+                    return filepath;
+                }
+                catch (error) {
+                    console.error('Error validating remote image:', error);
+                    throw error;
+                }
+            }
+            case 'ShapefileSource': {
+                try {
+                    const response = await fetch(`/jupytergis_core/proxy?url=${filepath}`);
+                    const arrayBuffer = await response.arrayBuffer();
+                    const geojson = await shp(arrayBuffer);
+                    return geojson;
+                }
+                catch (error) {
+                    console.error('Error loading remote shapefile:', error);
+                    throw error;
+                }
+            }
+            case 'GeoJSONSource': {
+                try {
+                    const response = await fetch(`/jupytergis_core/proxy?url=${filepath}`);
+                    if (!response.ok) {
+                        throw new Error(`Failed to fetch GeoJSON from URL: ${filepath}`);
+                    }
+                    const geojson = await response.json();
+                    return geojson;
+                }
+                catch (error) {
+                    console.error('Error loading remote GeoJSON:', error);
+                    throw error;
+                }
+            }
+            default: {
+                throw new Error(`Unsupported URL handling for source type: ${type}`);
+            }
+        }
+    }
+    if (!model.contentsManager || !model.filePath) {
+        throw new Error('ContentsManager or filePath is not initialized.');
+    }
+    const absolutePath = PathExt.resolve(PathExt.dirname(model.filePath), filepath);
+    try {
+        const file = await model.contentsManager.get(absolutePath, {
+            content: true
+        });
+        if (!file.content) {
+            throw new Error(`File at ${absolutePath} is empty or inaccessible.`);
+        }
+        switch (type) {
+            case 'GeoJSONSource': {
+                return typeof file.content === 'string'
+                    ? JSON.parse(file.content)
+                    : file.content;
+            }
+            case 'ShapefileSource': {
+                const arrayBuffer = await stringToArrayBuffer(file.content);
+                const geojson = await shp(arrayBuffer);
+                return geojson;
+            }
+            case 'ImageSource': {
+                if (typeof file.content === 'string') {
+                    const mimeType = getMimeType(filepath);
+                    if (!mimeType.startsWith('image/')) {
+                        throw new Error(`Invalid image file. MIME type: ${mimeType}`);
+                    }
+                    // Attempt to decode the base64 data
+                    try {
+                        await validateImage(await base64ToBlob(file.content, mimeType));
+                        return `data:${mimeType};base64,${file.content}`;
+                    }
+                    catch (error) {
+                        console.error('Error image content failed to decode.:', error);
+                        throw error;
+                    }
+                }
+                else {
+                    throw new Error('Invalid file format for image content.');
+                }
+            }
+            default: {
+                throw new Error(`Unsupported source type: ${type}`);
+            }
+        }
+    }
+    catch (error) {
+        console.error(`Error reading file '${filepath}':`, error);
+        throw error;
+    }
+};
+/**
+ * Validates whether a given Blob represents a valid image.
+ *
+ * @param blob - The Blob to validate.
+ * @returns A promise that resolves if the Blob is a valid image, or rejects with an error otherwise.
+ */
+const validateImage = async (blob) => {
+    return new Promise((resolve, reject) => {
+        const img = new Image();
+        img.onload = () => resolve(); // Valid image
+        img.onerror = () => reject(new Error('Invalid image content.'));
+        img.src = URL.createObjectURL(blob);
+    });
+};
+/**
+ * Converts a base64-encoded string to a Blob.
+ *
+ * @param base64 - The base64-encoded string representing the file data.
+ * @param mimeType - The MIME type of the data.
+ * @returns A promise that resolves to a Blob representing the decoded data.
+ */
+export const base64ToBlob = async (base64, mimeType) => {
+    const response = await fetch(`data:${mimeType};base64,${base64}`);
+    return await response.blob();
+};
+/**
+ * A mapping of file extensions to their corresponding MIME types.
+ */
+export const MIME_TYPES = {
+    // from https://github.com/python/cpython/blob/3.9/Lib/mimetypes.py
+    '.a': 'application/octet-stream',
+    '.ai': 'application/postscript',
+    '.aif': 'audio/x-aiff',
+    '.aifc': 'audio/x-aiff',
+    '.aiff': 'audio/x-aiff',
+    '.au': 'audio/basic',
+    '.avi': 'video/x-msvideo',
+    '.bat': 'text/plain',
+    '.bcpio': 'application/x-bcpio',
+    '.bin': 'application/octet-stream',
+    '.bmp': 'image/bmp',
+    '.c': 'text/plain',
+    '.cdf': 'application/x-netcdf',
+    '.cpio': 'application/x-cpio',
+    '.csh': 'application/x-csh',
+    '.css': 'text/css',
+    '.csv': 'text/csv',
+    '.dll': 'application/octet-stream',
+    '.doc': 'application/msword',
+    '.dot': 'application/msword',
+    '.dvi': 'application/x-dvi',
+    '.eml': 'message/rfc822',
+    '.eps': 'application/postscript',
+    '.etx': 'text/x-setext',
+    '.exe': 'application/octet-stream',
+    '.gif': 'image/gif',
+    '.gtar': 'application/x-gtar',
+    '.h': 'text/plain',
+    '.hdf': 'application/x-hdf',
+    '.htm': 'text/html',
+    '.html': 'text/html',
+    '.ico': 'image/vnd.microsoft.icon',
+    '.ief': 'image/ief',
+    '.jpe': 'image/jpeg',
+    '.jpeg': 'image/jpeg',
+    '.jpg': 'image/jpg',
+    '.js': 'application/javascript',
+    '.json': 'application/json',
+    '.ksh': 'text/plain',
+    '.latex': 'application/x-latex',
+    '.m1v': 'video/mpeg',
+    '.m3u': 'application/vnd.apple.mpegurl',
+    '.m3u8': 'application/vnd.apple.mpegurl',
+    '.man': 'application/x-troff-man',
+    '.me': 'application/x-troff-me',
+    '.mht': 'message/rfc822',
+    '.mhtml': 'message/rfc822',
+    '.mid': 'audio/midi',
+    '.midi': 'audio/midi',
+    '.mif': 'application/x-mif',
+    '.mjs': 'application/javascript',
+    '.mov': 'video/quicktime',
+    '.movie': 'video/x-sgi-movie',
+    '.mp2': 'audio/mpeg',
+    '.mp3': 'audio/mpeg',
+    '.mp4': 'video/mp4',
+    '.mpa': 'video/mpeg',
+    '.mpe': 'video/mpeg',
+    '.mpeg': 'video/mpeg',
+    '.mpg': 'video/mpeg',
+    '.ms': 'application/x-troff-ms',
+    '.nc': 'application/x-netcdf',
+    '.nws': 'message/rfc822',
+    '.o': 'application/octet-stream',
+    '.obj': 'application/octet-stream',
+    '.oda': 'application/oda',
+    '.p12': 'application/x-pkcs12',
+    '.p7c': 'application/pkcs7-mime',
+    '.pbm': 'image/x-portable-bitmap',
+    '.pct': 'image/pict',
+    '.pdf': 'application/pdf',
+    '.pfx': 'application/x-pkcs12',
+    '.pgm': 'image/x-portable-graymap',
+    '.pic': 'image/pict',
+    '.pict': 'image/pict',
+    '.pl': 'text/plain',
+    '.png': 'image/png',
+    '.pnm': 'image/x-portable-anymap',
+    '.pot': 'application/vnd.ms-powerpoint',
+    '.ppa': 'application/vnd.ms-powerpoint',
+    '.ppm': 'image/x-portable-pixmap',
+    '.pps': 'application/vnd.ms-powerpoint',
+    '.ppt': 'application/vnd.ms-powerpoint',
+    '.ps': 'application/postscript',
+    '.pwz': 'application/vnd.ms-powerpoint',
+    '.py': 'text/x-python',
+    '.pyc': 'application/x-python-code',
+    '.pyo': 'application/x-python-code',
+    '.qt': 'video/quicktime',
+    '.ra': 'audio/x-pn-realaudio',
+    '.ram': 'application/x-pn-realaudio',
+    '.ras': 'image/x-cmu-raster',
+    '.rdf': 'application/xml',
+    '.rgb': 'image/x-rgb',
+    '.roff': 'application/x-troff',
+    '.rtf': 'application/rtf',
+    '.rtx': 'text/richtext',
+    '.sgm': 'text/x-sgml',
+    '.sgml': 'text/x-sgml',
+    '.sh': 'application/x-sh',
+    '.shar': 'application/x-shar',
+    '.snd': 'audio/basic',
+    '.so': 'application/octet-stream',
+    '.src': 'application/x-wais-source',
+    '.sv4cpio': 'application/x-sv4cpio',
+    '.sv4crc': 'application/x-sv4crc',
+    '.svg': 'image/svg+xml',
+    '.swf': 'application/x-shockwave-flash',
+    '.t': 'application/x-troff',
+    '.tar': 'application/x-tar',
+    '.tcl': 'application/x-tcl',
+    '.tex': 'application/x-tex',
+    '.texi': 'application/x-texinfo',
+    '.texinfo': 'application/x-texinfo',
+    '.tif': 'image/tiff',
+    '.tiff': 'image/tiff',
+    '.tr': 'application/x-troff',
+    '.tsv': 'text/tab-separated-values',
+    '.txt': 'text/plain',
+    '.ustar': 'application/x-ustar',
+    '.vcf': 'text/x-vcard',
+    '.wasm': 'application/wasm',
+    '.wav': 'audio/x-wav',
+    '.webm': 'video/webm',
+    '.webmanifest': 'application/manifest+json',
+    '.wiz': 'application/msword',
+    '.wsdl': 'application/xml',
+    '.xbm': 'image/x-xbitmap',
+    '.xlb': 'application/vnd.ms-excel',
+    '.xls': 'application/vnd.ms-excel',
+    '.xml': 'text/xml',
+    '.xpdl': 'application/xml',
+    '.xpm': 'image/x-xpixmap',
+    '.xsl': 'application/xml',
+    '.xul': 'text/xul',
+    '.xwd': 'image/x-xwindowdump',
+    '.zip': 'application/zip',
+    '.ipynb': 'application/json'
+};
+/**
+ * Determine the MIME type based on the file extension.
+ *
+ * @param filename - The name of the file.
+ * @returns A string representing the MIME type.
+ */
+export const getMimeType = (filename) => {
+    var _a;
+    const extension = `.${((_a = filename.split('.').pop()) === null || _a === void 0 ? void 0 : _a.toLowerCase()) || ''}`;
+    if (MIME_TYPES[extension]) {
+        return MIME_TYPES[extension];
+    }
+    console.warn(`Unknown file extension: ${extension}, defaulting to 'application/octet-stream'.`);
+    return 'application/octet-stream';
+};
+/**
+ * Helper to convert a string (base64) to ArrayBuffer.
+ *
+ * @param content - File content as a base64 string.
+ * @returns An ArrayBuffer.
+ */
+export const stringToArrayBuffer = async (content) => {
+    const base64Response = await fetch(`data:application/octet-stream;base64,${content}`);
+    return await base64Response.arrayBuffer();
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jupytergis/base",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "description": "A JupyterLab extension for 3D modelling.",
   "keywords": [
     "jupyter",
@@ -38,8 +38,12 @@
     "watch": "tsc -w"
   },
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.5.2",
+    "@fortawesome/free-solid-svg-icons": "^6.5.2",
+    "@fortawesome/react-fontawesome": "latest",
+    "@jupyter/react-components": "^0.16.6",
     "@jupyter/ydoc": "^2.0.0 || ^3.0.0",
-    "@jupytergis/schema": "^0.2.1",
+    "@jupytergis/schema": "^0.3.0",
     "@jupyterlab/application": "^4.3.0",
     "@jupyterlab/apputils": "^4.3.0",
     "@jupyterlab/completer": "^4.3.0",
@@ -61,13 +65,18 @@
     "@naisutech/react-tree": "^3.0.1",
     "@rjsf/core": "^4.2.0",
     "@rjsf/validator-ajv8": "^5.23.1",
-    "@types/d3-color": "^3.1.0",
-    "@types/three": "^0.134.0",
     "ajv": "^8.14.0",
+    "colormap": "^2.3.2",
     "d3-color": "^3.1.0",
     "gdal3.js": "^2.8.1",
+    "geojson-vt": "^4.0.2",
+    "geotiff": "^2.1.3",
+    "ol": "^10.1.0",
     "ol-pmtiles": "^0.5.0",
     "pbf": "^4.0.1",
+    "pmtiles": "^3.0.7",
+    "proj4": "^2.14.0",
+    "proj4-list": "^1.0.2",
     "react": "^18.0.1",
     "shpjs": "^6.1.0",
     "styled-components": "^5.3.6",
@@ -77,9 +86,11 @@
   },
   "devDependencies": {
     "@apidevtools/json-schema-ref-parser": "^9.0.9",
+    "@types/colormap": "^2.3.4",
+    "@types/d3-color": "^3.1.0",
     "@types/node": "^18.15.11",
+    "@types/proj4": "^2.5.5",
     "@types/shpjs": "^3.4.7",
-    "@types/three": "^0.135.0",
     "@types/uuid": "^10.0.0",
     "rimraf": "^3.0.2",
     "typescript": "^5"

package/style/base.css

@@ -8,6 +8,7 @@
 @import url('./leftPanel.css');
 @import url('./filterPanel.css');
 @import url('./symbologyDialog.css');
+@import url('./statusBar.css');
 @import url('ol/ol.css');
 
 .jGIS-Toolbar-GroupName {

package/style/icons/logo_mini_qgz.svg

@@ -0,0 +1,31 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  version="1.1"
+  width="256"
+  height="256"
+  viewBox="0 0 256 256"
+  class="jp-icon-selectable">
+  <g class="jp-icon-selectable">
+    <path
+      class="jp-icon-selectable"
+      d="M137.607,136.899 L172.044,136.899 L142.898,108.083 L107.19,108.083 L107.19,142.392 L137.607,172.708 z"
+      fill="#EE7913" />
+    <path
+      class="jp-icon-selectable"
+      d="M248.061,212.048 L186.618,151.306 L152.01,151.306 L152.01,187.067 L210.891,245.749 L248.061,245.749 z"
+      fill="#589632" />
+    <path
+      class="jp-icon-selectable"
+      d="M152.01,151.306 L186.618,151.306 L172.044,136.899 L137.607,136.899 L137.607,172.708 L152.01,187.067 z"
+      fill="#F0E64A" />
+    <path
+      class="jp-icon-selectable"
+      d="M144.826,199.3 C139.606,200.502 134.183,201.154 128.588,201.154 C88.561,201.154 54.516,168.24 54.516,125.564 C54.516,82.887 88.182,50.695 128.588,50.695 C168.989,50.695 201.158,82.882 201.158,125.564 C201.158,132.501 200.295,139.183 198.697,145.509 L235.744,182.551 C245.296,165.815 250.64,146.354 250.64,125.277 C250.64,59.499 198.147,10.251 127.839,10.251 C57.849,10.251 5.36,59.178 5.36,125.277 C5.36,191.698 57.849,241.598 127.839,241.598 C145.905,241.598 162.791,238.275 177.916,232.227 L144.826,199.3 z"
+      fill="#93B023" />
+    <path
+      class="jp-icon-selectable"
+      d="M107.19,108.083 L248.061,245.749 L248.061,212.048 L186.618,151.306 L172.044,136.898 L142.898,108.083 z"
+      fill="#FFFFFF"
+      fill-opacity="0.172" />
+  </g>
+</svg>

package/style/leftPanel.css

@@ -64,6 +64,14 @@
 .jp-gis-layerGroupHeader.jp-mod-selected .jp-icon-selectable {
   fill: var(--jp-ui-inverse-font-color1);
 }
+.jp-gis-layer.jp-mod-selected path,
+.jp-gis-source.jp-mod-selected path {
+  fill: var(--jp-ui-inverse-font-color1);
+}
+.jp-gis-layer.jp-mod-selected button:hover,
+.jp-gis-source.jp-mod-selected button:hover {
+  background: none;
+}
 
 .jp-gis-layer button,
 .jp-gis-source button {

package/style/statusBar.css

@@ -0,0 +1,16 @@
+.jgis-status-bar {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  height: 16px;
+  background-color: var(--jp-layout-color1);
+  font-size: var(--jp-ui-font-size0);
+}
+
+.jgis-status-bar-item {
+  flex: 0 0 content;
+}
+
+.jgis-status-bar-coords {
+  min-width: 160px;
+}