Merge pull request #1 from reearth-plugins/feat/try-3d-layout

feat: add-separated-widgets

Author: airslice

README.md

@@ -1,165 +1,25 @@
-# Re:Earth Visualizer Plugin ShadCN Template
+# 30Day Map Challenge 2024 - Data: HDX
 
-This template provides a minimal setup to develop a Re:Earth Visualizer Plugin with Vite, React, ShadCN, and Tailwind CSS.
+This is a project to create a map for the [30Day Map Challenge 2024](https://30daymapchallenge.com/), topic Data: HDX.
 
-## Re:Earth Visualizer Plugin Structure
+## What's this code do?
 
-The structure of a Re:Earth Visualizer Plugin aligns with the definitions in `reearth.yml`. Specifically:
+This is a Re:Earth Visualizer Plugin. Provide several extensions that you can use in Re:Earth Visualizer.
 
-- A plugin can contain zero to multiple extensions.
-- Extensions come in three types: `widget` `storyBlock` and `infoboxBlock`. However, in terms of structure, these three types are essentially the same when developing extensions.
-- Each extension must correspond to a unique JavaScript script.
-- An extension can render its UI in three different locations: `main`, `modal`, and `popup`.
-  - `main` refers to the primary view of the extension, typically a widget panel or block panel.
-  - You can prepare multiple UIs for `main`, `modal`, and `popup`. Each UI will be rendered in a sandboxed iframe, effectively acting as an independent Single Page Application (SPA).
+## How to use?
 
-## Demo
+1. Install plugin to Re:Earth Visualizer. You can find latest package in Release.
+2. Add widgets. There're two options each provide a different layout:
 
-This template includes a simple demo of a plugin with a widget extension. The demo helps illustrate the file structure.
+   - Use one single widget `Global Pandemic and Epidemic-Prone Disease Outbreaks`
+   - Use separated widgets:
+     - Intro Panel - Global Pandemic and Epidemic-Prone Disease Outbreaks
+     - Credits Panel - Global Pandemic and Epidemic-Prone Disease Outbreaks
+     - Year Selector Panel - Global Pandemic and Epidemic-Prone Disease Outbreaks
 
-First, define the plugin YAML file `public/reearth.yml`:
+## Data Source
 
-```yaml
-id: reearth-visualizer-plugin-shadcn-template
-name: Visualizer plugin shadcn template
-version: 1.0.0
-extensions:
-  - id: demo
-    type: widget
-    name: Demo
-    schema:
-      groups:
-        - id: appearance
-          title: Appearance
-          fields:
-            - id: primary_color
-              title: Primary color
-              type: string
-              ui: color
-```
-
-As shown, it contains a single extension `demo` of type `widget`.
-
-Then, review the structure of the project:
-
-```planttext
-my-project/
-├── node_modules/
-├── public/
-│   └── reearth.yml             // Plugin definition
-├── src/
-│   ├── extensions/
-│   │   └── demo/               // Extension folder, naming by extension ID
-│   │       ├── main/           // UI project for the main view
-│   │       └── demo.ts         // Extension script
-│   └── shared/
-│       ├── components/         // Shared components of ShadCN
-│       ├── lib/                // Shared lib of ShanCN
-│       ├── reearthTypes/       // Shared Re:Earth Visualizer Plugin API types
-│       ├── global.css          // Shared Global CSS of tailwind
-│       └── utils.ts
-├── dist/                       // Output directory of the plugin build
-├── dist-ui/                    // Output directory for the UI build
-├── package/                    // Directory for packaging the plugin into a zip file
-├── configs/                    // Vite configuration files for both extensions and UI
-├── scripts/
-├── package.json
-└── README.md
-```
-
-## How to add a new extension
-
-1. Update the `reearth.yml` file in the `public` folder.
-2. Create a new folder in `src/extensions` with the extension ID as the folder name.
-3. Create a new extension script file in the new folder with the extension ID as the file name.
-4. (Optional) Create a new UI project in the new extension folder if needed. You can refer to the `demo/main` for the structure.
-5. Update the scripts in `package.json` to build the new extension.
-
-## Scripts
-
-Refer to the scripts in `package.json`. Here are explanations for some of them:
-
-```zsh
-yarn dev:demo:main
-```
-
-Starts the development server for the `main` UI project of the `demo` extension.
-Ensure you check the environment variables being passed in so you can add your own scripts for different UI projects of different extensions.
-
-```zsh
-yarn build:demo:main
-```
-
-Builds the `main` UI project of the `demo` extension to `dist-ui/demo/main`.
-
-```zsh
-yarn build:demo
-```
-
-Builds the `demo` extension to `dist`. The `reearth.yml` file will also be copied to `dist`.
-
-```zsh
-yarn build
-```
-
-Builds the entire plugin (all extensions to `dist`), generating a zip file in the `package` folder.
-Note that `README.md` and `LICENSE` will be included in the zip. Update this script to include build commands for additional extensions as needed.
-
-```zsh
-yarn preview
-```
-
-Starts the preview server on port `5005`.
-
-## Development Workflow with Re:Earth Visualizer
-
-### Traditional Way
-
-- Start a dev server for the UI project of the extension you are developing.
-- Develop the UI, checking it with the dev server.
-- Develop the extension script, with no immediate way to check the result.
-- Build the plugin and generate the plugin zip file.
-- Go to Re:Earth Visualizer, install the plugin via the zip file, and add the widget or block.
-- Check the result.
-
-This process is lengthy and results in low development efficiency.
-
-### Improved Way
-
-We are working on adding a new feature to Re:Earth Visualizer to improve the development experience (DX) for plugins. Follow these steps:
-
-0. Preparation:
-   - Run Re:Earth Visualizer locally. Only the front-end is required; you can use any backend, such as the OSS backend.
-   - Update the plugin code. You can test with the demo.
-
-1. Run script:
-
-```zsh
-yarn dev-build
-```
-   it will:
-   - Start a dev server for the UI project as usual (usually you don't need to use this).
-   - Automatically build the UI upon edits.
-   - Automatically build the extension.
-   - Start a preview server at `http://localhost:5005`.
-
-2. Set environment variables in the Re:Earth Visualizer front-end project: `REEARTH_WEB_DEV_PLUGIN_URLS='["http://localhost:5005"]'`. The server will automatically restart after .env changes.
-
-Done. Now Re:Earth Visualizer will offer two icon buttons in the editor header:
-   - `Install Dev Plugins` ![image](https://github.com/user-attachments/assets/aa5cf46c-019e-4df6-82f7-c18aa18fe108)
-
-     - This fetches plugin files from the plugin preview, automatically zips, and installs them.
-     - Click this only when initially setting up and after modifying `reearth.yml`.
-   - `Reload Dev Plugin Extensions` ![image](https://github.com/user-attachments/assets/493b1bf2-0ffa-43d7-9166-849b1e7a5e30)
-
-     - This reloads all extensions from the plugin preview.
-     - Only the plugin reloads, which is much faster than reloading the entire page.
-
-### Summary
-
-Once everything is set up, the improved DX workflow will be:
-
-- Make any changes to the plugin code.
-- Click `Reload Dev Plugin Extensions` on the local Re:Earth Visualizer webpage.
-
-This workflow significantly improves development efficiency compared to the traditional method.
+- [Humanitarian Data Exchange](https://data.humdata.org/)
+- [Global Pandemic and Epidemic-Prone Disease Outbreaks](https://data.humdata.org/dataset/a-global-dataset-of-pandemic-and-epidemic-prone-disease-outbreaks)
+- Map tiles by Carto, under CC BY 3.0.
+- Admin 0 countries: [geojson.xyz](https://geojson.xyz/)

package.json

@@ -10,13 +10,25 @@
     "build:diseaseoutbreaks:main": "cross-env EXTENSION_NAME=diseaseoutbreaks UI_NAME=main vite build -c configs/ui.ts",
     "build:diseaseoutbreaks:extension": "cross-env EXTENSION_NAME=diseaseoutbreaks vite build -c configs/extension.ts",
     "build:diseaseoutbreaks": "run-s build:diseaseoutbreaks:main build:diseaseoutbreaks:extension",
-    "build": "run-s build:diseaseoutbreaks zip",
+    "dev:intro:main": "cross-env EXTENSION_NAME=intro UI_NAME=main vite -c configs/ui.ts",
+    "build:intro:main": "cross-env EXTENSION_NAME=intro UI_NAME=main vite build -c configs/ui.ts",
+    "build:intro:extension": "cross-env EXTENSION_NAME=intro vite build -c configs/extension.ts",
+    "build:intro": "run-s build:intro:main build:intro:extension",
+    "dev:credits:main": "cross-env EXTENSION_NAME=credits UI_NAME=main vite -c configs/ui.ts",
+    "build:credits:main": "cross-env EXTENSION_NAME=credits UI_NAME=main vite build -c configs/ui.ts",
+    "build:credits:extension": "cross-env EXTENSION_NAME=credits vite build -c configs/extension.ts",
+    "build:credits": "run-s build:credits:main build:credits:extension",
+    "dev:year:main": "cross-env EXTENSION_NAME=year UI_NAME=main vite -c configs/ui.ts",
+    "build:year:main": "cross-env EXTENSION_NAME=year UI_NAME=main vite build -c configs/ui.ts",
+    "build:year:extension": "cross-env EXTENSION_NAME=year vite build -c configs/extension.ts",
+    "build:year": "run-s build:year:main build:year:extension",
+    "build": "run-s build:diseaseoutbreaks build:intro build:credits build:year zip",
     "preview": "vite preview --port 5005 --strict-port",
     "zip": "node ./scripts/zip.mjs",
     "lint": "eslint .",
     "fix": "eslint --fix .",
     "format": "prettier --write .",
-    "dev-build": "concurrently 'yarn dev:diseaseoutbreaks:main' 'yarn build:diseaseoutbreaks:main --watch' 'yarn build:diseaseoutbreaks:extension --watch' 'vite preview --port 5005 --strict-port'",
+    "dev-build": "concurrently 'yarn build:diseaseoutbreaks:main --watch' 'yarn build:diseaseoutbreaks:extension --watch' 'yarn build:intro:main --watch' 'yarn build:intro:extension --watch' 'yarn build:credits:main --watch' 'yarn build:credits:extension --watch' 'yarn build:year:main --watch' 'yarn build:year:extension --watch' 'vite preview --port 5005 --strict-port'",
     "data": "node ./scripts/data.mjs"
   },
   "dependencies": {

public/reearth.yml

@@ -1,23 +1,38 @@
 id: global-pandemic-and-epidemic-prone-diseaseoutbreaks
-name: Global Pandemic- and Epidemic-Prone Disease Outbreaks
+name: Global Pandemic and Epidemic-Prone Disease Outbreaks
 version: 1.0.0
 extensions:
   - id: diseaseoutbreaks
     type: widget
-    name: Global Pandemic- and Epidemic-Prone Disease Outbreaks
+    name: Global Pandemic and Epidemic-Prone Disease Outbreaks
     widgetLayout:
       extendable:
         horizontally: true
       defaultLocation:
         zone: outer
         section: center
         area: bottom
-    schema:
-      groups:
-        - id: appearance
-          title: Appearance
-          fields:
-            - id: primary_color
-              title: Primary color
-              type: string
-              ui: color
+  - id: intro
+    type: widget
+    name: Intro Panel - Global Pandemic and Epidemic-Prone Disease Outbreaks
+    widgetLayout:
+      defaultLocation:
+        zone: inner
+        section: left
+        area: top
+  - id: credits
+    type: widget
+    name: Credits Panel - Global Pandemic and Epidemic-Prone Disease Outbreaks
+    widgetLayout:
+      defaultLocation:
+        zone: inner
+        section: right
+        area: bottom
+  - id: year
+    type: widget
+    name: Year Selector Panel - Global Pandemic and Epidemic-Prone Disease Outbreaks
+    widgetLayout:
+      defaultLocation:
+        zone: inner
+        section: left
+        area: bottom

src/extensions/credits/credits.ts

@@ -0,0 +1,6 @@
+import html from "@distui/credits/main/index.html?raw";
+
+import { GlobalThis } from "@/shared/reearthTypes";
+
+const reearth = (globalThis as unknown as GlobalThis).reearth;
+reearth.ui.show(html, { extended: true });

src/extensions/credits/main/App.tsx

@@ -0,0 +1,11 @@
+import Source from "./components/Source";
+
+function App() {
+  return (
+    <div className="flex gap-2 p-4 text-slate-700">
+      <Source />
+    </div>
+  );
+}
+
+export default App;

src/extensions/credits/main/app.css

@@ -0,0 +1,72 @@
+html,
+body {
+  width: 380px;
+}
+
+:root {
+  --background: "transparent"; /* Define the initial value of your CSS variable */
+}
+
+.lato-thin {
+  font-family: "Lato", sans-serif;
+  font-weight: 100;
+  font-style: normal;
+}
+
+.lato-light {
+  font-family: "Lato", sans-serif;
+  font-weight: 300;
+  font-style: normal;
+}
+
+.lato-regular {
+  font-family: "Lato", sans-serif;
+  font-weight: 400;
+  font-style: normal;
+}
+
+.lato-bold {
+  font-family: "Lato", sans-serif;
+  font-weight: 700;
+  font-style: normal;
+}
+
+.lato-black {
+  font-family: "Lato", sans-serif;
+  font-weight: 900;
+  font-style: normal;
+}
+
+.lato-thin-italic {
+  font-family: "Lato", sans-serif;
+  font-weight: 100;
+  font-style: italic;
+}
+
+.lato-light-italic {
+  font-family: "Lato", sans-serif;
+  font-weight: 300;
+  font-style: italic;
+}
+
+.lato-regular-italic {
+  font-family: "Lato", sans-serif;
+  font-weight: 400;
+  font-style: italic;
+}
+
+.lato-bold-italic {
+  font-family: "Lato", sans-serif;
+  font-weight: 700;
+  font-style: italic;
+}
+
+.lato-black-italic {
+  font-family: "Lato", sans-serif;
+  font-weight: 900;
+  font-style: italic;
+}
+
+.color-picker {
+  color: #ff0022;
+}

src/extensions/credits/main/components/Source.tsx

@@ -0,0 +1,46 @@
+import { FC } from "react";
+
+const Source: FC = () => {
+  return (
+    <div className="flex flex-col items-end justify-end flex-1 gap-1 text-right text-slate-600">
+      <p className="text-xs">
+        <strong>Data source:</strong>{" "}
+        <a
+          className="underline"
+          href="https://data.humdata.org/"
+          target="_black"
+        >
+          Humanitarian Data Exchange
+        </a>
+        <br />
+        <a
+          className="underline"
+          href="https://data.humdata.org/dataset/a-global-dataset-of-pandemic-and-epidemic-prone-disease-outbreaks"
+          target="_black"
+        >
+          Global Pandemic- and Epidemic-Prone Disease Outbreaks
+        </a>
+      </p>
+      <p className="text-xs">
+        <strong>Map Tile:</strong> Map tiles by Carto, under CC BY 3.0.
+      </p>
+      <p className="text-xs">
+        <strong>Admin 0 countries:</strong>{" "}
+        <a className="underline" href="https://geojson.xyz/" target="_black">
+          https://geojson.xyz/
+        </a>
+      </p>
+      <p className="text-xs">
+        <strong>App:</strong>{" "}
+        <a className="underline" href="https://reearth.io/" target="_black">
+          Re:Earth Visualizer
+        </a>{" "}
+        <a className="underline" href="https://cesium.com/" target="_black">
+          Cesium
+        </a>
+      </p>
+    </div>
+  );
+};
+
+export default Source;