@jupytergis/base 0.14.1 → 0.16.0-alpha.0

package/style/storySpectaArticleOverlay.css

@@ -0,0 +1,129 @@
+/* Specta article typography for list story stage overlay markdown (subset of specta/style/article.css). */
+
+.jgis-story-stage-overlay-content .specta-article-host-widget {
+  --jp-content-font-family: 'Source Serif 4', Georgia, serif;
+  --jp-code-font-family:
+    'Source Code Pro', Menlo, Monaco, 'Courier New', Courier, monospace;
+  --jp-code-font-size: 14px;
+  font-family: var(--jp-content-font-family);
+  font-size: 1rem;
+  line-height: 1.6;
+}
+
+.jgis-story-stage-overlay-content .specta-article-host-widget h1 {
+  font-family: 'Work Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  letter-spacing: -0.014em;
+  line-height: 38px;
+  margin-bottom: 24px;
+  margin-top: 1.5em !important;
+  font-size: 32px;
+  font-weight: 700;
+}
+
+.jgis-story-stage-overlay-content .specta-article-host-widget h2 {
+  font-family: 'Work Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  margin-top: 1em !important;
+  font-size: 1.6em;
+}
+
+.jgis-story-stage-overlay-content .specta-article-host-widget h3 {
+  margin-top: 1em !important;
+  font-size: 1.3em;
+}
+
+.jgis-story-stage-overlay-content .specta-article-host-widget h4 {
+  margin-top: 1em;
+  font-size: 1.2em;
+}
+
+.jgis-story-stage-overlay-content .specta-article-host-widget h5 {
+  margin-top: 1em;
+  font-size: 1.1em;
+}
+
+.jgis-story-stage-overlay-content .specta-article-host-widget h6 {
+  margin-top: 1em;
+  font-size: 1em;
+}
+
+.jgis-story-stage-overlay-content .specta-article-host-widget p {
+  font-size: 1rem;
+  line-height: 1.6;
+  margin-bottom: 1.2em;
+}
+
+.jgis-story-stage-overlay-content .specta-article-host-widget a {
+  color: #007bff;
+  text-decoration: none;
+}
+
+.jgis-story-stage-overlay-content .specta-article-host-widget a:hover {
+  text-decoration: underline;
+}
+
+.jgis-story-stage-overlay-content .specta-article-host-widget pre {
+  background-color: var(--jp-cell-editor-background) !important;
+  padding: 32px !important;
+  border-radius: 4px !important;
+  border: 1px solid var(--jp-cell-editor-border-color) !important;
+  overflow-x: auto;
+  margin-top: 56px !important;
+  font-size: 0.85em !important;
+  line-height: 1.4 !important;
+}
+
+.jgis-story-stage-overlay-content .specta-article-host-widget pre code {
+  color: #222;
+  background-color: transparent !important;
+  padding: 0;
+  font-size: 14px !important;
+}
+
+.jgis-story-stage-overlay-content .specta-article-host-widget code {
+  background-color: #e9ecef;
+  padding: 0.2em 0.4em;
+  border-radius: 4px;
+  font-size: 14px !important;
+}
+
+.jgis-story-stage-overlay-content .specta-article-host-widget img {
+  max-width: 100%;
+  height: auto;
+  display: block;
+  margin: 1.5em auto;
+  border-radius: 4px;
+}
+
+.jgis-story-stage-overlay-content .specta-article-host-widget blockquote {
+  border-left: 3px solid transparent;
+  padding-left: 16px;
+  margin: 1.2em 0;
+  font-style: italic;
+  color: var(--jp-ui-font-color2);
+}
+
+.jgis-story-stage-overlay-content .specta-article-host-widget ul,
+.jgis-story-stage-overlay-content .specta-article-host-widget ol {
+  margin-bottom: 1.2em;
+  padding-left: 1.5em;
+}
+
+.jgis-story-stage-overlay-content .specta-article-host-widget li {
+  margin-bottom: 0.4em;
+}
+
+.jgis-story-stage-overlay-content
+  .specta-article-host-widget
+  .jp-MarkdownOutput {
+  padding-left: 0 !important;
+  padding-right: 0 !important;
+}
+
+.jgis-story-overlay-markdown-plain {
+  margin: 0;
+  white-space: pre-wrap;
+  word-break: break-word;
+  font-family: var(--jp-content-font-family, var(--jp-ui-font-family1));
+  font-size: 1rem;
+  line-height: 1.6;
+}

package/style/symbologyDialog.css

@@ -14,6 +14,18 @@ select option {
   max-height: 80%;
 }
 
+@media (max-width: 768px) {
+  .jp-gis-symbology-dialog .jp-Dialog-content {
+    width: 100%;
+    max-width: 100%;
+    max-height: 90%;
+    margin: 0;
+    border-radius: 0;
+    padding-left: 8px;
+    padding-right: 8px;
+  }
+}
+
 .jp-gis-symbology-row {
   display: flex;
   justify-content: space-between;
@@ -27,7 +39,8 @@ select option {
 }
 
 .jp-gis-symbology-row > .jp-select-wrapper,
-.jp-gis-symbology-row > .jp-mod-styled {
+.jp-gis-symbology-row > .jp-mod-styled,
+.jp-gis-symbology-row > .jp-gis-rgba-picker {
   flex: 1 0 50%;
   max-width: 50%;
 }
@@ -52,12 +65,6 @@ select option {
   max-width: 25%;
 }
 
-.jp-gis-band-container {
-  display: flex;
-  flex-direction: column;
-  gap: 13px;
-}
-
 .jp-gis-layer-symbology-container {
   display: flex;
   flex-direction: column;
@@ -120,27 +127,6 @@ select option {
   padding-top: 0.5rem;
 }
 
-.jp-gis-band-info-loading-container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: 2rem;
-  margin: auto;
-}
-
-.jp-gis-band-info-loading-container > span {
-  font-size: 1rem;
-}
-
-@keyframes spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
 .jp-gis-color-ramp-dropdown {
   display: flex;
   flex-direction: column;
@@ -228,3 +214,319 @@ select option {
 .jp-gis-selected-entry {
   width: 100%;
 }
+
+.jp-gis-rgba-inputs {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  margin-top: 6px;
+}
+
+.jp-gis-rgba-field {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex: 0 0 auto;
+  gap: 2px;
+}
+
+.jp-gis-rgba-field label {
+  font-size: var(--jp-ui-font-size0);
+  color: var(--jp-ui-font-color2);
+  line-height: 1;
+}
+
+.jp-gis-rgba-field input {
+  width: 4ch;
+  text-align: center;
+  padding: 1px 2px;
+  -moz-appearance: textfield;
+}
+
+.jp-gis-rgba-field input::-webkit-outer-spin-button,
+.jp-gis-rgba-field input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+}
+
+/* ---------------------------------------------------------------------------
+ * Grammar layer sections
+ * --------------------------------------------------------------------------*/
+
+.jp-gis-grammar-layer-section {
+  border: 1px solid var(--jp-border-color1);
+  border-radius: 4px;
+  margin-bottom: 8px;
+  overflow: hidden;
+}
+
+.jp-gis-grammar-layer-header {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 6px;
+  background: var(--jp-layout-color2);
+  border-bottom: 1px solid var(--jp-border-color2);
+}
+
+.jp-gis-grammar-layer-label {
+  font-size: var(--jp-ui-font-size1);
+  font-weight: 600;
+  color: var(--jp-ui-font-color1);
+  flex: 1 0 auto;
+}
+
+.jp-gis-grammar-transform-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 6px;
+  background: var(--jp-layout-color2);
+  border-bottom: 1px solid var(--jp-border-color2);
+  font-size: var(--jp-ui-font-size1);
+}
+
+.jp-gis-grammar-transform-row label {
+  color: var(--jp-ui-font-color2);
+  white-space: nowrap;
+}
+
+/* ---------------------------------------------------------------------------
+ * Grammar rule rows
+ * --------------------------------------------------------------------------*/
+
+.jp-gis-grammar-rule {
+  border: 1px solid var(--jp-border-color2);
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+/* 6-column grid: field | scheme | preview | arrow | channel | × */
+.jp-gis-grammar-rule-grid {
+  display: grid;
+  grid-template-columns: max-content max-content 1fr auto max-content auto;
+  align-items: center;
+  column-gap: 4px;
+  row-gap: 3px;
+  padding: 4px 6px;
+  position: relative;
+}
+
+.jp-gis-grammar-rule-grid .jp-gis-grammar-channel-select {
+  width: 100%;
+  min-width: 0;
+}
+
+.jp-gis-grammar-rule-grid .jp-gis-grammar-channel-select .jgis-combobox-button,
+.jp-gis-grammar-rule-grid .jp-gis-grammar-channel-select .jgis-native-select {
+  width: 100%;
+  box-sizing: border-box;
+}
+
+@media (max-width: 768px) {
+  .jp-gis-grammar-rule-grid {
+    grid-template-columns: 1fr 1fr auto;
+  }
+}
+
+.jp-gis-grammar-rule-editor {
+  border-top: 1px solid var(--jp-border-color2);
+  padding: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+/* Preview button spans all channel rows — stretches vertically */
+.jp-gis-grammar-preview-btn {
+  background: none;
+  border: 1px solid var(--jp-border-color2);
+  border-radius: 4px;
+  padding: 4px 8px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  align-self: stretch;
+  justify-content: flex-start;
+  gap: 6px;
+  min-width: 0;
+  min-height: 36px;
+  overflow: hidden;
+}
+
+.jp-gis-scale-preview {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: var(--jp-ui-font-size1);
+  min-height: 16px;
+  overflow: hidden;
+  width: 100%;
+}
+
+.jp-gis-scale-meta {
+  font-size: var(--jp-ui-font-size1);
+  color: var(--jp-ui-font-color2);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.jp-gis-scale-swatch {
+  flex-shrink: 0;
+  width: 18px;
+  height: 18px;
+  border-radius: 3px;
+  border: 1px solid var(--jp-border-color1);
+  display: inline-block;
+}
+
+.jp-gis-scale-dot {
+  flex-shrink: 0;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  display: inline-block;
+}
+
+.jp-gis-grammar-arrow {
+  color: var(--jp-ui-font-color2);
+  text-align: center;
+  padding: 0 2px;
+}
+
+.jp-gis-grammar-delete-btn {
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: var(--jp-ui-font-color2);
+  padding: 0 4px;
+  font-size: 16px;
+  line-height: 1;
+}
+
+/* When clause */
+
+.jp-gis-grammar-when-row {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 4px;
+  padding: 3px 6px 4px;
+  border-top: 1px solid var(--jp-border-color3);
+  background: var(--jp-layout-color1);
+}
+
+.jp-gis-grammar-when-label {
+  font-size: var(--jp-ui-font-size0);
+  color: var(--jp-ui-font-color2);
+  font-style: italic;
+  flex-shrink: 0;
+}
+
+.jp-gis-grammar-when-op {
+  height: 20px;
+  padding: 0 4px;
+  font-size: var(--jp-ui-font-size0);
+  border-radius: 10px;
+  border: 1px solid var(--jp-border-color2);
+  background: var(--jp-layout-color2);
+  color: var(--jp-ui-font-color1);
+  cursor: pointer;
+}
+
+.jp-gis-grammar-when-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  padding: 1px 6px;
+  background: var(--jp-layout-color2);
+  border: 1px solid var(--jp-border-color2);
+  border-radius: 10px;
+  font-size: var(--jp-ui-font-size0);
+  white-space: nowrap;
+}
+
+.jp-gis-grammar-when-chip button {
+  background: none;
+  border: none;
+  padding: 0 0 0 2px;
+  cursor: pointer;
+  line-height: 1;
+  color: var(--jp-ui-font-color2);
+  font-size: 11px;
+}
+
+.jp-gis-grammar-when-add-btn {
+  background: none;
+  border: 1px dashed var(--jp-border-color2);
+  border-radius: 10px;
+  padding: 1px 8px;
+  cursor: pointer;
+  font-size: var(--jp-ui-font-size0);
+  color: var(--jp-ui-font-color2);
+}
+
+.jp-gis-grammar-when-add-btn:hover {
+  border-color: var(--jp-brand-color1);
+  color: var(--jp-brand-color1);
+}
+
+.jp-gis-grammar-when-form {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  flex-wrap: nowrap;
+}
+
+.jp-gis-grammar-when-form .jgis-native-select {
+  flex: 0 0 auto;
+}
+
+.jp-gis-grammar-when-cancel {
+  background: none;
+  border: 1px solid var(--jp-border-color2);
+  border-radius: 3px;
+  padding: 1px 5px;
+  cursor: pointer;
+  font-size: var(--jp-ui-font-size0);
+  color: var(--jp-ui-font-color1);
+  line-height: 1.4;
+}
+
+.jgis-button.jp-gis-grammar-when-form-cancel {
+  color: var(--jp-error-color0);
+}
+
+/* Domain min/max pair inside a symbology row */
+.jp-gis-domain-inputs {
+  display: flex;
+  gap: 4px;
+  flex: 1 0 50%;
+  max-width: 50%;
+}
+
+@media (max-width: 768px) {
+  .jp-gis-symbology-row {
+    flex-wrap: wrap;
+    gap: 0.5rem;
+  }
+
+  .jp-gis-symbology-row > .jp-select-wrapper,
+  .jp-gis-symbology-row > .jp-mod-styled,
+  .jp-gis-symbology-row > .jp-gis-rgba-picker,
+  .jp-gis-canvas-button-wrapper,
+  .jp-gis-domain-inputs {
+    flex: 1 0 100%;
+    max-width: 100%;
+  }
+}
+
+.jp-gis-transparent-label {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  margin-top: 6px;
+  font-size: var(--jp-ui-font-size1);
+  cursor: pointer;
+  user-select: none;
+}

package/lib/dialogs/symbology/colorRampUtils.d.ts

@@ -1,20 +0,0 @@
-export interface IColorMap {
-    name: ColorRampName;
-    colors: string[];
-}
-export declare const COLOR_RAMP_NAMES: readonly ["jet", "hsv", "hot", "cool", "spring", "summer", "autumn", "winter", "bone", "copper", "greys", "YiGnBu", "greens", "YiOrRd", "bluered", "RdBu", "picnic", "rainbow", "portland", "blackbody", "earth", "electric", "viridis", "inferno", "magma", "plasma", "warm", "rainbow-soft", "bathymetry", "cdom", "chlorophyll", "density", "freesurface-blue", "freesurface-red", "oxygen", "par", "phase", "salinity", "temperature", "turbidity", "velocity-blue", "velocity-green", "cubehelix", "ice", "oxy", "matter", "amp", "tempo", "rain", "topo", "balance", "delta", "curl", "diff", "tarn"];
-export declare const COLOR_RAMP_DEFAULTS: Partial<Record<ColorRampName, number>>;
-export type ColorRampName = (typeof COLOR_RAMP_NAMES)[number];
-export declare const getColorMapList: () => IColorMap[];
-/**
- * Hook that loads and sets color maps.
- */
-export declare const useColorMapList: (setColorMaps: (maps: IColorMap[]) => void) => void;
-/**
- * Ensure we always get a valid hex string from either an RGB(A) array or string.
- */
-export declare const ensureHexColorCode: (color: number[] | string) => string;
-/**
- * Convert hex to [r,g,b,a] array.
- */
-export declare function hexToRgb(hex: string): [number, number, number, number];

package/lib/dialogs/symbology/colorRampUtils.js

@@ -1,132 +0,0 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import colormap from 'colormap';
-import colorScale from 'colormap/colorScale.js';
-import { useEffect } from 'react';
-import rawCmocean from "./components/color_ramp/cmocean.json";
-const { __license__: _ } = rawCmocean, cmocean = __rest(rawCmocean, ["__license__"]);
-Object.assign(colorScale, cmocean);
-export const COLOR_RAMP_NAMES = [
-    'jet',
-    'hsv',
-    'hot',
-    'cool',
-    'spring',
-    'summer',
-    'autumn',
-    'winter',
-    'bone',
-    'copper',
-    'greys',
-    'YiGnBu',
-    'greens',
-    'YiOrRd',
-    'bluered',
-    'RdBu',
-    'picnic',
-    'rainbow',
-    'portland',
-    'blackbody',
-    'earth',
-    'electric',
-    'viridis',
-    'inferno',
-    'magma',
-    'plasma',
-    'warm',
-    'rainbow-soft',
-    'bathymetry',
-    'cdom',
-    'chlorophyll',
-    'density',
-    'freesurface-blue',
-    'freesurface-red',
-    'oxygen',
-    'par',
-    'phase',
-    'salinity',
-    'temperature',
-    'turbidity',
-    'velocity-blue',
-    'velocity-green',
-    'cubehelix',
-    'ice',
-    'oxy',
-    'matter',
-    'amp',
-    'tempo',
-    'rain',
-    'topo',
-    'balance',
-    'delta',
-    'curl',
-    'diff',
-    'tarn',
-];
-export const COLOR_RAMP_DEFAULTS = {
-    hsv: 11,
-    picnic: 11,
-    'rainbow-soft': 11,
-    cubehelix: 16,
-};
-export const getColorMapList = () => {
-    const colorMapList = [];
-    COLOR_RAMP_NAMES.forEach(name => {
-        const colorRamp = colormap({
-            colormap: name,
-            nshades: 255,
-            format: 'rgbaString',
-        });
-        colorMapList.push({ name, colors: colorRamp });
-    });
-    return colorMapList;
-};
-/**
- * Hook that loads and sets color maps.
- */
-export const useColorMapList = (setColorMaps) => {
-    useEffect(() => {
-        setColorMaps(getColorMapList());
-    }, [setColorMaps]);
-};
-/**
- * Ensure we always get a valid hex string from either an RGB(A) array or string.
- */
-export const ensureHexColorCode = (color) => {
-    if (typeof color === 'string') {
-        return color;
-    }
-    // color must be an RGBA array
-    const hex = color
-        .slice(0, -1) // Color input doesn't support hex alpha values so cut that out
-        .map((val) => {
-        return val.toString(16).padStart(2, '0');
-    })
-        .join('');
-    return '#' + hex;
-};
-/**
- * Convert hex to [r,g,b,a] array.
- */
-export function hexToRgb(hex) {
-    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
-    if (!result) {
-        console.warn('Unable to parse hex value, defaulting to black');
-        return [0, 0, 0, 255];
-    }
-    return [
-        parseInt(result[1], 16),
-        parseInt(result[2], 16),
-        parseInt(result[3], 16),
-        255, // TODO: Make alpha customizable?
-    ];
-}

package/lib/dialogs/symbology/symbologyUtils.d.ts

@@ -1,33 +0,0 @@
-import { IJGISLayer, IJupyterGISModel, IVectorLayer, IWebGlLayer } from '@jupytergis/schema';
-import { ColorRampName } from './colorRampUtils';
-import { IStopRow } from './symbologyDialog';
-/** Payload when saving symbology; shape matches vector or WebGl layer params. */
-export interface ISymbologyPayload {
-    symbologyState: IVectorLayer['symbologyState'] | IWebGlLayer['symbologyState'];
-    color?: IVectorLayer['color'] | IWebGlLayer['color'];
-}
-export interface ISaveSymbologyOptions {
-    model: IJupyterGISModel;
-    layerId: string;
-    isStorySegmentOverride?: boolean;
-    segmentId?: string;
-    payload: ISymbologyPayload;
-    mutateLayerBeforeSave?: (layer: any) => void;
-}
-export type VectorSymbologyParams = Pick<IVectorLayer, 'symbologyState' | 'color'>;
-export type WebGlSymbologyParams = Pick<IWebGlLayer, 'symbologyState' | 'color'>;
-/** Params-shaped object used for reading symbology (layer.parameters or segment override). */
-export type IEffectiveSymbologyParams = VectorSymbologyParams | WebGlSymbologyParams;
-/**
- * Resolve the effective symbology params for this dialog: either the layer's
- * parameters or the matching segment override when editing a story-segment override.
- */
-export declare function getEffectiveSymbologyParams(model: IJupyterGISModel, layerId: string, layer: IJGISLayer | null | undefined, isStorySegmentOverride?: boolean, segmentId?: string): IEffectiveSymbologyParams | null;
-export declare function saveSymbology(options: ISaveSymbologyOptions): void;
-export declare namespace VectorUtils {
-    const buildColorInfo: (layerParamers: VectorSymbologyParams) => IStopRow[];
-    const buildRadiusInfo: (layer: IJGISLayer) => IStopRow[];
-}
-export declare namespace Utils {
-    const getValueColorPairs: (stops: number[], selectedRamp: ColorRampName, nClasses: number, reverse?: boolean) => IStopRow[];
-}