ModelXmlSerializer#import removes leading zeroes from user object

[meshbrain]

Describe the bug

I am importing an XML string:

<GraphDataModel>
	<root>
		<Cell id="0">
			<Object as="style"/>
		</Cell>
		<Cell id="1" parent="0">
			<Object as="style"/>
		</Cell>
		<Cell id="12" parent="1" vertex="1">
			<Object label="SEL0013" name="SEL0013" description="" type="SELECT" from_selected="" to_selected="" list_select_key="" communication_type="" template="" split_type="count" tmp_table="_datalab_tmp_0006_s_012" node_query=" SELECT DISTINCT table0.indiv_id FROM test_dataset.mdm_mag_ord AS table0 WHERE ((table0.postal_cd like '090%'))" node_count_query=" SELECT COUNT(DISTINCT table0.indiv_id) FROM test_dataset.mdm_mag_ord AS table0 WHERE ((table0.postal_cd like '090%'))" count="0" as="value">
				<Array as="tables">
					<Object uuid="3e64438a-191a-4d4a-a599-8669a9bd6edc" tableName="mdm_mag_ord" removable="0" sql="(postal_cd like '090%')">
						<Object combinator="and" not="0" id="2e465275-f77f-4ee0-8088-c6b2fbd479cd" as="query">
							<Array as="rules">
								<Object field="postal_cd" operator="beginsWith" valueSource="value" value="090" id="afab26b6-44ae-41a1-94ef-60c6f1149995"/>
							</Array>
						</Object>
					</Object>
				</Array>
				<Array as="incomingConnections"/>
				<Array as="split_rows"/>
			</Object>
			<Geometry _x="30" _y="60" _width="100" _height="50" as="geometry"/>
			<Object shape="rectangle" as="style"/>
		</Cell>
		<Cell id="28" parent="1" edge="1" source="1" target="12">
			<Geometry relative="1" as="geometry"/>
			<Object as="style"/>
		</Cell>
	</root>
</GraphDataModel>

Note the value 090 in <Object field="postal_cd" operator="beginsWith" valueSource="value" value="090" id="afab26b6-44ae-41a1-94ef-60c6f1149995"/>

When I use new ModelXmlSerializer(currentGraph.getDataModel()).import(xml) to import the string to the graph, 090 is changed to 90.

To Reproduce

Steps to reproduce the behavior:

1. Import the given XML with new ModelXmlSerializer(currentGraph.getDataModel()).import(xml).
2. Log the user object in console.

Expected behavior

"090" should be preserved as "090", not converted to 90.

Screenshots

Environment

• maxGraph version or commit: 0.13.0
• Desktop or mobile: Desktop
• OS and version: macOS 12.7.6
• Browser and version: Chrome 131.0.6778.140 (arm64)
• Node/npm version (if applicable): node v20.11.1, npm 10.5.0
• Used frameworks (if applicable): react@18.3.1, next@14.2.16

Additional context

Add any other context about the problem here.

[tbouffard]

Hi @meshbrain and thanks for the detailed report.

What you see is maxGraph's default behavior. When importing/decoding, it tries to interpret most values as numbers whenever possible.
For example, in your custom object, the count value is set to zero, not the string “0”.

If you wish certain fields not to be considered as numerical attributes, this must be configured in the Codec.

So it's likely that you'll need to create a custom codec.
I don't have time to provide a longer answer, but here are a couple of hints. Be aware that I haven't had time to POC the solutions, so it may not work immediately 😄.

Warning

If you're going for this solution, don't forget to register your custom codec before running the import.

First proposal: use a custom codec for the custom objects

The JsonData story use a custom Codec for an extra data attribute. This may be possible to do the same for the value attribute of the Cell:

• https://maxgraph.github.io/maxGraph/demo/?path=/story/xml-json-jsondata--default
• https://github.com/maxGraph/maxGraph/blob/main/packages/html/stories/JsonData.stories.ts

Second solution: custom codec for the Cell object

[UPDATE] this probably doesn't work, the CellCodec is not used to encode the custom object, so the modified code won't be used

Extends the existing CellCodec and override the isNumericAttribute method
Be inspired by https://github.com/maxGraph/maxGraph/blob/v0.14.0/packages/core/src/serialization/ObjectCodec.ts#L595 and https://github.com/maxGraph/maxGraph/blob/v0.14.0/packages/core/src/serialization/codecs/CellCodec.ts#L75

  isNumericAttribute(dec: Codec, attr: Element, obj: any) {
    // exclude the attribute you mention. I suppose that the name of the class holding the attribute is "Rule"
    return !(obj.constructor === Rule && attr.name === 'value') 
      // original CellCodec
      && super.isNumericAttribute(dec, attr, obj);
  }

The code above only work if Rule is a structured class. If this is just unstructured data, the constructor check is useless. Another solution must be found.

[gora-gofoqal]

I see a git log entry:
#70: replaces direct use of ValueEditor with ChakraValueEditor

This seems to have slightly mitigated the issue in that the user can now enter the value as "090" (no need for a leading backslash like "\090"), and the query os formulated correctly.

However, when the XML is returned the leading zero is swallowed up, even though I am now returning it as "\090} from the backend

[tbouffard]

@gora-gofoqal I didn't find the reference you are mentioning about "ValueEditor" and "ChakraValueEditor" in #70.
Do you have more specific information about this please?

[gora-gofoqal]

@tbouffard My apologies. I confused messages between our internal issues tracker, and the mxGraph one. Please disregard this message.

In the project, we use ChakraUI, and tthe front-endd developer made a change to use the ChakraUI valueEditor instead of the built-in valueEditor. As mentioned that seemd to fix part of the issue.

This is probably not relevant to people not using ChakraUI, but if you feek that it might help, we can look further into this

[tbouffard]

Thanks @gora-gofoqal for the information, this is clearer now 😄

I don't think it's necessary to provide more information on the use of ChakraUI in the context of this question.

[meshbrain]

Hi @tbouffard,

Sorry for the delayed follow-up, and thanks for your guidance — it solved the original issue! Here’s my implementation:

lib/customModelXmlSerializer.ts

import {
  ModelXmlSerializer,
  CodecRegistry,
  type GraphDataModel
} from "@maxgraph/core"
import CustomObjectCodec from "@/lib/customObjectCodec"

export default class CustomModelXmlSerializer extends ModelXmlSerializer {
  constructor(dataModel: GraphDataModel) {
    super(dataModel)
    CodecRegistry.register(new CustomObjectCodec())
  }
}

lib/customObjectCodec.ts

import { Codec, ObjectCodec } from "@maxgraph/core"

class CustomObjectCodec extends ObjectCodec {
  constructor() {
    super({})
  }

  isNumericAttribute(dec: Codec, attr: any, obj: any): boolean {
    if (attr.nodeName === "value" && /^0\d+$/.test(attr.value ?? ""))
      return false

    return super.isNumericAttribute(dec, attr, obj)
  }
}

export default CustomObjectCodec

Then, I call it with:

new CustomModelXmlSerializer(
      graphObject.getDataModel()
    ).export()

This works fine in development mode, but in production, I get the following error:

73.dfb4eccb860e0dbe.js:1 Uncaught RangeError: Maximum call stack size exceeded
    at P.reference (73.dfb4eccb860e0dbe.js:1:93536)
    at P.getId (73.dfb4eccb860e0dbe.js:1:93430)
    at ObjectCodec.encodeObject (73.dfb4eccb860e0dbe.js:1:96696)
    at ObjectCodec.encode (73.dfb4eccb860e0dbe.js:1:96595)
    at P.encode (73.dfb4eccb860e0dbe.js:1:93652)
    at ObjectCodec.writeComplexAttribute (73.dfb4eccb860e0dbe.js:1:97645)
    at ObjectCodec.writeAttribute (73.dfb4eccb860e0dbe.js:1:97288)
    at ObjectCodec.encodeValue (73.dfb4eccb860e0dbe.js:1:97170)
    at ObjectCodec.encodeObject (73.dfb4eccb860e0dbe.js:1:96830)
    at ObjectCodec.encode (73.dfb4eccb860e0dbe.js:1:96595)

It looks like this is causing an infinite loop. Any ideas on what I might be doing wrong?

Thanks in advance! 😊

[tbouffard]

Hi,

As mentioned in Codecs documentation, this generally occurs when a class you're trying to encode doesn't have a registered codec.

But here, as the code works in development, I suspect a problem with the custom Codec code or registration when it is minified.
In the past, Codecs already had issues with minified code, for example, see:

• Decoding XML breaks when code is minified #169
• Geometry is not properly exported/encoded when code is minified #327
• Geometry class in registerCoreCodecs #369

Can you provide an example of the XML you are trying to import? Is it the same as in the description of this issue?
I have a few possible leads but I need more info to be able to answer.

If I understand correctly, your custom codec is intended to replace the codec that is registered by default by maxGraph and which is responsible for managing the Object class. Is this correct?

[gora]

@tbouffard My apologies for adding this in a technical issue thread. Tried to contact you on LinkedIn to discuss the following outside of the issue thread.

We have a client who would be willing to pay for this issue to be fixed so that it runs with npm in production mode, depending on the time and cost. Please contact me at gora@mimirtech.com to discuss this further

[tbouffard]

Hi @gora I answered you privately.

Feel free to share more details about how you build for development and production (this could explain the behavior difference between them).