Hi Team, I am trying to use the

kedro-viz-standalone

component (here). My plan is to ue a well-formatted JSON file to leverage the visualisation capabilities of

kedro-viz

to display a pipeline (not from Kedro). I am playing with

@quantumblack/kedro-viz/lib/utils/data/spaceflights.mock.json

(assume I will format a similar file). I am trying to show some metadata on the file but I need to add a custom metadata category currently not present (e.g.,

Documentation

which would be a link to a URL). I did the following: 1️⃣ updated the

/@quantumblack/kedro-viz/lib/components/metadata/metadata.js

file by adding the snippet below:

, /*#__PURE__*/_react.default.createElement(_metadataRow.default, {
    label: "Documentation:",
    value: metadata.documentation 
  })

2️⃣ edited the

/@quantumblack/kedro-viz/lib/selectors/metadata.js

, in particular the

getClickedNodeMetaData

function where I have added

state => state.node.documentation

and `nodeDocumentation`so that

metadata

becomes as follows (see last line):

const metadata = {
    id: nodeId,
    name: nodeLabel[nodeId],
    fullName: nodeFullName[nodeId],
    prettyName: nodePrettyName[nodeId],
    type: nodeType[nodeId],
    tags: [...nodeTags[nodeId]].map(tagId => tagNames[tagId]).sort(sortAlpha),
    pipeline: pipeline.name[pipeline.active],
    parameters: nodeParameters[nodeId],
    runCommand: nodeRunCommand[nodeId],
    code: nodeCodes[nodeId],
    filepath: nodeFilepaths[nodeId],
    datasetType: nodeDatasetTypes[nodeId],
    originalType: nodeOriginalTypes[nodeId],
    transcodedTypes: nodeTranscodedTypes[nodeId],
    inputs: isPrettyName ? nodeInputs[nodeId] && nodeInputs[nodeId].map(nodeInput => (0, _utils.prettifyName)((0, _utils.stripNamespace)(nodeInput))) : nodeInputs[nodeId] && nodeInputs[nodeId].map(nodeInput => (0, _utils.stripNamespace)(nodeInput)),
    outputs: isPrettyName ? nodeOutputs[nodeId] && nodeOutputs[nodeId].map(nodeOutput => (0, _utils.prettifyName)((0, _utils.stripNamespace)(nodeOutput))) : nodeOutputs[nodeId] && nodeOutputs[nodeId].map(nodeOutput => (0, _utils.stripNamespace)(nodeOutput)),
    preview: preview && preview[nodeId],
    previewType: previewType && previewType[nodeId],
    stats: stats && stats[nodeId],
    documentation: nodeDocumentation[nodeId]
  };

3️⃣ updated the input JSON file (see for example the first node)

"nodes": [
    {
      "id": "b7bb7198",
      "name": "preprocess_shuttles_node",
      "tags": ["preprocessing"],
      "pipelines": ["dp", "__default__"],
      "type": "task",
      "modular_pipelines": ["data_processing"],
      "parameters": {},
      "documentation" : "Lorem ipsum dolor sic amet"
    },

---------------------------- alert ISSUE It seems using

state.node.documentation

and adding a

documentation

key to the JSON file does not work. If I just type manually hard-coded values (which would then be the same for all nodes) in

const metadata

, data is displayed correctly but, obviously, I would like to have an individual

documentation

value for each node in my JSON file. Any thoughts / help?

Someone will reply to you shortly. In the meantime, this might help:

@Rashida Kanchwala, any thoughts on this?

Hi, we dont have any option to do node.documentation. We dont support that. If you would like to do something custom using kedro-viz ; since it is open source so you can fork the kedro-viz directly and update with your custom code! But we don’t support the above.

Cc @Jitendra Gundaniya

Hey @Giacomo Sarchioni As @Rashida Kanchwala mentioned we do not support this. But you can fork Kedro-Viz and make you custom changes. Below is the changes I think you need to make. 1. components/metadata.js

<MetaDataRow
         label="documentation:"
         value={metadata.documentation}
        />

2. selectors/metadata.js

export const getNodeDocumentation = state => state.node.documentation;

…

export const getClickedNodeMetaData = createSelector(
 [
  …
  getNodeDocumentation,
  …
 ],
 (
…
  nodeDocumentation,
…
) => {
…
}

const metadata = {
…
documentation: nodeDocumentation && nodeDocumentation[nodeId],
…
}

3. normalize-data.js

export const createInitialPipelineState = () => ({
…
node: {
…
documentation: {}, 
}


const addNode = (state) => (node) => {
…
state.node.documentation[id] = node.documentation || [];
…
}

4. Update you input JSON

"nodes": [
    {
      "id": "b7bb7198",
      "name": "preprocess_shuttles_node",
      "tags": ["preprocessing"],
      "pipelines": ["dp", "__default__"],
      "type": "task",
      "modular_pipelines": ["data_processing"],
      "parameters": {},
      "documentation" : ["Lorem ipsum"]
    },