https://github.com/loredanacirstea
https://twitter.com/lorecirstea
mutable testgraph = ({"n":{"101":{"i":101,"id":"5c95397d4212cc40afeec91f"},"102":{"i":102,"id":"5c95397d4212cc40afeec922"},"103":{"i":103,"id":"5c95397d4212cc40afeec919"},"3000":{"i":3000,"id":"5bc59e192817116e84bdd8313000"},"3001":{"i":3001,"id":"5bc59e192817116e84bdd8313001"}},"e":[[101,1,102,2],[101,1,103,1],[3000,1,101,1],[3000,1,103,3],[3000,1,101,1],[3000,1,103,3],[3000,1,102,1],[102,1,103,4],[3001,1,102,3],[3001,1,103,5]],"r":[]})
mutable graphobj = initialize(testgraph)
JSON.stringify(graphobj.getGraph())
gini = JSON.stringify(graphobj.getGraph().rich_graph.init)
// html `<div style="height:300px;width:100%;top:0px;left:0px;display:flex;"><div id="controlDbFilter" style="height:300px;width:50%;top:0px;left:0px;"></div><div style="height:300px;width:50%;top:0px;right:0px;"><select id="contractsSelectDb"></select><select id="nodesSelectDb"></select><button id="addNodeDb">add</button></div></div>`
soliditySource = pipesource.sourceBuilder(pipesource.solidityBuilder)(graphobj.getGraph())('function00');
web3jsSource = pipesource.sourceBuilder(pipesource.web3Builder)(graphobj.getGraph())('function00');
{
window.addEventListener("hashchange", setGraphFromHash, false);
}
setDbFilter()
mutable groupCache = ({graph: {}, pclass: {}, pfunction: {}})
// 5e035ff3202dbe13a94d3f0a
// 5e036014202dbe13a94d3f0b
// 5e0363d6202dbe13a94d3f0c
function setDbFilter() {
const entityMap = {
function: 'pfunction',
contract: 'pclass',
}
dtype.t.setEnum('entity', Object.keys(entityMap));
dtype.t.setEnum('io', ['inputs', 'outputs']);
let inputs = {
value: [
'uint256',
'function',
'inputs',
'',
// '',
],
type: {
type: 'enum:types',
collection: 'enum:entity',
'i/o': 'enum:io',
name: 'string',
// tag: 'string',
},
name: 'filter',
}
const guiOptions = {
gui: {align: 'left'},
onChange: (typed) => {
inputs = typed;
inputs.type = inputs.type;
},
buttons: [
{type: "button", label: "search", action: async () => {
console.log('-- filter inputs', inputs);
const results = await callDb(inputs);
// console.log('-- results', results);
}}
]
}
async function callDb(newinputs) {
const [type, collection, io, nameRegex, page] = newinputs.value;
const query = {};
const filter = {limit: 50};
let response = {};
query[`${entityMap[collection]}.gapi.${io}.type`] = type;
// {name: {like: value, options: 'i'}}
if (nameRegex !== '') {
const key = collection === 'function' ? 'pfunction.gapi.name' : 'name';
query[key] = {like: nameRegex, options: 'i'};
}
if (
page &&
type === inputs.value[0] &&
collection === inputs.value[1] &&
io === inputs.value[2] &&
nameRegex === inputs.value[3]
) {
filter.skip = (page - 1) * filter.limit;
} else {
filter.skip = 0;
}
if (collection === 'function') {
response = await searchPFunctions(query, filter);
}
if (collection === 'contract') {
filter.limit = 5;
response = await searchPClasses(query, filter);
}
showDbOptions(response.pclassMap, 'contractsSelectDb', 'nodesSelectDb', 'addNodeDb');
const count = response.count;
console.log('count', count);
if (count > filter.limit) {
const pages = Math.ceil(count / filter.limit);
dtype.t.setType('upage', x => x >= 1 && x <= pages, [dtype.natural]);
dtype.controls.upage = {
min: () => 0,
max: () => pages,
showControl: function (typed, folder, gui, onChange) {
gui.Register({
type: 'range', label: typed.name+":"+typed.type,
min: dtype.controls[typed.type].min(),
max: dtype.controls[typed.type].max(),
step: 1,
folder: folder,
initial: typed.value,
onChange: (data) => {
typed.value = data;
if (onChange) onChange(typed);
}
})
return typed
}
};
if (!inputs.type.page) {
inputs.value.push(1);
inputs.type.page = 'upage';
}
console.log('inputs', inputs);
showControl(inputs, "controlDbFilter", guiOptions);
}
}
showControl(inputs, "controlDbFilter", guiOptions);
}
function showDbOptions(pclassMap, contractsSelectId, nodesSelectId, addNodeId) {
console.log('-- pclassMap', pclassMap);
const contractsData = Object.values(pclassMap);
// const contractsData = response.pclasses;
// const functionData = response.pfunctions;
const setOpts = (select, options, getId, getName) => {
select.options.length = 0;
options.forEach((option, i) => {
var opt = document.createElement('option');
opt.value = i;
opt.innerHTML = option.name;
select.appendChild(opt);
})
}
const contracts = document.getElementById(contractsSelectId);
const nodes = document.getElementById(nodesSelectId);
const addB = document.getElementById(addNodeId);
setOpts(contracts, contractsData);
setOpts(nodes, contractsData[0] ? contractsData[0].pfunctions.map(func => func.pfunction.gapi) : []);
contracts.onchange = () => {
const cindex = parseInt(contracts.value);
console.log('contracts.onchange', cindex);
setOpts(nodes, contractsData[cindex].pfunctions.map(func => func.pfunction.gapi));
}
addB.onclick = () => {
const cindex = parseInt(contracts.value);
const nindex = parseInt(nodes.value);
const pclass = contractsData[cindex];
const pfunc = pclass.pfunctions[nindex];
// const pclassid = `${pclass.name}_${cindex}`;
// const pfunction = prepPFunction(pfunc);
// fcontext[pfunction._id] = pfunction;
fcontext[pfunc._id] = pclass.pfunctions[nindex];
graphobj.addFunction(pclass.pfunctions[nindex]);
}
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
