Add display for added layers

geojupyter · Jun 25, 2024 · b3e0058 · b3e0058
1 parent 59a8d35
commit b3e0058
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 5 deletions.
diff --git a/packages/base/src/layerBrowser/layerBrowserDialog.tsx b/packages/base/src/layerBrowser/layerBrowserDialog.tsx
@@ -1,4 +1,8 @@
-import { faMagnifyingGlass, faPlus } from '@fortawesome/free-solid-svg-icons';
+import {
+  faCheck,
+  faMagnifyingGlass,
+  faPlus
+} from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { IJGISLayer, IJGISSource, IJupyterGISDoc } from '@jupytergis/schema';
 import { ReactWidget } from '@jupyterlab/ui-components';
@@ -16,9 +20,10 @@ export const LayerBrowserComponent = ({
   sharedModel
 }: ILayerBrowserDialogProps) => {
   const [searchTerm, setSearchTerm] = useState('');
+  //TODO: Temp way to track layers to see icon change
+  const [layers, setLayers] = useState<string[]>([]);
 
   const gallery = getRasterLayerGallery();
-  console.log('gallery', gallery);
 
   useEffect(() => {
     const dialog = document.getElementsByClassName('jp-Dialog-content');
@@ -58,6 +63,8 @@ export const LayerBrowserComponent = ({
 
     sharedModel.addSource(sourceId, sourceModel);
     sharedModel.addLayer(UUID.uuid4(), layerModel);
+
+    setLayers([...layers, tile.name]);
   };
 
   return (
@@ -91,9 +98,16 @@ export const LayerBrowserComponent = ({
           >
             <div className="jgis-layer-browser-tile-img-container">
               <img className="jgis-layer-browser-img" src={tile.thumbnail} />
-              <div className="jgis-layer-browser-icon">
-                <FontAwesomeIcon style={{ height: 20 }} icon={faPlus} />
-              </div>
+              {layers.indexOf(tile.name) === -1 ? (
+                <div className="jgis-layer-browser-icon">
+                  <FontAwesomeIcon style={{ height: 20 }} icon={faPlus} />
+                </div>
+              ) : (
+                <div className="jgis-layer-browser-icon jgis-layer-browser-added">
+                  <FontAwesomeIcon style={{ height: 20 }} icon={faCheck} />
+                  <p className="jgis-layer-browser-text-general">Added!</p>
+                </div>
+              )}
             </div>
             <div className="jgis-layer-browser-text-container">
               <div className="jgis-layer-browser-text-info">

diff --git a/python/jupytergis_lab/style/base.css b/python/jupytergis_lab/style/base.css
@@ -504,6 +504,14 @@ div.jGIS-toolbar-widget > div.jp-Toolbar-item:last-child {
   opacity: 0;
 }
 
+.jgis-layer-browser-added {
+  display: inline-flex;
+  gap: 0.35rem;
+  opacity: 1 !important;
+  width: 7rem;
+  color: var(--jp-ui-inverse-font-color1);
+}
+
 .jgis-layer-browser-text-container {
   padding-inline: 4px;
   display: flex;