@xyo-network/react-node-renderer 2.56.12 → 2.56.14
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/Cytoscape/CytoscapeElements.js +8 -2
- package/dist/cjs/Cytoscape/CytoscapeElements.js.map +1 -1
- package/dist/cjs/components/ProvidedNodeRenderer.js +4 -2
- package/dist/cjs/components/ProvidedNodeRenderer.js.map +1 -1
- package/dist/cjs/hooks/cytoscape/useCytoscapeElements.js +6 -6
- package/dist/cjs/hooks/cytoscape/useCytoscapeElements.js.map +1 -1
- package/dist/docs.json +1242 -1158
- package/dist/esm/Cytoscape/CytoscapeElements.js +6 -2
- package/dist/esm/Cytoscape/CytoscapeElements.js.map +1 -1
- package/dist/esm/components/ProvidedNodeRenderer.js +4 -2
- package/dist/esm/components/ProvidedNodeRenderer.js.map +1 -1
- package/dist/esm/hooks/cytoscape/useCytoscapeElements.js +6 -6
- package/dist/esm/hooks/cytoscape/useCytoscapeElements.js.map +1 -1
- package/dist/types/Cytoscape/CytoscapeElements.d.ts +2 -1
- package/dist/types/Cytoscape/CytoscapeElements.d.ts.map +1 -1
- package/dist/types/components/ProvidedNodeRenderer.d.ts +2 -0
- package/dist/types/components/ProvidedNodeRenderer.d.ts.map +1 -1
- package/dist/types/hooks/cytoscape/useCytoscapeElements.d.ts +2 -1
- package/dist/types/hooks/cytoscape/useCytoscapeElements.d.ts.map +1 -1
- package/package.json +20 -19
- package/src/Cytoscape/CytoscapeElements.ts +9 -2
- package/src/components/ProvidedNodeRenderer.tsx +6 -2
- package/src/hooks/cytoscape/useCytoscapeElements.ts +7 -6
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { isDirectModule, ModuleWrapper } from '@xyo-network/module';
|
|
1
2
|
import { parseModuleType } from './lib';
|
|
2
3
|
export class CytoscapeElements {
|
|
3
4
|
static MaxNameLength = 20;
|
|
@@ -10,11 +11,14 @@ export class CytoscapeElements {
|
|
|
10
11
|
},
|
|
11
12
|
};
|
|
12
13
|
}
|
|
13
|
-
static async buildElements(node) {
|
|
14
|
+
static async buildElements(node, account) {
|
|
14
15
|
try {
|
|
15
16
|
const [, newRootNode] = await CytoscapeElements.buildRootNode(node);
|
|
16
17
|
const newElements = [newRootNode];
|
|
17
|
-
const children = await Promise.all((await node.downResolver.resolve()).map(async (child) => [
|
|
18
|
+
const children = await Promise.all((await node.downResolver.resolve()).map(async (child) => [
|
|
19
|
+
await (isDirectModule(child) ? child.manifest() : ModuleWrapper.wrap(child, account).manifest()),
|
|
20
|
+
child.address,
|
|
21
|
+
]));
|
|
18
22
|
await Promise.allSettled((children ?? [])?.map(async ([child, address]) => {
|
|
19
23
|
try {
|
|
20
24
|
const newNode = await CytoscapeElements.buildNode(child, address);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CytoscapeElements.js","sourceRoot":"","sources":["../../../src/Cytoscape/CytoscapeElements.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"CytoscapeElements.js","sourceRoot":"","sources":["../../../src/Cytoscape/CytoscapeElements.ts"],"names":[],"mappings":"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"}
|
|
@@ -1,10 +1,12 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import { useWrappedProvidedNode } from '@xyo-network/react-node';
|
|
3
|
+
import { useWallet } from '@xyo-network/react-wallet';
|
|
3
4
|
import { useCytoscapeElements, useCytoscapeOptions } from '../hooks';
|
|
4
5
|
import { NodeRelationalGraph } from './RelationalGraph';
|
|
5
|
-
export const ProvidedNodeRenderer = ({ node, ...props }) => {
|
|
6
|
+
export const ProvidedNodeRenderer = ({ node, account, ...props }) => {
|
|
6
7
|
const [providedNode] = useWrappedProvidedNode();
|
|
7
|
-
const
|
|
8
|
+
const [wallet] = useWallet();
|
|
9
|
+
const elements = useCytoscapeElements(node ?? providedNode, account ?? wallet);
|
|
8
10
|
const options = useCytoscapeOptions(elements);
|
|
9
11
|
return _jsx(NodeRelationalGraph, { alignItems: "stretch", flexGrow: 1, height: "100%", options: options, ...props });
|
|
10
12
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ProvidedNodeRenderer.js","sourceRoot":"","sources":["../../../src/components/ProvidedNodeRenderer.tsx"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"ProvidedNodeRenderer.js","sourceRoot":"","sources":["../../../src/components/ProvidedNodeRenderer.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,sBAAsB,EAAE,MAAM,yBAAyB,CAAA;AAChE,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AAErD,OAAO,EAAE,oBAAoB,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAA;AAEpE,OAAO,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAA;AAOvD,MAAM,CAAC,MAAM,oBAAoB,GAAwC,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IACvG,MAAM,CAAC,YAAY,CAAC,GAAG,sBAAsB,EAAE,CAAA;IAC/C,MAAM,CAAC,MAAM,CAAC,GAAG,SAAS,EAAE,CAAA;IAC5B,MAAM,QAAQ,GAAG,oBAAoB,CAAC,IAAI,IAAI,YAAY,EAAE,OAAO,IAAI,MAAM,CAAC,CAAA;IAC9E,MAAM,OAAO,GAAG,mBAAmB,CAAC,QAAQ,CAAC,CAAA;IAE7C,OAAO,KAAC,mBAAmB,IAAC,UAAU,EAAC,SAAS,EAAC,QAAQ,EAAE,CAAC,EAAE,MAAM,EAAC,MAAM,EAAC,OAAO,EAAE,OAAO,KAAM,KAAK,GAAI,CAAA;AAC7G,CAAC,CAAA"}
|
|
@@ -5,26 +5,26 @@ import { CytoscapeElements } from '../../Cytoscape';
|
|
|
5
5
|
* Note: Relies on describe but could eventually be converted to a discover call
|
|
6
6
|
* Logic would be similar to what the bridge does
|
|
7
7
|
*/
|
|
8
|
-
export const useCytoscapeElements = (targetNode) => {
|
|
8
|
+
export const useCytoscapeElements = (targetNode, account) => {
|
|
9
9
|
const [elements, setElements] = useState([]);
|
|
10
10
|
useAsyncEffect(
|
|
11
11
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
12
12
|
async () => {
|
|
13
|
-
if (targetNode) {
|
|
14
|
-
const newElements = (await CytoscapeElements.buildElements(targetNode)) ?? [];
|
|
13
|
+
if (targetNode && account) {
|
|
14
|
+
const newElements = (await CytoscapeElements.buildElements(targetNode, account)) ?? [];
|
|
15
15
|
setElements(newElements);
|
|
16
16
|
}
|
|
17
17
|
}, [targetNode]);
|
|
18
18
|
useEffect(() => {
|
|
19
19
|
let attachedListener = undefined;
|
|
20
20
|
let detachedListener = undefined;
|
|
21
|
-
if (targetNode) {
|
|
21
|
+
if (targetNode && account) {
|
|
22
22
|
attachedListener = targetNode.on('moduleAttached', async () => {
|
|
23
|
-
const newElements = (await CytoscapeElements.buildElements(targetNode)) ?? [];
|
|
23
|
+
const newElements = (await CytoscapeElements.buildElements(targetNode, account)) ?? [];
|
|
24
24
|
setElements(newElements);
|
|
25
25
|
});
|
|
26
26
|
detachedListener = targetNode.on('moduleDetached', async () => {
|
|
27
|
-
const newElements = (await CytoscapeElements.buildElements(targetNode)) ?? [];
|
|
27
|
+
const newElements = (await CytoscapeElements.buildElements(targetNode, account)) ?? [];
|
|
28
28
|
setElements(newElements);
|
|
29
29
|
});
|
|
30
30
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useCytoscapeElements.js","sourceRoot":"","sources":["../../../../src/hooks/cytoscape/useCytoscapeElements.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAA;
|
|
1
|
+
{"version":3,"file":"useCytoscapeElements.js","sourceRoot":"","sources":["../../../../src/hooks/cytoscape/useCytoscapeElements.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAA;AAK3D,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAE3C,OAAO,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAA;AAEnD;;;GAGG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,UAAyC,EAAE,OAA4C,EAAE,EAAE;IAC9H,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAsB,EAAE,CAAC,CAAA;IAEjE,cAAc;IACZ,uDAAuD;IACvD,KAAK,IAAI,EAAE;QACT,IAAI,UAAU,IAAI,OAAO,EAAE;YACzB,MAAM,WAAW,GAAG,CAAC,MAAM,iBAAiB,CAAC,aAAa,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC,IAAI,EAAE,CAAA;YACtF,WAAW,CAAC,WAAW,CAAC,CAAA;SACzB;IACH,CAAC,EACD,CAAC,UAAU,CAAC,CACb,CAAA;IAED,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,gBAAgB,GAAyC,SAAS,CAAA;QACtE,IAAI,gBAAgB,GAAyC,SAAS,CAAA;QAEtE,IAAI,UAAU,IAAI,OAAO,EAAE;YACzB,gBAAgB,GAAG,UAAU,CAAC,EAAE,CAAC,gBAAgB,EAAE,KAAK,IAAI,EAAE;gBAC5D,MAAM,WAAW,GAAG,CAAC,MAAM,iBAAiB,CAAC,aAAa,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC,IAAI,EAAE,CAAA;gBACtF,WAAW,CAAC,WAAW,CAAC,CAAA;YAC1B,CAAC,CAAC,CAAA;YACF,gBAAgB,GAAG,UAAU,CAAC,EAAE,CAAC,gBAAgB,EAAE,KAAK,IAAI,EAAE;gBAC5D,MAAM,WAAW,GAAG,CAAC,MAAM,iBAAiB,CAAC,aAAa,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC,IAAI,EAAE,CAAA;gBACtF,WAAW,CAAC,WAAW,CAAC,CAAA;YAC1B,CAAC,CAAC,CAAA;SACH;QAED,OAAO,GAAG,EAAE;YACV,gBAAgB,EAAE,EAAE,CAAA;YACpB,gBAAgB,EAAE,EAAE,CAAA;QACtB,CAAC,CAAA;IACH,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAA;IAEhB,OAAO,QAAQ,CAAA;AACjB,CAAC,CAAA"}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { AccountInstance } from '@xyo-network/account-model';
|
|
1
2
|
import { ModuleManifest } from '@xyo-network/manifest-model';
|
|
2
3
|
import { NodeModule } from '@xyo-network/node';
|
|
3
4
|
import { ElementDefinition } from 'cytoscape';
|
|
@@ -10,7 +11,7 @@ export declare class CytoscapeElements {
|
|
|
10
11
|
target: string | undefined;
|
|
11
12
|
};
|
|
12
13
|
};
|
|
13
|
-
static buildElements(node: NodeModule): Promise<ElementDefinition[] | undefined>;
|
|
14
|
+
static buildElements(node: NodeModule, account: AccountInstance): Promise<ElementDefinition[] | undefined>;
|
|
14
15
|
static buildNode(manifest: ModuleManifest, address: string): ElementDefinition;
|
|
15
16
|
static buildRootNode: (node: NodeModule) => Promise<[ModuleManifest, ElementDefinition]>;
|
|
16
17
|
static normalizeName(name?: string): string | undefined;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CytoscapeElements.d.ts","sourceRoot":"","sources":["../../../src/Cytoscape/CytoscapeElements.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAA;
|
|
1
|
+
{"version":3,"file":"CytoscapeElements.d.ts","sourceRoot":"","sources":["../../../src/Cytoscape/CytoscapeElements.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAA;AAC5D,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAA;AAE5D,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAA;AAC9C,OAAO,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAA;AAI7C,qBAAa,iBAAiB;IAC5B,MAAM,CAAC,aAAa,SAAK;IAEzB,MAAM,CAAC,SAAS,CAAC,QAAQ,EAAE,iBAAiB,EAAE,OAAO,EAAE,iBAAiB;;;;;;;WAU3D,aAAa,CAAC,IAAI,EAAE,UAAU,EAAE,OAAO,EAAE,eAAe;IAgCrE,MAAM,CAAC,SAAS,CAAC,QAAQ,EAAE,cAAc,EAAE,OAAO,EAAE,MAAM,GAAG,iBAAiB;IAW9E,MAAM,CAAC,aAAa,SAAgB,UAAU,KAAG,QAAQ,CAAC,cAAc,EAAE,iBAAiB,CAAC,CAAC,CAG5F;IAED,MAAM,CAAC,aAAa,CAAC,IAAI,CAAC,EAAE,MAAM;CAKnC"}
|
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
+
import { AccountInstance } from '@xyo-network/account-model';
|
|
2
3
|
import { NodeModule } from '@xyo-network/node';
|
|
3
4
|
import { NodeRelationalGraphProps } from './lib';
|
|
4
5
|
export interface ProvidedNodeRendererProps extends NodeRelationalGraphProps {
|
|
6
|
+
account?: AccountInstance;
|
|
5
7
|
node?: NodeModule;
|
|
6
8
|
}
|
|
7
9
|
export declare const ProvidedNodeRenderer: React.FC<ProvidedNodeRendererProps>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ProvidedNodeRenderer.d.ts","sourceRoot":"","sources":["../../../src/components/ProvidedNodeRenderer.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAA;
|
|
1
|
+
{"version":3,"file":"ProvidedNodeRenderer.d.ts","sourceRoot":"","sources":["../../../src/components/ProvidedNodeRenderer.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAA;AAC5D,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAA;AAK9C,OAAO,EAAE,wBAAwB,EAAE,MAAM,OAAO,CAAA;AAGhD,MAAM,WAAW,yBAA0B,SAAQ,wBAAwB;IACzE,OAAO,CAAC,EAAE,eAAe,CAAA;IACzB,IAAI,CAAC,EAAE,UAAU,CAAA;CAClB;AAED,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CAOpE,CAAA"}
|
|
@@ -1,8 +1,9 @@
|
|
|
1
|
+
import { AccountInstance } from '@xyo-network/account-model';
|
|
1
2
|
import { NodeModule } from '@xyo-network/node';
|
|
2
3
|
import { ElementDefinition } from 'cytoscape';
|
|
3
4
|
/**
|
|
4
5
|
* Note: Relies on describe but could eventually be converted to a discover call
|
|
5
6
|
* Logic would be similar to what the bridge does
|
|
6
7
|
*/
|
|
7
|
-
export declare const useCytoscapeElements: (targetNode
|
|
8
|
+
export declare const useCytoscapeElements: (targetNode: NodeModule | undefined | null, account?: AccountInstance | undefined | null) => ElementDefinition[];
|
|
8
9
|
//# sourceMappingURL=useCytoscapeElements.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useCytoscapeElements.d.ts","sourceRoot":"","sources":["../../../../src/hooks/cytoscape/useCytoscapeElements.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"useCytoscapeElements.d.ts","sourceRoot":"","sources":["../../../../src/hooks/cytoscape/useCytoscapeElements.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAA;AAE5D,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAA;AAC9C,OAAO,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAA;AAK7C;;;GAGG;AACH,eAAO,MAAM,oBAAoB,eAAgB,UAAU,GAAG,SAAS,GAAG,IAAI,YAAY,eAAe,GAAG,SAAS,GAAG,IAAI,wBAoC3H,CAAA"}
|
package/package.json
CHANGED
|
@@ -13,15 +13,16 @@
|
|
|
13
13
|
"@xylabs/react-async-effect": "^2.17.6",
|
|
14
14
|
"@xylabs/react-flexbox": "^2.17.6",
|
|
15
15
|
"@xylabs/react-shared": "^2.17.6",
|
|
16
|
-
"@xyo-network/
|
|
17
|
-
"@xyo-network/
|
|
18
|
-
"@xyo-network/
|
|
19
|
-
"@xyo-network/
|
|
20
|
-
"@xyo-network/
|
|
21
|
-
"@xyo-network/
|
|
22
|
-
"@xyo-network/react-
|
|
23
|
-
"@xyo-network/react-
|
|
24
|
-
"@xyo-network/react-
|
|
16
|
+
"@xyo-network/account-model": "^2.64.9",
|
|
17
|
+
"@xyo-network/archivist-model": "^2.64.9",
|
|
18
|
+
"@xyo-network/diviner-model": "^2.64.9",
|
|
19
|
+
"@xyo-network/manifest-model": "^2.64.9",
|
|
20
|
+
"@xyo-network/module": "^2.64.9",
|
|
21
|
+
"@xyo-network/node": "^2.64.9",
|
|
22
|
+
"@xyo-network/react-archivist": "^2.56.14",
|
|
23
|
+
"@xyo-network/react-module": "^2.56.14",
|
|
24
|
+
"@xyo-network/react-node": "^2.56.14",
|
|
25
|
+
"@xyo-network/react-shared": "^2.56.14",
|
|
25
26
|
"cytoscape": "^3.25.0"
|
|
26
27
|
},
|
|
27
28
|
"peerDependencies": {
|
|
@@ -39,15 +40,15 @@
|
|
|
39
40
|
"@types/react-dom": "^18.2.6",
|
|
40
41
|
"@xylabs/ts-scripts-yarn3": "^2.18.7",
|
|
41
42
|
"@xylabs/tsconfig-react": "^2.18.7",
|
|
42
|
-
"@xyo-network/archivist": "^2.64.
|
|
43
|
-
"@xyo-network/bridge": "^2.64.
|
|
44
|
-
"@xyo-network/id-plugin": "^2.64.
|
|
45
|
-
"@xyo-network/module": "^2.64.
|
|
46
|
-
"@xyo-network/node": "^2.64.
|
|
47
|
-
"@xyo-network/react-node": "^2.56.
|
|
48
|
-
"@xyo-network/react-storybook": "^2.56.
|
|
49
|
-
"@xyo-network/react-wallet": "^2.56.
|
|
50
|
-
"@xyo-network/sentinel": "^2.64.
|
|
43
|
+
"@xyo-network/archivist": "^2.64.9",
|
|
44
|
+
"@xyo-network/bridge": "^2.64.9",
|
|
45
|
+
"@xyo-network/id-plugin": "^2.64.9",
|
|
46
|
+
"@xyo-network/module": "^2.64.9",
|
|
47
|
+
"@xyo-network/node": "^2.64.9",
|
|
48
|
+
"@xyo-network/react-node": "^2.56.14",
|
|
49
|
+
"@xyo-network/react-storybook": "^2.56.14",
|
|
50
|
+
"@xyo-network/react-wallet": "^2.56.14",
|
|
51
|
+
"@xyo-network/sentinel": "^2.64.9",
|
|
51
52
|
"typescript": "^5.1.6"
|
|
52
53
|
},
|
|
53
54
|
"description": "Common React library for all XYO projects that use React",
|
|
@@ -93,5 +94,5 @@
|
|
|
93
94
|
},
|
|
94
95
|
"sideEffects": false,
|
|
95
96
|
"types": "dist/types/index.d.ts",
|
|
96
|
-
"version": "2.56.
|
|
97
|
+
"version": "2.56.14"
|
|
97
98
|
}
|
|
@@ -1,4 +1,6 @@
|
|
|
1
|
+
import { AccountInstance } from '@xyo-network/account-model'
|
|
1
2
|
import { ModuleManifest } from '@xyo-network/manifest-model'
|
|
3
|
+
import { isDirectModule, ModuleWrapper } from '@xyo-network/module'
|
|
2
4
|
import { NodeModule } from '@xyo-network/node'
|
|
3
5
|
import { ElementDefinition } from 'cytoscape'
|
|
4
6
|
|
|
@@ -17,13 +19,18 @@ export class CytoscapeElements {
|
|
|
17
19
|
}
|
|
18
20
|
}
|
|
19
21
|
|
|
20
|
-
static async buildElements(node: NodeModule) {
|
|
22
|
+
static async buildElements(node: NodeModule, account: AccountInstance) {
|
|
21
23
|
try {
|
|
22
24
|
const [, newRootNode] = await CytoscapeElements.buildRootNode(node)
|
|
23
25
|
const newElements: ElementDefinition[] = [newRootNode]
|
|
24
26
|
|
|
25
27
|
const children = await Promise.all(
|
|
26
|
-
(
|
|
28
|
+
(
|
|
29
|
+
await node.downResolver.resolve()
|
|
30
|
+
).map<Promise<[ModuleManifest, string]>>(async (child) => [
|
|
31
|
+
await (isDirectModule(child) ? child.manifest() : ModuleWrapper.wrap(child, account).manifest()),
|
|
32
|
+
child.address,
|
|
33
|
+
]),
|
|
27
34
|
)
|
|
28
35
|
await Promise.allSettled(
|
|
29
36
|
(children ?? [])?.map(async ([child, address]) => {
|
|
@@ -1,17 +1,21 @@
|
|
|
1
|
+
import { AccountInstance } from '@xyo-network/account-model'
|
|
1
2
|
import { NodeModule } from '@xyo-network/node'
|
|
2
3
|
import { useWrappedProvidedNode } from '@xyo-network/react-node'
|
|
4
|
+
import { useWallet } from '@xyo-network/react-wallet'
|
|
3
5
|
|
|
4
6
|
import { useCytoscapeElements, useCytoscapeOptions } from '../hooks'
|
|
5
7
|
import { NodeRelationalGraphProps } from './lib'
|
|
6
8
|
import { NodeRelationalGraph } from './RelationalGraph'
|
|
7
9
|
|
|
8
10
|
export interface ProvidedNodeRendererProps extends NodeRelationalGraphProps {
|
|
11
|
+
account?: AccountInstance
|
|
9
12
|
node?: NodeModule
|
|
10
13
|
}
|
|
11
14
|
|
|
12
|
-
export const ProvidedNodeRenderer: React.FC<ProvidedNodeRendererProps> = ({ node, ...props }) => {
|
|
15
|
+
export const ProvidedNodeRenderer: React.FC<ProvidedNodeRendererProps> = ({ node, account, ...props }) => {
|
|
13
16
|
const [providedNode] = useWrappedProvidedNode()
|
|
14
|
-
const
|
|
17
|
+
const [wallet] = useWallet()
|
|
18
|
+
const elements = useCytoscapeElements(node ?? providedNode, account ?? wallet)
|
|
15
19
|
const options = useCytoscapeOptions(elements)
|
|
16
20
|
|
|
17
21
|
return <NodeRelationalGraph alignItems="stretch" flexGrow={1} height="100%" options={options} {...props} />
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { useAsyncEffect } from '@xylabs/react-async-effect'
|
|
2
|
+
import { AccountInstance } from '@xyo-network/account-model'
|
|
2
3
|
import { EventUnsubscribeFunction } from '@xyo-network/module'
|
|
3
4
|
import { NodeModule } from '@xyo-network/node'
|
|
4
5
|
import { ElementDefinition } from 'cytoscape'
|
|
@@ -10,14 +11,14 @@ import { CytoscapeElements } from '../../Cytoscape'
|
|
|
10
11
|
* Note: Relies on describe but could eventually be converted to a discover call
|
|
11
12
|
* Logic would be similar to what the bridge does
|
|
12
13
|
*/
|
|
13
|
-
export const useCytoscapeElements = (targetNode
|
|
14
|
+
export const useCytoscapeElements = (targetNode: NodeModule | undefined | null, account?: AccountInstance | undefined | null) => {
|
|
14
15
|
const [elements, setElements] = useState<ElementDefinition[]>([])
|
|
15
16
|
|
|
16
17
|
useAsyncEffect(
|
|
17
18
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
18
19
|
async () => {
|
|
19
|
-
if (targetNode) {
|
|
20
|
-
const newElements = (await CytoscapeElements.buildElements(targetNode)) ?? []
|
|
20
|
+
if (targetNode && account) {
|
|
21
|
+
const newElements = (await CytoscapeElements.buildElements(targetNode, account)) ?? []
|
|
21
22
|
setElements(newElements)
|
|
22
23
|
}
|
|
23
24
|
},
|
|
@@ -28,13 +29,13 @@ export const useCytoscapeElements = (targetNode?: NodeModule | null) => {
|
|
|
28
29
|
let attachedListener: EventUnsubscribeFunction | undefined = undefined
|
|
29
30
|
let detachedListener: EventUnsubscribeFunction | undefined = undefined
|
|
30
31
|
|
|
31
|
-
if (targetNode) {
|
|
32
|
+
if (targetNode && account) {
|
|
32
33
|
attachedListener = targetNode.on('moduleAttached', async () => {
|
|
33
|
-
const newElements = (await CytoscapeElements.buildElements(targetNode)) ?? []
|
|
34
|
+
const newElements = (await CytoscapeElements.buildElements(targetNode, account)) ?? []
|
|
34
35
|
setElements(newElements)
|
|
35
36
|
})
|
|
36
37
|
detachedListener = targetNode.on('moduleDetached', async () => {
|
|
37
|
-
const newElements = (await CytoscapeElements.buildElements(targetNode)) ?? []
|
|
38
|
+
const newElements = (await CytoscapeElements.buildElements(targetNode, account)) ?? []
|
|
38
39
|
setElements(newElements)
|
|
39
40
|
})
|
|
40
41
|
}
|