fix(website, editable-layers): Unbreak editor example in website (#271)

Author: ibgreen-openai

examples/editable-layers/editor/example.tsx

@@ -2,20 +2,14 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
-import React, {useState} from 'react';
+import React, { useState } from 'react';
 import DeckGL from '@deck.gl/react';
-import {ViewMode, EditableGeoJsonLayer} from '@deck.gl-community/editable-layers';
-import {Toolbox} from './toolbox/toolbox';
+import { ViewMode, EditableGeoJsonLayer } from '@deck.gl-community/editable-layers';
+import { Toolbox } from './toolbox/toolbox';
 import StaticMap from 'react-map-gl/maplibre';
 
-const initialViewState = {
-  longitude: -122.43,
-  latitude: 37.775,
-  zoom: 12
-};
-
-export function Example() {
-  const [geoJson, setGeoJson] = useState({
+export function getDefaultGeoJSON() {
+  return {
     type: 'FeatureCollection',
     features: [
       {
@@ -51,7 +45,17 @@ export function Example() {
         }
       }
     ]
-  });
+  } as const;
+}
+
+const initialViewState = {
+  longitude: -122.43,
+  latitude: 37.775,
+  zoom: 12
+};
+
+export function Example() {
+  const [geoJson, setGeoJson] = useState(getDefaultGeoJSON());
   const [selectedFeatureIndexes, setSelectedFeatureIndexes] = useState([0]);
   const [mode, setMode] = useState(() => ViewMode);
   const [modeConfig, setModeConfig] = useState({});
@@ -61,7 +65,7 @@ export function Example() {
     mode,
     modeConfig,
     selectedFeatureIndexes,
-    onEdit: ({updatedData}) => {
+    onEdit: ({ updatedData }) => {
       setGeoJson(updatedData);
     }
   });

examples/editable-layers/editor/package.json

@@ -33,14 +33,11 @@
     "react-dom": "^18.2.0",
     "react-dropzone": "^10.2.2",
     "react-map-gl": "^7.1.7",
-    "styled-components": "^4.4.1",
+    "styled-components": "^6.1.9",
     "wellknown": "^0.5.0"
   },
   "devDependencies": {
     "typescript": "^5.4.4",
     "vite": "^5.2.8"
-  },
-  "volta": {
-    "extends": "../../../package.json"
   }
 }

examples/editable-layers/editor/toolbox/toolbox.tsx

@@ -103,11 +103,12 @@ function ModeButton({buttonConfig, mode, onClick}: any) {
     </Button>
   );
 }
+
 function ModeGroupButtons({left, modeGroup, mode, onSetMode}: any) {
   const [expanded, setExpanded] = React.useState(false);
 
   const {modes} = modeGroup;
-
+  
   let subTools = null;
 
   if (expanded) {
@@ -240,6 +241,7 @@ export function Toolbox({
         {/* zoom in and out */}
       </Tools>
 
+      {/*
       {showImport && (
         <ImportModal
           onImport={(imported) => {
@@ -251,6 +253,7 @@ export function Toolbox({
       )}
 
       {showExport && <ExportModal geoJson={geoJson} onClose={() => setShowExport(false)} />}
+      */}
     </>
   );
 }

examples/graph-layers/graph-viewer/app.tsx

@@ -107,7 +107,6 @@ export function App(props) {
       return;
     }
 
-    debugger
     setEngine(new GraphEngine({graph, layout}));
   }, [graph, layout]);
 
@@ -279,7 +278,7 @@ export function App(props) {
               }
               getTooltip={(info) => getToolTip(info.object)}
             />
-            {/* View control component TODO - replace with widget */
+            {/* View control component TODO - doesn't work in website, replace with widget *
               <PositionedViewControl
                 fitBounds={fitBounds}
                 panBy={panBy}
@@ -288,7 +287,7 @@ export function App(props) {
                 maxZoom={maxZoom}
                 minZoom={minZoom}
               />
-            }
+            */}
           </div>
         </>
       </div>

examples/graph-layers/graph-viewer/package.json

@@ -9,14 +9,15 @@
     "start-local": "vite --config ../../vite.config.local.mjs"
   },
   "dependencies": {
-    "@deck.gl-community/graph-layers": "^9.1.0-beta.5",
-    "@deck.gl-community/react": "^9.1.0-beta.5",
-    "@deck.gl/core": "^9.1.12"
+    "@deck.gl-community/graph-layers": "^9.1.0-beta.8",
+    "@deck.gl-community/react": "^9.1.0-beta.8",
+    "@deck.gl/core": "^9.1.12",
+    "@deck.gl/layers": "^9.1.12",
+    "@deck.gl/react": "^9.1.12",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
     "vite": "^5.0.12"
-  },
-  "volta": {
-    "extends": "../../../package.json"
   }
 }

website/src/examples-sidebar.js

@@ -52,13 +52,13 @@ const sidebars = {
     // },
 
     // TODO - need BING map key
-    {
-      type: 'category',
-      label: '@deck.gl-community/bing-maps',
-      items: [
-        "bing-maps/get-started"
-      ]
-    },
+    // {
+    //   type: 'category',
+    //   label: '@deck.gl-community/bing-maps',
+    //   items: [
+    //     "bing-maps/get-started"
+    //   ]
+    // },
 
     // TODO - unclear why not rendering
     // {

website/src/examples/graph-layers/graph-viewer.tsx

@@ -6,7 +6,7 @@ import {App} from '../../../../examples/graph-layers/graph-viewer/app';
 
 import {makeExample} from '../../components';
 
-class AdvancedDemo extends Component {
+class GraphViewerDemo extends Component {
   static title = 'Simple Graph Viewer';
 
   static code = `${GITHUB_TREE}/examples/graph-layers/graph-viewer`;
@@ -26,4 +26,4 @@ class AdvancedDemo extends Component {
   }
 }
 
-export default makeExample(AdvancedDemo);
+export default makeExample(GraphViewerDemo);

website/src/examples/infovis-layers/horizon-graph-layer.mdx

@@ -1,4 +1,4 @@
-# Horizon Graph Layer Demo
+# HorizonGraphLayer
 
 import Demo from './horizon-graph-layer';