Develop a trail of links that reflect the structure of the nodes

Question

Develop a trail of links that reflect the structure of the nodes

The hierarchical structure of nodes is as follows:

{
       "nodes":[
          {
             "assetId":"cfe-3a2b-47e7-b7e9-e2e090ca0d34",
             "assetName":"IRCTC",
             "assetType":"Company"
          },
          {
             "assetId":"32d9-05b8-4293-af55-2ee4617c6ffe",
             "assetName":"Northern Railway Fleet",
             "assetType":"Fleet"
          },
          {
             "assetId":"15-b76c-426c-a272-6485359c5836",
             "assetName":"Vande Bharat Express",
             "assetType":"Train"
          }
       ],
       "edges":[
          {
             "source":"cfe-3a2b-47e7-b7e9-e2e090ca0d34",
             "destination":"32d9-05b8-4293-af55-2ee4617c6ffe",
             "relation":"HAS"
          },
          {
             "source":"32d9-05b8-4293-af55-2ee4617c6ffe",
             "destination":"15-b76c-426c-a272-6485359c5836",
             "relation": "HAS"
          }
       ]
    }

Essentially, the nodes contain a list of assets and the edges represent their relationships or mappings. To traverse the nodes, let's consider an example where I create a function called

generateTrail("15-b76c-426c-a272-6485359c5836");

This function should search for the given node ID in the edges object and fetch its parent.

The breadcrumb trail would be:

"IRCTC > Northern Railway Fleet > Vande Bharat Express"

javascript object breadcrumbs

Answer 1

Answer №1

To simplify the process, you can create two intermediate objects named nodeIdToName and nodeIdToParentId for easier lookup within a while loop:

const hierarchy = {
  nodes: [ { assetId:"cfe-3a2b-47e7-b7e9-e2e090ca0d34", assetName:"IRCTC", assetType:"Company" }, { assetId:"32d9-05b8-4293-af55-2ee4617c6ffe", assetName:"Northern Railway Fleet", assetType:"Fleet" }, { assetId:"15-b76c-426c-a272-6485359c5836", assetName:"Vande Bharat Express", assetType:"Train" } ],
  edges: [ { source:"cfe-3a2b-47e7-b7e9-e2e090ca0d34", destination:"32d9-05b8-4293-af55-2ee4617c6ffe", relation:"HAS" }, { source:"32d9-05b8-4293-af55-2ee4617c6ffe", destination:"15-b76c-426c-a272-6485359c5836", relation: "HAS" } ]
};

const nodeIdToName = hierarchy.nodes.reduce((acc, obj) => {
  acc[obj.assetId] = obj.assetName;
  return acc;
}, {});
const nodeIdToParentId = hierarchy.edges.reduce((acc, obj) => {
  acc[obj.destination] = obj.source;
  return acc;
}, {});

function createBreadcrumbs(id) {
  let breadcrumb = [];
  while(nodeIdToName[id]) {
    breadcrumb.push(nodeIdToName[id]);
    id = nodeIdToParentId[id];
  }
  return breadcrumb.reverse().join(' > ');
}

const breadcrumb = createBreadcrumbs("15-b76c-426c-a272-6485359c5836");

console.log({
  nodeIdToName,
  nodeIdToParentId,
  breadcrumb
});

Output:

{
  "nodeIdToName": {
    "cfe-3a2b-47e7-b7e9-e2e090ca0d34": "IRCTC",
    "32d9-05b8-4293-af55-2ee4617c6ffe": "Northern Railway Fleet",
    "15-b76c-426c-a272-6485359c5836": "Vande Bharat Express"
  },
  "nodeIdToParentId": {
    "32d9-05b8-4293-af55-2ee4617c6ffe": "cfe-3a2b-47e7-b7e9-e2e090ca0d34",
    "15-b76c-426c-a272-6485359c5836": "32d9-05b8-4293-af55-2ee4617c6ffe"
  },
  "breadcrumb": "IRCTC > Northern Railway Fleet > Vande Bharat Express"
}

Note: The presence of nodeIdToName and nodeIdToParentId in the output is purely for demonstration purposes.

Answer 2

To simplify the process, you can create two intermediate objects named nodeIdToName and nodeIdToParentId for easier lookup within a while loop:

const hierarchy = {
  nodes: [ { assetId:"cfe-3a2b-47e7-b7e9-e2e090ca0d34", assetName:"IRCTC", assetType:"Company" }, { assetId:"32d9-05b8-4293-af55-2ee4617c6ffe", assetName:"Northern Railway Fleet", assetType:"Fleet" }, { assetId:"15-b76c-426c-a272-6485359c5836", assetName:"Vande Bharat Express", assetType:"Train" } ],
  edges: [ { source:"cfe-3a2b-47e7-b7e9-e2e090ca0d34", destination:"32d9-05b8-4293-af55-2ee4617c6ffe", relation:"HAS" }, { source:"32d9-05b8-4293-af55-2ee4617c6ffe", destination:"15-b76c-426c-a272-6485359c5836", relation: "HAS" } ]
};

const nodeIdToName = hierarchy.nodes.reduce((acc, obj) => {
  acc[obj.assetId] = obj.assetName;
  return acc;
}, {});
const nodeIdToParentId = hierarchy.edges.reduce((acc, obj) => {
  acc[obj.destination] = obj.source;
  return acc;
}, {});

function createBreadcrumbs(id) {
  let breadcrumb = [];
  while(nodeIdToName[id]) {
    breadcrumb.push(nodeIdToName[id]);
    id = nodeIdToParentId[id];
  }
  return breadcrumb.reverse().join(' > ');
}

const breadcrumb = createBreadcrumbs("15-b76c-426c-a272-6485359c5836");

console.log({
  nodeIdToName,
  nodeIdToParentId,
  breadcrumb
});

Output:

{
  "nodeIdToName": {
    "cfe-3a2b-47e7-b7e9-e2e090ca0d34": "IRCTC",
    "32d9-05b8-4293-af55-2ee4617c6ffe": "Northern Railway Fleet",
    "15-b76c-426c-a272-6485359c5836": "Vande Bharat Express"
  },
  "nodeIdToParentId": {
    "32d9-05b8-4293-af55-2ee4617c6ffe": "cfe-3a2b-47e7-b7e9-e2e090ca0d34",
    "15-b76c-426c-a272-6485359c5836": "32d9-05b8-4293-af55-2ee4617c6ffe"
  },
  "breadcrumb": "IRCTC > Northern Railway Fleet > Vande Bharat Express"
}

Note: The presence of nodeIdToName and nodeIdToParentId in the output is purely for demonstration purposes.

Answer 3

Answer №2

To solve this problem, you can create two different `Map` instances. One will map each node's `assetId` to its corresponding `assetName`, while the other map will associate each edge's `destination` with its respective `source`.
Next, implement a function that accepts an `id` as input and retrieves the `source` along with the node name for the specified id.
If the `source` is not null, the function should recursively call itself and append the current crumb at the end. Otherwise, it should return the current crumb only.

const input = {nodes:[{assetId:"cfe-3a2b-47e7-b7e9-e2e090ca0d34",assetName:"IRCTC",assetType:"Company"},{assetId:"32d9-05b8-4293-af55-2ee4617c6ffe",assetName:"Northern Railway Fleet",assetType:"Fleet"},{assetId:"15-b76c-426c-a272-6485359c5836",assetName:"Vande Bharat Express",assetType:"Train"}],edges:[{source:"cfe-3a2b-47e7-b7e9-e2e090ca0d34",destination:"32d9-05b8-4293-af55-2ee4617c6ffe",relation:"HAS"},{source:"32d9-05b8-4293-af55-2ee4617c6ffe",destination:"15-b76c-426c-a272-6485359c5836",relation:"HAS"}]},
      nodeMap = new Map ( input.nodes.map(o => [o.assetId, o.assetName]) ),
      edgeMap = new Map ( input.edges.map(o => [o.destination, o.source]) )

function getCrumb(id) {
  const crumb = nodeMap.get(id),
        source = edgeMap.get(id);
        
  return source 
            ? [getCrumb(source), crumb].join(' > ')
            : crumb
}

console.log( getCrumb("15-b76c-426c-a272-6485359c5836") )
console.log( getCrumb("32d9-05b8-4293-af55-2ee4617c6ffe") )

Answer 4

To solve this problem, you can create two different `Map` instances. One will map each node's `assetId` to its corresponding `assetName`, while the other map will associate each edge's `destination` with its respective `source`.
Next, implement a function that accepts an `id` as input and retrieves the `source` along with the node name for the specified id.
If the `source` is not null, the function should recursively call itself and append the current crumb at the end. Otherwise, it should return the current crumb only.

const input = {nodes:[{assetId:"cfe-3a2b-47e7-b7e9-e2e090ca0d34",assetName:"IRCTC",assetType:"Company"},{assetId:"32d9-05b8-4293-af55-2ee4617c6ffe",assetName:"Northern Railway Fleet",assetType:"Fleet"},{assetId:"15-b76c-426c-a272-6485359c5836",assetName:"Vande Bharat Express",assetType:"Train"}],edges:[{source:"cfe-3a2b-47e7-b7e9-e2e090ca0d34",destination:"32d9-05b8-4293-af55-2ee4617c6ffe",relation:"HAS"},{source:"32d9-05b8-4293-af55-2ee4617c6ffe",destination:"15-b76c-426c-a272-6485359c5836",relation:"HAS"}]},
      nodeMap = new Map ( input.nodes.map(o => [o.assetId, o.assetName]) ),
      edgeMap = new Map ( input.edges.map(o => [o.destination, o.source]) )

function getCrumb(id) {
  const crumb = nodeMap.get(id),
        source = edgeMap.get(id);
        
  return source 
            ? [getCrumb(source), crumb].join(' > ')
            : crumb
}

console.log( getCrumb("15-b76c-426c-a272-6485359c5836") )
console.log( getCrumb("32d9-05b8-4293-af55-2ee4617c6ffe") )

Answer 5

Answer №3

I have devised a unique approach to tackle the problem using functional programming principles with an emphasis on an associative array data structure. Check out my solution below:

Start by creating a Map of doubly-linked list nodes based on the initial input. This will provide all the necessary relational data to solve the problem at hand and extract additional insights from the input:

function linkAssets (graph) {
  const map = new Map();

  for (const asset of graph.nodes) {
    map.set(asset.assetId, {value: asset});
  }

  for (const edge of graph.edges) {
    if (edge.relation === "HAS") {
      const previous = map.get(edge.source);
      const next = map.get(edge.destination);

      if (previous && next) {
        previous.next = next;
        next.previous = previous;
      }
    }
  }

  return map;
}

Next, utilize the map of linked list nodes to construct the breadcrumb path:

function createBreadcrumbs (
  graph,
  lastAssetId,
  {
    delimiter = " > ",
    transformFn = (asset) => asset.assetName,
  } = {},
) {
  const map = linkAssets(graph);
  const assetPath = [];
  let node = map.get(lastAssetId);

  while (node) {
    assetPath.unshift(transformFn(node.value));
    node = node.previous;
  }

  return assetPath.join(delimiter);
}

You can visualize how it works using this example:

const result = createBreadcrumbs(input, "15-b76c-426c-a272-6485359c5836");
console.log(result); // "IRCTC > Northern Railway Fleet > Vande Bharat Express"

Furthermore, you have the flexibility to customize the output as per your requirements:

const result2 = createBreadcrumbs(input, "15-b76c-426c-a272-6485359c5836", {
  delimiter: " ➡️ ",
  transformFn: a => `${a.assetName} (${a.assetType})`,
});

console.log(result2); // "IRCTC (Company) ➡️ Northern Railway Fleet (Fleet) ➡️ Vande Bharat Express (Train)"

For a live demonstration and to play around with the code, refer to the TypeScript Playground link provided above.

Answer 6

I have devised a unique approach to tackle the problem using functional programming principles with an emphasis on an associative array data structure. Check out my solution below:

Start by creating a Map of doubly-linked list nodes based on the initial input. This will provide all the necessary relational data to solve the problem at hand and extract additional insights from the input:

function linkAssets (graph) {
  const map = new Map();

  for (const asset of graph.nodes) {
    map.set(asset.assetId, {value: asset});
  }

  for (const edge of graph.edges) {
    if (edge.relation === "HAS") {
      const previous = map.get(edge.source);
      const next = map.get(edge.destination);

      if (previous && next) {
        previous.next = next;
        next.previous = previous;
      }
    }
  }

  return map;
}

Next, utilize the map of linked list nodes to construct the breadcrumb path:

function createBreadcrumbs (
  graph,
  lastAssetId,
  {
    delimiter = " > ",
    transformFn = (asset) => asset.assetName,
  } = {},
) {
  const map = linkAssets(graph);
  const assetPath = [];
  let node = map.get(lastAssetId);

  while (node) {
    assetPath.unshift(transformFn(node.value));
    node = node.previous;
  }

  return assetPath.join(delimiter);
}

You can visualize how it works using this example:

const result = createBreadcrumbs(input, "15-b76c-426c-a272-6485359c5836");
console.log(result); // "IRCTC > Northern Railway Fleet > Vande Bharat Express"

Furthermore, you have the flexibility to customize the output as per your requirements:

const result2 = createBreadcrumbs(input, "15-b76c-426c-a272-6485359c5836", {
  delimiter: " ➡️ ",
  transformFn: a => `${a.assetName} (${a.assetType})`,
});

console.log(result2); // "IRCTC (Company) ➡️ Northern Railway Fleet (Fleet) ➡️ Vande Bharat Express (Train)"

For a live demonstration and to play around with the code, refer to the TypeScript Playground link provided above.

Develop a trail of links that reflect the structure of the nodes

Answer №1

Answer №2

Answer №3

Similar questions

Convert TypeScript-specific statements into standard JavaScript code

Guide to importing firebase-functions and firebase-admin using ES6 syntax for transpilation with Babel in Node 10

retrieve data for chart from an AJAX request

What is the best way to incorporate a popover into a fullcalendar event displayed on a resource timeline in Vue while utilizing BootstrapVue?

Progressively updating elements one by one leads to updates

Trouble with loading images on hbs/nodejs

Arrange JSON information in an HTML table with distinct header rows for every data category

Is it no longer necessary to bind functions in React Component Classes?

Meteor Infinity: the astronomy .save functionality seems to be malfunctioning

Combining values from multiple sets of 'radio buttons' in React to get a total

Using jQuery to smoothly scroll to a position determined by a custom variable

What are some ways to enhance the opacity of a Material UI backdrop?

"Ionic application encountering issue with retrieving data from email inbox, resulting in undefined

Need some assistance in finding a way to input multiple values from multiple buttons into a single input field in JavaScript

Preserve the table's state even after submitting the form

The graph from Flot is not showing up, and there are no error messages

Delete the designated column from the table

Leveraging Lodash to retrieve values based on specific keys, even when certain keys are missing

Learn how to implement scrolling text using JavaScript and jQuery, where text slides by clicking on the previous and next icons

Ways to determine the numerical value of a specific word chosen by a user