From 010eaed8b4ca7d56452f285eb9f878a01424ebe4 Mon Sep 17 00:00:00 2001
From: Phil Owen <19691521+PhillipsOwen@users.noreply.github.com>
Date: Fri, 24 Jan 2025 15:15:09 -0500
Subject: [PATCH] adjusting UI to handle a lot more external layers in the tray
---
.../additional-layers/externalLayerItems.js | 150 ++++++++++--------
1 file changed, 87 insertions(+), 63 deletions(-)
diff --git a/src/components/trays/additional-layers/externalLayerItems.js b/src/components/trays/additional-layers/externalLayerItems.js
index 4398b3f3..3732185d 100644
--- a/src/components/trays/additional-layers/externalLayerItems.js
+++ b/src/components/trays/additional-layers/externalLayerItems.js
@@ -1,6 +1,6 @@
import React, { Fragment, useState } from "react";
import {
- AccordionGroup, Accordion, AccordionDetails, Button, Stack,
+ AccordionGroup, Accordion, AccordionDetails, AccordionSummary, Button, Stack,
Checkbox, Typography, Tab, Tabs, TabPanel, TabList, Box } from '@mui/joy';
import { KeyboardArrowDown as ExpandIcon } from '@mui/icons-material';
import { useLayers } from "@context/map-context";
@@ -60,6 +60,19 @@ export default function ExternalLayerItems(data) {
});
}
+ /**
+ * removes the "state" JSON branch for the metadata view
+ *
+ */
+ const json_replacer = (key, value) => {
+ // return nothing if this is the "state" branch
+ if (key === "state")
+ return undefined;
+ // otherwise return the value
+ else
+ return value;
+ };
+
/**
* handles updating the visibility of an external layers on the map surface
*
@@ -197,73 +210,84 @@ export default function ExternalLayerItems(data) {
// output sources
.map(
(layer, itemIndex) => (
-
- { layer['source'] }
- {
- // output checkboxes for each layer name/url
- externalLayers
- // get the layer names for this source type
- .filter(item => item.source === layer.source)
- // output the checkboxes
- .map ((layer, itemIndex) =>
- toggleAccordionView(layer['name']) }>
+ toggleAccordionView(layer['source']) }>
-
- { layer['name'] } }
- onChange={ () => toggleLayerVisibility(layer['name']) }
- />
+
+ { layer['source'] }
+
- toggleAccordionView( layer['name']) }>
-
-
-
+
+
+ {
+ // output checkboxes for each layer name/url
+ externalLayers
+ // get the layer names for this source type
+ .filter(item => item.source === layer.source)
+ // output the checkboxes
+ .map ((layer, itemIndex) =>
+ toggleAccordionView(layer['name']) }>
-
-
-
-
-
- Metadata
-
-
-
+ { layer['name'] } }
+ onChange={ () => toggleLayerVisibility(layer['name']) }
+ />
+
+ toggleAccordionView( layer['name']) }>
+
+
+
+
+
+
+
+
+
+ Metadata
+
+
+
-
-
- { JSON.stringify(layer, null, 2) }
-
-
-
-
-
- )
- }
-
+
+
+ { JSON.stringify(layer, json_replacer, 2) }
+
+
+
+
+
+ )
+ }
+
+
+
)
)
}