Implement differentiated geographic visualization with color-coding

MAJOR FEATURE: Geographic locations now color-coded by semantic role

Query Changes:
- Add CTE to classify GeospatialCoordLocations by usage type
- Join with edges to determine sample_location vs site_location usage
- Return location_type field: 'sample_location_only', 'site_location_only', 'both'

Visualization Changes:
- Blue (3px): sample_location_only - precise field collection points (Path 1)
- Purple (6px): site_location_only - administrative site markers (Path 2)
- Orange (5px): both - dual-purpose locations (~10k geos)

Implementation Details:
- Use Cesium.Color.fromCssColorString() for hex colors (#2E86AB, #A23B72, #F18F01)
- Conditional styling per point based on location_type
- Updated Data tab table header to show location_type column

Documentation Updates:
- Changed "Future Enhancement" to "✅ IMPLEMENTED"
- Added color legend with emoji indicators
- Updated SQL example to use 'nodes' table (not 'pqg')
- Documented performance impact (minimal)
- Listed future enhancements (UI filters, Site Explorer Mode)

Benefits:
- Makes Path 1 vs Path 2 distinction visually concrete
- Users can SEE semantic difference between precise and administrative locations
- Transforms visualization into pedagogical tool for understanding iSamples model

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

Author: rdhyee

tutorials/parquet_cesium.qmd

@@ -119,19 +119,56 @@ async function loadData(query, params = [], waiting_id = null, key = "default")
 }
 
 locations = {
-    // get the content form the parquet file
-    const query = `SELECT pid, latitude, longitude FROM nodes WHERE otype='GeospatialCoordLocation'`;
+    // Get geographic locations with classification by usage type
+    const query = `
+        WITH geo_classification AS (
+            SELECT
+                geo.pid,
+                geo.latitude,
+                geo.longitude,
+                MAX(CASE WHEN e.p = 'sample_location' THEN 1 ELSE 0 END) as is_sample_location,
+                MAX(CASE WHEN e.p = 'site_location' THEN 1 ELSE 0 END) as is_site_location
+            FROM nodes geo
+            JOIN nodes e ON (geo.row_id = e.o[1])
+            WHERE geo.otype = 'GeospatialCoordLocation'
+            GROUP BY geo.pid, geo.latitude, geo.longitude
+        )
+        SELECT
+            pid,
+            latitude,
+            longitude,
+            CASE
+                WHEN is_sample_location = 1 AND is_site_location = 1 THEN 'both'
+                WHEN is_sample_location = 1 THEN 'sample_location_only'
+                WHEN is_site_location = 1 THEN 'site_location_only'
+            END as location_type
+        FROM geo_classification
+    `;
     const data = await loadData(query, [], "loading_1", "locations");
 
     // Clear the existing PointPrimitiveCollection
     content.points.removeAll();
-    //content.points = new Cesium.PointPrimitiveCollection();
 
-    // create point primitives for cesium display
+    // Color and size styling by location type
+    const styles = {
+        sample_location_only: {
+            color: Cesium.Color.fromCssColorString('#2E86AB'),
+            size: 3
+        },  // Blue - field collection points
+        site_location_only: {
+            color: Cesium.Color.fromCssColorString('#A23B72'),
+            size: 6
+        },  // Purple - administrative markers
+        both: {
+            color: Cesium.Color.fromCssColorString('#F18F01'),
+            size: 5
+        }   // Orange - dual-purpose
+    };
+
+    // Create point primitives for cesium display
     const scalar = new Cesium.NearFarScalar(1.5e2, 2, 8.0e6, 0.2);
-    const color = Cesium.Color.PINK;
-    const point_size = 4;
     for (const row of data) {
+        const style = styles[row.location_type] || styles.both; // fallback to orange
         content.points.add({
             id: row.pid,
             // https://cesium.com/learn/cesiumjs/ref-doc/Cartesian3.html#.fromDegrees
@@ -140,8 +177,8 @@ locations = {
                 row.latitude,   //latitude
                 0,//randomCoordinateJitter(10.0, 10.0), //elevation, m
             ),
-            pixelSize: point_size,
-            color: color,
+            pixelSize: style.size,
+            color: style.color,
             scaleByDistance: scalar,
         });
     }
@@ -463,10 +500,10 @@ md`Retrieved ${pointdata.length} locations from ${parquet_path}.`;
 viewof pointdata = {
     const data_table = Inputs.table(locations, {
         header: {
-            row_id:"Row ID",
             pid: "PID",
             latitude: "Latitude",
-            longitude: "Longitude"
+            longitude: "Longitude",
+            location_type: "Location Type"
         },
     });
     return data_table;
@@ -679,12 +716,16 @@ ${JSON.stringify(samples_combined, null, 2)}
 `
 ```
 
-## Design Note: Differentiated Geographic Visualization
+## Geographic Location Classification
 
-::: {.callout-note icon=false}
-## Future Enhancement - Geographic Location Classification
+::: {.callout-tip icon=false}
+## ✅ IMPLEMENTED - Differentiated Geographic Visualization
 
-**Current implementation**: All 198,433 GeospatialCoordLocations are rendered identically (orange points), without differentiating their semantic roles in the graph.
+**Current implementation**: GeospatialCoordLocations are now color-coded by their semantic role in the property graph:
+
+- 🔵 **Blue (small)** - `sample_location_only`: Precise field collection points (Path 1)
+- 🟣 **Purple (large)** - `site_location_only`: Administrative site markers (Path 2)
+- 🟠 **Orange (medium)** - `both`: Dual-purpose locations (used for both Path 1 and Path 2)
 
 **Discovery**: Analysis of the OpenContext parquet data reveals that geos fall into three distinct categories based on their usage:
 
@@ -730,19 +771,19 @@ const styles = {
 ☐ Highlight overlap points only (10,346 dual-purpose geos)
 ```
 
-**Query modification needed**:
+**Implementation - Classification Query**:
 
 ```sql
--- Add classification to geo query
+-- Classify geos by usage type
 WITH geo_classification AS (
   SELECT
     geo.pid,
     geo.latitude,
     geo.longitude,
     MAX(CASE WHEN e.p = 'sample_location' THEN 1 ELSE 0 END) as is_sample_location,
     MAX(CASE WHEN e.p = 'site_location' THEN 1 ELSE 0 END) as is_site_location
-  FROM pqg geo
-  JOIN pqg e ON (geo.row_id = list_extract(e.o, 1))
+  FROM nodes geo
+  JOIN nodes e ON (geo.row_id = e.o[1])
   WHERE geo.otype = 'GeospatialCoordLocation'
   GROUP BY geo.pid, geo.latitude, geo.longitude
 )
@@ -791,20 +832,26 @@ User clicks PKAP Survey Area marker (purple)
 
 ### Implementation Status
 
-**Status**: Design note only - not yet implemented
+**Status**: ✅ **IMPLEMENTED** (Basic color-coding by location type)
+
+**What's implemented**:
+- ✅ Classification query with CTE (lines 123-146)
+- ✅ Conditional styling by location_type (lines 153-166)
+- ✅ Color-coded points: Blue (sample_location), Purple (site_location), Orange (both)
+- ✅ Size differentiation: 3px (field points), 6px (sites), 5px (dual-purpose)
 
-**Implementation complexity**: Moderate
-- Query modification: Simple (add classification CTE)
-- Client-side rendering: Medium (conditional styling in Cesium primitives)
-- UI controls: Medium (checkbox filters + event handlers)
-- Advanced features: High (site explorer mode with interactive highlighting)
+**Performance impact**:
+- Query execution time increased slightly due to JOIN and GROUP BY
+- Same 198k points rendered, now with semantic color coding
+- No noticeable performance degradation in browser rendering
 
-**Performance impact**: Minimal
-- Same 198k points, just enriched with `location_type` metadata
-- Filtering happens client-side (fast)
-- Could add server-side aggregation for zoom-based LOD
+**Future enhancements** (not yet implemented):
+- ⬜ UI filter controls (checkbox toggles for each location type)
+- ⬜ Site Explorer Mode (click site → highlight all sample_locations)
+- ⬜ Convex hull/region drawing for distributed sites
+- ⬜ Dynamic statistics display on site selection
 
-This enhancement would transform the visualization from "pretty dots on a map" into a pedagogical tool for understanding the iSamples metadata model architecture.
+This implementation transforms the visualization from uniform points into a pedagogical tool that visually demonstrates the Path 1 vs Path 2 distinction in the iSamples metadata model architecture.
 
 :::
 ```