fix: Example types

JiriHoffmann · Feb 14, 2024 · 6b4f655 · 6b4f655
1 parent abe3ae9
commit 6b4f655
Show file tree

Hide file tree

Showing 5 changed files with 72 additions and 55 deletions.
diff --git a/example/package.json b/example/package.json
@@ -10,10 +10,11 @@
     "pods": "pod-install --quiet"
   },
   "dependencies": {
+    "@types/supercluster": "^7.1.3",
     "react": "18.2.0",
     "react-native": "0.71.3",
     "react-native-maps": "^1.4.0",
-    "supercluster": "^7.1.5"
+    "supercluster": "^8.0.1"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",

diff --git a/example/src/Comparison.tsx b/example/src/Comparison.tsx
@@ -11,10 +11,12 @@ import { getRandomData, parsedPlacesData } from './places';
 import { GetTile } from './GetTile';
 import { GetClusters } from './GetClusters';
 
-const DEFAULT_SIZE = 1000;
+const DEFAULT_SIZE = '1000';
 
 export const Comparison: FunctionComponent<{}> = () => {
-  const [data, setData] = useState<any[]>(getRandomData(DEFAULT_SIZE));
+  const [data, setData] = useState<supercluster.PointFeature<any>[]>(
+    getRandomData(DEFAULT_SIZE)
+  );
   const [dataSizeInput, setDataSizeInput] = useState(DEFAULT_SIZE);
   const [showType, setType] = useState<null | 'tile' | 'cluster'>(null);
 

diff --git a/example/src/GetClusters.tsx b/example/src/GetClusters.tsx
@@ -12,55 +12,59 @@ import {
 } from 'react-native';
 import { PerformanceNow, superclusterOptions, timeDelta } from './utils';
 import Supercluster from 'react-native-clusterer';
-import { default as SuperclusterJS } from 'supercluster';
+import SuperclusterJS from 'supercluster';
 
+type BBox = [number, number, number, number];
 interface Props {
-  data: any;
+  data: supercluster.PointFeature<any>[];
 }
 
 const GetClusters: FunctionComponent<Props> = ({ data }) => {
-  const [westLng, setWestLng] = useState(-180);
-  const [southLat, setSouthLat] = useState(-90);
-  const [eastLng, setEastLng] = useState(180);
-  const [northLat, setNorthLat] = useState(90);
-  const [zoom, setZoom] = useState(1);
+  const [westLng, setWestLng] = useState('-180');
+  const [southLat, setSouthLat] = useState('-90');
+  const [eastLng, setEastLng] = useState('180');
+  const [northLat, setNorthLat] = useState('90');
+  const [zoom, setZoom] = useState('1');
+
+  const zoomInt = parseInt(zoom);
+  const bbox = [westLng, southLat, eastLng, northLat].map(parseFloat) as BBox;
 
   const [time, setTime] = useState<string[]>(['0', '0']);
   const [result, setResult] = useState<string>('');
 
   const _handleRunJS = () => {
-    const initS = PerformanceNow();
+    if (bbox.some(isNaN)) return console.warn('Invalid input', bbox);
+    if (isNaN(zoomInt)) return console.warn('Invalid input', zoomInt);
+
+    const start = PerformanceNow();
     const superclusterJS = new SuperclusterJS(superclusterOptions);
     superclusterJS.load(data);
-    const initE = PerformanceNow();
+    const end = PerformanceNow();
 
     const getTileS = PerformanceNow();
-    const clusterRes = superclusterJS.getClusters(
-      [westLng, southLat, eastLng, northLat],
-      zoom
-    );
+    const clusterRes = superclusterJS.getClusters(bbox, zoomInt);
     const getTileE = PerformanceNow();
 
     setResult(JSON.stringify(clusterRes));
-    setTime([timeDelta(initS, initE), timeDelta(getTileS, getTileE)]);
+    setTime([timeDelta(start, end), timeDelta(getTileS, getTileE)]);
   };
 
   const _handleRunCPP = () => {
-    const initS = PerformanceNow();
+    if (bbox.some(isNaN)) return console.warn('Invalid input', bbox);
+    if (isNaN(zoomInt)) return console.warn('Invalid input', zoomInt);
+
+    const start = PerformanceNow();
     const supercluster = new Supercluster(superclusterOptions);
     supercluster.load(data);
-    const initE = PerformanceNow();
+    const end = PerformanceNow();
 
     const getTileS = PerformanceNow();
-    const clusterRes = supercluster.getClusters(
-      [westLng, southLat, eastLng, northLat],
-      zoom
-    );
+    const clusterRes = supercluster.getClusters(bbox, zoomInt);
 
     const getTileE = PerformanceNow();
 
     setResult(JSON.stringify(clusterRes));
-    setTime([timeDelta(initS, initE), timeDelta(getTileS, getTileE)]);
+    setTime([timeDelta(start, end), timeDelta(getTileS, getTileE)]);
   };
 
   return (
@@ -76,39 +80,39 @@ const GetClusters: FunctionComponent<Props> = ({ data }) => {
         <TextInput
           style={styles.flexInput}
           placeholder="0"
-          onChangeText={(t) => setWestLng(t as any)}
+          onChangeText={setWestLng}
           keyboardType={'number-pad'}
           value={`${westLng}`}
           multiline={false}
         />
         <TextInput
           style={styles.flexInput}
           placeholder="0"
-          onChangeText={(t) => setSouthLat(t as any)}
+          onChangeText={setSouthLat}
           keyboardType={'number-pad'}
           value={`${southLat}`}
           multiline={false}
         />
         <TextInput
           style={styles.flexInput}
           placeholder="0"
-          onChangeText={(t) => setEastLng(t as any)}
+          onChangeText={setEastLng}
           keyboardType={'number-pad'}
           value={`${eastLng}`}
           multiline={false}
         />
         <TextInput
           style={styles.flexInput}
           placeholder="0"
-          onChangeText={(t) => setNorthLat(t as any)}
+          onChangeText={setNorthLat}
           keyboardType={'number-pad'}
           value={`${northLat}`}
           multiline={false}
         />
         <TextInput
           style={styles.flexInput}
           placeholder="0"
-          onChangeText={(t) => setZoom(t as any)}
+          onChangeText={setZoom}
           keyboardType={'number-pad'}
           value={`${zoom}`}
           multiline={false}

diff --git a/example/src/GetTile.tsx b/example/src/GetTile.tsx
@@ -15,43 +15,53 @@ import Supercluster from 'react-native-clusterer';
 import { default as SuperclusterJS } from 'supercluster';
 
 interface Props {
-  data: any;
+  data: supercluster.PointFeature<any>[];
 }
 
 const GetTile: FunctionComponent<Props> = ({ data }) => {
-  const [x, setX] = useState(0);
-  const [y, setY] = useState(0);
-  const [z, setZ] = useState(0);
+  const [x, setX] = useState('0');
+  const [y, setY] = useState('0');
+  const [z, setZ] = useState('0');
+
+  const xInt = parseInt(x);
+  const yInt = parseInt(y);
+  const zInt = parseInt(z);
 
   const [time, setTime] = useState<string[]>(['0', '0']);
   const [result, setResult] = useState<string>('');
 
   const _handleRunJS = () => {
-    const initS = PerformanceNow();
+    if (isNaN(xInt) || isNaN(yInt) || isNaN(zInt))
+      return console.warn('Invalid input', xInt, yInt, zInt);
+
+    const start = PerformanceNow();
     const superclusterJS = new SuperclusterJS(superclusterOptions);
     superclusterJS.load(data);
-    const initE = PerformanceNow();
+    const end = PerformanceNow();
 
     const getTileS = PerformanceNow();
-    const tileRes = superclusterJS.getTile(x, y, z);
+    const tileRes = superclusterJS.getTile(xInt, yInt, zInt);
     const getTileE = PerformanceNow();
 
     setResult(JSON.stringify(tileRes));
-    setTime([timeDelta(initS, initE), timeDelta(getTileS, getTileE)]);
+    setTime([timeDelta(start, end), timeDelta(getTileS, getTileE)]);
   };
 
   const _handleRunCPP = () => {
-    const initS = PerformanceNow();
+    if (isNaN(xInt) || isNaN(yInt) || isNaN(zInt))
+      return console.warn('Invalid input', xInt, yInt, zInt);
+
+    const start = PerformanceNow();
     const supercluster = new Supercluster(superclusterOptions);
     supercluster.load(data);
-    const initE = PerformanceNow();
+    const end = PerformanceNow();
 
     const getTileS = PerformanceNow();
-    const tileRes = supercluster.getTile(0, 0, 0);
+    const tileRes = supercluster.getTile(xInt, yInt, zInt);
     const getTileE = PerformanceNow();
 
     setResult(JSON.stringify(tileRes));
-    setTime([timeDelta(initS, initE), timeDelta(getTileS, getTileE)]);
+    setTime([timeDelta(start, end), timeDelta(getTileS, getTileE)]);
   };
 
   return (
@@ -65,23 +75,23 @@ const GetTile: FunctionComponent<Props> = ({ data }) => {
         <TextInput
           style={styles.flexInput}
           placeholder="0"
-          onChangeText={(t) => setX(t as any)}
+          onChangeText={setX}
           keyboardType={'number-pad'}
           value={`${x}`}
           multiline={false}
         />
         <TextInput
           style={styles.flexInput}
           placeholder="0"
-          onChangeText={(t) => setY(t as any)}
+          onChangeText={setY}
           keyboardType={'number-pad'}
           value={`${y}`}
           multiline={false}
         />
         <TextInput
           style={styles.flexInput}
           placeholder="0"
-          onChangeText={(t) => setZ(t as any)}
+          onChangeText={setZ}
           keyboardType={'number-pad'}
           value={`${z}`}
           multiline={false}

diff --git a/example/src/places.ts b/example/src/places.ts
@@ -7,27 +7,27 @@ export const initialRegion = {
   longitudeDelta: 72.32146382331848,
 };
 
-export const parsedPlacesData = (JSON.parse(placesJSON).features as any[]).map(
-  (f, i) => ({
-    ...f,
-    properties: { ...f.properties, id: i },
-  })
-);
+export const parsedPlacesData: supercluster.PointFeature<any>[] = (
+  JSON.parse(placesJSON).features as any[]
+).map((f, i) => ({
+  ...f,
+  properties: { ...f.properties, id: i },
+}));
 
 export const getRandomNum = (min: number, max: number) => {
   return Math.floor(Math.random() * (max - min + 1)) + min;
 };
 
-export const getRandomData = (size: number) => {
-  return Array.from({ length: size }, () => {
+export const getRandomData = (size: number | string) => {
+  return Array.from({ length: parseInt(`${size}`) }, (_, i) => {
     return {
-      type: 'Feature' as 'Feature',
+      type: 'Feature' as const,
       geometry: {
-        type: 'Point' as 'Point',
+        type: 'Point' as const,
         coordinates: [getRandomNum(-180, 180), getRandomNum(-90, 90)],
       },
       properties: {
-        id: `${size / getRandomNum(1, size)}-${getRandomNum(0, size * 10)}`,
+        id: `point-${i}`,
       },
     };
   });