The SAGA state designer's JSON view does not work

[OstrichThinking]

When I paste JSON text in the JSON view interface of the SAGA state machine provided on the official website, the page is misaligned and cannot be parsed.

https://seata.io/saga_designer/index.html#/

[slievrly]

any json file provided ？I gave it a quick test and it worked fine.

[OstrichThinking]

any json file provided ？I gave it a quick test and it worked fine.

I was in the Win+Chrome environment to do the test, the results are not successful, the following is the test JSON:

{ "Name": "reduceInventoryAndBalance", "Comment": "reduce inventory then reduce balance in a transaction", "StartState": "ReduceInventory", "Version": "0.0.1", "States": { "ReduceInventory": { "Type": "ServiceTask", "ServiceName": "inventoryAction", "ServiceMethod": "reduce", "CompensateState": "CompensateReduceInventory", "Next": "ChoiceState", "Input": [ "$.[businessKey]", "$.[count]" ], "Output": { "reduceInventoryResult": "$.#root" }, "Status": { "#root == true": "SU", "#root == false": "FA", "$Exception{java.lang.Throwable}": "UN" } }, "ChoiceState": { "Type": "Choice", "Choices": [ { "Expression": "[reduceInventoryResult] == true", "Next": "ReduceBalance" } ], "Default": "Fail" }, "ReduceBalance": { "Type": "ServiceTask", "ServiceName": "balanceAction", "ServiceMethod": "reduce", "CompensateState": "CompensateReduceBalance", "Input": [ "$.[businessKey]", "$.[amount]", { "throwException": "$.[mockReduceBalanceFail]" } ], "Output": { "compensateReduceBalanceResult": "$.#root" }, "Status": { "#root == true": "SU", "#root == false": "FA", "$Exception{java.lang.Throwable}": "UN" }, "Catch": [ { "Exceptions": [ "java.lang.Throwable" ], "Next": "CompensationTrigger" } ], "Next": "Succeed" }, "CompensateReduceInventory": { "Type": "ServiceTask", "ServiceName": "inventoryAction", "ServiceMethod": "compensateReduce", "Input": [ "$.[businessKey]" ] }, "CompensateReduceBalance": { "Type": "ServiceTask", "ServiceName": "balanceAction", "ServiceMethod": "compensateReduce", "Input": [ "$.[businessKey]" ] }, "CompensationTrigger": { "Type": "CompensationTrigger", "Next": "Fail" }, "Succeed": { "Type": "Succeed" }, "Fail": { "Type": "Fail", "ErrorCode": "PURCHASE_FAILED", "Message": "purchase failed" } } }

[slievrly]

This is because ancillary information such as location coordinates and colors are missing.