@jupytergis/base 0.14.1 → 0.16.0-alpha.0

package/lib/formbuilder/objectform/layer/storySegmentLayerForm.js

@@ -1,95 +0,0 @@
-import React, { useMemo } from 'react';
-import { deepCopy } from "../../../tools";
-import { SchemaForm } from '../SchemaForm';
-import { ArrayFieldTemplate } from '../components/SegmentFormSymbology';
-import { SourcePropertiesField } from '../components/SourcePropertiesField';
-import StorySegmentReset from '../components/StorySegmentReset';
-import { processBaseSchema, removeFormEntry } from '../schemaUtils';
-import { useSchemaFormState } from '../useSchemaFormState';
-function getFirstSelectedStorySegmentLayerId(model) {
-    const selected = model.selected;
-    if (!selected) {
-        return undefined;
-    }
-    for (const key of Object.keys(selected)) {
-        const layer = model.getLayer(key);
-        if ((layer === null || layer === void 0 ? void 0 : layer.type) === 'StorySegmentLayer') {
-            return key;
-        }
-    }
-    return undefined;
-}
-const StorySegmentResetField = (props) => {
-    const ctx = props.formContext;
-    return React.createElement(StorySegmentReset, { model: ctx === null || ctx === void 0 ? void 0 : ctx.model, layerId: ctx === null || ctx === void 0 ? void 0 : ctx.layerId });
-};
-export function StorySegmentLayerPropertiesForm(props) {
-    const { schema: schemaProp, sourceData, syncData, model, filePath, formContext, sourceType, dialogOptions, formErrorSignal, formSchemaRegistry, } = props;
-    const { formData, schema, formContextValue: baseFormContext, hasSchema, handleChangeBase, handleSubmitBase, } = useSchemaFormState({
-        sourceData,
-        schemaProp,
-        model,
-        syncData,
-        cancel: props.cancel,
-        onAfterChange: dialogOptions
-            ? (data) => {
-                dialogOptions.layerData = Object.assign({}, data);
-            }
-            : undefined,
-    });
-    const layerId = useMemo(() => getFirstSelectedStorySegmentLayerId(model), [model, model.selected]);
-    const formContextValue = useMemo(() => (Object.assign(Object.assign({}, baseFormContext), { layerId, formSchemaRegistry })), [baseFormContext, layerId]);
-    const uiSchema = useMemo(() => {
-        var _a, _b;
-        const builtUiSchema = {};
-        const dataCopy = deepCopy(formData);
-        processBaseSchema(dataCopy, schema, builtUiSchema, formContext, removeFormEntry);
-        if ((_a = schema.properties) === null || _a === void 0 ? void 0 : _a.source) {
-            const availableSources = model.getSourcesByType(sourceType);
-            schema.properties.source.enumNames =
-                Object.values(availableSources);
-            schema.properties.source.enum = Object.keys(availableSources);
-        }
-        removeFormEntry('zoom', dataCopy, schema, builtUiSchema);
-        const layerOverrideItems = (_b = schema.properties) === null || _b === void 0 ? void 0 : _b.layerOverride;
-        const itemsProps = layerOverrideItems === null || layerOverrideItems === void 0 ? void 0 : layerOverrideItems.items;
-        const itemsProperties = itemsProps === null || itemsProps === void 0 ? void 0 : itemsProps.properties;
-        if (itemsProperties) {
-            delete itemsProperties.color;
-            delete itemsProperties.symbologyState;
-        }
-        if (model.selected) {
-            builtUiSchema.extent = {
-                'ui:field': 'storySegmentReset',
-            };
-        }
-        builtUiSchema.content = Object.assign(Object.assign({}, builtUiSchema.content), { markdown: {
-                'ui:widget': 'textarea',
-                'ui:options': {
-                    rows: 10,
-                },
-            } });
-        builtUiSchema.layerOverride = Object.assign(Object.assign({}, builtUiSchema.layerOverride), { items: {
-                'ui:title': '',
-                targetLayer: {
-                    'ui:field': 'layerSelect',
-                },
-                opacity: {
-                    'ui:field': 'opacity',
-                },
-                sourceProperties: {
-                    'ui:field': SourcePropertiesField,
-                },
-            }, 'ui:options': {
-                orderable: false,
-            }, 'ui:ArrayFieldTemplate': ArrayFieldTemplate });
-        return builtUiSchema;
-    }, [schema, formData, formContext, model, sourceType]);
-    const additionalFields = useMemo(() => ({
-        storySegmentReset: StorySegmentResetField,
-    }), []);
-    if (!hasSchema) {
-        return null;
-    }
-    return (React.createElement(SchemaForm, { schema: schema, formData: formData, onChange: handleChangeBase, onSubmit: handleSubmitBase, formContext: formContextValue, filePath: filePath, uiSchema: uiSchema, additionalFields: additionalFields, formErrorSignal: formErrorSignal }));
-}

package/lib/formbuilder/objectform/layer/webGlLayerForm.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-import type { ILayerProps } from './layerform';
-export declare function WebGlLayerPropertiesForm(props: ILayerProps): React.ReactElement | null;

package/lib/formbuilder/objectform/process/index.d.ts

@@ -1 +0,0 @@
-export * from './dissolveProcessForm';

package/lib/formbuilder/objectform/process/index.js

@@ -1 +0,0 @@
-export * from './dissolveProcessForm';

package/lib/panelview/components/legendItem.js

@@ -1,200 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { useGetSymbology } from "../../dialogs/symbology/hooks/useGetSymbology";
-export const LegendItem = ({ layerId, model }) => {
-    const { symbology, isLoading, error } = useGetSymbology({ layerId, model });
-    const [content, setContent] = useState(null);
-    const parseColorStops = (expr) => {
-        if (!Array.isArray(expr) || expr[0] !== 'interpolate') {
-            return [];
-        }
-        const stops = [];
-        for (let i = 3; i < expr.length; i += 2) {
-            const value = expr[i];
-            const rgba = expr[i + 1];
-            const color = Array.isArray(rgba)
-                ? `rgba(${rgba[0]},${rgba[1]},${rgba[2]},${rgba[3]})`
-                : String(rgba);
-            stops.push({ value, color });
-        }
-        return stops;
-    };
-    const parseCaseCategories = (expr) => {
-        if (!Array.isArray(expr) || expr[0] !== 'case') {
-            return [];
-        }
-        const categories = [];
-        for (let i = 1; i < expr.length - 1; i += 2) {
-            const condition = expr[i];
-            const colorExpr = expr[i + 1];
-            let category = '';
-            if (Array.isArray(condition) && condition[0] === '==') {
-                category = condition[2];
-            }
-            let color = '';
-            if (Array.isArray(colorExpr)) {
-                color = `rgba(${colorExpr[0]},${colorExpr[1]},${colorExpr[2]},${colorExpr[3]})`;
-            }
-            else if (typeof colorExpr === 'string') {
-                color = colorExpr;
-            }
-            categories.push({ category, color });
-        }
-        return categories;
-    };
-    useEffect(() => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-        if (isLoading) {
-            setContent(React.createElement("p", { style: { fontSize: '0.8em' } }, "Loading\u2026"));
-            return;
-        }
-        if (error) {
-            setContent(React.createElement("p", { style: { color: 'red', fontSize: '0.8em' } }, error.message));
-            return;
-        }
-        if (!symbology) {
-            setContent(React.createElement("p", { style: { fontSize: '0.8em' } }, "No symbology"));
-            return;
-        }
-        const renderType = (_a = symbology.symbologyState) === null || _a === void 0 ? void 0 : _a.renderType;
-        const property = (_b = symbology.symbologyState) === null || _b === void 0 ? void 0 : _b.value;
-        const fill = (_d = (_c = symbology.color) === null || _c === void 0 ? void 0 : _c['fill-color']) !== null && _d !== void 0 ? _d : (_e = symbology.color) === null || _e === void 0 ? void 0 : _e['circle-fill-color'];
-        const stroke = (_g = (_f = symbology.color) === null || _f === void 0 ? void 0 : _f['stroke-color']) !== null && _g !== void 0 ? _g : (_h = symbology.color) === null || _h === void 0 ? void 0 : _h['circle-stroke-color'];
-        // Single Symbol
-        if (renderType === 'Single Symbol') {
-            setContent(React.createElement("div", { style: { display: 'flex', gap: 12, flexWrap: 'wrap', padding: 6 } },
-                fill && (React.createElement("div", { style: { display: 'flex', alignItems: 'center', gap: 6 } },
-                    React.createElement("span", { style: {
-                            width: 16,
-                            height: 16,
-                            border: '1px solid #000',
-                            background: fill,
-                        } }),
-                    React.createElement("span", { style: { fontSize: '0.8em' } }, "Fill"))),
-                stroke && (React.createElement("div", { style: { display: 'flex', alignItems: 'center', gap: 6 } },
-                    React.createElement("span", { style: {
-                            width: 24,
-                            height: 2,
-                            background: stroke,
-                            border: '1px solid #000',
-                        } }),
-                    React.createElement("span", { style: { fontSize: '0.8em' } }, "Stroke"))),
-                !fill && !stroke && (React.createElement("span", { style: { fontSize: '0.8em' } }, "No symbol colors"))));
-            return;
-        }
-        // Graduated
-        if (renderType === 'Graduated') {
-            const stops = parseColorStops(fill || stroke);
-            if (!stops.length) {
-                setContent(React.createElement("p", { style: { fontSize: '0.8em' } }, "No graduated symbology"));
-                return;
-            }
-            const segments = stops
-                .map((s, i) => {
-                const pct = (i / (stops.length - 1)) * 100;
-                return `${s.color} ${pct}%`;
-            })
-                .join(', ');
-            const gradient = `linear-gradient(to right, ${segments})`;
-            setContent(React.createElement("div", { style: { padding: 6, width: '90%' } },
-                property && (React.createElement("div", { style: { fontSize: '1em', marginBottom: 20 } },
-                    React.createElement("strong", null, property))),
-                React.createElement("div", { style: {
-                        position: 'relative',
-                        height: 12,
-                        background: gradient,
-                        border: '1px solid #ccc',
-                        borderRadius: 3,
-                        marginBottom: 20,
-                        marginTop: 10,
-                    } }, stops.map((s, i) => {
-                    const left = (i / (stops.length - 1)) * 100;
-                    const up = i % 2 === 0;
-                    return (React.createElement("div", { key: i, style: {
-                            position: 'absolute',
-                            left: `${left}%`,
-                            transform: 'translateX(-50%)',
-                        } },
-                        React.createElement("div", { style: {
-                                width: 1,
-                                height: 8,
-                                background: '#333',
-                                margin: '0 auto',
-                            } }),
-                        React.createElement("div", { style: {
-                                position: 'absolute',
-                                top: up ? -18 : 12,
-                                fontSize: '0.7em',
-                                whiteSpace: 'nowrap',
-                                marginTop: up ? 0 : 4,
-                            } }, s.value.toFixed(2))));
-                }))));
-            return;
-        }
-        // Categorized
-        if (renderType === 'Categorized') {
-            const cats = parseCaseCategories(fill || stroke);
-            if (!cats.length) {
-                setContent(React.createElement("p", { style: { fontSize: '0.8em' } }, "No categorized symbology"));
-                return;
-            }
-            setContent(React.createElement("div", { style: { padding: 6 } },
-                property && (React.createElement("div", { style: { fontSize: '1em', marginBottom: 6 } },
-                    React.createElement("strong", null, property))),
-                React.createElement("div", { style: {
-                        display: 'grid',
-                        gap: 6,
-                        maxHeight: 200,
-                        overflowY: 'auto',
-                        paddingRight: 4,
-                    } }, cats.map((c, i) => (React.createElement("div", { key: i, style: { display: 'flex', alignItems: 'center', gap: 8 } },
-                    React.createElement("span", { style: {
-                            width: 16,
-                            height: 16,
-                            background: c.color || '#ccc',
-                            border: '1px solid #000',
-                            borderRadius: 2,
-                        } }),
-                    React.createElement("span", { style: { fontSize: '0.75em' } }, String(c.category))))))));
-            return;
-        }
-        // Heatmap
-        if (renderType === 'Heatmap') {
-            const colors = Array.isArray(symbology.color) ? symbology.color : [];
-            if (!colors.length) {
-                setContent(React.createElement("p", { style: { fontSize: '0.8em' } }, "No heatmap colors"));
-                return;
-            }
-            const gradient = `linear-gradient(to right, ${colors.join(', ')})`;
-            const reversed = (_j = symbology.symbologyState) === null || _j === void 0 ? void 0 : _j.reverse;
-            setContent(React.createElement("div", { style: { padding: 6, width: '90%' } },
-                React.createElement("div", { style: { fontSize: '1em', marginBottom: 10 } },
-                    React.createElement("strong", null, "Heatmap")),
-                React.createElement("div", { style: {
-                        height: 12,
-                        background: gradient,
-                        border: '1px solid #ccc',
-                        borderRadius: 3,
-                        marginBottom: 4,
-                    } }),
-                React.createElement("div", { style: {
-                        display: 'flex',
-                        justifyContent: 'space-between',
-                        fontSize: '0.75em',
-                        marginBottom: 8,
-                    } },
-                    React.createElement("span", { style: { fontWeight: 'bold' } }, "Low"),
-                    React.createElement("span", { style: { fontWeight: 'bold' } }, "High")),
-                React.createElement("div", { style: {
-                        fontSize: '0.75em',
-                        display: 'flex',
-                        flexDirection: 'column',
-                        gap: 2,
-                    } }, reversed && (React.createElement("span", { style: { fontWeight: 'bold' } }, "Reversed ramp")))));
-            return;
-        }
-        setContent(React.createElement("p", null,
-            "Unsupported symbology: ",
-            String(renderType)));
-    }, [symbology, isLoading, error]);
-    return React.createElement("div", null, content);
-};

package/lib/panelview/identify-panel/IdentifyPanel.js

@@ -1,102 +0,0 @@
-import { faMagnifyingGlass } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { LabIcon, caretDownIcon } from '@jupyterlab/ui-components';
-import React, { useEffect, useRef, useState } from 'react';
-export const IdentifyPanelComponent = ({ model, }) => {
-    var _a;
-    const [features, setFeatures] = useState();
-    const [visibleFeatures, setVisibleFeatures] = useState({
-        0: true,
-    });
-    const [remoteUser, setRemoteUser] = useState(null);
-    const featuresRef = useRef(features);
-    // Reset state values when current widget changes
-    useEffect(() => {
-        featuresRef.current = features;
-    }, [features]);
-    useEffect(() => {
-        const handleClientStateChanged = (sender, clients) => {
-            var _a, _b, _c, _d, _e, _f;
-            const remoteUserId = (_a = model === null || model === void 0 ? void 0 : model.localState) === null || _a === void 0 ? void 0 : _a.remoteUser;
-            // If following a collaborator
-            if (remoteUserId) {
-                const remoteState = clients.get(remoteUserId);
-                if (remoteState) {
-                    if (((_b = remoteState.user) === null || _b === void 0 ? void 0 : _b.username) !== (remoteUser === null || remoteUser === void 0 ? void 0 : remoteUser.username)) {
-                        setRemoteUser(remoteState.user);
-                    }
-                    setFeatures((_d = (_c = remoteState.identifiedFeatures) === null || _c === void 0 ? void 0 : _c.value) !== null && _d !== void 0 ? _d : {});
-                }
-                return;
-            }
-            // If not following a collaborator
-            const identifiedFeatures = (_f = (_e = model === null || model === void 0 ? void 0 : model.localState) === null || _e === void 0 ? void 0 : _e.identifiedFeatures) === null || _f === void 0 ? void 0 : _f.value;
-            if (!identifiedFeatures) {
-                setFeatures({});
-                return;
-            }
-            if (model.currentMode === 'identifying' &&
-                featuresRef.current !== identifiedFeatures) {
-                setFeatures(identifiedFeatures);
-            }
-        };
-        model === null || model === void 0 ? void 0 : model.clientStateChanged.connect(handleClientStateChanged);
-        return () => {
-            model === null || model === void 0 ? void 0 : model.clientStateChanged.disconnect(handleClientStateChanged);
-        };
-    }, [model]);
-    const highlightFeatureOnMap = (feature) => {
-        var _a, _b;
-        (_a = model === null || model === void 0 ? void 0 : model.highlightFeatureSignal) === null || _a === void 0 ? void 0 : _a.emit(feature);
-        const geometry = feature.geometry || feature._geometry;
-        (_b = model === null || model === void 0 ? void 0 : model.flyToGeometrySignal) === null || _b === void 0 ? void 0 : _b.emit(geometry);
-    };
-    const toggleFeatureVisibility = (index) => {
-        setVisibleFeatures(prev => (Object.assign(Object.assign({}, prev), { [index]: !prev[index] })));
-    };
-    const getFeatureNameOrId = (feature, featureIndex) => {
-        for (const key of Object.keys(feature)) {
-            const lowerCase = key.toLowerCase();
-            if ((lowerCase.includes('name') || lowerCase === 'id') && feature[key]) {
-                return feature[key];
-            }
-        }
-        return `Feature ${featureIndex + 1}`;
-    };
-    return (React.createElement("div", { className: "jgis-identify-wrapper", style: {
-            border: ((_a = model === null || model === void 0 ? void 0 : model.localState) === null || _a === void 0 ? void 0 : _a.remoteUser)
-                ? `solid 3px ${remoteUser === null || remoteUser === void 0 ? void 0 : remoteUser.color}`
-                : 'unset',
-        } },
-        !Object.keys(features !== null && features !== void 0 ? features : {}).length && (React.createElement("div", { style: { textAlign: 'center' } }, "Please select a layer from the layer list, then \"i\" from the toolbar to start identifying features.")),
-        features &&
-            Object.values(features).map((feature, featureIndex) => (React.createElement("div", { key: featureIndex, className: "jgis-identify-grid-item" },
-                React.createElement("div", { className: "jgis-identify-grid-item-header" },
-                    React.createElement("span", { onClick: () => toggleFeatureVisibility(featureIndex) },
-                        React.createElement(LabIcon.resolveReact, { icon: caretDownIcon, className: `jp-gis-layerGroupCollapser${visibleFeatures[featureIndex] ? ' jp-mod-expanded' : ''}`, tag: 'span' }),
-                        React.createElement("span", null, getFeatureNameOrId(feature, featureIndex))),
-                    (() => {
-                        const isRasterFeature = !feature.geometry &&
-                            !feature._geometry &&
-                            typeof (feature === null || feature === void 0 ? void 0 : feature.x) !== 'number' &&
-                            typeof (feature === null || feature === void 0 ? void 0 : feature.y) !== 'number';
-                        return (React.createElement("button", { className: "jgis-highlight-button", onClick: e => {
-                                e.stopPropagation();
-                                highlightFeatureOnMap(feature);
-                            }, title: isRasterFeature
-                                ? 'Highlight not available for raster features'
-                                : 'Highlight feature on map', disabled: isRasterFeature },
-                            React.createElement(FontAwesomeIcon, { icon: faMagnifyingGlass })));
-                    })()),
-                visibleFeatures[featureIndex] && (React.createElement(React.Fragment, null, Object.entries(feature)
-                    .filter(([key, value]) => typeof value !== 'object' || value === null)
-                    .sort(([keyA], [keyB]) => keyA.localeCompare(keyB))
-                    .map(([key, value]) => (React.createElement("div", { key: key, className: "jgis-identify-grid-body" },
-                    React.createElement("strong", null,
-                        key,
-                        ":"),
-                    typeof value === 'string' &&
-                        /<\/?[a-z][\s\S]*>/i.test(value) ? (React.createElement("span", { dangerouslySetInnerHTML: {
-                            __html: `${value}`,
-                        } })) : (React.createElement("span", null, String(value)))))))))))));
-};

package/lib/panelview/leftpanel.js

@@ -1,139 +0,0 @@
-import * as React from 'react';
-import Draggable from 'react-draggable';
-import { CommandIDs } from '../constants';
-import { LayersBodyComponent } from './components/layers';
-import { PanelTabs, TabsContent, TabsList, TabsTrigger, } from '../shared/components/Tabs';
-import StacPanel from '../stacBrowser/components/StacPanel';
-export const LeftPanel = (props) => {
-    var _a;
-    const [options, setOptions] = React.useState(props.model.getOptions());
-    const storyMapPresentationMode = (_a = options.storyMapPresentationMode) !== null && _a !== void 0 ? _a : false;
-    const [layerTree, setLayerTree] = React.useState(props.model.getLayerTree());
-    const hasSyncedInitialSelectionRef = React.useRef(false);
-    const tabInfo = [
-        !props.settings.layersDisabled
-            ? { name: 'layers', title: 'Layers' }
-            : false,
-        !props.settings.stacBrowserDisabled && !storyMapPresentationMode
-            ? { name: 'stac', title: 'Stac Browser' }
-            : false,
-        !props.settings.storyMapsDisabled
-            ? { name: 'segments', title: 'Segments' }
-            : false,
-    ].filter(Boolean);
-    const [curTab, setCurTab] = React.useState(tabInfo.length > 0 ? tabInfo[0].name : undefined);
-    React.useEffect(() => {
-        const onOptionsChanged = () => {
-            setOptions(Object.assign({}, props.model.getOptions()));
-        };
-        const updateLayerTree = () => {
-            const freshTree = props.model.getLayerTree() || [];
-            setLayerTree(freshTree);
-            // Sync selected to top layer/group only the first time the tree has items
-            if (!hasSyncedInitialSelectionRef.current && freshTree.length > 0) {
-                hasSyncedInitialSelectionRef.current = true;
-                const lastItem = freshTree[freshTree.length - 1];
-                const lastId = typeof lastItem === 'string' ? lastItem : lastItem === null || lastItem === void 0 ? void 0 : lastItem.name;
-                const lastType = typeof lastItem === 'string' ? 'layer' : 'group';
-                if (lastId) {
-                    props.model.syncSelected({ [lastId]: { type: lastType } }, props.model.getClientId().toString());
-                }
-            }
-            // Need to let command know when segments get populated
-            props.commands.notifyCommandChanged(CommandIDs.toggleStoryPresentationMode);
-        };
-        const onSegmentAdded = (_sender, payload) => {
-            props.model.syncSelected({ [payload.storySegmentId]: { type: 'layer' } }, props.model.getClientId().toString());
-            setCurTab('segments');
-        };
-        props.model.sharedOptionsChanged.connect(onOptionsChanged);
-        props.model.sharedModel.layersChanged.connect(updateLayerTree);
-        props.model.sharedModel.layerTreeChanged.connect(updateLayerTree);
-        props.model.segmentAdded.connect(onSegmentAdded);
-        updateLayerTree();
-        return () => {
-            props.model.sharedOptionsChanged.disconnect(onOptionsChanged);
-            props.model.sharedModel.layersChanged.disconnect(updateLayerTree);
-            props.model.sharedModel.layerTreeChanged.disconnect(updateLayerTree);
-            props.model.segmentAdded.disconnect(onSegmentAdded);
-        };
-    }, [props.model]);
-    // Since story segments are technically layers they are stored in the layer tree, so we separate them
-    // from regular layers. Process the tree once to build both filtered and story segment trees.
-    const { filteredLayerTree, storySegmentLayerTree } = React.useMemo(() => {
-        const filtered = [];
-        const storySegments = [];
-        const processLayer = (layer) => {
-            if (typeof layer === 'string') {
-                const layerData = props.model.getLayer(layer);
-                const isStorySegment = (layerData === null || layerData === void 0 ? void 0 : layerData.type) === 'StorySegmentLayer';
-                return {
-                    filtered: isStorySegment ? null : layer,
-                    storySegment: isStorySegment ? layer : null,
-                };
-            }
-            // For layer groups, recursively process their layers
-            const filteredGroupLayers = [];
-            const storySegmentGroupLayers = [];
-            for (const groupLayer of layer.layers) {
-                const result = processLayer(groupLayer);
-                if (result.filtered !== null) {
-                    filteredGroupLayers.push(result.filtered);
-                }
-                if (result.storySegment !== null) {
-                    storySegmentGroupLayers.push(result.storySegment);
-                }
-            }
-            return {
-                filtered: filteredGroupLayers.length > 0
-                    ? Object.assign(Object.assign({}, layer), { layers: filteredGroupLayers }) : null,
-                storySegment: storySegmentGroupLayers.length > 0
-                    ? Object.assign(Object.assign({}, layer), { layers: storySegmentGroupLayers }) : null,
-            };
-        };
-        for (const layer of layerTree) {
-            const result = processLayer(layer);
-            if (result.filtered !== null) {
-                filtered.push(result.filtered);
-            }
-            if (result.storySegment !== null) {
-                storySegments.push(result.storySegment);
-            }
-        }
-        // Reverse filteredLayerTree before returning
-        filtered.reverse();
-        return {
-            filteredLayerTree: filtered,
-            storySegmentLayerTree: storySegments,
-        };
-    }, [layerTree]);
-    // Updates story segments array based on layer tree array
-    React.useEffect(() => {
-        const { storyId, story } = props.model.getSelectedStory();
-        if (!story) {
-            return;
-        }
-        props.model.sharedModel.updateStoryMap(storyId, Object.assign(Object.assign({}, story), { storySegments: storySegmentLayerTree }));
-    }, [storySegmentLayerTree]);
-    const allLeftTabsDisabled = props.settings.layersDisabled &&
-        props.settings.stacBrowserDisabled &&
-        props.settings.storyMapsDisabled;
-    const leftPanelVisible = !props.settings.leftPanelDisabled && !allLeftTabsDisabled;
-    return (React.createElement(Draggable, { handle: ".jgis-tabs-list", cancel: ".jgis-tabs-trigger", bounds: ".jGIS-Mainview-Container" },
-        React.createElement("div", { className: "jgis-left-panel-container", style: { display: leftPanelVisible ? 'block' : 'none' } },
-            React.createElement(PanelTabs, { curTab: curTab, className: "jgis-panel-tabs" },
-                React.createElement(TabsList, null, tabInfo.map(tab => (React.createElement(TabsTrigger, { className: "jGIS-layer-browser-category", key: tab.name, value: tab.name, onClick: () => {
-                        if (curTab !== tab.name) {
-                            setCurTab(tab.name);
-                        }
-                        else {
-                            setCurTab('');
-                        }
-                    } }, tab.title)))),
-                !props.settings.layersDisabled && (React.createElement(TabsContent, { value: "layers", className: "jgis-panel-tab-content jp-gis-layerPanel" },
-                    React.createElement(LayersBodyComponent, { model: props.model, commands: props.commands, state: props.state, layerTree: filteredLayerTree }))),
-                !props.settings.stacBrowserDisabled && (React.createElement(TabsContent, { value: "stac", className: "jgis-panel-tab-content jgis-panel-tab-content-stac-panel" },
-                    React.createElement(StacPanel, { model: props.model }))),
-                !props.settings.storyMapsDisabled && (React.createElement(TabsContent, { value: "segments", className: "jgis-panel-tab-content" },
-                    React.createElement(LayersBodyComponent, { model: props.model, commands: props.commands, state: props.state, layerTree: storySegmentLayerTree })))))));
-};