[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