Research
Recent Trends in Malicious Packages Targeting Discord
The Socket research team breaks down a sampling of malicious packages that download and execute files, among other suspicious behaviors, targeting the popular Discord platform.
apextree
Advanced tools
Readme
The Apextree is a javascript library built on SVG that helps to create organizational or hierarchical charts.
To add the Apextree to your project and its dependencies, install the package from npm.
npm install apextree
import ApexTree from 'apextree';
To create a basic tree with minimal configuration, write as follows:
<div id="svg-tree"></div>
const data = {
...(nested data with format provided below)
}
const options = {
width: 700,
height: 700,
nodeWidth: 120,
nodeHeight: 80,
childrenSpacing: 100,
siblingSpacing: 30,
direction: 'top',
canvasStyle: 'border: 1px solid black;background: #f6f6f6;',
};
const tree = new ApexTree(document.getElementById('svg-tree'), options);
const graph = tree.render(data);
The layout can be configured by either setting the properties in the table below by passing a second arg to Apextree with these properties set. The latter takes precedence.
Options | Default | Description |
---|---|---|
width | 400 | The width of graph container |
height | 400 | The height of graph container |
direction | top | The direction of the tree to start rendering. Possible values: top , bottom , left and right |
contentKey | name | The key of content in passed data object |
siblingSpacing | 50 | The spacing between sibling nodes |
childrenSpacing | 50 | The spacing between children and parent |
highlightOnHover | true | Enable/disable highlight on hover |
containerClassName | root | The class name for the root container |
canvasStyle | None | The css styles for canvas root container |
enableToolbar | false | Enable/disable graph toolbar |
nodeWidth | 50 | The width of graph nodes |
nodeHeight | 30 | The height of graph nodes |
nodeTemplate | defaultNodeTemplate | The HTML template for nodes |
nodeBGColor | #FFFFFF | The background color of nodes |
nodeBGColorHover | #FFFFFF | The background color on hover of nodes |
borderWidth | 1 | The border width of the nodes in pixels |
borderStyle | solid | The border style of the nodes |
borderRadius | 5px | The border radius of the nodes in pixels |
borderColor | #BCBCBC | The border color of the nodes |
borderColorHover | #5C6BC0 | The border color on hover of the nodes |
edgeWidth | 1 | The width for the edges |
edgeColor | #BCBCBC | The color for the edges |
edgeColorHover | #BCBCBC | The color for the edges when highlighted |
enableTooltip | false | Enable tooltip on hover of nodes |
tooltipId | apextree-tooltip-container | The tooltip HTML element id |
tooltipTemplate | defaultNodeTemplate | The HTML template for tooltip |
tooltipMaxWidth | 100 | The max width of the tooltip |
tooltipBorderColor | #BCBCBC | The border color of tooltip |
tooltipBGColor | #FFFFFF | The background color of tooltip |
fontSize | 14px | The size of font of nodes |
fontFamily | None | The font family of nodes |
fontWeight | 400 | The font weight of nodes |
fontColor | #000000 | The font color of nodes |
Default node template
const defaultNodeTemplate = (content: string) => {
return `<div style='display: flex;justify-content: center;align-items: center; text-align: center; height: 100%;'>${content}</div>`;
};
{
"id": "1",
"name": "A",
"children": []
}
Passed data object should contain id, name and children.
For id key, value of id can be unique otherwise edge highlight won't work as expected.
For name key, if using other than name then specify key name in contentKey option
For children key, it contains list of child objects
Example
const data = {
id: '1',
name: 'A',
children: [
{
id: '2',
name: 'B',
children: [
{
id: '3',
name: 'C',
},
{
id: '4',
name: 'D',
},
],
},
],
};
FAQs
The Apextree is a javascript library built on SVG that helps to create organizational/hierarchy charts.
We found that apextree demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
The Socket research team breaks down a sampling of malicious packages that download and execute files, among other suspicious behaviors, targeting the popular Discord platform.
Security News
Socket CEO Feross Aboukhadijeh joins a16z partners to discuss how modern, sophisticated supply chain attacks require AI-driven defenses and explore the challenges and solutions in leveraging AI for threat detection early in the development life cycle.
Security News
NIST's new AI Risk Management Framework aims to enhance the security and reliability of generative AI systems and address the unique challenges of malicious AI exploits.