[NODE] UI interface freezes when my job has many bridges

[marcelofrayha]

Description I created a directrequest job to fetch information from my external adapters. When I added 4 bridges to the job Spec, it took quite a while for the UI to render the job's graph. Later, when I added 3 more bridges, it stopped working at all, making it impossible to create the job through the UI.

Basic Information The page http://localhost:6688/jobs/new keeps loading indefinitely. I asked for help of a professional node operator and he got the same result.

Steps to Reproduce Copy and paste this job in your job Spec: type = "directrequest" schemaVersion = 1 name = "GetWinners" externalJobID = "1" maxTaskDuration = "0s" contractAddress = "0x4675f0364D6C41C8f960f7A5DbF768cd3A09643E" minIncomingConfirmations = 0 minContractPaymentLinkJuels = "0" observationSource = """ decode_log [ type=ethabidecodelog abi="OracleRequest(bytes32 indexed specId, address requester, bytes32 requestId, uint256 payment, address callbackAddr, bytes4 callbackFunctionId, uint256 cancelExpiration, uint256 dataVersion, bytes data)" data="$(jobRun.logData)" topics="$(jobRun.logTopics)" ]

decode_cbor  [
    type=cborparse
    data="$(decode_log.data)"
]

decode_log -> decode_cbor

fetch1        [
    type=bridge
    name="footstats"
    requestData="{\\"id\\": $(jobSpec.externalJobID), \\"data\\": {\\"league\\": $(decode_cbor.league)}}"
]

decode_cbor -> fetch1

fetch2        [
    type=bridge
    name="footstat1"
    requestData="{\\"id\\": $(jobSpec.externalJobID), \\"data\\": {\\"league\\": $(decode_cbor.league)}}"
]

decode_cbor -> fetch2

fetch3        [
    type=bridge
    name="footstat2"
    requestData="{\\"id\\": $(jobSpec.externalJobID), \\"data\\": {\\"league\\": $(decode_cbor.league)}}"
]

decode_cbor -> fetch3

fetch4        [
    type=bridge
    name="footstat3"
    requestData="{\\"id\\": $(jobSpec.externalJobID), \\"data\\": {\\"league\\": $(decode_cbor.league)}}"
]

decode_cbor -> fetch4

fetch5        [
    type=bridge
    name="footstat4"
    requestData="{\\"id\\": $(jobSpec.externalJobID), \\"data\\": {\\"league\\": $(decode_cbor.league)}}"
]

decode_cbor -> fetch5

fetch6        [
    type=bridge
    name="footstat5"
    requestData="{\\"id\\": $(jobSpec.externalJobID), \\"data\\": {\\"league\\": $(decode_cbor.league)}}"
]

decode_cbor -> fetch6

fetch7        [
    type=bridge
    name="footstat6"
    requestData="{\\"id\\": $(jobSpec.externalJobID), \\"data\\": {\\"league\\": $(decode_cbor.league)}}"
]

decode_cbor -> fetch7

winner_parse11       [
    type=jsonparse
    path="data,result,0"
    data="$(fetch1)"
]

winner_parse12       [
    type=jsonparse
    path="data,result,1"
    data="$(fetch1)"
]

winner_parse13       [
    type=jsonparse
    path="data,result,2"
    data="$(fetch1)"
]

fetch1 -> winner_parse11 fetch1 -> winner_parse12 fetch1 -> winner_parse13

winner_parse21       [
    type=jsonparse
    path="data,result,0"
    data="$(fetch2)"
]

winner_parse22       [
    type=jsonparse
    path="data,result,1"
    data="$(fetch2)"
]

winner_parse23       [
    type=jsonparse
    path="data,result,2"
    data="$(fetch2)"
]

fetch2 -> winner_parse21 fetch2 -> winner_parse22 fetch2 -> winner_parse23

winner_parse31       [
    type=jsonparse
    path="data,result,0"
    data="$(fetch3)"
]

winner_parse32       [
    type=jsonparse
    path="data,result,1"
    data="$(fetch3)"
]

winner_parse33       [
    type=jsonparse
    path="data,result,2"
    data="$(fetch3)"
]

fetch3 -> winner_parse31 fetch3 -> winner_parse32 fetch3 -> winner_parse33

winner_parse41       [
    type=jsonparse
    path="data,result,0"
    data="$(fetch4)"
]

winner_parse42       [
    type=jsonparse
    path="data,result,1"
    data="$(fetch4)"
]

winner_parse43       [
    type=jsonparse
    path="data,result,2"
    data="$(fetch4)"
]

fetch4 -> winner_parse41 fetch4 -> winner_parse42 fetch4 -> winner_parse43

winner_parse51       [
    type=jsonparse
    path="data,result,0"
    data="$(fetch5)"
]

winner_parse52       [
    type=jsonparse
    path="data,result,1"
    data="$(fetch5)"
]

winner_parse53       [
    type=jsonparse
    path="data,result,2"
    data="$(fetch5)"
]

fetch5 -> winner_parse51 fetch5 -> winner_parse52 fetch5 -> winner_parse53

winner_parse61       [
    type=jsonparse
    path="data,result,0"
    data="$(fetch6)"
]

winner_parse62       [
    type=jsonparse
    path="data,result,1"
    data="$(fetch6)"
]

winner_parse63       [
    type=jsonparse
    path="data,result,2"
    data="$(fetch6)"
]

fetch6 -> winner_parse61 fetch6 -> winner_parse62 fetch6 -> winner_parse63

winner_parse71       [
    type=jsonparse
    path="data,result,0"
    data="$(fetch7)"
]

winner_parse72       [
    type=jsonparse
    path="data,result,1"
    data="$(fetch7)"
]

winner_parse73       [
    type=jsonparse
    path="data,result,2"
    data="$(fetch7)"
]

fetch7 -> winner_parse71 fetch7 -> winner_parse72 fetch7 -> winner_parse73

winner_mode1          [

type=mode values=<[ $(winner_parse11), $(winner_parse21), $(winner_parse31), $(winner_parse41), $(winner_parse51), $(winner_parse61), $(winner_parse71) ]> allowedFaults=1 ]

winner_parse11 -> winner_mode1
winner_parse21 -> winner_mode1
winner_parse31 -> winner_mode1
winner_parse41 -> winner_mode1
winner_parse51 -> winner_mode1
winner_parse61 -> winner_mode1
winner_parse71 -> winner_mode1

winner_mode2          [

type=mode values=<[ $(winner_parse12), $(winner_parse22), $(winner_parse32), $(winner_parse42), $(winner_parse52), $(winner_parse62), $(winner_parse72) ]> allowedFaults=1 ]

winner_parse12 -> winner_mode2
winner_parse22 -> winner_mode2
winner_parse32 -> winner_mode2
winner_parse42 -> winner_mode2
winner_parse52 -> winner_mode2
winner_parse62 -> winner_mode2
winner_parse72 -> winner_mode2

winner_mode3          [

type=mode values=<[ $(winner_parse13), $(winner_parse23), $(winner_parse33), $(winner_parse43), $(winner_parse53), $(winner_parse63), $(winner_parse73) ]> allowedFaults=1 ]

winner_parse13 -> winner_mode3
winner_parse23 -> winner_mode3
winner_parse33 -> winner_mode3
winner_parse43 -> winner_mode3
winner_parse53 -> winner_mode3
winner_parse63 -> winner_mode3
winner_parse73 -> winner_mode3

encode_mwr [ type="ethabiencode" abi="(bytes32 requestId, uint256[] _winner, uint256[] _winner2, uint256[] _winner3)" data="{\"requestId\": $(decode_log.requestId), \"_winner\": $(winner_mode1.results), \"_winner2\": $(winner_mode2.results), \"_winner3\": $(winner_mode3.results)}" ] winner_mode1 -> encode_mwr winner_mode2 -> encode_mwr winner_mode3 -> encode_mwr

encode_tx [ type="ethabiencode" abi="fulfillOracleRequest2(bytes32 requestId, uint256 payment, address callbackAddress, bytes4 callbackFunctionId, uint256 expiration, bytes calldata data)" data="{\"requestId\": $(decode_log.requestId), \"payment\": $(decode_log.payment), \"callbackAddress\": $(decode_log.callbackAddr), \"callbackFunctionId\": $(decode_log.callbackFunctionId), \"expiration\": $(decode_log.cancelExpiration), \"data\": $(encode_mwr)}" ]

submit_tx  [
    type="ethtx"
    to="0x4675f0364D6C41C8f960f7A5DbF768cd3A09643E"
    data="$(encode_tx)"
]

encode_mwr -> encode_tx -> submit_tx

"""

Additional Information [replace this line with any additional information you would like to provide, such as screenshots illustrating the issue]

[marcelofrayha]

I created this very same job using the CLI and it works fine. This is a problem with the UI