chore(web): add multi feature selection APIs #716

keiya01 · 2023-10-02T01:38:02Z

Overview

I added some plugin API for multi feature selection.

selectFeatures ... Select multiple features
pickManyFromViewport ... Pick multiple features from rectangle on viewport
selectedFeatureColor appearance for 3dtiles(This will be added for other layer)

What I've done

Support multi feature selection for plugin API

What I haven't done

Support multi feature selection for ReEarth. It's still support only single selection.

How I tested

Add layers

reearth.layers.add({
  type: "simple",
  data: {
      type: "3dtiles",
      url: "https://assets.cms.plateau.reearth.io/assets/4a/30f295-cd07-46b0-b0ab-4a4b1b3af06b/13100_tokyo23-ku_2022_3dtiles_1_1_op_bldg_13102_chuo-ku_lod2_no_texture/tileset.json"
  },
  ["3dtiles"]: {
      selectedFeatureColor: "blue"
  }
})

const layerId = reearth.layers.add({
  type: "simple",
  data: {
      type: "3dtiles",
      url: "https://assets.cms.plateau.reearth.io/assets/ca/ee4cb0-9ce4-4f6c-bca1-9c7623e84cb1/13100_tokyo23-ku_2022_3dtiles_1_1_op_bldg_13101_chiyoda-ku_lod2_no_texture/tileset.json"
  },
  ["3dtiles"]: {
    selectedFeatureColor: "red"
  }
})
setTimeout(() => reearth.camera.flyTo(layerId), 10)

Select multiple features with this script(This script selects features within a rectangle at the center, so you need to move the camera to 3dtiles be the center of the camera). Then feature's color will be changed to selectedFeatureColor.

const x = window.innerWidth / 2;
const y = window.innerHeight / 2;
const features = reearth?.scene?.pickManyFromViewport(
  [x, y],
  100,
  100,
  (f) => "3dtiles" in f,
);
reearth.layers.selectFeatures(features.map(f => ({ layerId: f.layerId, featureId: [f.id] })));

Select single feature with click. Then previous feature is unselected, and feature's color will be changed to selectedFeatureColor.

Which point I want you to review particularly

Memo

netlify · 2023-10-02T01:38:06Z

✅ Deploy Preview for reearth-web ready!

Name	Link
🔨 Latest commit	`fb6fcf3`
🔍 Latest deploy log	https://app.netlify.com/sites/reearth-web/deploys/651fb02868c33b00081c8f99
😎 Deploy Preview	https://deploy-preview-716--reearth-web.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

codecov · 2023-10-02T01:49:37Z

Codecov Report

Merging #716 (3ab8ef1) into main (af62fb4) will increase coverage by 0.00%.
The diff coverage is 33.73%.

❗ Current head 3ab8ef1 differs from pull request most recent head fb6fcf3. Consider uploading reports for the commit fb6fcf3 to get more accurate results

Additional details and impacted files

@@           Coverage Diff            @@
##             main     #716    +/-   ##
========================================
  Coverage   26.73%   26.74%            
========================================
  Files        1571     1574     +3     
  Lines      171278   172027   +749     
  Branches     3896     3913    +17     
========================================
+ Hits        45794    46004   +210     
- Misses     124395   124934   +539     
  Partials     1089     1089

Flag	Coverage Δ
web	`25.06% <33.73%> (+0.03%)`	⬆️
web-beta	`25.06% <33.73%> (+0.03%)`	⬆️
web-classic	`25.06% <33.73%> (+0.03%)`	⬆️
web-utils	`25.06% <33.73%> (+0.03%)`	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

Files	Coverage Δ
web/src/beta/lib/core/Map/Layers/index.tsx	`100.00% <100.00%> (ø)`
web/src/beta/lib/core/Map/Layers/keys.ts	`100.00% <100.00%> (ø)`
web/src/beta/lib/core/Map/ref.ts	`89.62% <100.00%> (+0.62%)`	⬆️
...src/beta/lib/core/engines/Cesium/Feature/utils.tsx	`67.74% <100.00%> (+0.26%)`	⬆️
web/src/beta/lib/core/mantle/types/appearance.ts	`100.00% <100.00%> (ø)`
web/src/beta/lib/core/mantle/types/index.ts	`100.00% <100.00%> (ø)`
web/src/beta/lib/core/utils/assertType.ts	`100.00% <100.00%> (ø)`
web/src/beta/lib/core/utils/index.ts	`100.00% <100.00%> (ø)`
web/src/beta/lib/core/Map/index.tsx	`0.00% <0.00%> (ø)`
web/src/beta/lib/core/Crust/Plugins/storybook.tsx	`0.00% <0.00%> (ø)`
... and 13 more

... and 17 files with indirect coverage changes

web/src/beta/lib/core/Crust/Plugins/plugin_types.ts

pyshx

Thanks for you hard work, I've added a few refactors. Rest is looking good to me.

pyshx · 2023-10-04T05:54:34Z

web/src/beta/lib/core/Map/Layers/hooks.ts

@@ -747,8 +777,74 @@ function useSelection({
    [],
  );

+  const selectedFeatureIds = useRef<{ layerId: string; featureIds: string[] }[]>([]);
+  const selectFeatures = useCallback(


Can you divide the selectFeatures function into smaller functions?

pyshx · 2023-10-04T05:55:24Z

web/src/beta/lib/core/Map/Layers/hooks.ts

+          );
+        else if (options) setSelectedLayer(s => [s[0], options, info]);
+        else
+          setSelectedLayer(s => (!s[0] && !s[1] && !s[2] ? s : [undefined, undefined, undefined]));


Suggested change

setSelectedLayer(s => (!s[0] && !s[1] && !s[2] ? s : [undefined, undefined, undefined]));

const resetSelectedLayer = (s) => (!s[0] && !s[1] && !s[2] ? s : [undefined, undefined, undefined]);

// Usage

setSelectedLayer(resetSelectedLayer);

pyshx · 2023-10-04T06:01:11Z

web/src/beta/lib/core/engines/Cesium/pickMany.ts

+    colorScratch.green = Color.byteToFloat(pixels[index + 1]);
+    colorScratch.blue = Color.byteToFloat(pixels[index + 2]);
+    colorScratch.alpha = Color.byteToFloat(pixels[index + 3]);
+    const object = context.getObjectByPickColor(colorScratch);


Can we wrap this in try and catch..?

pyshx · 2023-10-04T06:04:23Z

web/src/beta/lib/core/engines/Cesium/pickMany.ts

+  return offCenter.computeCullingVolume(camera.positionWC, camera.directionWC, camera.upWC);
+}
+
+function getIntersection(


Its better to minimize side effects in functional programming. here It's modifying result directly. Instead, consider returning a new object:

function getIntersection(
a: BoundingRectangle,
b: BoundingRectangle,
result = new BoundingRectangle(),
): BoundingRectangle | undefined {
//...
return {
x: x1,
y: y1,
width: x2 - x1,
height: y2 - y1,
};

Just as a practice if you can apply similar thing to other functions that'll be great 🙏

pyshx · 2023-10-04T06:05:57Z

web/src/beta/lib/core/engines/Cesium/pickMany.ts

+  const width = screenSpaceRectangle.width ?? 1;
+  const height = screenSpaceRectangle.height ?? 1;
+  const context = this._context;
+  const pixels = context.readPixels({


Now this one is optional,
You might want to add validations for the returned pixels and handle potential issues gracefully, to avoid unexpected behavior in subsequent lines of code.

pyshx · 2023-10-04T06:08:31Z

web/src/beta/lib/core/Map/types/index.ts

+    windowHeight: number,
+    // TODO: Get condition as expression for plugin
+    condition?: (f: PickedFeature) => boolean,
+  ) => PickedFeature[] | undefined;


consider returning an empty array as a falsy value instead of undefined

pyshx · 2023-10-04T06:09:44Z

web/src/beta/lib/core/engines/Cesium/useEngineRef.ts

+        const viewer = cesium.current?.cesiumElement;
+        if (!viewer || viewer.isDestroyed()) return;
+        findFeaturesFromLayer(viewer, layerId, featureId, entity => {
+          const tag = getTag(entity) ?? {};


Suggested change

const tag = getTag(entity) ?? {};

const tag = getTag(entity) ?? {};

const updatedTag = { ...tag, isFeatureSelected: true };

Lets avoid direct manipulation

pyshx · 2023-10-04T06:20:23Z

web/src/beta/lib/core/engines/Cesium/useEngineRef.ts

+        return findFeaturesFromLayer(viewer, layerId, featureIds, e => {
+          return convertObjToComputedFeature(viewer, e)?.[1];
+        });


Suggested change

return findFeaturesFromLayer(viewer, layerId, featureIds, e => {

return convertObjToComputedFeature(viewer, e)?.[1];

});

return findFeaturesFromLayer(viewer, layerId, featureIds, e => convertObjToComputedFeature(viewer, e)?.[1]);

Since you’re using arrow functions and implicit returns, consider adopting a more functional style for simple transformations. I might be worth doing the same for the rest of places where this practice can be adopted.

pyshx · 2023-10-04T06:22:23Z

web/src/beta/lib/core/engines/Cesium/utils.ts

+  layerId: string,
+  featureId: string[],
+  convert?: (e: Entity | Cesium3DTileset | InternalCesium3DTileFeature) => T,
+): NonNullable<T>[] | undefined {


Instead of returning undefined, consider returning an empty array to keep the return
Same as above.[OPTIONAL]

pyshx · 2023-10-04T06:23:29Z

web/src/beta/lib/core/engines/Cesium/utils.ts

@@ -151,6 +189,63 @@ export function findEntity(
  return;
 }

+export function findFeaturesFromLayer<T = Entity | Cesium3DTileset | InternalCesium3DTileFeature>(


If possible, It'd be great if you can breakdown this function into smaller[OPTIONAL].

function filterEntitiesById(entities: Entity[], layerId: string, featureId: string[]): Entity[] {
// filtering logic
}

function getEntitiesFromDatasources(viewer: CesiumViewer, layerId: string, featureId: string[]): Entity[] {
// logic to get entities from datasources
}

function get3DTileFeatures(viewer: CesiumViewer, featureId: string[]): Set<Entity | Cesium3DTileset | InternalCesium3DTileFeature> {
// logic to get entities from 3D Tiles
}

keiya01 added 2 commits October 2, 2023 10:20

chore(web): add multi feature selection APIs

ecc572b

rename

e81ce6d

keiya01 requested review from airslice and pyshx October 2, 2023 01:38

github-actions bot added the web label Oct 2, 2023

keiya01 mentioned this pull request Oct 2, 2023

feat(extension): add multi feature selection eukarya-inc/PLATEAU-VIEW-3.0#25

Merged

airslice reviewed Oct 2, 2023

View reviewed changes

web/src/beta/lib/core/Crust/Plugins/plugin_types.ts Outdated Show resolved Hide resolved

rename

3ab8ef1

airslice approved these changes Oct 2, 2023

View reviewed changes

pyshx reviewed Oct 4, 2023

View reviewed changes

pyshx approved these changes Oct 4, 2023

View reviewed changes

keiya01 added 2 commits October 6, 2023 15:56

fix review

c15a2c8

Merge branch 'main' into feat/multi-feature-selection

fb6fcf3

keiya01 merged commit 124d3c1 into main Oct 6, 2023
7 of 8 checks passed

keiya01 deleted the feat/multi-feature-selection branch October 6, 2023 07:00

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

chore(web): add multi feature selection APIs #716

chore(web): add multi feature selection APIs #716

keiya01 commented Oct 2, 2023

netlify bot commented Oct 2, 2023 •

edited

Loading

codecov bot commented Oct 2, 2023 •

edited

Loading

pyshx left a comment

pyshx Oct 4, 2023

pyshx Oct 4, 2023

pyshx Oct 4, 2023

pyshx Oct 4, 2023 •

edited

Loading

pyshx Oct 4, 2023

pyshx Oct 4, 2023

pyshx Oct 4, 2023

pyshx Oct 4, 2023

pyshx Oct 4, 2023

pyshx Oct 4, 2023

-          setSelectedLayer(s => (!s[0] && !s[1] && !s[2] ? s : [undefined, undefined, undefined]));
+          const resetSelectedLayer = (s) => (!s[0] && !s[1] && !s[2] ? s : [undefined, undefined, undefined]);
+// Usage
+setSelectedLayer(resetSelectedLayer);

	const tag = getTag(entity) ?? {};
	const tag = getTag(entity) ?? {};
	const updatedTag = { ...tag, isFeatureSelected: true };

chore(web): add multi feature selection APIs #716

chore(web): add multi feature selection APIs #716

Conversation

keiya01 commented Oct 2, 2023

Overview

What I've done

What I haven't done

How I tested

Which point I want you to review particularly

Memo

netlify bot commented Oct 2, 2023 • edited Loading

✅ Deploy Preview for reearth-web ready!

codecov bot commented Oct 2, 2023 • edited Loading

Codecov Report

pyshx left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

pyshx Oct 4, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

netlify bot commented Oct 2, 2023 •

edited

Loading

codecov bot commented Oct 2, 2023 •

edited

Loading

pyshx Oct 4, 2023 •

edited

Loading