Fix for updating datasets from Datasetbuilder

blocks/bar-graph/build/block.json

@@ -114,22 +114,22 @@
           "name": "Main",
           "data": [
             {
-              "Department": "Sheriffs Office",
+              "Department": "Sheriff",
-              "Budget": 1,
+              "Budget": 100000,
               "MeetAt": "2025-01-26T14:30:00Z",
               "preferredColor": "red",
               "PostContent": "<div> </div>"
             },
             {
               "Department": "Assessor",
-              "Budget": 2,
+              "Budget": 20000,
               "MeetAt": "2025-01-26T14:30:00Z",
               "preferredColor": "#232323",
               "PostContent": "<div> </div>"
             },
             {
               "Department": "Treasurer",
-              "Budget": 3,
+              "Budget": 30000,
               "MeetAt": "2025-01-26T14:30:00Z",
               "preferredColor": "#E72323",
               "PostContent": "<div> </div>"
@@ -141,47 +141,26 @@
           "data": [
             {
               "State": "California",
-              "Coordinates": "150,000",
+              "Coordinates": "",
               "MeetAt": "2025-01-26T14:30:00Z",
               "PreferredColor": "#e0e0e0",
               "PostContent": "<div> </div>"
             },
             {
               "State": "Texas",
-              "Coordinates": "100,000",
+              "Coordinates": "",
               "MeetAt": "2025-01-26T14:30:00Z",
               "PreferredColor": "#e0e0e0",
               "PostContent": "<div> </div>"
             },
             {
               "State": "Florida",
-              "Coordinates": "50,000",
+              "Coordinates": "",
               "MeetAt": "2025-01-26T14:30:00Z",
               "PreferredColor": "#e0e0e0",
               "PostContent": "<div> </div>"
             }
           ]
-        },
-        {
-          "name": "Dataset 3",
-          "data": [
-            {
-              "ID": "lcpDatapoint-1",
-              "Label": "Sample 1",
-              "Value": 100,
-              "Color": "#007cba",
-              "Content": "<p>First item</p>",
-              "Parent": ""
-            },
-            {
-              "ID": "lcpDatapoint-2",
-              "Label": "Sample 2",
-              "Value": 50,
-              "Color": "#ff0000",
-              "Content": "<p>Second item</p>",
-              "Parent": "lcpDatapoint-1"
-            }
-          ]
         }
       ]
     },

blocks/bar-graph/build/index.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('react', 'react-dom', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-element', 'wp-i18n', 'wp-primitives'), 'version' => '7a75b5732cbc1928c7a2');
+<?php return array('dependencies' => array('react', 'react-dom', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-element', 'wp-i18n', 'wp-primitives'), 'version' => '81e2f5a896da526cb195');

blocks/bar-graph/src/block.json

@@ -115,24 +115,17 @@
             "default": [{
                     "name": "Main",
                     "data": [
-                        { "Department": "Sheriffs Office", "Budget": 1, "MeetAt": "2025-01-26T14:30:00Z", "preferredColor": "red", "PostContent": "<div> </div>" },
+                        { "Department": "Sheriff", "Budget": 100000, "MeetAt": "2025-01-26T14:30:00Z", "preferredColor": "red", "PostContent": "<div> </div>" },
-                        { "Department": "Assessor", "Budget": 2, "MeetAt": "2025-01-26T14:30:00Z", "preferredColor": "#232323", "PostContent": "<div> </div>" },
+                        { "Department": "Assessor", "Budget": 20000, "MeetAt": "2025-01-26T14:30:00Z", "preferredColor": "#232323", "PostContent": "<div> </div>" },
-                        { "Department": "Treasurer", "Budget": 3, "MeetAt": "2025-01-26T14:30:00Z", "preferredColor": "#E72323", "PostContent": "<div> </div>" }
+                        { "Department": "Treasurer", "Budget": 30000, "MeetAt": "2025-01-26T14:30:00Z", "preferredColor": "#E72323", "PostContent": "<div> </div>" }
                     ]
                 },
                 {
                     "name": "Locations",
                     "data": [
-                        { "State": "California", "Coordinates": "150,000", "MeetAt": "2025-01-26T14:30:00Z", "PreferredColor": "#e0e0e0", "PostContent": "<div> </div>" },
+                        { "State": "California", "Coordinates": "", "MeetAt": "2025-01-26T14:30:00Z", "PreferredColor": "#e0e0e0", "PostContent": "<div> </div>" },
-                        { "State": "Texas", "Coordinates": "100,000", "MeetAt": "2025-01-26T14:30:00Z", "PreferredColor": "#e0e0e0", "PostContent": "<div> </div>" },
+                        { "State": "Texas", "Coordinates": "", "MeetAt": "2025-01-26T14:30:00Z", "PreferredColor": "#e0e0e0", "PostContent": "<div> </div>" },
-                        { "State": "Florida", "Coordinates": "50,000", "MeetAt": "2025-01-26T14:30:00Z", "PreferredColor": "#e0e0e0", "PostContent": "<div> </div>" }
+                        { "State": "Florida", "Coordinates": "", "MeetAt": "2025-01-26T14:30:00Z", "PreferredColor": "#e0e0e0", "PostContent": "<div> </div>" }
-                    ]
-                },
-                {
-                    "name": "Dataset 3",
-                    "data": [
-                        { "ID": "lcpDatapoint-1", "Label": "Sample 1", "Value": 100, "Color": "#007cba", "Content": "<p>First item</p>", "Parent": "" },
-                        { "ID": "lcpDatapoint-2", "Label": "Sample 2", "Value": 50, "Color": "#ff0000", "Content": "<p>Second item</p>", "Parent": "lcpDatapoint-1" }
                     ]
                 }
             ]

blocks/components/LCPDatasetBuilder.js

@@ -1,4 +1,4 @@
-import { useState } from '@wordpress/element';
+import { useState, useEffect } from '@wordpress/element';
 import { Button, Modal } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import LCPDataGrid from './LCPDataGrid';
@@ -6,34 +6,44 @@ import LCPDataGrid from './LCPDataGrid';
 const LCPDatasetBuilder = ({ attributes, setAttributes }) => {
     const [isOpen, setIsOpen] = useState(false);
     const [activeTab, setActiveTab] = useState(0); // Track the active tab
+    const [datasets, setDatasets] = useState(attributes.datasets); // Use useState for datasets
+
+    // Sync state with attributes if they change outside the component
+    useEffect(() => {
+        setDatasets(attributes.datasets);
+    }, [attributes.datasets]);
+
     const handleUpdateDataset = (index, newData) => {
-        // Log the newData in a readable format
+       // console.log("newData (formatted for copy-pasting):", JSON.stringify(newData, null, 2));
-        console.log("newData (formatted for copy-pasting):", JSON.stringify(newData, null, 2));
 
-        // Make a shallow copy of the datasets to avoid mutation
+        // Check if newData.data is an array
-        const datasets = [...attributes.datasets];
+        if (Array.isArray(newData.data)) {
-    
+            // Create a new reference for the datasets array
-        // Ensure the data structure is correct before replacing
+            const updatedDatasets = datasets.map((dataset, i) => {
-        if (newData && newData.data) {
+                if (i === index) {
-            // Replace the data array at the specified index with the new data
+                    // If this is the dataset we're updating, replace it with a new object
-            datasets[0].data = newData.data;
+                    return {
-    
+                        ...dataset,  // Copy the existing dataset
-            // Log the datasets before the update
+                        data: [...newData.data],  // Deep copy the data array
-            console.log("Before Update:", JSON.stringify(datasets, null, 2));
+                    };
-    
+                }
-            // Update the attributes with the modified datasets
+                return dataset; // Leave other datasets unchanged
-            setAttributes({
-                datasets: datasets
             });
 
-            // Log the updated attributes (you can check this after re-rendering)
+         //   console.log("Updated Datasets:", JSON.stringify(updatedDatasets, null, 2));
-            console.log("After Update:", JSON.stringify(datasets, null, 2));
+
+            // Call setAttributes with the updated datasets
+            setAttributes({
+                ...attributes,  // Ensure we're not overriding other attributes accidentally
+                datasets: updatedDatasets, // Set the new datasets array
+            });
+
+         //   console.log("Attributes after setAttributes:", JSON.stringify({ ...attributes, datasets: updatedDatasets }, null, 2));
         } else {
-            console.error("Invalid data format:", newData);
+          //  console.error("Invalid data format in newData:", newData);
         }
     };
 
-
     return (
         <>
             <Button
@@ -53,7 +63,7 @@ const LCPDatasetBuilder = ({ attributes, setAttributes }) => {
                     <div style={{ height: 'calc(90vh - 40px)', padding: '20px' }}>
                         {/* Tabs */}
                         <div style={{ display: 'flex', marginBottom: '20px' }}>
-                            {attributes.datasets.map((dataset, index) => (
+                            {datasets.map((dataset, index) => (
                                 <button
                                     key={index}
                                     onClick={() => setActiveTab(index)} // Set the active tab
@@ -75,7 +85,7 @@ const LCPDatasetBuilder = ({ attributes, setAttributes }) => {
 
                         {/* Render all the LCPDataGrid components */}
                         <div style={{ display: 'flex', flexDirection: 'column' }}>
-                            {attributes.datasets.map((dataset, index) => (
+                            {datasets.map((dataset, index) => (
                                 <div
                                     key={index}
                                     style={{