Array Property Reverts to Default Value in Designer - Custom Perspective Component

Hi everyone,

I'm developing a custom Perspective component that includes a data property of type array, similar to the standard Table component. I'm running into an issue regarding property persistence and am hoping someone can point me in the right direction.

The Issue:

My component's data property is configured with a default array of 3 exemplary items. When I drag the component into a View in the Designer, it populates the 3 default items perfectly. However, if I delete one of the items, save the project, close the View, and reopen it—the data property reverts to the default 3 items, acting as if the deletion never happened.

Steps to Reproduce:

  1. Drag the custom component into a View.

  2. Delete one of the items from the data array in the Property Editor.

  3. Save the project.

  4. Close and reopen the View.

  5. The data property reverts to the original default state (the deleted item returns).

Component Schema:

Here is the JSON schema I am currently using:

JSON

{
    "type": "object",
    "properties": {
        "headerColor": {
            "type": "string",
            "description": "",
            "default": "#C0C0C0"
        },
        "data": {
            "type": "array",
            "description": "",
            "default": [
                {
                    "Item": "Laptop",
                    "Description": "A portable personal computer with a clamshell form factor, suitable for mobile use."
                },
                {
                    "Item": "Coffee Mug",
                    "Description": "A type of cup typically used for drinking hot beverages, such as coffee, hot chocolate, or tea."
                },
                {
                    "Item": "Mechanical Keyboard",
                    "Description": "A computer keyboard that uses individual mechanical switches for each key, known for tactile feedback."
                }
            ]
        },
        "visible": {
            "type": "boolean",
            "default": true,
            "description": ""
        }
    }
}

Has anyone run into this before, or is there something missing in my schema definition? I'm happy to share more details or the project source if needed.

Thanks in advance for any insights!

Best,

Muti

The schema is only used the very first time the component is instantiated, to my knowledge.
What is going on in your component's logic? Are you sure something there isn't automatically filling in these props?

I am sure. I have a dummy perspective-component project for this. May I send it for review?

Try using example instead of default in your schema. That's what we're using on the table component internally (to my surprise):

  "defaultMetaName": "Table",
  "schema": {
    "type": "object",
    "properties": {
      "data": {
        "type": ["array", "dataset"],
        "description": "Can be a dataset, an array of arrays, or an array of objects.",
        "items": {
          "type": ["object", "array"]
        },
        "example": [
          {
            "city": {
              "value": "Folsom",
              "editable": true,
              "style": {
                "backgroundColor": "#F7901D",
                "classes": "some-class"
              },
              "align": "center",
              "justify": "left"
            },
            "country": "United States",
            "population": 77271
          },
          {
            "city": "Helsinki",
            "country": "Finland",
            "population": 635591
          },
          {
            "city": "Jakarta",
            "country": "Indonesia",
            "population": 10187595
          },
          {
            "city": "Madrid",
            "country": "Spain",
            "population": 3233527
          },
          {
            "city": "Prague",
            "country": "Czech Republic",
            "population": 1241664
          },
          {
            "city": "San Diego",
            "country": "United States",
            "population": 1406630
          },
          {
            "city": "San Francisco",
            "country": "United States",
            "population": 884363
          },
          {
            "city": "Shanghai",
            "country": "China",
            "population": 24153000
          },
          {
            "city": "Tokyo",
            "country": "Japan",
            "population": 13617000
          },
          {
            "city": "Washington, DC",
            "country": "United States",
            "population": 658893
          },
          {
            "city": "Wellington",
            "country": "New Zealand",
            "population": 405000
          },
          {
            "city": "Delhi",
            "country": "India",
            "population": 11034555
          },
          {
            "city": "Dhaka",
            "country": "Bangladesh",
            "population": 14399000
          },
          {
            "city": "Lagos",
            "country": "Nigeria",
            "population": 16060303
          },
          {
            "city": "Karachi",
            "country": "Pakistan",
            "population": 14910352
          },
          {
            "city": "Istanbul",
            "country": "Turkey",
            "population": 14025000
          },
          {
            "city": "Cairo",
            "country": "Egypt",
            "population": 10230350
          },
          {
            "city": "Mexico City",
            "country": "Mexico",
            "population": 8974724
          },
          {
            "city": "London",
            "country": "United Kingdom",
            "population": 8825001
          },
          {
            "city": "New York City",
            "country": "United States",
            "population": 8622698
          },
          {
            "city": "Tehran",
            "country": "Iran",
            "population": 8154051
          },
          {
            "city": "Bogota",
            "country": "Colombia",
            "population": 7878783
          },
          {
            "city": "Rio de Janeiro",
            "country": "Brazil",
            "population": 6429923
          },
          {
            "city": "Riyadh",
            "country": "Saudi Arabia",
            "population": 5676621
          },
          {
            "city": "Singapore",
            "country": "Singapore",
            "population": 5535000
          },
          {
            "city": "Saint Petersburg",
            "country": "Russia",
            "population": 5191690
          },
          {
            "city": "Sydney",
            "country": "Australia",
            "population": 5248790
          },
          {
            "city": "Abidjan",
            "country": "Ivory Coast",
            "population": 4765000
          },
          {
            "city": "Dar es Salaam",
            "country": "Tanzania",
            "population": 4364541
          },
          {
            "city": "Wellington",
            "country": "New Zealand",
            "population": 405000
          },
          {
            "city": "Los Angeles",
            "country": "United States",
            "population": 3884307
          },
          {
            "city": "Berlin",
            "country": "Germany",
            "population": 3517424
          },
          {
            "city": "Jeddah",
            "country": "Saudi Arabia",
            "population": 3456259
          },
          {
            "city": "Kabul",
            "country": "Afghanistan",
            "population": 3414100
          },
          {
            "city": "Mashhad",
            "country": "Iran",
            "population": 3001184
          },
          {
            "city": "Milan",
            "country": "Italy",
            "population": 1359905
          },
          {
            "city": "Kiev",
            "country": "Ukraine",
            "population": 2908703
          },
          {
            "city": "Rome",
            "country": "Italy",
            "population": 2877215
          },
          {
            "city": "Chicago",
            "country": "United States",
            "population": 2695598
          },
          {
            "city": "Osaka",
            "country": "Japan",
            "population": 2691742
          },
          {
            "city": "Bandung",
            "country": "Indonesia",
            "population": 2575478
          },
          {
            "city": "Managua",
            "country": "Nicaragua",
            "population": 2560789
          },
          {
            "city": "Paris",
            "country": "France",
            "population": 2229621
          },
          {
            "city": "Shiraz",
            "country": "Iran",
            "population": 1869001
          },
          {
            "city": "Manila",
            "country": "Philippines",
            "population": 1780148
          },
          {
            "city": "Montreal",
            "country": "Canada",
            "population": 1649519
          },
          {
            "city": "Guadalajara",
            "country": "Mexico",
            "population": 1495189
          },
          {
            "city": "Dallas",
            "country": "United States",
            "population": 1317929
          },
          {
            "city": "Yerevan",
            "country": "Armenia",
            "population": 1060138
          },
          {
            "city": "Tunis",
            "country": "Tunisia",
            "population": 1056247
          }
        ]
      },

I tried example. It doesn't event load the items.

{
	"type": "object",
	"properties": {
		"headerColor": {
			"type": "string",
			"description": "",
			"default": "#C0C0C0"
		},
		"data": {
			"type": [
				"array",
				"dataset"
			],
			"description": "",
			"items": {
				"type": [
					"object",
					"array"
				]
			},
			"example": [
				{
					"Item": "Laptop",
					"Description": "A portable personal computer with a clamshell form factor, suitable for mobile use."
				},
				{
					"Item": "Coffee Mug",
					"Description": "A type of cup typically used for drinking hot beverages, such as coffee, hot chocolate, or tea."
				},
				{
					"Item": "Mechanical Keyboard",
					"Description": "A computer keyboard that uses individual mechanical switches for each key, known for tactile feedback."
				}
			]
		},
		"visible": {
			"type": "boolean",
			"default": true,
			"description": ""
		}
	}
}

Here's an example from my Chart.js component:

I tested with events. The test was successful. I guess it is working for primitive type items, but not with complex type items.

I removed the click value on the third position. It didn't revert after view close and open.