@jupytergis/base 0.11.1 → 0.12.1

package/style/shared/input.css

@@ -0,0 +1,59 @@
+[data-slot='input'] {
+  box-sizing: border-box;
+  height: 1.125rem;
+  width: auto;
+  min-width: 0;
+  border-radius: var(--jp-border-radius, 0.375rem);
+  border: 1px solid var(--jp-border-color1);
+  background-color: transparent;
+  padding: 0.25rem 0.75rem;
+  font-size: 1rem;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  transition:
+    color 0.15s ease-in-out,
+    box-shadow 0.15s ease-in-out;
+  outline: none;
+  color: var(--jp-ui-font-color1);
+}
+
+[data-slot='input']::placeholder {
+  color: var(--jp-ui-font-color2);
+}
+
+[data-slot='input']::selection {
+  background-color: var(--jp-brand-color1);
+  color: var(--jp-ui-inverse-font-color1);
+}
+
+[data-slot='input']:focus-visible {
+  border-color: var(--jp-brand-color1);
+  box-shadow: 0 0 0 3px rgba(var(--jp-brand-color1-rgb), 0.1);
+}
+
+[data-slot='input'][aria-invalid='true'] {
+  border-color: var(--jp-error-color1);
+  box-shadow: 0 0 0 3px rgba(var(--jp-error-color1-rgb), 0.2);
+}
+
+[data-slot='input']:disabled {
+  pointer-events: none;
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+[data-slot='input']::file-selector-button {
+  color: var(--jp-ui-font-color1);
+  display: inline-flex;
+  height: 1.75rem;
+  border: 0;
+  background-color: transparent;
+  font-size: 0.875rem;
+  font-weight: 500;
+  margin-right: 0.75rem;
+}
+
+@media (min-width: 768px) {
+  [data-slot='input'] {
+    font-size: 0.875rem;
+  }
+}

package/style/shared/pagination.css

@@ -73,7 +73,7 @@
 }
 
 .jgis-pagination-link[data-variant='outline'] {
-  border: 1px solid var(--jp-accent-color0);
+  border: 1px solid var(--jp-border-color0);
   background-color: var(--jp-layout-color2);
   transition:
     background-color 0.2s ease,

package/style/shared/popover.css

@@ -26,6 +26,7 @@
   box-shadow: 0 4px 6px
     color-mix(in srgb, var(--jp-ui-font-color0), transparent 90%);
   z-index: 50;
+  border: 1px solid var(--jp-border-color0);
 }
 
 .jgis-popover-content[data-state='open'] {

package/style/shared/tabs.css

@@ -4,10 +4,6 @@
   justify-content: center;
   align-items: center;
   background-color: var(--jp-layout-color0);
-  box-shadow:
-    0 4px 8px 0 rgba(0, 0, 0, 0.2),
-    0 6px 20px 0 rgba(0, 0, 0, 0.19);
-  border-radius: 5px;
 }
 .jgis-tabs-list {
   display: inline-flex;
@@ -19,8 +15,6 @@
   gap: 1rem;
   width: 100%;
   font-size: 9px;
-  border-top-left-radius: 5px;
-  border-top-right-radius: 5px;
   overflow-x: scroll;
 }
 
@@ -61,7 +55,7 @@
   outline: none;
   width: 100%;
   overflow-y: scroll;
-  max-height: 480px;
+  /* max-height: 480px; */
   padding-top: 1rem;
 }
 

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,71 @@
 .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;
+  box-shadow: unset;
+  max-height: 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, --jp-layout-color0) 49%,
+    color-mix(
+        in srgb,
+        var(--jgis-specta-bg-color, --jp-layout-color0) 60%,
+        transparent
+      )
+      65%,
+    color-mix(
+        in srgb,
+        var(--jgis-specta-bg-color, --jp-layout-color0) 50%,
+        transparent
+      )
+      70%,
+    transparent 100%
+  );
+}
+
+.jgis-story-viewer-panel-specta-mod {
+  width: 45%;
+  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_presentationBgColor,
+.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;