@jupytergis/base 0.13.2 → 0.14.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jupytergis/base",
-  "version": "0.13.2",
+  "version": "0.14.0",
   "description": "A JupyterLab extension for 3D modelling.",
   "keywords": [
     "jupyter",
@@ -44,7 +44,7 @@
     "@jupyter/collaboration": "^4",
     "@jupyter/react-components": "^0.16.6",
     "@jupyter/ydoc": "^2.0.0 || ^3.0.0",
-    "@jupytergis/schema": "^0.13.2",
+    "@jupytergis/schema": "^0.14.0",
     "@jupyterlab/application": "^4.3.0",
     "@jupyterlab/apputils": "^4.3.0",
     "@jupyterlab/completer": "^4.3.0",
@@ -93,7 +93,6 @@
     "styled-components": "^5.3.6",
     "three": "^0.135.0",
     "three-mesh-bvh": "^0.5.17",
-    "uuid": "^11.0.3",
     "vaul": "^1.1.2"
   },
   "devDependencies": {
@@ -103,7 +102,6 @@
     "@types/node": "^18.15.11",
     "@types/proj4": "2.19.0",
     "@types/shpjs": "^3.4.7",
-    "@types/uuid": "^10.0.0",
     "rimraf": "^3.0.2",
     "ts-patch": "^3.3.0",
     "typescript": "^5",

package/style/base.css

@@ -10,6 +10,7 @@
 @import url('./filterPanel.css');
 @import url('./symbologyDialog.css');
 @import url('./statusBar.css');
+@import url('./spectaProgressBar.css');
 @import url('./temporalSlider.css');
 @import url('./tabPanel.css');
 @import url('./stacBrowser.css');
@@ -141,7 +142,7 @@ button.jp-mod-styled.jp-mod-reject {
   gap: 0.5rem;
   position: absolute;
   bottom: 0.125rem;
-  z-index: 1000;
+  z-index: 1;
   padding: 0 0.125rem;
 }
 
@@ -185,3 +186,24 @@ button.jp-mod-styled.jp-mod-reject {
 body[data-notebook='specta'] #main.jp-ThemedContainer {
   overflow: visible;
 }
+
+.jgis-center-content {
+  text-align: center;
+}
+
+.jgis-bg-transparent {
+  background-color: transparent;
+}
+
+.jgis-bg-transparent:hover {
+  background-color: transparent;
+}
+
+.jgis-rotate-90 {
+  rotate: 0deg;
+  transition: rotate 150ms ease;
+}
+
+[data-state='open'] > .jgis-rotate-90 {
+  rotate: 90deg;
+}

package/style/dialog.css

@@ -6,3 +6,8 @@
 .jGIS-property-panel .rjsf .jp-select-wrapper select {
   background-image: unset;
 }
+
+/* Collapse the form-group row that contains our hidden field marker */
+.jp-root .form-group:has(.jGIS-hidden-field) {
+  display: none !important;
+}

package/style/leftPanel.css

@@ -7,8 +7,7 @@
   min-height: 3em;
 }
 
-.jp-gis-layerItem,
-.jp-gis-source {
+.jp-gis-layerItem {
   padding: 2px 0 2px 12px;
 }
 
@@ -37,8 +36,7 @@
   transform: rotate(0deg);
 }
 
-.jp-gis-layer,
-.jp-gis-source {
+.jp-gis-layer {
   display: flex;
   flex-direction: row;
   /* align-items: center; */
@@ -46,76 +44,63 @@
 }
 
 .jp-gis-layer.jp-mod-selected,
-.jp-gis-source.jp-mod-selected,
 .jp-gis-layerGroupHeader.jp-mod-selected {
   color: var(--jp-ui-inverse-font-color1);
   background: var(--jp-brand-color1);
 }
 
-.jp-gis-layer:hover:not(.jp-mod-selected),
-.jp-gis-source:hover:not(.jp-mod-selected) {
+.jp-gis-layer:hover:not(.jp-mod-selected) {
   cursor: pointer;
   background: var(--jp-layout-color2);
 }
 
 .jp-gis-layer.jp-mod-selected .jp-icon-selectable,
-.jp-gis-source.jp-mod-selected .jp-icon-selectable,
 .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 {
+.jp-gis-layer.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 {
+.jp-gis-layer.jp-mod-selected button:hover {
   background: none;
 }
 
-.jp-gis-layer button,
-.jp-gis-source button {
+.jp-gis-layer button {
   min-height: unset;
   min-width: unset;
   padding: unset;
   margin-right: 4px;
 }
 
-.jp-gis-layer.jp-mod-selected button:hover .jp-icon-selectable,
-.jp-gis-source.jp-mod-selected button:hover .jp-icon-selectable {
+.jp-gis-layer.jp-mod-selected button:hover .jp-icon-selectable {
   fill: var(--jp-ui-font-color1);
 }
 
-.jp-gis-layerIcon,
-.jp-gis-sourceIcon {
+.jp-gis-layerIcon {
   display: flex;
   align-items: center;
 }
 
-.jp-gis-layerIcon > svg,
-.jp-gis-sourceIcon > svg {
+.jp-gis-layerIcon > svg {
   height: 16px;
   width: 16px;
 }
 
-.jp-gis-layerTitle,
-.jp-gis-sourceTitle {
+.jp-gis-layerTitle {
   display: flex;
   flex-grow: 1;
   align-items: center;
 }
 
-.jp-gis-layerText:focus,
-.jp-gis-sourceText:focus {
+.jp-gis-layerText:focus {
   outline: none;
 }
 
-.jp-gis-layerTitle .jp-gis-layerIcon,
-.jp-gis-sourceTitle .jp-gis-sourceIcon {
+.jp-gis-layerTitle .jp-gis-layerIcon {
   padding-right: 4px;
 }
 
-.jp-gis-layerIcon.jp-gis-mod-hidden path,
-.jp-gis-sourceIcon.jp-gis-mod-hidden path {
+.jp-gis-layerIcon.jp-gis-mod-hidden path {
   fill: var(--jp-warn-color0);
 }
 
@@ -134,8 +119,7 @@
   border: 1px solid var(--jp-brand-color1);
 }
 
-.jp-gis-layerText,
-.jp-gis-sourceText {
+.jp-gis-layerText {
   padding: 3px 0;
   cursor: pointer;
   flex-grow: 1;
@@ -162,13 +146,6 @@ li .lm-Menu-itemLabel {
   text-transform: capitalize;
 }
 
-.jp-gis-sourceInfo {
-  font-size: var(--jp-ui-font-size0);
-  font-style: italic;
-  padding-left: 5px;
-  color: var(--jp-ui-font-color2);
-}
-
 #jp-drag-indicator {
   top: calc(-1 * var(--jp-border-width) + 1px);
   left: calc(-1 * var(--jp-border-width));

package/style/shared/button.css

@@ -124,9 +124,7 @@
 }
 
 .jgis-button[data-variant='icon'] {
-  background-color: var(--jp-ui-font-color0);
   border: none;
-  color: var(--jp-layout-color0);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -136,14 +134,6 @@
   border-radius: 9999px;
 }
 
-.jgis-button[data-variant='icon']:hover {
-  background-color: color-mix(
-    in srgb,
-    var(--jp-accent-color0),
-    transparent 20%
-  );
-}
-
 /* sizing */
 .jgis-button[data-size='sm'] {
   height: 2.25rem;

package/style/shared/switch.css

@@ -1,7 +1,8 @@
 .jgis-switch {
   display: inline-flex;
   height: 1.15rem;
-  width: 2rem;
+  width: 2.5rem;
+  padding: 2px;
   flex-shrink: 0;
   align-items: center;
   border-radius: 9999px !important;
@@ -25,19 +26,19 @@
 }
 
 .jgis-switch[data-state='checked'] {
-  background-color: var(--jp-accent-color0);
+  background-color: var(--jp-accent-color1);
 }
 
 .jgis-switch[data-state='unchecked'] {
-  background-color: var(--jp-layout-color2);
+  background-color: var(--jp-layout-color3);
 }
 
 .jgis-switch-thumb {
   background-color: var(--jp-layout-color1);
   pointer-events: none;
   display: block;
-  width: 1rem;
-  height: 1rem;
+  width: 0.75rem;
+  height: 0.75rem;
   border-radius: 9999px;
   box-shadow: none;
   transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
@@ -45,11 +46,11 @@
 }
 
 .jgis-switch-thumb[data-state='checked'] {
-  transform: translateX(calc(100% - 6px));
+  transform: translateX(1.4rem);
 }
 
 .jgis-switch-thumb[data-state='unchecked'] {
-  transform: translateX(-2px);
+  transform: translateX(0);
 }
 
 @media (prefers-color-scheme: dark) {

package/style/spectaProgressBar.css

@@ -0,0 +1,144 @@
+/* Specta presentation progress bar (segment stepper) */
+
+:root {
+  --jgis-specta-dot-fill-outer: var(--jp-accent-color0);
+  --jgis-specta-dot-fill-inner: var(--jp-accent-color3);
+  --jgis-specta-track-fill: color-mix(
+    in srgb,
+    var(--jp-accent-color1) 80%,
+    transparent
+  );
+  --jgis-specta-track-default: var(--jp-border-color0);
+  --jgis-specta-smooth: cubic-bezier(0, 0.72, 0.58, 1);
+}
+
+.jgis-specta-progress .jgis-specta-progress-bar {
+  display: flex;
+  flex-direction: row-reverse;
+  margin: auto auto 0;
+  width: 31.25rem;
+  max-width: 40%;
+}
+
+.jgis-specta-progress .jgis-specta-bar-segment {
+  display: flex;
+  flex-grow: 1;
+  position: relative;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Track fill line; :not(:last-child) below adds width/position for the connector */
+.jgis-specta-progress .jgis-specta-bar-segment::after {
+  content: '';
+  position: absolute;
+  height: 0.25rem;
+  top: calc(50% - 0.125rem);
+  transition: transform var(--jgis-specta-transition-duration, 0.06s)
+    var(--jgis-specta-smooth);
+  transform: scaleX(0);
+  background: var(--jgis-specta-track-fill);
+  transform-origin: left;
+  z-index: 5;
+}
+
+/* Filled state: track line + dot */
+.jgis-specta-progress .jgis-specta-bar-segment[data-filled]::after {
+  transform: scaleX(1);
+}
+
+/* Connector bar only when there is a segment to the right */
+.jgis-specta-progress .jgis-specta-bar-segment:not(:last-child)::before,
+.jgis-specta-progress .jgis-specta-bar-segment:not(:last-child)::after {
+  content: '';
+  width: calc(100% - 1.5rem);
+  position: absolute;
+  right: calc(50% + 0.75rem);
+}
+
+.jgis-specta-progress .jgis-specta-bar-segment:not(:last-child)::before {
+  height: 0.5rem;
+  top: calc(50% - 0.25rem);
+  background: var(--jgis-specta-track-default);
+}
+
+.jgis-specta-progress .jgis-specta-bar-segment:not(:last-child)::after {
+  transition-delay: 0s;
+}
+
+/* Button = dot */
+.jgis-specta-progress .jgis-specta-progress-input {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 1.875rem;
+  height: 1.875rem;
+  margin: 0;
+  padding: 0;
+  border: 3px solid var(--jgis-specta-track-default);
+  border-radius: 50%;
+  background: transparent;
+  cursor: pointer;
+  box-shadow:
+    inset 2px 2px 4px rgba(0, 0, 0, 0.3),
+    2px 2px 8px rgba(0, 0, 0, 0.1);
+  box-sizing: border-box;
+  z-index: 2;
+}
+
+.jgis-specta-progress .jgis-specta-progress-input:focus-visible {
+  outline: 2px solid var(--jp-brand-color1);
+  outline-offset: 2px;
+}
+
+.jgis-specta-progress .jgis-specta-progress-input::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: 50%;
+  background: radial-gradient(
+    circle at center,
+    var(--jgis-specta-dot-fill-inner),
+    var(--jgis-specta-dot-fill-outer)
+  );
+  transform: scale(0.3);
+  opacity: 0;
+  transition:
+    transform 0.2s var(--jgis-specta-smooth),
+    opacity 0.2s var(--jgis-specta-smooth);
+  pointer-events: none;
+}
+
+.jgis-specta-progress
+  .jgis-specta-bar-segment[data-filled]
+  .jgis-specta-progress-input::before {
+  transform: none;
+  opacity: 1;
+}
+
+/* Dot fill delay: 0 when going prev; after track duration when data-direction="next" */
+.jgis-specta-progress
+  .jgis-specta-bar-segment:not(:last-child)
+  .jgis-specta-progress-input::before {
+  transition-delay: 0s;
+}
+.jgis-specta-progress[data-direction='next']
+  .jgis-specta-bar-segment:not(:last-child)
+  .jgis-specta-progress-input::before {
+  transition-delay: var(--jgis-specta-transition-duration, 0.3s);
+}
+
+.jgis-specta-progress {
+  box-sizing: border-box;
+  position: fixed;
+  bottom: 1.125rem;
+  width: 100%;
+  z-index: 40;
+}
+
+.jgis-specta-progress *,
+.jgis-specta-progress *::before,
+.jgis-specta-progress *::after {
+  box-sizing: inherit;
+}

package/style/storyPanel.css

@@ -213,3 +213,36 @@
   bottom: 0.125rem;
   right: 0.125rem;
 }
+
+/* Hierarchy: .form-group > .jp-FormGroup-content > .jp-objectFieldWrapper > #jgis-source-properties-field */
+.form-group:has(
+  .jp-FormGroup-content .jp-objectFieldWrapper #jgis-source-properties-field
+) {
+  padding: 0;
+}
+
+/* #jgis-source-properties-field and .jGIS-property-panel are siblings; remove padding on the panel's outer wrapper */
+.form-group:has(
+    .jp-FormGroup-content .jp-objectFieldWrapper #jgis-source-properties-field
+  ):has(.jGIS-property-panel)
+  .jGIS-property-panel
+  .jGIS-property-outer {
+  padding: 0;
+}
+
+.jp-arrayFieldWrapper legend {
+  border-bottom: none;
+}
+
+.jgis-symbology-override-list {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.jgis-symbology-override-collapsible-trigger {
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+  cursor: pointer;
+}

package/style/symbologyDialog.css

@@ -23,7 +23,7 @@ select option {
 
 .jp-gis-symbology-row label {
   font-size: var(--jp-ui-font-size2);
-  flex: 0 1 20%;
+  flex: 0 1 auto;
 }
 
 .jp-gis-symbology-row > .jp-select-wrapper,
@@ -191,7 +191,7 @@ select option {
 }
 
 .jp-gis-color-ramp-entry:not(.jp-gis-selected-entry):hover .jp-gis-color-label {
-  transform: scale(1.2);
+  transform: translateX(6px);
 }
 
 .jp-gis-color-canvas {

package/lib/formbuilder/objectform/baseform.d.ts

@@ -1,91 +0,0 @@
-import { IJupyterGISModel } from '@jupytergis/schema';
-import { Dialog } from '@jupyterlab/apputils';
-import { Signal } from '@lumino/signaling';
-import { IChangeEvent, ISubmitEvent } from '@rjsf/core';
-import { RJSFSchema, UiSchema } from '@rjsf/utils';
-import * as React from 'react';
-import { IDict } from "../../types";
-export interface IJupyterGISFormContext<TFormData = IDict | undefined> {
-    model: IJupyterGISModel;
-    formData: TFormData;
-}
-export interface IBaseFormStates {
-    schema?: RJSFSchema;
-    extraErrors?: any;
-}
-export interface IBaseFormProps {
-    /**
-     * The context of the form, whether it's for creating an object or updating its properties. This will have the effect of showing or not inputs for readonly properties.
-     */
-    formContext: 'update' | 'create';
-    /**
-     * The source data for filling the form
-     */
-    sourceData: IDict | undefined;
-    /**
-     * Path to the file
-     */
-    filePath?: string;
-    /**
-     * Current GIS model
-     */
-    model: IJupyterGISModel;
-    /**
-     * callback for syncing back the data into the model upon form submit
-     * @param properties
-     */
-    syncData: (properties: IDict) => void;
-    /**
-     * The schema for the rjsf formk
-     */
-    schema?: IDict;
-    /**
-     * Ok signal. This is the signal sent by the parent dialog upon "Ok" button click. No ok button will be displayed if defined.
-     */
-    ok?: Signal<Dialog<any>, number>;
-    /**
-     * Cancel callback
-     */
-    cancel?: () => void;
-    /**
-     * A signal emitting when the form changed
-     */
-    formChangedSignal?: Signal<any, IDict<any>>;
-    /**
-     * A signal emitting when the form has extra errors, with a boolean whether there are some
-     * extra errors or not.
-     */
-    formErrorSignal?: Signal<Dialog<any>, boolean>;
-}
-/**
- * Generate a form to edit a layer/source type. This class is meant to be sub-classed to create more refined forms for specific layers/sources.
- *
- * It will be up to the user of this class to actually perform the creation/edit using syncdata.
- */
-export declare class BaseForm extends React.Component<IBaseFormProps, IBaseFormStates> {
-    /** Skip syncData for the initial onChange (RJSF populating form), only sync on user edits. */
-    private isInitialLoadRef;
-    constructor(props: IBaseFormProps);
-    componentDidUpdate(prevProps: IBaseFormProps, prevState: IBaseFormStates): void;
-    componentDidMount(): void;
-    /**
-     * Fills null/undefined values in data with schema defaults (mutates data).
-     * @returns true if any null/undefined was replaced by a default
-     */
-    protected applySchemaDefaults(data: IDict<any> | undefined, schema: RJSFSchema): boolean;
-    protected processSchema(data: IDict<any> | undefined, schema: RJSFSchema, uiSchema: UiSchema): void;
-    /**
-     * Remove a specific entry from the form. Can be used in subclasses if needed while under processSchema.
-     * @param entry The entry name
-     * @param data The form data
-     * @param schema The form schema
-     * @param uiSchema The form uiSchema
-     */
-    protected removeFormEntry(entry: string, data: IDict<any> | undefined, schema: RJSFSchema, uiSchema: UiSchema): void;
-    protected syncData(properties: IDict<any> | undefined): void;
-    protected onFormChange(e: IChangeEvent): void;
-    protected onFormBlur(id: string, value: any): void;
-    protected onFormSubmit(e: ISubmitEvent<any>): void;
-    render(): React.ReactNode;
-    protected currentFormData: IDict<any> | undefined;
-}