@jupytergis/base 0.11.1 → 0.12.0

package/style/shared/toggle.css

@@ -46,7 +46,7 @@
 }
 
 .jgis-toggle-outline {
-  border: 1px solid var(--jp-accent-color0);
+  border: 1px solid var(--jp-border-color0);
   background-color: transparent;
   transition:
     background-color 0.3s,

package/style/stacBrowser.css

@@ -4,15 +4,15 @@
 }
 
 .jgis-stac-browser-section-item {
-  border-radius: 1rem !important;
+  border-radius: 1rem;
   cursor: pointer;
 }
 
-.jgis-stac-browser-results-item {
-  border-radius: 1rem !important;
+.jgis-button.jgis-stac-browser-results-item {
+  border-radius: var(--jp-border-radius);
   cursor: pointer;
-  white-space: normal !important;
-  height: auto !important;
+  white-space: normal;
+  height: auto;
 }
 
 .jgis-stac-browser-results-list {
@@ -22,16 +22,20 @@
   word-break: break-word;
   padding: 0.25rem;
   margin-right: 0.5rem;
+  align-self: center;
 }
 
-.jgis-stac-browser-date-picker {
-  display: flex;
-  justify-content: space-around;
-  flex-wrap: wrap;
-  gap: 0.5rem;
+.jgis-stac-datepicker-full-width {
+  width: 100%;
+}
+
+.jgis-stac-datepicker-button {
+  padding: 0 0.5rem;
+  width: 100%;
 }
 
 .jgis-stac-browser-filters-panel {
+  min-height: 145px;
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
@@ -73,13 +77,162 @@
 
 .jgis-stac-badge {
   gap: 0.25rem;
-  padding-right: 0.3rem !important;
+  padding-right: 0.3rem;
 }
 
 .jgis-stac-badge-icon:hover {
-  background-color: color-mix(
-    in srgb,
-    var(--jp-error-color0),
-    transparent 20%
-  ) !important;
+  background-color: color-mix(in srgb, var(--jp-error-color0), transparent 20%);
+}
+
+.jgis-stac-filter-extension-panel {
+  padding: 0 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.jgis-stac-filter-extension-section {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.jgis-stac-filter-extension-label {
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+
+/* Modifier for filter extension select - uses shared combobox base */
+.jgis-stac-filter-extension-select {
+  max-width: 200px;
+}
+
+.jgis-stac-filter-extension-input[data-slot='input'] {
+  height: 1.5rem;
+  padding: 1rem 0.5rem;
+}
+
+.jgis-stac-filter-extension-button-container {
+  padding-top: 0.5rem;
+  border-top: 1px solid var(--jp-border-color0);
+}
+
+.jgis-stac-filter-extension-button {
+  padding: 0.5rem 1rem;
+  border-radius: var(--jp-border-radius, 0.375rem);
+  border: 1px solid var(--jp-border-color0);
+  background-color: var(--jp-layout-color0);
+  color: var(--jp-ui-font-color0);
+  cursor: pointer;
+  box-sizing: border-box;
+}
+
+.jgis-stac-panel-tabs-list {
+  border-radius: 0;
+}
+
+.jgis-stac-panel-placeholder {
+  padding: 1rem;
+  text-align: center;
+  color: var(--jp-ui-font-color2);
+}
+
+.jgis-stac-panel-provider-select-container {
+  margin: 0 1rem 1rem 1rem;
+}
+
+.jgis-stac-panel-provider-select {
+  width: 100%;
+  padding: 0.5rem;
+}
+
+/* QueryableComboBox styles */
+.jgis-queryable-combo-container {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+/* Modifiers for queryable combo - uses shared combobox base */
+.jgis-queryable-combo-button {
+  width: 100%;
+}
+
+/* More specific selector to override [data-slot="input"] styles for Input components */
+.jgis-queryable-combo-input[data-slot='input'] {
+  padding: 0.5rem;
+  /* padding-left: 1rem; */
+  height: 1.5rem;
+}
+
+/* More specific selector to override combobox button styles for operator Select */
+.jgis-button.jgis-combobox-button.jgis-queryable-combo-operator {
+  padding: 0.25rem;
+}
+
+/* More specific selector to override button base styles for Select/SingleDatePicker buttons */
+/* Include jgis-combobox-button to increase specificity for Select components */
+.jgis-button.jgis-combobox-button.jgis-queryable-combo-input,
+.jgis-button.jgis-queryable-combo-input {
+  padding: 0.5rem;
+  /* padding-left: 1rem; */
+  height: 1.5rem;
+}
+
+.jgis-button.jgis-combobox-button.jgis-queryable-combo-input
+  > .jgis-combobox-button-text {
+  text-align: left;
+}
+
+/* More specific selector to override button base styles */
+.jgis-button.jgis-queryable-combo-input-date-picker {
+  justify-content: flex-start;
+}
+
+.jgis-queryable-combo-input.jgis-combobox-button-text {
+  display: flex;
+  justify-content: flex-start;
+}
+
+.jgis-queryable-rows-container {
+  display: grid;
+  grid-template-columns: auto auto 1fr;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.jgis-queryable-row {
+  display: contents;
+}
+
+.jgis-stac-queryable-filters {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.jgis-stac-queryable-filters-radio-group {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.jgis-stac-queryable-filters-radio-item {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+/* StacPanelResults styles */
+.jgis-stac-panel-results-pagination {
+  margin-top: 0;
+}
+
+.jgis-panel-tab-content.jgis-panel-tab-content-stac-panel {
+  padding-top: 0;
+  border-top: 1px solid var(--jp-border-color0);
+}
+
+.jgis-panel-tab-content.jgis-panel-tab-content-stac-panel
+  .jgis-stac-panel-tabs-list {
+  border-radius: 0;
 }

package/style/statusBar.css

@@ -5,6 +5,7 @@
   height: 16px;
   background-color: var(--jp-layout-color1);
   font-size: var(--jp-ui-font-size0);
+  z-index: 1000;
 }
 
 .jgis-status-bar-item {

package/style/storyPanel.css

@@ -1,5 +1,22 @@
 .jgis-story-viewer-panel {
+  padding: 1rem;
   overflow: hidden;
+  position: relative;
+}
+
+.jgis-story-segment-container {
+  width: 100%;
+  animation: fadeIn 0.3s ease;
+  /* animation-duration is set dynamically via inline style from segment.transition.time */
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
 }
 
 .jgis-story-viewer-panel * {
@@ -15,9 +32,10 @@
 .jgis-story-viewer-image {
   width: 100%;
   height: 100%;
-  max-height: 240px;
-  object-fit: cover;
+  max-height: 50vh;
+  object-fit: contain;
   display: block;
+  border-radius: var(--jp-border-radius);
 }
 
 .jgis-story-viewer-image-title {
@@ -45,16 +63,49 @@
   padding-bottom: 0.25rem;
 }
 
+.jgis-panels-wrapper .jgis-story-viewer-nav-container-specta-mod {
+  position: fixed;
+  left: 0;
+  right: 0;
+  width: 100vw;
+  z-index: 1000;
+}
+
+.jgis-story-navbar {
+  display: flex;
+  gap: 8px;
+  justify-content: center;
+}
+
+.jgis-story-viewer-subtitle-container {
+  display: flex;
+  align-items: center;
+  /* justify-content: space-between; */
+  /* gap: 1rem; */
+  padding-top: 1rem;
+}
+
+.jgis-story-navbar.jgis-story-navbar-specta-mod {
+  position: fixed;
+  top: 50%;
+  width: 100%;
+  justify-content: space-between;
+}
+
+.jgis-story-navbar-specta-mod > .jgis-button {
+  padding: 0;
+}
+
 .jgis-story-viewer-title {
   text-align: center;
 }
 
 .jgis-story-viewer-subtitle {
   text-align: center;
+  margin: 0 auto;
 }
 
 .jgis-story-viewer-content {
-  padding-left: 16px;
 }
 
 .jgis-story-viewer-content p,
@@ -66,3 +117,69 @@
 .jgis-story-viewer-content > ul {
   padding-left: 1rem;
 }
+
+.jgis-story-viewer-specta-right-panel-mod {
+  scale: 1.5;
+  top: 3.5rem !important;
+  right: 5.5rem !important;
+  font-size: var(--jp-ui-font-size2);
+}
+
+.jgis-panel-tab-content-mod {
+  background-color: plum;
+}
+
+.jgis-right-panel-container.jgis-specta-right-panel-container-mod {
+  width: 55%;
+  height: 100%;
+  margin: unset;
+  top: unset;
+}
+
+.jgis-specta-story-panel-container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  overflow: auto;
+  background: linear-gradient(
+    to left,
+    var(--jgis-specta-bg-color, rgba(221, 160, 221, 0.9)) 49%,
+    color-mix(
+        in srgb,
+        var(--jgis-specta-bg-color, rgba(221, 160, 221, 0.9)) 60%,
+        transparent
+      )
+      65%,
+    color-mix(
+        in srgb,
+        var(--jgis-specta-bg-color, rgba(221, 160, 221, 0.9)) 50%,
+        transparent
+      )
+      70%,
+    transparent 100%
+  );
+}
+
+.jgis-story-viewer-panel-specta-mod {
+  width: 50%;
+  font-size: var(--jp-ui-font-size3);
+  padding-right: 1.7rem;
+  color: var(--jgis-specta-text-color, var(--jp-ui-inverse-font-color1));
+  overflow-y: auto;
+  max-height: 100%;
+}
+
+.jGIS-property-panel
+  .jp-FormGroup-content
+  fieldset
+  .jp-inputFieldWrapper
+  > input#root_presentaionBgColor,
+.jGIS-property-panel
+  .jp-FormGroup-content
+  fieldset
+  .jp-inputFieldWrapper
+  > input#root_presentaionTextColor {
+  height: revert;
+}

package/style/tabPanel.css

@@ -2,89 +2,3 @@
   font-size: var(--jp-ui-font-size0);
   padding-bottom: 50px;
 }
-
-.jgis-stac-browser-collection {
-  flex-wrap: wrap;
-  margin-top: 0.5rem;
-}
-
-.jgis-stac-browser-section-item {
-  border-radius: 1rem !important;
-  cursor: pointer;
-}
-
-.jgis-stac-browser-results-item {
-  border-radius: 1rem !important;
-  cursor: pointer;
-  white-space: normal !important;
-  height: auto !important;
-}
-
-.jgis-stac-browser-results-list {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-  word-break: break-word;
-  padding: 0.25rem;
-  margin-right: 0.5rem;
-}
-
-.jgis-stac-browser-date-picker {
-  display: flex;
-  justify-content: space-around;
-  flex-wrap: wrap;
-  gap: 0.5rem;
-}
-
-.jgis-stac-browser-filters-panel {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  align-items: flex-start;
-  padding: 0 0.5rem;
-}
-
-.jgis-stac-filter-trigger {
-  max-width: fit-content;
-  border: 1px solid var(--jp-border-color0);
-  padding: 0.5rem;
-  cursor: pointer;
-  font-weight: bold;
-  display: flex;
-  align-items: center;
-  gap: 0.15rem;
-}
-
-.jgis-stac-filter-trigger:disabled {
-  cursor: not-allowed;
-}
-
-.jgis-stac-filter-section-container {
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-}
-
-.jgis-stac-filter-section-badges {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.25rem;
-}
-
-.jgis-stac-datepicker-icon {
-  width: 1rem;
-  height: 1rem;
-}
-
-.jgis-stac-badge {
-  gap: 0.25rem;
-  padding-right: 0.3rem !important;
-}
-
-.jgis-stac-badge-icon:hover {
-  background-color: color-mix(
-    in srgb,
-    var(--jp-error-color0),
-    transparent 20%
-  ) !important;
-}

package/lib/panelview/components/story-maps/StoryEditorPanel.d.ts

@@ -1,7 +0,0 @@
-import { IJupyterGISModel } from '@jupytergis/schema';
-import React from 'react';
-interface IStoryPanelProps {
-    model: IJupyterGISModel;
-}
-export declare function StoryEditorPanel({ model }: IStoryPanelProps): React.JSX.Element;
-export default StoryEditorPanel;

package/lib/panelview/components/story-maps/StoryEditorPanel.js

@@ -1,29 +0,0 @@
-import { faLink } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import jgisSchema from '@jupytergis/schema/lib/schema/project/jgis.json';
-import React, { useMemo } from 'react';
-import { StoryEditorPropertiesForm } from "../../../formbuilder/objectform/StoryEditorForm";
-import { Button } from "../../../shared/components/Button";
-import { deepCopy } from "../../../tools";
-const storyMapSchema = deepCopy(jgisSchema.definitions.jGISStoryMap);
-const AddStorySegmentButton = ({ model }) => (React.createElement(Button, { onClick: () => model.addStorySegment() },
-    React.createElement(FontAwesomeIcon, { icon: faLink }),
-    " Add Story Segment"));
-export function StoryEditorPanel({ model }) {
-    const { storySegmentId, story } = useMemo(() => {
-        return model.getSelectedStory();
-    }, [model, model.sharedModel.stories]);
-    const syncStoryData = (properties) => {
-        model.sharedModel.updateStoryMap(storySegmentId, properties);
-    };
-    if (!story) {
-        return (React.createElement("div", null,
-            React.createElement("p", null, "No Story Map available."),
-            React.createElement("p", null, "Add a Story Segment from the Add Layer menu. A segment captures the current map view. You can add markdown text and an image to each segment to tell your story."),
-            React.createElement(AddStorySegmentButton, { model: model })));
-    }
-    return (React.createElement("div", { style: { padding: '0 0.5rem 0.5rem 0.5rem' } },
-        React.createElement(StoryEditorPropertiesForm, { formContext: "update", sourceData: story, model: model, schema: storyMapSchema, syncData: syncStoryData, filePath: model.filePath }),
-        React.createElement(AddStorySegmentButton, { model: model })));
-}
-export default StoryEditorPanel;

package/lib/panelview/components/story-maps/StoryViewerPanel.d.ts

@@ -1,7 +0,0 @@
-import { IJupyterGISModel } from '@jupytergis/schema';
-import React from 'react';
-interface IStoryViewerPanelProps {
-    model: IJupyterGISModel;
-}
-declare function StoryViewerPanel({ model }: IStoryViewerPanelProps): React.JSX.Element;
-export default StoryViewerPanel;

package/lib/stacBrowser/components/StacPanelFilters.d.ts

@@ -1,14 +0,0 @@
-import React from 'react';
-import { StacFilterState, StacFilterSetters } from "../types/types";
-interface IStacPanelFiltersProps {
-    filterState: StacFilterState;
-    filterSetters: StacFilterSetters;
-    startTime: Date | undefined;
-    setStartTime: (date: Date | undefined) => void;
-    endTime: Date | undefined;
-    setEndTime: (date: Date | undefined) => void;
-    useWorldBBox: boolean;
-    setUseWorldBBox: (val: boolean) => void;
-}
-declare const StacPanelFilters: ({ filterState, filterSetters, startTime, setStartTime, endTime, setEndTime, useWorldBBox, setUseWorldBBox, }: IStacPanelFiltersProps) => React.JSX.Element;
-export default StacPanelFilters;

package/lib/stacBrowser/components/StacPanelFilters.js

@@ -1,81 +0,0 @@
-import { format } from 'date-fns';
-import { CalendarIcon } from 'lucide-react';
-import React from 'react';
-import { Button } from "../../shared/components/Button";
-import { Calendar } from "../../shared/components/Calendar";
-import Checkbox from "../../shared/components/Checkbox";
-import { Popover, PopoverContent, PopoverTrigger, } from "../../shared/components/Popover";
-import StacFilterSection from "./StacFilterSection";
-import { datasets as datasetsList, platforms as platformsList, products as productsList, } from "../constants";
-const StacPanelFilters = ({ filterState, filterSetters, startTime, setStartTime, endTime, setEndTime, useWorldBBox, setUseWorldBBox, }) => {
-    const handleDatasetSelection = (dataset, collection) => {
-        const collections = new Set(filterState.collections);
-        const datasets = new Set(filterState.datasets);
-        if (datasets.has(dataset)) {
-            datasets.delete(dataset);
-            // Remove the collection if no datasets remain for it
-            const datasetsForCollection = Array.from(datasets).filter(d => {
-                return datasetsList.some(entry => entry.collection === collection && entry.datasets.includes(d));
-            });
-            if (datasetsForCollection.length === 0) {
-                collections.delete(collection);
-                const platforms = new Set(filterState.platforms);
-                const products = new Set(filterState.products);
-                // Remove platforms belonging to this collection
-                if (platformsList[collection]) {
-                    platformsList[collection].forEach(platform => {
-                        platforms.delete(platform);
-                    });
-                }
-                // Remove products belonging to this collection
-                productsList
-                    .filter(product => product.collections.includes(collection))
-                    .forEach(product => {
-                    products.delete(product.productCode);
-                });
-                filterSetters.platforms(platforms);
-                filterSetters.products(products);
-            }
-        }
-        else {
-            datasets.add(dataset);
-            collections.add(collection);
-        }
-        filterSetters.collections(collections);
-        filterSetters.datasets(datasets);
-    };
-    const handleToggle = (key, value) => {
-        const updated = new Set(filterState[key]);
-        if (updated.has(value)) {
-            updated.delete(value);
-        }
-        else {
-            updated.add(value);
-        }
-        filterSetters[key](updated);
-    };
-    return (React.createElement("div", { className: "jgis-stac-browser-filters-panel" },
-        React.createElement("div", null,
-            React.createElement("span", { style: { display: 'flex', alignItems: 'center', gap: '0.5rem' } },
-                React.createElement(Checkbox, { checked: useWorldBBox, onCheckedChange: setUseWorldBBox }),
-                "Use whole world as bounding box")),
-        React.createElement("div", { className: "jgis-stac-browser-date-picker" },
-            React.createElement(Popover, null,
-                React.createElement(PopoverTrigger, { asChild: true },
-                    React.createElement(Button, { style: { padding: '0 0.5rem' }, variant: 'outline' },
-                        React.createElement(CalendarIcon, { className: "jgis-stac-datepicker-icon" }),
-                        startTime ? format(startTime, 'PPP') : React.createElement("span", null, "Start Date"))),
-                React.createElement(PopoverContent, null,
-                    React.createElement(Calendar, { mode: "single", selected: startTime, onSelect: setStartTime, autoFocus: true }))),
-            React.createElement(Popover, null,
-                React.createElement(PopoverTrigger, { asChild: true },
-                    React.createElement(Button, { style: { padding: '0 0.5rem' }, variant: 'outline' },
-                        React.createElement(CalendarIcon, { className: "jgis-stac-datepicker-icon" }),
-                        endTime ? format(endTime, 'PPP') : React.createElement("span", null, "End Date"))),
-                React.createElement(PopoverContent, null,
-                    React.createElement(Calendar, { mode: "single", selected: endTime, onSelect: setEndTime, autoFocus: true })))),
-        React.createElement(StacFilterSection, { section: "Collection", data: datasetsList, selectedCollections: Array.from(filterState.collections), selectedData: Array.from(filterState.datasets), handleCheckedChange: handleDatasetSelection }),
-        React.createElement(StacFilterSection, { section: "Platform", data: platformsList, selectedCollections: Array.from(filterState.collections), selectedData: Array.from(filterState.platforms), handleCheckedChange: platform => handleToggle('platforms', platform) }),
-        React.createElement(StacFilterSection, { section: "Data / Product", data: productsList, selectedCollections: Array.from(filterState.collections), selectedData: Array.from(filterState.products), handleCheckedChange: product => handleToggle('products', product) })));
-};
-export default StacPanelFilters;

package/lib/stacBrowser/components/StacPanelResults.d.ts

@@ -1,13 +0,0 @@
-import React from 'react';
-import { IStacItem } from "../types/types";
-interface IStacPanelResultsProps {
-    results: IStacItem[];
-    currentPage: number;
-    totalPages: number;
-    handlePaginationClick: (page: number) => void;
-    handleResultClick: (id: string) => void;
-    formatResult: (item: IStacItem) => string;
-    isLoading: boolean;
-}
-declare const StacPanelResults: ({ results, currentPage, totalPages, handlePaginationClick, handleResultClick, formatResult, isLoading, }: IStacPanelResultsProps) => React.JSX.Element;
-export default StacPanelResults;

package/lib/stacBrowser/components/StacPanelResults.js

@@ -1,48 +0,0 @@
-import React from 'react';
-import { Button } from "../../shared/components/Button";
-import { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, } from "../../shared/components/Pagination";
-function getPageItems(currentPage, totalPages) {
-    if (totalPages <= 5) {
-        return Array.from({ length: totalPages }, (_, i) => i + 1);
-    }
-    if (currentPage <= 3) {
-        return [1, 2, 3, 'ellipsis', totalPages];
-    }
-    if (currentPage >= totalPages - 2) {
-        return [
-            totalPages - 4,
-            totalPages - 3,
-            totalPages - 2,
-            totalPages - 1,
-            totalPages,
-        ];
-    }
-    return [
-        currentPage - 2,
-        currentPage - 1,
-        currentPage,
-        'ellipsis',
-        totalPages,
-    ];
-}
-const StacPanelResults = ({ results, currentPage, totalPages, handlePaginationClick, handleResultClick, formatResult, isLoading, }) => {
-    return (React.createElement("div", { className: "jgis-stac-browser-filters-panel" },
-        React.createElement(Pagination, null,
-            React.createElement(PaginationContent, { style: { marginTop: 0 } },
-                React.createElement(PaginationItem, null,
-                    React.createElement(PaginationPrevious, { onClick: () => handlePaginationClick(Math.max(1, currentPage - 1)), disabled: currentPage === 1 })),
-                totalPages <= 0 ? (React.createElement("div", null, "No Matches Found")) : (getPageItems(currentPage, totalPages).map(item => {
-                    if (item === 'ellipsis') {
-                        return (React.createElement(PaginationItem, { key: "ellipsis" },
-                            React.createElement(PaginationEllipsis, null)));
-                    }
-                    return (React.createElement(PaginationItem, { key: item },
-                        React.createElement(PaginationLink, { isActive: item === currentPage, onClick: () => handlePaginationClick(item) }, item)));
-                })),
-                React.createElement(PaginationItem, null,
-                    React.createElement(PaginationNext, { onClick: () => handlePaginationClick(Math.min(totalPages, currentPage + 1)), disabled: currentPage === totalPages })))),
-        React.createElement("div", { className: "jgis-stac-browser-results-list" }, isLoading ? (
-        // TODO: Fancy spinner
-        React.createElement("div", null, "Loading results...")) : (results.map(result => (React.createElement(Button, { key: result.id, className: "jgis-stac-browser-results-item", onClick: () => handleResultClick(result.id) }, formatResult(result))))))));
-};
-export default StacPanelResults;