[Compound] Colons with numeric labels in wrong order

[DrizzleatDusk]

Describe the bug

I find a disarrangement of the columns when I want to display a structured numpy array.

To Reproduce

The bug can be reproduced by the following python code.

# create a structured array.
dtype = np.dtype(
    {"names": ['1', '0', '2'], "formats": [np.float64, np.float64, np.float64]}
)
data = np.array([(1.0, 2.0, 3.0), (4.0, 5.0, 6.0)], dtype=dtype)

# save.
file = h5py.File("./test.h5", 'w')
file.create_dataset("a", data=data, dtype=dtype)
file.close()

Expected behaviour

We can read from the file as follows:

file = h5py.File("./test.h5", 'r')
print(file["a"]["0"])     #[2. 5.]
print(file["a"]["1"])     #[1. 4.]
print(file["a"]["2"])     #[3. 6.]
file.close()

Screenshots

There is no problem using non numeric string. But in the above example, it seems that the columns are rearranged according to the values of the array index, which I think is a confusing behavior.

Context

I run the above example in the vscode plugin. (h5web.vscode-h5web v0.1.7)

[loichuder]

Thanks for the report, there is indeed something fishy there.

I changed slightly the formats to have different dtypes for each field

dtype = np.dtype(
    {"names": ["1", "0", "2"], "formats": [np.float64, np.int32, np.uint8]}
)

and it seems that these are parsed properly by h5wasm but the order changed:

  "type": {
    "class": "Compound",
    "fields": {
      "0": {
        "class": "Integer",
        "endianness": "little-endian",
        "size": 32
      },
      "1": {
        "class": "Float",
        "endianness": "little-endian",
        "size": 64
      },
      "2": {
        "class": "Integer (unsigned)",
        "endianness": "little-endian",
        "size": 8
      }
    }
  },

I wonder if this is the cause of the incorrect display by H5Web.

Interestingly, using names that cannot be converted to numbers gives the expected result:

dtype = np.dtype(
    {"names": ["1ff", "0ff", "2ff"], "formats": [np.float64, np.int32, np.uint8]}
)

Fields were not reordered in this case which may be linked:

  "type": {
    "class": "Compound",
    "fields": {
      "1ff": {
        "class": "Float",
        "endianness": "little-endian",
        "size": 64
      },
      "0ff": {
        "class": "Integer",
        "endianness": "little-endian",
        "size": 32
      },
      "2ff": {
        "class": "Integer (unsigned)",
        "endianness": "little-endian",
        "size": 8
      }
    }
  },

[axelboc]

I've added a dataset called compound_num_keys_scalar to sample.h5 to demonstrate the issue (h5grove demo, h5wasm demo). Note that the Compound visualisation throws an error with mixed types since the types of the values don't match the types of the fields:

This issue is due to how object serialisation works in JavaScript (cf. Object.keys(), more specifically the example with an "array-like object"), and therefore JSON serialisation as well. We may have to change the fields object to an array in both h5grove and h5wasm (and in H5Web of course).