refactor(web): add reference to developer documentation links in plugin playground [VIZ-1410]

web/src/beta/features/PluginPlayground/Plugins/presets/camera/cameraPosition.ts

@@ -21,7 +21,7 @@ const widgetFile: FileType = {
   id: "camera-position-widget",
   title: "camera-position.js",
   sourceCode: `
-  // This plugin provides a simple interface for camera position management in ReEarth.
+  // This plugin provides a simple interface for camera position management in Re:Earth.
   // It allows users to:
   // 1. Retrieve the current camera position
   // 2. Manually input and apply a new camera position
@@ -271,6 +271,7 @@ const widgetFile: FileType = {
 </script>
 \`);
 
+// NOTE: Link to developer documentation on Camera "on" event: https://visualizer.developer.reearth.io/plugin-api/camera/#move-1
 reearth.camera.on("move", (camera) => {
   reearth.ui.postMessage({
     type: 'currentPosition',
@@ -285,6 +286,7 @@ reearth.camera.on("move", (camera) => {
   });
 });
 
+// NOTE: Link to developer documentation on Extension "on" event: https://visualizer.developer.reearth.io/plugin-api/extension/#message-1
 reearth.extension.on('message', (msg) => {
   // Apply camera position
   if (msg.type === 'applyCameraPosition') {
@@ -309,6 +311,7 @@ reearth.extension.on('message', (msg) => {
       );
 
       // Send confirmation message
+      // NOTE: Link to developer documentation on UI "postMessage" event: https://visualizer.developer.reearth.io/plugin-api/ui/#postmessage
       reearth.ui.postMessage({
         type: 'positionApplied'
       });

web/src/beta/features/PluginPlayground/Plugins/presets/camera/cameraRotation.ts

@@ -104,8 +104,10 @@ const sample3dTiles = {
 };
 
 // Add the 3D Tiles layer to Re:Earth
+// NOTE: Link to developer documentation on Layers "add" event: https://visualizer.developer.reearth.io/plugin-api/layers/#add
 reearth.layers.add(sample3dTiles);
 
+// NOTE: Link to developer documentation on Viewer "overrideProperty" event: https://visualizer.developer.reearth.io/plugin-api/viewer/#overrideproperty
 reearth.viewer.overrideProperty({
   // Enable Cesium World Terrain
   terrain: {
@@ -118,6 +120,7 @@ reearth.viewer.overrideProperty({
 });
 
 // Move the camera to the specified position
+// NOTE: Link to developer documentation on Camera "flyTo" event: https://visualizer.developer.reearth.io/plugin-api/camera/#flyto
 reearth.camera.flyTo(
   {
     // Define the camera's target position
@@ -135,6 +138,7 @@ reearth.camera.flyTo(
 );
 
 // Listen for messages from the UI to trigger camera rotation
+// NOTE: Link to developer documentation on Extension "on" event: https://visualizer.developer.reearth.io/plugin-api/extension/#message-1
 reearth.extension.on("message", (msg) => {
   const { action } = msg;
   if (action === "rotateCamera"){

web/src/beta/features/PluginPlayground/Plugins/presets/camera/zoomInOut.ts

@@ -87,12 +87,15 @@ ${PRESET_PLUGIN_COMMON_STYLE}
 // ================================
 
 // Listen for messages from the UI and update zoom level
+// NOTE: Link to developer documentation on Extension "on" event: https://visualizer.developer.reearth.io/plugin-api/extension/#message-1
 reearth.extension.on("message", (msg) => {
   const { action } = msg;
   if (action === "zoomIn") {
     // Increasing the value increases the change to zoom
+    // NOTE: Link to developer documentation on Camera "zoomIn" method: https://visualizer.developer.reearth.io/plugin-api/camera/#zoomin
     reearth.camera.zoomIn(2);   
   } else if (action === "zoomOut") {
+  //  NOTE: Link to developer documentation on Camera "zoomOut" method: https://visualizer.developer.reearth.io/plugin-api/camera/#zoomout 
     reearth.camera.zoomOut(2);
   }
 });`

web/src/beta/features/PluginPlayground/Plugins/presets/data/clientStorageThemeSelector.ts

@@ -202,7 +202,9 @@ logOperation(\\\`Storage updated: Theme preference is \\\${storedTheme ? \\\`set
 const THEME_KEY = "user_theme_preference";
 
 async function updateStorageDisplay() {
+// NOTE: Link to developer documentation on Client Storage "getAsync" method: https://visualizer.developer.reearth.io/plugin-api/data/#getasync
   const theme = await reearth.data.clientStorage.getAsync(THEME_KEY);
+  // NOTE: Link to developer documentation on UI "postMessage" method: https://visualizer.developer.reearth.io/plugin-api/ui/#postmessage
   reearth.ui.postMessage({
     type: "storageUpdate",
     data: { [THEME_KEY]: theme }
@@ -222,6 +224,7 @@ reearth.extension.on("message", async msg => {
         break;
 
       case "setTheme":
+        // NOTE: Link to developer documentation on Client Storage "setAsync" method: https://visualizer.developer.reearth.io/plugin-api/data/#setasync
         await reearth.data.clientStorage.setAsync(THEME_KEY, msg.theme);
         reearth.ui.postMessage({
           type: "themeUpdate",
@@ -231,6 +234,7 @@ reearth.extension.on("message", async msg => {
         break;
 
       case "viewKeys":
+        // NOTE: Link to developer documentation on Client Storage "keysAsync" method: https://visualizer.developer.reearth.io/plugin-api/data/#keysasync
         const keys = await reearth.data.clientStorage.keysAsync();
         reearth.ui.postMessage({
           type: "keysUpdate",
@@ -239,6 +243,7 @@ reearth.extension.on("message", async msg => {
         break;
 
       case "clearStorage":
+        // NOTE: Link to developer documentation on Client Storage "dropStoreAsync" method: https://visualizer.developer.reearth.io/plugin-api/data/#dropstoreasync
         await reearth.data.clientStorage.dropStoreAsync();
         reearth.ui.postMessage({
           type: "storageCleared"

web/src/beta/features/PluginPlayground/Plugins/presets/data/extensionProperty.ts

@@ -139,8 +139,10 @@ const storyBlockFile: FileType = {
 
 // Get block property values and send to UI.
 // Property schema is defined in reearth.yml.
+//  NOTE: Link to developer documentation on UI "postMessage" method: https://visualizer.developer.reearth.io/plugin-api/ui/#postmessage
 reearth.ui.postMessage({
   type: "getBlockProperty",
+  // NOTE: Link to developer documentation on Extension Block https://visualizer.developer.reearth.io/plugin-api/extension/#block
   property: reearth.extension.block?.property
 });`
 };

web/src/beta/features/PluginPlayground/Plugins/presets/data/messengerBetweenExtensions.ts

@@ -106,11 +106,14 @@ reearth.ui.show(\`
 \`);
 
 // Handle messages from UI to send to other extension
+// NOTE: Link to documentation on Extension "on" event https://visualizer.developer.reearth.io/plugin-api/extension/#message-1
 reearth.extension.on("message", msg => {
   if (msg.type === "send") {
+  // NOTE: Link to documentation on Extension List https://visualizer.developer.reearth.io/plugin-api/extension/#list
     const extensions = reearth.extension.list;
     const target = extensions.find(ext => ext.extensionId === "extension-2");
     if (target) {
+    // NOTE: Link to documentation on Extension "postMessage" method https://visualizer.developer.reearth.io/plugin-api/extension/#postmessage
       reearth.extension.postMessage(target.id, msg.message);
     }
   }

web/src/beta/features/PluginPlayground/Plugins/presets/data/uiExtensionMessenger.ts

@@ -10,7 +10,7 @@ version: 1.0.0
 extensions:
   - id: messenger-between-extension-and-visualizer
     type: widget
-    name: Messenger between Extension and Visualizer Widget
+    name: Messenger Between Extension and Visualizer Widget
     description: Messenger between Extension and Visualizer Widget
     widgetLayout:
       defaultLocation:
@@ -134,7 +134,9 @@ const widgetFile: FileType = {
 \`);
 
 // Send message to UI when globe is clicked
+// NOTE: Link to developer documentation on Viewer "on" event: https://visualizer.developer.reearth.io/plugin-api/viewer/#mouse-events
 reearth.viewer.on("click", (event) => {
+// NOTE: Link to developer documentation on UI "postMessage" method: https://visualizer.developer.reearth.io/plugin-api/ui/#postmessage
   reearth.ui.postMessage({
     type: "position",
     lat: event.lat,
@@ -143,8 +145,10 @@ reearth.viewer.on("click", (event) => {
 });
 
 // Handle messages from UI to move camera
+// NOTE: Link to developer documentation on Extension "on" event: https://visualizer.developer.reearth.io/plugin-api/extension/#message-1
 reearth.extension.on("message", msg => {
   if (msg.type === "fly") {
+  // NOTE: Link to developer documentation on Camera "flyTo" method: https://visualizer.developer.reearth.io/plugin-api/camera/#flyto
     reearth.camera.flyTo(
       {
         lat: msg.lat,

web/src/beta/features/PluginPlayground/Plugins/presets/layerStyles/featureStyle3dTiles.ts

@@ -51,9 +51,11 @@ const sample3dTiles02 = {
 };
 
 // Add the 3D Tiles layers to Re:Earth
+// NOTE: Link to developer documentation for Layers "add" method https://visualizer.developer.reearth.io/plugin-api/layers/#add
 reearth.layers.add(sample3dTiles01);
 reearth.layers.add(sample3dTiles02);
 
+// NOTE: Link to developer documentation for Viewer "overrideProperty" method https://visualizer.developer.reearth.io/plugin-api/viewer/#overrideproperty
 reearth.viewer.overrideProperty({
   // Enable Cesium World Terrain
   terrain: {
@@ -72,6 +74,7 @@ reearth.viewer.overrideProperty({
 });
 
 // Move the camera to the specified position
+// NOTE: Link to developer documentation for Camera "flyTo" method https://visualizer.developer.reearth.io/plugin-api/camera/#flyto
 reearth.camera.flyTo(
   {
     // Define the camera target position

web/src/beta/features/PluginPlayground/Plugins/presets/layerStyles/featureStyle3dmodel.ts

@@ -71,11 +71,13 @@ const model3D02 = {
 };
 
 // Add 3D models to the layer
+// NOTE: Link to developer documentation on Layers "add" event: https://visualizer.developer.reearth.io/plugin-api/layers/#add
 reearth.layers.add(model3D01);
 reearth.layers.add(model3D02);
 
 // In this example, the time width is set to set the time for the shadow to appear
 // Set the time range on the timeline
+// NOTE: Link to developer documentation on Timeline "setTime" event: https://visualizer.developer.reearth.io/plugin-api/timeline/#settime
 reearth.timeline.setTime({
   // Start time
   start: new Date("2023-12-01T09:00:00-06:00"),
@@ -86,12 +88,15 @@ reearth.timeline.setTime({
 });
 
 // To animate the 3D model, you need to play the timeline
+// NOTE: Link to developer documentation on Timeline "play" event: https://visualizer.developer.reearth.io/plugin-api/timeline/#play  
 reearth.timeline.play();
 
 // Set the playback speed of the timeline (1 = normal speed)
+// NOTE: Link to developer documentation on Timeline "setSpeed" event: https://visualizer.developer.reearth.io/plugin-api/timeline/#setspeed
 reearth.timeline.setSpeed(1);
 
 // Enable shadow settings in the Re:Earth viewer
+// NOTE: Link to developer documentation on Viewer "overrideProperty" event: https://visualizer.developer.reearth.io/plugin-api/viewer/#overrideproperty
 reearth.viewer.overrideProperty({
   scene: {
     shadow: {
@@ -101,6 +106,7 @@ reearth.viewer.overrideProperty({
 });
 
 // Move the camera to a specified position
+// NOTE: Link to developer documentation on Camera "flyTo" event: https://visualizer.developer.reearth.io/plugin-api/camera/#flyto
 reearth.camera.flyTo(
   {
     // Defines the target camera position

web/src/beta/features/PluginPlayground/Plugins/presets/layerStyles/filterFeaturebyStyle.ts

@@ -100,9 +100,11 @@ const samplePointData = {
 };
 
 // Add the layer to Re:Earth
+// NOTE: Link to developer documentation for Layers "add" method https://visualizer.developer.reearth.io/plugin-api/layers/#add
 const layerId = reearth.layers.add(samplePointData);
 
 // Move the camera to the specified position
+// NOTE: Link to developer documentation for Camera "flyTo" method https://visualizer.developer.reearth.io/plugin-api/camera/#flyto
 reearth.camera.flyTo(
   {
     // Define the camera's target position
@@ -120,6 +122,7 @@ reearth.camera.flyTo(
 );
 
 // Listen for messages from the UI and override the style 
+// NOTE: Link to developer documentation for Extension "on" event https://visualizer.developer.reearth.io/plugin-api/extension/#message-1
 reearth.extension.on("message", (msg) => {
   const { action } = msg;
   if (action === "showAllFeatures") {
@@ -129,6 +132,7 @@ reearth.extension.on("message", (msg) => {
       },
     });
   } else if (action === "showFeaturesBelow20000") {
+  //  NOTE: Link to developer documentation for Layers "override" method https://visualizer.developer.reearth.io/plugin-api/layers/#override
     reearth.layers.override(layerId, {
       marker: {
         show: {

web/src/beta/features/PluginPlayground/Plugins/presets/layerStyles/layerStylingExamples.ts

@@ -140,12 +140,14 @@ const widgetFile: FileType = {
   };
 
   // Add all layers
+  // NOTE: Link to developer documentation for Layers "add" method https://visualizer.developer.reearth.io/plugin-api/layers/#add
   reearth.layers.add(geojsonLayer);
   reearth.layers.add(czmlLayer);
   reearth.layers.add(kmlLayer);
   reearth.layers.add(csvLayer);
 
   // Position camera to view all features
+  // NOTE: Link to developer documentation for Camera "flyTo" method https://visualizer.developer.reearth.io/plugin-api/camera/#flyto
   reearth.camera.flyTo({
     lng: 139.750,  // Center position to align all features
     lat: 35.7609591,   // Adjusted for better view of all features

web/src/beta/features/PluginPlayground/Plugins/presets/layerStyles/overrideStyle.ts

@@ -112,8 +112,10 @@ const sample3dTiles = {
 };
 
 // Add the 3D Tiles layer to Re:Earth
+// NOTE: Link to developer documentation for Layers "add" method https://visualizer.developer.reearth.io/plugin-api/layers/#add
 const layerId = reearth.layers.add(sample3dTiles);
 
+// NOTE: Link to developer documentation for Layers "override" method https://visualizer.developer.reearth.io/plugin-api/layers/#override
 reearth.viewer.overrideProperty({
   // Enable Cesium World Terrain
   terrain: {
@@ -126,6 +128,7 @@ reearth.viewer.overrideProperty({
 });
 
 // Move the camera to the specified position
+// NOTE: Link to developer documentation for Camera "flyTo" method https://visualizer.developer.reearth.io/plugin-api/camera/#flyto
 reearth.camera.flyTo(
   {
     // Define the camera's target position
@@ -143,6 +146,7 @@ reearth.camera.flyTo(
 );
 
 // Listen for messages from the UI and override the style for "Cool Style or "Warm Style"
+// NOTE: Link to developer documentation for Extension "on" event https://visualizer.developer.reearth.io/plugin-api/extension/#message-1
 reearth.extension.on("message", (msg) => {
   const { action } = msg;
   if (action === "updateStyleCool") {

web/src/beta/features/PluginPlayground/Plugins/presets/layerStyles/styleWithCondition.ts

@@ -54,6 +54,7 @@ const sample3dTiles = {
 };
 
 // Add the 3D Tiles layer to Re:Earth
+// NOTE: Link to developer documentation for Layers "add" method https://visualizer.developer.reearth.io/plugin-api/layers/#add
 reearth.layers.add(sample3dTiles);
 
 reearth.viewer.overrideProperty({
@@ -68,6 +69,7 @@ reearth.viewer.overrideProperty({
 });
 
 // Move the camera to the specified position
+// NOTE: Link to developer documentation for Camera "flyTo" method https://visualizer.developer.reearth.io/plugin-api/camera/#flyto
 reearth.camera.flyTo(
   {
     // Define the camera's target position
@@ -85,6 +87,7 @@ reearth.camera.flyTo(
 );
 
 // Set the timeline to a morning hour so that building colors are easy to see
+// NOTE: Link to developer documentation for Timeline "setTime" method https://visualizer.developer.reearth.io/plugin-api/timeline/#settime
 reearth.timeline.setTime({
     start: new Date("2023-01-01T00:00:00Z"),
     stop: new Date("2023-01-01T10:00:00Z"),

web/src/beta/features/PluginPlayground/Plugins/presets/layers/add-3Dtiles.ts

@@ -1,13 +1,13 @@
 import { FileType, PluginType } from "../../constants";
 
 const yamlFile: FileType = {
-  id: "layers-add-3dTiles-reearth-yml",
+  id: "layers-add-3d-tiles-reearth-yml",
   title: "reearth.yml",
-  sourceCode: `id: layers-add-3dTiles-plugin
+  sourceCode: `id: layers-add-3d-tiles-plugin
 name: Add 3D Tiles
 version: 1.0.0
 extensions:
-  - id: layers-add-3dTiles
+  - id: layers-add-3d-tiles
     type: widget
     name: Add 3D Tiles
     description: Add 3D Tiles
@@ -17,8 +17,8 @@ extensions:
 };
 
 const widgetFile: FileType = {
-  id: "layers-add-3dTiles",
-  title: "layers-add-3dTiles.js",
+  id: "layers-add-3d-tiles",
+  title: "layers-add-3d-tiles.js",
   sourceCode: `// Example of adding a layer with 3D Tiles data
 
 // Define 3D Tiles
@@ -35,16 +35,19 @@ const layer3dTiles = {
 };
 
 // Add the 3D Tiles layer from the URL to Re:Earth
+NOTE: Link to developer documentation on Layers "add" event: https://visualizer.developer.reearth.io/plugin-api/layers/#add
 reearth.layers.add(layer3dTiles);
 
 // Enable Terrain
+NOTE: Link to developer documentation on Viewer "overrideProperty" event: https://visualizer.developer.reearth.io/plugin-api/viewer/#overrideproperty
 reearth.viewer.overrideProperty({
   terrain: {
     enabled: true,
   },
 });
 
 // Move the camera to the position where the CZML data is displayed.
+NOTE: Link to developer documentation on Camera "flyTo" event: https://visualizer.developer.reearth.io/plugin-api/camera/#flyto
 reearth.camera.flyTo(
   // Define the camera position to be moved to
   {