fix: support tree-structured layers and tags in published pages

src/components/organisms/Published/hooks.ts

@@ -11,7 +11,7 @@ import type {
 } from "@reearth/components/molecules/Visualizer";
 import { LayerStore } from "@reearth/components/molecules/Visualizer";
 
-import { PublishedData, WidgetZone, WidgetSection, WidgetArea } from "./types";
+import { PublishedData, WidgetZone, WidgetSection, WidgetArea, Layer as RawLayer } from "./types";
 
 export default (alias?: string) => {
   const [data, setData] = useState<PublishedData>();
@@ -32,30 +32,14 @@ export default (alias?: string) => {
     () =>
       new LayerStore({
         id: "",
-        children: data?.layers?.map<Layer>(l => ({
-          id: l.id,
-          title: l.name || "",
-          pluginId: l.pluginId,
-          extensionId: l.extensionId,
-          isVisible: true,
-          property: processProperty(l.property),
-          infobox: l.infobox
-            ? {
-                property: processProperty(l.infobox.property),
-                blocks: l.infobox.fields.map<Block>(f => ({
-                  id: f.id,
-                  pluginId: f.pluginId,
-                  extensionId: f.extensionId,
-                  property: processProperty(f.property),
-                })),
-              }
-            : undefined,
-        })),
+        children: data?.layers?.map(processLayer),
       }),
     [data],
   );
 
-  const widgetSystem = useMemo<
+  const tags = data?.tags; // Currently no need to convert tags
+
+  const widgets = useMemo<
     { floatingWidgets: Widget[]; alignSystem: WidgetAlignSystem | undefined } | undefined
   >(() => {
     if (!data || !data.widgets) return undefined;
@@ -190,13 +174,39 @@ export default (alias?: string) => {
     sceneProperty,
     pluginProperty,
     layers,
+    tags,
     clusterProperty,
-    widgets: widgetSystem,
+    widgets,
     ready,
     error,
   };
 };
 
+function processLayer(l: RawLayer): Layer {
+  return {
+    id: l.id,
+    title: l.name || "",
+    pluginId: l.pluginId,
+    extensionId: l.extensionId,
+    isVisible: l.isVisible ?? true,
+    propertyId: l.propertyId,
+    property: processProperty(l.property),
+    infobox: l.infobox
+      ? {
+          property: processProperty(l.infobox.property),
+          blocks: l.infobox.fields.map<Block>(f => ({
+            id: f.id,
+            pluginId: f.pluginId,
+            extensionId: f.extensionId,
+            property: processProperty(f.property),
+          })),
+        }
+      : undefined,
+    tags: l.tags, // Currently no need to convert tags
+    children: l.children?.map(processLayer),
+  };
+}
+
 function processProperty(p: any): any {
   if (typeof p !== "object") return p;
   return mapValues(p, g =>

src/components/organisms/Published/index.tsx

@@ -11,7 +11,7 @@ export type Props = {
 };
 
 export default function Published({ className, alias }: Props) {
-  const { sceneProperty, pluginProperty, layers, widgets, ready, error, clusterProperty } =
+  const { sceneProperty, pluginProperty, layers, widgets, tags, ready, error, clusterProperty } =
     useHooks(alias);
 
   return error ? (
@@ -22,6 +22,7 @@ export default function Published({ className, alias }: Props) {
       engine="cesium"
       layers={layers}
       widgets={widgets}
+      tags={tags}
       sceneProperty={sceneProperty}
       pluginProperty={pluginProperty}
       clusterProperty={clusterProperty}

src/components/organisms/Published/types.ts

@@ -10,6 +10,7 @@ export type PublishedData = {
   widgets?: Widget[];
   widgetAlignSystem?: WidgetAlignSystem;
   clusters: Cluster[];
+  tags?: Tag[];
 };
 
 export type Plugin = {
@@ -22,11 +23,22 @@ export type Layer = {
   name?: string;
   pluginId: string;
   extensionId: string;
+  propertyId?: string;
+  /** If undefined, it should be treated as true. */
+  isVisible?: boolean;
   property: any;
   infobox?: {
     fields: Block[];
     property: any;
   } | null;
+  tags?: Tag[];
+  children?: Layer[];
+};
+
+export type Tag = {
+  id: string;
+  label: string;
+  tags?: Tag[];
 };
 
 export type Block = {