contextual-graph

Assets

Package responsible for graph rendering for the exte.ai application. Using two libraries:

• https://github.com/vasturiano/force-graph
• https://github.com/vasturiano/3d-force-graph

Run Locally

Clone the project

  git clone https://eu-exte01-gtlb01.richaudience.bid/exte-ai/assets.git

Go to the project directory

  cd assets

Install dependencies

  npm install

Start the server (Run eslint + vite + build)

  npm run serve

Run Tests

Clone the project

  npm run test

Deployment

To deploy this project run. Importante to use npm run. Automatically upgrade version, make push and deploy in npm.

  npm run release:patch
  npm run release:minor
  npm run release:major

Usage/Examples

En el html

<script type="module" src="//unpkg.com/contextual-graph@1.13.0/dist/cg-global.js"></script>

Dynamic graph

const config = {
    container: container, // HTML element
    renderType: "2D", // 2D or 3D
    api: {
        firstLevel: {
            url: "https:exte.ai/api/iabcatsQueryTier1",
            queryParams: {
                iabtier: "iabtier1",
                nodetype: "domain",
            },
            resourceKey: "iabcats",
        },
        secondLevel: {
            url: "https:exte.ai/api/iabcatsQueryTierN",
            queryParams: {
                iabtier: "iabtier2",
                nodetype: "domain",
                iabtierRoot: "iabtier1",
            },
            resourceKey: "iabcats",
        },
        thirdLevel: {
            url: "https:exte.ai/api/domainsbyiabcat",
            queryParams: {
                iabtierRoot: "iabtier2",
            },
            resourceKey: "items",
        },
        fourthLevel: {
            url: "https:exte.ai/api/urlsbydomainandiabcat",
            queryParams: {
                iabtierRoot: "iabtier2",
            },
        },
        category: {
            url: "https:exte.ai/api/urlsbyiabcat/",
        },
    },
    style: {
        firstLevel: {
            nodeColor: "#11A579",
        },
        secondLevel: {
            nodeColor: "#80BA5A",
        },
        thirdLevel: {
            nodeColor: "#F2B701",
        },
    },
};

const { initGraph, graphEvent } = defineGraph(config);

initGraph();

Static graph

const config = {
    container: container, // HTML element
    renderType: "3D", // 2D or 3D
    graphType: "static", // static or dynamic
    api: {
        tree: {
            url: "https:exte.ai/api/getTreeBySeed",
        },
        urls: {
            url: "https:exte.ai/api/getUrlsByKeywords",
        },
    },
    style: {
        firstLevel: {
            nodeColor: "#11A579",
        },
        secondLevel: {
            nodeColor: "#80BA5A",
        },
        thirdLevel: {
            nodeColor: "#F2B701",
        },
    },
};

const { initGraph, graphEvent } = defineGraph(config);
const { filterGraph } = initGraph();

filterGraph({
    seed: "Bitcoin",
    lang: "es-ES",
    reach: 10,
});

Eventos

• click-domain: click in a domain (dynamic)
• click-keyword: click in a keyword (static)
• graph-loaded: when graph is loaded (both)
• loading: indicating when is loading (both)
• click-category: click in a category (dynamic)

graphEvent.addEventListener("click-domain", (event) => {
    console.log("node label", event.detail.nodeLabel);
    console.log("urls", event.detail.urls);
});

graphEvent.addEventListener("click-keyword", (event) => {
    console.log("node label", event.detail.nodeLabel);
    console.log("urls", event.detail.urls);
});

graphEvent.addEventListener("graph-loaded", () => {
    console.log("graph-loaded");
});

graphEvent.addEventListener("loading", () => {
    console.log("loading", event.detail.value);
});

graphEvent.addEventListener("click-category", () => {
    console.log("node label", event.detail.nodeLabel);
    console.log("urls", event.detail.urls);
});