2b:null 2c:["$","title",null,{"children":"Visualixir on Observable Notebook | KyungYeol Kim | Observable"}] 31:T97a,md`# Visualixir on Observable Notebook *${icon({ text: 'subscribe me', collection: 'blog' })}*

프로세스 시각화 도구인 [visualixir](https://github.com/koudelka/visualixir) 는 Elixir 의 [여러 기능들 중에서도](https://www.youtube.com/watch?v=JvBT4XBdoUE) 아주 흥미로운 기능들 활용한 프로젝트입니다. Elixir 는 실행중인 프로그램에 별도의 debugger 를 연결하지 않고도 프로세스 간 전달되는 메시지, stacktrace 를 확인할 수 있는 [trace](http://erlang.org/doc/man/dbg.html) 기능을 가지고 있습니다. 덕분에 프로그램이 실행중이더라도, 디버깅을 위한 코드를 추가하지 않고 프로그램이 어떻게 동작하는지, 어떤 상태를 가지고 있는지 꽤 자세히 확인할 수 있습니다. 이것만으로도 충분히 흥미로운데, visualixir 는 여기서 한발 더 나아갑니다. Elixir node 간에 (컴파일된) 모듈을 전달하고 필요하면 실행(!?) 할 수 있는 기능을 활용합니다. target node 에 필요한 기능이 없어도, visualixir 는 자신이 가진 모듈을 target node 에 전달해, target node 에 원하는 기능을 추가할 수 있습니다. 저는 visualixir 코드와 구조를 분석하고, visualixir 가 프로세스의 관계를 표현하는 방식에 대해 이해하기 위해 visualixir 의 프론트엔드 부분을 Observable 노트북으로 가져와 실험해보기로 했습니다. *이 포스트는 [visualixir@db98af](https://github.com/koudelka/visualixir/tree/db98af227991027b84737125d5799f33562a664f) 을 기준으로 작성했습니다.* ## How it works visualixir 는 2 개의 모듈로 이루어져 있습니다. * 웹 페이지의 소켓 요청을 처리하는 \`visualixir_web\` 모듈 * target node 에 tracer 모듈을 보내고 trace 수행하는 \`visualixir\` 모듈 tracer 모듈은 target node 에 로드된 후 target node 의 프로세스들과 발생하는 이벤트 (\`spawn\`, \`exit\`, \`link\`, \`unlink\`) 를 추적합니다. 프로세스를 선택하면 프로세스가 송/수신하는 메시지를 추적합니다.`32:T5e0,md`## Run visualixir 를 실행하는 방법은 다른 Elixir 프로젝트를 실행하는 방법과 비슷합니다. 다만, visualixir 가 실행될 node 에 이름 (\`--sname\`) 과 쿠키 (\`--cookie\`) 를 반드시 설정해야 합니다. visualixir 가 trace 를 수행할 target node 도 필요합니다. target node 로는 [The Soul of Erlang and Elixir - Saša Jurić](https://www.youtube.com/watch?v=JvBT4XBdoUE) 발표에 사용된 [sasa1977/demo_system](https://github.com/sasa1977/demo_system) 를 사용했습니다. (여기에도 흥미로운 코드들이 많습니다.) ~~~bash # on terminal session 1 $ git clone https://github.com/koudelka/visualixir $ cd visualixir $ iex --sname vis --cookie hello --hidden -S mix phx.server iex(vis@cmbp)> ~~~ ~~~bash # on terminal session 2 $ git clone https://github.com/sasa1977/demo_system $ cd demo_system/example_system $ iex --sname demo --cookie hello -S mix phx.server iex(demo@cmbp)> Node.ping :"vis@cmbp" :pong ~~~ *visualixir, demo_system 모두 4000 포트를 사용하기 때문에 한쪽의 포트를 변경하는 것이 좋습니다. 저는 demo_system 의 포트를 변경했습니다.* 노드들이 실행되면, localhost:4000 에서 visualixir 가 추적하는 프로세스들을 볼 수 있습니다. `33:T4a1,class Node { constructor() { this.state = {} } static async create() { const self = new Node() self.channel = await self._createChannel().catch(e => { throw new Error(e) }) return self } _createChannel() { return new Promise((resolve, reject) => { const channel = socket.channel('nodes') channel.join() .receive('ok', ({nodes}) => { this.state = nodes resolve(channel) }) .receive('error', e => reject(e.reason)) }) } add(node) { this.channel.push('add', {node}) return 'ok' } visualize(node) { this.channel.push('visualize', node) return 'ok' } cleanup(node) { this.channel.push('add', node) return 'ok' } subscribe() { return Generators.observe(notify => { if (this.channel.state === 'joined') { this.channel.leave() } this.channel = socket.channel('nodes') this.channel.join() .receive('ok', ({nodes}) => { this.state = nodes notify(this.state) }) .receive('error', e => notify(Promise.reject(new Error(`cannot join on 'nodes'`)))) }) } }34:Tcb3,class Trace { constructor() { this.state = {pids: {}, links: []} } static async create() { const self = new Trace() self.channel = await self._createChannel().catch(e => { throw new Error(e) }) return self } _createChannel() { return new Promise((resolve, reject) => { const channel = socket.channel('trace') channel.join() .receive('ok', () => { resolve(channel) }) .receive('error', e => reject(e.reason)) }) } msgTrace(pid) { return new Promise((resolve, reject) => { this.channel.push('msg_trace', {pid}) .receive('ok', () => resolve()) .receive('error', d => reject(d)) }) } stopMsgTraceAll() { return new Promise((resolve, reject) => { this.channel.push('stop_msg_trace_all') .receive('ok', () => resolve()) .receive('error', d => reject(d)) }) } cleanup() { return new Promise((resolve, reject) => { this.channel.push('stop_msg_trace_all') .receive('ok', () => resolve()) .receive('error', d => reject(d)) }) } subscribe() { return Generators.observe(notify => { this.channel.on('spawn', pid => { console.log('spawn', pid) this.state = { ...this.state, pids: { ...this.state.pids, ...pid } } notify(this.state) }) this.channel.on('exit', ({pid}) => { console.log('exit', pid) const pids = _.omit(this.state.pids, pid) const links = _.reject(this.state.links, ({source, target}) => source === pid || target === pid) this.state = {...this.state, pids, links} notify(this.state) }) this.channel.on('name', ({pid: pid, name: name}) => { // looks like not using it console.log(pid, name) }) this.channel.on('links', link => { console.log('link', link) const newLinks = _.uniqBy([...this.state.links, link], ({from, to}) => `${from},${to}`) this.state = {...this.state, links: newLinks} notify(this.state) }) this.channel.on('unlink', unlink => { console.log('unlink', unlink) const newLinks = _.reject(this.state.links, ({from, to}) => `${from},${to}`) this.state = {...this.state, links: newLinks} notify(this.state) }) this.channel.on('msg', message => { this.state = {...this.state, message} notify(this.state) }) this.channel.on('visualize_node', ({pids, links}) => { console.log('visualize_node', pids) this.state = { ...this.state, pids: { ...pids } } notify(this.state) }) this.channel.on('cleanup_node', ({node}) => { console.log('cleanup_node', node) }) notify(this.state) return () => { this.channel.off('spawn') this.channel.off('exit') this.channel.off('name') this.channel.off('links') this.channel.off('unlink') this.channel.off('visualize_node') this.channel.off('cleanup_node') } }) } }35:T63f,{ const { nodes, links } = transform(result); const simulation = d3 .forceSimulation() .nodes(nodes) .force('charge', d3.forceManyBody()) .force('link', d3.forceLink(links).id(d => d.id)) .force('center', d3.forceCenter(width / 2, height / 2)); const svg = d3 .create('svg') .attr('viewBox', [0, 0, width, height]) .attr('cursor', 'grab') .property('value', {}) .property('force', simulation); const root = svg.append('g'); const link = root .append('g') .attr('class', 'link') .attr('stroke', '#888') .attr('stroke-opacity', .6); const node = root .append('g') .attr('class', 'node') .attr('stroke', '#fff') .attr('stroke-width', 1.5); const zoom = d3 .zoom() .extent([[0, 0], [width, height]]) .scaleExtent([.5, 8]) .on('zoom', () => root.attr('transform', d3.event.transform)); svg.call(zoom); svg.call(zoom.transform, d3.zoomIdentity.scale(0.5)); link .selectAll('line') .data(links, d => `${d.source.id}-${d.target.id}`) .join('line'); node .selectAll('circle') .data(nodes, d => d.id) .join('circle') .attr('r', 5) .attr('fill', '#666') .call(drag(simulation)); simulation.on('tick', () => { link .selectAll('line') .attr('x1', d => d.source.x) .attr('y1', d => d.source.y) .attr('x2', d => d.target.x) .attr('y2', d => d.target.y); node .selectAll('circle') .attr('cx', d => d.x) .attr('cy', d => d.y); }); invalidation.then(() => simulation.stop()); return svg.node(); }36:Tccc,{ const { nodes, links } = await visibility(iteration_2_data); if (this) { const svg = d3.select(this); const simulation = svg.property('force'); const root = svg.select('g'); const nodesEl = svg.select('.node').selectAll('circle'); const linksEl = svg.select('.link').selectAll('line'); simulation.nodes(nodes); simulation.force('link').links(links); simulation.restart(); linksEl.data(links, d => `${d.source.id}-${d.target.id}`).join('line'); nodesEl .data(nodes, d => d.id) .join('circle') .attr('r', 5) .attr('fill', '#666') .call(drag(simulation)); simulation.on('tick', () => { svg .select('.link') .selectAll('line') .attr('x1', d => d.source.x) .attr('y1', d => d.source.y) .attr('x2', d => d.target.x) .attr('y2', d => d.target.y); svg .select('.node') .selectAll('circle') .attr('cx', d => d.x) .attr('cy', d => d.y); }); if (highlight.outsider) { simulation.stop(); const { x, y, id } = _.find(nodes, d => d.links.length === 0); nodesEl .attr('opacity', 0.2) .filter(d => d.id === id) .attr('opacity', 1); root .transition() .duration(750) .attr( 'transform', `translate(${width / 2 - x * 2},${height / 2 - y * 2}) scale(2)` ); } else { nodesEl.attr('opacity', 1); root .transition() .duration(750) .attr('transform', 'translate(0,0) scale(1)'); } invalidation.then(() => simulation.stop()); return svg.node(); } const simulation = d3 .forceSimulation() .nodes(nodes) .force('charge', d3.forceManyBody()) .force('link', d3.forceLink(links).id(d => d.id)) .force('center', d3.forceCenter(width / 2, height / 2)); const svg = d3 .create('svg') .attr('cursor', 'grab') .attr('viewBox', [0, 0, width, height]) .property('value', {}) .property('force', simulation); svg.call(defs); const root = svg.append('g'); const link = root .append('g') .attr('class', 'link') .attr('stroke', '#888') .attr('stroke-opacity', .6); root.append('g').attr('class', 'msg'); const node = root .append('g') .attr('class', 'node') .attr('stroke', '#fff') .attr('stroke-width', 1.5); const zoom = d3 .zoom() .extent([[0, 0], [width, height]]) .scaleExtent([.5, 8]) .on('zoom', () => root.attr('transform', d3.event.transform)); svg.call(zoom); svg.call(zoom.transform, d3.zoomIdentity.scale(0.5)); link .selectAll('line') .data(links, d => `${d.source.id}-${d.target.id}`) .join('line'); node .selectAll('circle') .data(nodes, d => d.id) .join('circle') .attr('r', 5) .attr('fill', '#666') .call(drag(simulation)); simulation.on('tick', () => { link .selectAll('line') .attr('x1', d => d.source.x) .attr('y1', d => d.source.y) .attr('x2', d => d.target.x) .attr('y2', d => d.target.y); node .selectAll('circle') .attr('cx', d => d.x) .attr('cy', d => d.y); }); invalidation.then(() => simulation.stop()); return svg.node(); }37:T748,viewof iteration_3 = { const { nodes, links } = await visibility(iteration_3_data); const simulation = d3 .forceSimulation(nodes) .alpha(1) .force('link', d3.forceLink(links).id(d => d.id)) .force('charge', d3.forceManyBody()) .force("x", d3.forceX().x(width / 2)) .force("y", d3.forceY().y(height / 2)); const svg = d3 .create('svg') .attr('cursor', 'grab') .attr('viewBox', [0, 0, width, height]) .property( 'value', md` 를 선택하면 여기에 프로세스에 대한 정보가 여기에 나타납니다.` ); const root = svg.append('g'); const link = root .append('g') .attr('class', 'link') .attr('stroke', '#888') .attr('stroke-opacity', .6); const node = root .append('g') .attr('class', 'node') .attr('stroke', '#fff') .attr('stroke-width', 1.5); const zoom = d3 .zoom() .extent([[0, 0], [width, height]]) .scaleExtent([.5, 8]) .on('zoom', () => root.attr('transform', d3.event.transform)); svg.call(zoom); link .selectAll('line') .data(links, d => `${d.source.id}-${d.target.id}`) .join('line'); node .selectAll('circle') .data(nodes, d => d.id) .join('circle') .attr('r', 5) .attr('fill', '#666') .on('click', d => svg.property('value', d).dispatch('input')) .call(drag(simulation)); simulation.on('tick', () => { link .selectAll('line') .attr('x1', d => d.source.x) .attr('y1', d => d.source.y) .attr('x2', d => d.target.x) .attr('y2', d => d.target.y); node .selectAll('circle') .attr('cx', d => d.x) .attr('cy', d => d.y); }); invalidation.then(() => simulation.stop()); return svg.node(); }38:T19f9,viewof iteration_4 = { const { nodes, links } = await visibility(iteration_4_data); if (this) { const svg = d3.select(this); const simulation = svg.property('force'); const root = svg.select('g'); const nodesEl = svg.select('.node').selectAll('circle'); const linksEl = svg.select('.link').selectAll('line'); simulation.nodes(nodes).alpha(1); simulation .force('link') .links(links) .distance(22) .strength(d => d.source.links.length > 100 || d.target.links.length > 100 ? 0.2 : 1.5 ) .iterations(3); simulation.restart(); simulation.on('tick', () => { svg .select('.link') .selectAll('line') .attr('x1', d => d.source.x) .attr('y1', d => d.source.y) .attr('x2', d => d.target.x) .attr('y2', d => d.target.y); svg .select('.node') .selectAll('circle') .attr('cx', d => d.x) .attr('cy', d => d.y); }); linksEl.data(links, d => `${d.source.id}-${d.target.id}`).join('line'); nodesEl .data(nodes, d => d.id) .join('circle') .attr('r', 4) .attr('stroke', d => d.application == null ? '#000' : applicationColor(d) ) .attr('fill', d => d.type === 'supervisor' ? '#fff' : applicationColor(d) ) .on('click', d => svg.property('value', d).dispatch('input')) .on('mouseover', d => { nodesEl.attr('opacity', 1); linksEl.attr('stroke-opacity', l => (l.source.id === d.id ? 1 : 0.2)); }) .on('mouseout', d => linksEl.attr('stroke-opacity', 0.6)) .call(drag(simulation)); invalidation.then(() => simulation.stop()); const target = _.find(nodes, d => { const pidMatched = d.id.match(/\<(.*?)\>/); if (d.name === searched.value) { return true; } else if (pidMatched != null && pidMatched[1] === process) { return true; } return false; }); if (highlight.no_app) { simulation.stop(); nodesEl .attr('opacity', 1) .filter(d => d.application != null) .attr('opacity', 0.2); root .transition() .duration(750) .attr('transform', 'translate(0,0) scale(1)'); svg.property('value', nodes.filter(d => d.application === null)); return svg.node(); } else if (highlight.too_many_links) { simulation.stop(); const _links = linksEl .attr('stroke-opacity', 0.2) .filter(d => d.source.links.length > 100 || d.target.links.length > 100) .attr('stroke-opacity', 0.6); const _pids = _.chain(_links.data()) .map(d => [d.source.id, d.target.id]) .flatten() .uniq() .value(); const _nodes = nodesEl .attr('opacity', 0.2) .filter(d => _.some(_pids, p => p === d.id)) .attr('opacity', 1); svg.property('value', _nodes.data()); root .transition() .duration(750) .attr('transform', 'translate(0,0) scale(1)'); return svg.node(); } else if (highlight.no_links) { simulation.stop(); const _nodes = nodesEl .attr('opacity', 0.2) .filter(d => d.links.length === 0) .attr('opacity', 1); svg.property('value', _nodes.data()); root .transition() .duration(750) .attr('transform', 'translate(0,0) scale(1)'); return svg.node(); } else if (searched.highlight && target) { const linked = _.chain(links) .filter(d => d.source.id === target.id) .map(d => d.target.id) .value(); const targetNodes = [...linked, target.id]; nodesEl.attr('opacity', d => _.some(targetNodes, n => n === d.id) ? 1 : 0.2 ); linksEl.attr('stroke-opacity', l => l.source.id === target.id ? 0.6 : 0.2 ); root .transition() .duration(750) .attr( 'transform', `translate(${width / 2 - target.x * 2},${height / 2 - target.y * 2}) scale(2)` ); svg.property('value', target); return svg.node(); } else { nodesEl.attr('opacity', 1); linksEl.attr('stroke-opacity', 0.6); return svg.node(); } } const simulation = d3 .forceSimulation(nodes) .alpha(1) .force( 'link', d3 .forceLink(links) .id(d => d.id) .distance(22) .strength(d => d.source.links.length > 100 || d.target.links.length > 100 ? 0.2 : 1.5 ) .iterations(3) ) .force( 'charge', d3 .forceManyBody() .strength(d => (d.links.length > 0 ? -20 : -5)) .distanceMax(height - 50) ) .force("x", d3.forceX().x(width / 2)) .force("y", d3.forceY().y(height / 2)); const svg = d3 .create('svg') .attr('cursor', 'grab') .attr('viewBox', [0, 0, width, height]) .property( 'value', md`선택한 프로세스의 정보가 여기에 나타납니다.` ) .property('force', simulation); const root = svg.append('g'); const link = root .append('g') .attr('class', 'link') .attr('stroke', '#888') .attr('stroke-opacity', .6); const node = root .append('g') .attr('class', 'node') .attr('stroke', '#fff') .attr('stroke-width', 1.5); const zoom = d3 .zoom() .extent([[0, 0], [width, height]]) .scaleExtent([1, 2]) .on('zoom', () => root.attr('transform', d3.event.transform)); svg.call(zoom); const lines = link .selectAll('line') .data(links, d => `${d.source.id}-${d.target.id}`) .join('line'); const circles = node .selectAll('circle') .data(nodes, d => d.id) .join('circle') .attr('r', 4) .attr('stroke', d => (d.application == null ? '#000' : applicationColor(d))) .attr('fill', d => (d.type === 'supervisor' ? '#fff' : applicationColor(d))) .on('click', d => svg.property('value', d).dispatch('input')) .on('mouseover', d => { circles.attr('opacity', 1); lines.attr('stroke-opacity', l => (l.source.id === d.id ? 1 : 0.2)); }) .on('mouseout', d => lines.attr('stroke-opacity', 0.6)) .call(drag(simulation)); simulation.on('tick', () => { link .selectAll('line') .attr('x1', d => d.source.x) .attr('y1', d => d.source.y) .attr('x2', d => d.target.x) .attr('y2', d => d.target.y); node .selectAll('circle') .attr('cx', d => d.x) .attr('cy', d => d.y); }); invalidation.then(() => simulation.stop()); return svg.node(); }39:T9a4,viewof iteration_5 = { const { nodes, links } = await visibility(iteration_5_data); const simulation = d3 .forceSimulation(nodes) .alpha(1) .force( 'link', d3 .forceLink(links) .id(d => d.id) .distance(25) .strength(d => d.source.links.length > 100 || d.target.links.length > 100 ? 0.2 : 1.7 ) .iterations(3) ) .force( 'charge', d3 .forceManyBody() .strength(d => (d.links.length > 0 ? -20 : -5)) .distanceMax(height - 50) ) .force("x", d3.forceX().x(width / 2)) .force("y", d3.forceY().y(height / 2)); const svg = d3 .create('svg') .attr('cursor', 'grab') .attr('viewBox', [0, 0, width, height]) .property( 'value', md`선택한 프로세스의 정보가 여기에 나타납니다.` ) .property('force', simulation); const root = svg.append('g'); const link = root .append('g') .attr('class', 'link') .attr('stroke', '#888') .attr('stroke-opacity', .6); const node = root .append('g') .attr('class', 'node') .attr('stroke', '#fff') .attr('stroke-width', 1.5); const zoom = d3 .zoom() .extent([[0, 0], [width, height]]) .scaleExtent([1, 2]) .on('zoom', () => root.attr('transform', d3.event.transform)); svg.call(zoom); const lines = link .selectAll('line') .data(links, d => `${d.source.id}-${d.target.id}`) .join('line'); const circles = node .selectAll('circle') .data(nodes, d => d.id) .join('circle') .attr('r', 4) .attr('stroke', d => (d.application == null ? '#000' : applicationColor(d))) .attr('fill', d => (d.type === 'supervisor' ? '#fff' : applicationColor(d))) .on('click', d => svg.property('value', d).dispatch('input')) .on('mouseover', d => { circles.attr('opacity', 1); lines.attr('stroke-opacity', l => (l.source.id === d.id ? 1 : 0.2)); }) .on('mouseout', d => lines.attr('stroke-opacity', 0.6)) .call(drag(simulation)); simulation.on('tick', () => { link .selectAll('line') .attr('x1', d => d.source.x) .attr('y1', d => d.source.y) .attr('x2', d => d.target.x) .attr('y2', d => d.target.y); node .selectAll('circle') .attr('cx', d => d.x) .attr('cy', d => d.y); }); invalidation.then(() => simulation.stop()); return svg.node(); }3a:T1a04,viewof iteration_6 = { const { nodes, links } = await visibility(iteration_6_data); if (this) { const svg = d3.select(this); const simulation = svg.property('force'); const root = svg.select('g'); const nodesEl = svg.select('.node').selectAll('circle'); const linksEl = svg.select('.link').selectAll('line'); simulation.nodes(nodes).alpha(1); simulation .force('link') .links(links) .distance(30) .strength(d => d.source.links.length > 100 || d.target.links.length > 100 ? 0.2 : 1.5 ) .iterations(3); simulation.restart(); simulation.on('tick', () => { svg .select('.link') .selectAll('line') .attr('x1', d => d.source.x) .attr('y1', d => d.source.y) .attr('x2', d => d.target.x) .attr('y2', d => d.target.y); svg .select('.node') .selectAll('circle') .attr('cx', d => d.x) .attr('cy', d => d.y); }); invalidation.then(() => simulation.stop()); linksEl.data(links, d => `${d.source.id}-${d.target.id}`).join('line'); nodesEl .data(nodes, d => d.id) .join('circle') .attr('r', 4) .attr('stroke', d => d.application == null ? '#000' : applicationColor(d) ) .attr('fill', d => d.type === 'supervisor' ? '#fff' : applicationColor(d) ) .on('click', d => svg.property('value', d).dispatch('input')) .on('mouseover', d => { nodesEl.attr('opacity', 1); linksEl.attr('stroke-opacity', l => (l.source.id === d.id ? 1 : 0.2)); }) .on('mouseout', d => linksEl.attr('stroke-opacity', 0.6)) .call(drag(simulation)); if (highlight.kernel_safe_sup) { const target = _.find(nodesEl.data(), d => d.name === 'kernel_safe_sup'); const neighbors = [ "pg2", "<0.73.0>", "timer_server", "inet_gethost_native_sup", "disk_log_sup", "disk_log_server", "inet_gethost_native", "<0.85.0>" ]; const targets = [...neighbors, target.name]; nodesEl.attr('opacity', d => _.some(targets, n => n === d.name) ? 1 : 0.2 ); linksEl .attr('stroke-opacity', 0.2) .filter( d => _.difference([d.source.name, d.target.name], targets).length == 0 ) .attr('stroke-opacity', 0.6); root .transition() .duration(750) .attr( 'transform', `translate(${width / 2 - target.x * 2},${height / 2 - target.y * 2}) scale(2)` ); svg.property('value', target); } else if (highlight.kernel_links) { const target = _.find(nodesEl.data(), d => d.name === 'kernel_safe_sup'); const _nodes = nodesEl .attr('opacity', 0.2) .filter(d => d.name === 'timer_server' || d.name === 'disk_log_server') .attr('opacity', 1); linksEl .attr('stroke-opacity', 0.2) .filter( d => d.source.name === 'timer_server' || d.target.name === 'timer_server' || d.source.name === 'disk_log_server' || d.target.name === 'disk_log_server' ) .attr('stroke-opacity', 0.6); root .transition() .duration(750) .attr( 'transform', `translate(${width / 2 - target.x * 2},${height / 2 - target.y * 2}) scale(2)` ); svg.property('value', _nodes.data()); } else if (highlight.kernel_noop) { const target = _.find(nodesEl.data(), d => d.name === '<0.70.0>'); nodesEl .attr('opacity', 0.2) .filter(d => d.name === '<0.70.0>') .attr('opacity', 1); linksEl.attr('stroke-opacity', 0.2); root .transition() .duration(750) .attr( 'transform', `translate(${width / 2 - target.x * 2},${height / 2 - target.y * 2}) scale(2)` ); svg.property('value', target); } else { nodesEl.attr('opacity', 1); linksEl.attr('stroke-opacity', 0.6).attr('marker-end', null); } return svg.node(); } const simulation = d3 .forceSimulation(nodes) .alpha(1) .force( 'link', d3 .forceLink(links) .id(d => d.id) .distance(30) .strength(d => d.source.links.length > 100 || d.target.links.length > 100 ? 0.2 : 1.5 ) .iterations(5) ) .force( 'charge', d3 .forceManyBody() .strength(d => (d.links.length > 0 ? -20 : -5)) .distanceMax(height - 50) ) .force("x", d3.forceX().x(width / 2)) .force("y", d3.forceY().y(height / 2)); const svg = d3 .create('svg') .attr('cursor', 'grab') .attr('viewBox', [0, 0, width, height]) .property( 'value', md`선택한 프로세스의 정보가 여기에 나타납니다.` ) .property('force', simulation); const root = svg.append('g'); const link = root .append('g') .attr('class', 'link') .attr('stroke', '#888') .attr('stroke-opacity', .6); const node = root .append('g') .attr('class', 'node') .attr('stroke', '#fff') .attr('stroke-width', 1.5); const zoom = d3 .zoom() .extent([[0, 0], [width, height]]) .scaleExtent([2, 2]) .on('zoom', () => root.attr('transform', d3.event.transform)); svg .call(zoom) .call( zoom.transform, d3.zoomIdentity.translate(-width / 2, -height / 2).scale(2) ); const lines = link .selectAll('line') .data(links, d => `${d.source.id}-${d.target.id}`) .join('line'); const circles = node .selectAll('circle') .data(nodes, d => d.id) .join('circle') .attr('r', 4) .attr('stroke', d => (d.application == null ? '#000' : applicationColor(d))) .attr('fill', d => (d.type === 'supervisor' ? '#fff' : applicationColor(d))) .on('click', d => svg.property('value', d).dispatch('input')) .on('mouseover', d => { circles.attr('opacity', 1); lines.attr('stroke-opacity', l => (l.source.id === d.id ? 1 : 0.2)); }) .on('mouseout', d => lines.attr('stroke-opacity', 0.6)) .call(drag(simulation)); simulation.on('tick', () => { link .selectAll('line') .attr('x1', d => d.source.x) .attr('y1', d => d.source.y) .attr('x2', d => d.target.x) .attr('y2', d => d.target.y); node .selectAll('circle') .attr('cx', d => d.x) .attr('cy', d => d.y); }); invalidation.then(() => simulation.stop()); return svg.node(); }3b:T16e8,md`## Insights 이 노트북을 작성하며 얻게된 생각들을 정리해봤습니다. **visualixir 는 프로세스간의 연결 관계를 구성할 때, \`Process.info\` 의 결과 중 \`:links\` 값만 사용합니다.** ~~~elixir iex> pid(0,84,0) |> Process.info(:links) {:links, [#PID<0.85.0>, #PID<0.43.0>]} ~~~ 링크는 Elixir 이 프로세스에서 발생한 에러를 다루는데 사용하는 동작입니다. 링크된 두 프로세스 중 한쪽 프로세스가 종료되면, 나머지 프로세스에 종료 메시지가 전달됩니다. 두 프로세스를 링크하기 위해서는 \`.start_link/3\` 혹은 \`Process.link/1\` 함수를 사용합니다. 프로세스의 링크 정보는 \`Process.info(pid, :links)\` 함수로 조회할 수 있습니다. 프로세스의 링크 정보를 force simulation 으로 배치하면 마치 계층적인 정보인것 처럼 보이지만, 그렇지 않습니다. 링크 함수를 호출하는데는 별다른 제약이 없으며, 양방향이라 한쪽에서 링크 함수를 실행하면 링크된 프로세스에도 정보가 기록됩니다. 계층 구조의 데이터라면 부모 - 자식으로 구분이 가능해야 합니다. 하지만 프로세스 링크 정보를 부모 - 자식 관계로 나누어가다보면 부모가 둘 이상이거나, 없는 프로세스들 때문에 변환이 불가능합니다. 계층 구조 데이터로 변환할 수 있다면 공간을 좀 더 효율적으로 사용할 수 있는 계층 구조 레이아웃을 사용해 표현할 수 있는데 이것이 불가능한 셈입니다. **observer 앱은 어떻게 프로세스들을 계층 구조로 표현하나?** Erlang [runtime_tools](http://erlang.org/doc/man/runtime_tools_app.html) 에 포함된 observer 앱에서는 어플리케이션 별로 프로세스의 구조를 계층 구조 레이아웃 중 하나인 dendrogram 과 유사하게 보여줍니다. 프로세스들의 연결관계를 부모 - 자식 관계로 나눌 수 있는 기준이 존재한다는 것을 깨달은 저는 [Erlang 의 저장소](https://github.com/erlang/otp)를 뒤져 [appmon_info](https://github.com/erlang/otp/blob/a18ec86bb6f860456af992d78abf0dae51bb713a/lib/runtime_tools/src/appmon_info.erl) 프로세스의 코드를 찾아내었습니다. \`appmon_info\` 프로세스는 node 에서 시작된 프로세스들을 어플리케이션 별로 나누어 tree 형태로 저장합니다. observer 앱은 \`appmon_info\` 프로세스를 통해 어플리케이션 별로 프로세스들의 관계를 조회하고, 표현합니다. Iteration 6 의 결과로 볼때, appmon_info 는 링크 정보를 사용하지 않으며, 어플리케이션에 포함된 모든 프로세스들을 저장하지 않습니다. 하지만 \`appmon_info\` 의 데이터는 supervisor 프로세스를 기준으로 [supervision tree](http://erlang.org/doc/design_principles/des_princ.html#supervision-trees) 를 정확하게 표현합니다. \`appmon_info\` 프로세스는 runtime_tools 에 포함되어 있으며, observer 앱과 함께 실행되지만, 필요하면 직접 실행할 수 있습니다. ~~~elixir iex> :appmon_info.start_link(node(), self(), []) {:ok, #PID<0.113.0>} iex> Process.whereis(:appmon_info) |> :appmon_info.app(:kernel, true, []) :ok iex> flush() {:delivery, #PID<0.113.0>, :app, :kernel, {'<0.45.0>', [ {#PID<0.68.0>, 'logger_sup'}, {#PID<0.69.0>, 'logger_handler_watcher'}, #... ~~~ **visualixir 는 프로세스들의 관계를 제대로 표현하는가?** visualixir 를 분석하기 전에는 이런 궁금증은 없었습니다. 하지만 observer 와 visualixir 의 표현이 다르다는 것을 알게되고, \`appmon_info\` 프로세스의 코드를 분석하면서, visualixir 가 표현하는 방식이 Elixir 프로세스들의 관계를 제대로 표현하는 것인지 생각해보게 되었습니다. visualixir 는 앞서 살펴본 대로 프로세스들 간의 링크 정보를 활용합니다. 시스템에서 실행중인 프로세스들을 모두 조회해서 배치한 후 링크 정보를 표현하기 때문에 Node 에 실행중인 프로세스들을 빠짐없이 확인할 수 있습니다. 하지만 링크 정보는 계층 구조가 아니기 때문에 효율적인 배치는 불가능합니다. 또한 링크 정보는 Elixir node 를 이해하는데 반드시 필요한 정보는 아닙니다. 프로세스간의 message passing 과 supervisor - children 관계가 Elixir node 의 수많은 프로세스를 이해하는데 더 도움이 됩니다. visualixir 의 표현방식은 모든 프로세스가 화면에 배치되기 때문에 message passing 을 표현할 수 있습니다. *visualixir 의 message passing * \`appmon_info\` 는 실행중인 모든 프로세스를 확인할 수는 없습니다. superivor 프로세스를 중심으로 supervision tree 를 표현하기 때문입니다. 프로세스를 감시하고 종료되었을 때 다시 실행하는 superivor 프로세스와 자식 프로세스의 관계는 Fault Tolerance 의 기반이 되는 개념으로 매우 중요합니다. 이 관계를 표현하는 것은 시스템을 이해하고 다루는데 도움이 됩니다. supervision tree 는 계층구조이기 때문에 화면에 효율적으로 배치될 수 있습니다. 하지만 모든 프로세스가 supervision tree 에 포함되는 것은 아니기 때문에 message passing 을 표현하기 어렵습니다. | 데이터 | 표현 방식 | message passing ---|---|---|--- \`visualixir\` | 프로세스간 링크 정보 | force simulation | 표현 가능 \`appmon_info\` | supervision tree | hierarchy (force simulation 포함) | 표현 불가능
`3c:T52c,class MockChannel { constructor(topic) { this.mocked = true; this.topic = topic; this.callbacks = {}; this.state = 'closed'; } _callback(event, ...data) { if (this.callbacks[event]) { this.callbacks[event].forEach(cb => cb(...data)); } } join() { this.state = 'joined'; setTimeout(() => this._callback('ok', { nodes: ['mock@node'] })); return this; } receive(event, callback) { const cb = this.callbacks[event]; if (cb) { cb.push(callback); } else { this.callbacks = { ...this.callbacks, [event]: [callback] }; } return this; } push(event) { if (event === 'visualize') { setTimeout(async () => { const data = await FileAttachment("mock.json") .json() .then(d => { const pids = _.mapValues(d.pids, v => ({ ...v, node: 'mock@node' })); return { pids, links: d.links }; }); this._callback('visualize_node', data); }); } return this; } on(event, callback) { this.callbacks = { ...this.callbacks, [event]: [callback] }; return this; } off(event) { return this; } leave() { return this; } mock(event, data) { this._callback(event, data); return this; } }3d:Taa6,stepData = [ { step: 1, diagram: mermaid`graph LR VisualixirNode TargetNode VisualixirNode -.-> epmd TargetNode -.-> epmd `, md: md`### Step 1 모든 node 는 실행과 동시에 자신의 이름과 메시지를 보낼 수 있는 port 를 [epmd](http://erlang.org/doc/man/epmd.html) (erlang port mapper daemon) 에 등록합니다. ` }, { step: 2, diagram: mermaid`graph LR VisualixirNode TargetNode VisualixirNode -.-> TargetNode TargetNode -.-> VisualixirNode `, md: md`### Step 2 각각의 node 는 epmd 를 통해 데이터를 전달할 node 의 port 를 조회할 수 있습니다. 같은 \`cookie\` 정보를 가지고 있는 node 면, 메시지를 주고받을 수 있습니다.` }, { step: 3, diagram: mermaid`graph LR subgraph VisualixirNode tracer visualixir_web end subgraph TargetNode delivered_tracer end tracer -. send_module .-> delivered_tracer style delivered_tracer stroke-dasharray: 5,5,fill-opacity: .4; `, md: md`### Step 3 node 간 메시지 전달이 가능해지면, tracer 모듈은 자신의 코드를 target node 로 보내고 로드합니다.` }, { step: 4, diagram: mermaid`graph LR subgraph TargetNode delivered_tracer app end subgraph VisualixirNode tracer visualixir_web end visualixir_web -- trace --> delivered_tracer delivered_tracer -- result --> visualixir_web delivered_tracer --trace--> app style delivered_tracer stroke-dasharray: 5,5,fill-opacity: .4; `, md: md`### Step 4 visualixir_web 모듈은 delivered_tracer 모듈에 메시지를 보내서 TargetNode 의 다른 프로세스들을 추적합니다. delivered_tracer 는 [erlang:trace](http://erlang.org/doc/man/erlang.html#trace-3) 을 포함한 BIF (Built In Function) 들을 사용해 target node 의 정보를 추적합니다. 추적한 결과는 visualixir_web 으로 전달됩니다.` }, { step: 5, diagram: mermaid`graph LR subgraph VisualixirNode tracer visualixir_web end visualixir_web --> client style client fill:pink,fill-opacity:.4,stroke:pink; `, md: md`### Step 5 visualixir_web 모듈은 Phoenix Channel 을 사용해 결과를 클라이언트(브라우져)로 전달합니다.` }, { step: 6, diagram: mermaid`graph LR subgraph VisualixirNode tracer visualixir_web end subgraph TargetNode delivered_tracer end tracer -. cleanup .-> delivered_tracer[" "] style delivered_tracer stroke-dasharray: 5,5,fill-opacity: .4; `, md: md`### Step 6 trace 가 끝나면, cleanup 메시지를 보내 TargetNode 의 delivered_tracer 를 삭제합니다.` } ]3e:[{"id":"66b43b67781091b0de3b365974bc2ba6c106347663d76df8333cfdafcf03c77f0b14473d69917e6c7a4cef41e7f8c751d51c69289c3e0ce57d6147542049fdfc","href":"https://static.observableusercontent.com/files/66b43b67781091b0de3b365974bc2ba6c106347663d76df8333cfdafcf03c77f0b14473d69917e6c7a4cef41e7f8c751d51c69289c3e0ce57d6147542049fdfc","name":"daybitMock.json","type":"application/json","lastModified":1579098647826.929,"size":298031},{"id":"d0b5b80f5c4d25f4d4a2068b16a4f3e0b0454c78fb449b99962972bc2d99678ea3b8500271cecf9e1a4a816dadc47b25f2a51d79ac46d8517f8659e3c2624939","href":"https://static.observableusercontent.com/files/d0b5b80f5c4d25f4d4a2068b16a4f3e0b0454c78fb449b99962972bc2d99678ea3b8500271cecf9e1a4a816dadc47b25f2a51d79ac46d8517f8659e3c2624939","name":"mock.json","type":"application/json","lastModified":1579098773336.797,"size":39459}] 2f:{"id":"a898c96f2d696f93","slug":"visualixir-on-observable-notebook","title":"Visualixir on Observable Notebook","thumbnail":"ee9b691a1f485d6aaa41bdf346c84fcc4050b295ecf4969e864234e974679f94","access_level":"public","create_time":"$D2019-07-27T17:57:17.949Z","update_time":"$D2021-09-08T05:42:47.297Z","view_time":null,"first_public_time":"$D2020-01-06T18:56:01.594Z","fork":false,"stars":18,"starred":false,"owner":{"type":"team","id":"56a62604da372f41","login":"chitacan","name":"KyungYeol Kim","avatar_url":"https://avatars-next.observableusercontent.com/ebe2bc4618021a6392db1d0169bbe2af3520871861d6f0659384f97da78200ce","tier":"starter_2024"},"version":3113,"publish_version":3113,"role":null,"authored":false,"authors":[{"type":"individual","id":"e4a45eb07cd703f7","login":"chitacan","name":"KyungYeol Kim","avatar_url":"https://avatars-next.observableusercontent.com/ebe2bc4618021a6392db1d0169bbe2af3520871861d6f0659384f97da78200ce","tier":null}],"members":[{"type":"individual","id":"e4a45eb07cd703f7","login":"chitacan","name":"KyungYeol Kim","avatar_url":"https://avatars-next.observableusercontent.com/ebe2bc4618021a6392db1d0169bbe2af3520871861d6f0659384f97da78200ce","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":2,"collection":{"id":"6d39e1a0c0d88bcd","slug":"blog","title":"Blog","owner":{"id":"56a62604da372f41","login":"chitacan","name":"KyungYeol Kim"}},"type":"notebook","body":{"title":"Visualixir on Observable Notebook","cells":[{"id":0,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":218,"value":"mermaid`graph LR\n subgraph Target Node\n delivered_tracer\n app\n end\n\n subgraph Visualixir Node\n visualixir_web\n tracer\n end\n\n visualixir_web -.-> tracer\n tracer -- load --> delivered_tracer\n visualixir_web -- request trace --> delivered_tracer\n delivered_tracer -- result --> visualixir_web\n delivered_tracer --trace--> app\n visualixir_web --> client\n\n style delivered_tracer stroke-dasharray: 5,5,fill-opacity: .4;\n style client fill:pink,fill-opacity:.4,stroke:pink;\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":153,"value":"viewof step = {\n let currentStep = 0\n const prev = html``\n const next = html``\n const root = md`visualixir 가 target node 의 프로세스들을 추적하는 과정을 살펴보고 정리해봤습니다. ${prev} ${next} 버튼으로 탐색할 수 있습니다.`\n \n prev.addEventListener('click', e => {\n if (currentStep == 0) {\n currentStep = stepData.length - 1\n } else {\n currentStep -= 1\n }\n root.value = stepData[currentStep]\n root.dispatchEvent(new CustomEvent('input'))\n })\n next.addEventListener('click', e => {\n if (currentStep == stepData.length - 1) {\n currentStep = 0\n } else {\n currentStep += 1\n }\n root.value = stepData[currentStep]\n root.dispatchEvent(new CustomEvent('input'))\n })\n root.value = stepData[0]\n return root\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":140,"value":"step.md","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"step.diagram","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":178,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2698,"value":"md`## Channels\n\nvisualixir_web 모듈은 [Phoenix Channel](https://hexdocs.pm/phoenix/channels.html) 을 통해 접속한 클라이언트들을 관리하고, target node 의 정보를 클라이언트로 전달합니다. visualixir_web 모듈은 2개의 channel 을 가지고 있습니다.\n\n* \\`nodes channel\\`: visualixir 에 연결된 node 들의 정보를 받고, trace 를 수행 할 node 를 선택할 수 있습니다.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2706,"value":"mermaid`\nsequenceDiagram\n participant client\n participant visualixir\n client->>+visualixir: \"join\"\n visualixir-->>client: \"ok\"\n Note over client,visualixir: nodes\n client->>visualixir: \"add\"\n client->>visualixir: \"visualize\"\n client->>visualixir: \"cleanup\"\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2702,"value":"md`* \\`trace: channel\\`: 선택된 node 에서 실행중인 프로세스들에 대한 정보, 프로세스 이벤트 (spawn, exit, link, unlink) 정보를 받을 수 있습니다.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2715,"value":"mermaid`\nsequenceDiagram\n participant client\n participant visualixir\n client->>+visualixir: \"join\"\n visualixir-->>client: \"ok\"\n visualixir-->>client: \"visualize_node\"\n visualixir-->>client: \"spawn\", pid\n visualixir-->>client: \"exit\"\n visualixir-->>client: \"link\"\n visualixir-->>client: \"unlink\"\n visualixir-->>client: \"msg\"\n visualixir-->>client: \"cleanup\"\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2945,"value":"md`[phoenix.js](https://github.com/phoenixframework/phoenix/blob/master/assets/js/phoenix.js) 를 사용하면 노트북에서 Phoenix Channel 을 통해 visualixir 서버와 메시지를 주고 받을 수 있습니다. phoenix.js 라이브러리는 npm 에 배포되어 있어 손쉽게 노트북에 가져올 수 있습니다.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":310,"value":"Phx = require('phoenix@1.5.0')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2983,"value":"md`메시지를 보내기에 앞서 WebSocket 연결과 Channel 을 생성합니다.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2952,"value":"tempSocket = {\n const socket = new Phx.Socket('wss://api.daybit.com/v1/socket');\n socket.connect();\n return socket;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2962,"value":"tempChannel = new Promise((resolve, reject) => {\n const channel = tempSocket.channel('/api');\n channel.join().receive('ok', () => resolve(channel));\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2986,"value":"md`\\`channel.push\\` 함수를 사용해 서버로 메시지를 보내고 결과를 받을 수 있습니다.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2964,"value":"new Promise((resolve, reject) => {\n tempChannel\n .push('get_server_time', { timestamp: new Date() * 1000 })\n .receive('ok', d => resolve(d.data))\n .receive('error', d => reject(d.error_code));\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":267,"value":"md`하지만 매번 phoenix.js 로 channel 을 생성하는 코드를 작성하는 것은 꽤 수고로운 작업입니다. 노트북에서 \\`nodes channel\\`, \\`trace: channel\\` 을 빠르게 해킹하기 있도록 두 채널을 사용하는데 필요한 함수들을 \\`Node\\`, \\`Trace\\` 클래스에 만들어 두었습니다.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":356,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":333,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1815,"value":"md`## Connect Channels\n\nvisualixir 가 localhost:4000 에 실행중이라면 아래 **Node 목록** 에서 trace 를 실행할 서버를 선택할 수 있습니다. visualixir 접속할 수 없는 상황이라도 괜찮습니다. websocket 서버에 연결하는 코드에서 오류가 발생하면, 미리 준비해둔 mocking 용 노드 (\\`mock@node\\`) 와 [mocking 용 데이터](https://gist.github.com/chitacan/d6255f279af31ecf61109d16bed34ba2)를 사용합니다. 바로 아래 셀에서 노트북이 사용중인 데이터를 표시합니다.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1416,"value":"md`**사용중인 데이터** ${status('mocking 데이터를 사용합니다.', {\n opacity: node.channel.mocked ? 1 : 0.4\n})} ${status('visualixir 데이터를 사용합니다.', {\n statusColor: 'green',\n opacity: !node.channel.mocked ? 1 : 0.4\n})}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":442,"value":"viewof selected = radio({\n title: 'Node 목록',\n description: 'select node and see below cells',\n options: nodes,\n value: nodes[0]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1301,"value":"result = trace.subscribe()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1500,"value":"md`## Iteration with Observable Notebook\n\nvisualixir 는 [force simulation](https://observablehq.com/collection/@d3/d3-force) 을 사용해 target node 의 프로세스와 그 관계를(\\`link\\`, \\`unlink\\`) 시각화 합니다. 아주 멋지지만, 노트북에서 가져와 사용하기는 쉽지 않습니다. 힘들여 visualixir 의 클라이언트를 노트북에 옮기기 보다는 노트북에 맞는 force simulation 을 새롭게 작성하는 것이 더 좋다고 판단했습니다.\n\n작성해 나가는 과정에서 나온 결과물들을 최대한 노트북에 남기면서 작업했습니다. 각각의 결과물들은 독립적으로 동작하는 force simulation 이지만, 같은 데이터 [result](#result) 에 의존하고 있습니다. Phoenix 채널을 통해 [result](#result) 가 업데이트 되면, [result](#result) 에 의존하고 있는 결과물들도 업데이트 됩니다. [result](#result) 값이 업데이트 되면, **생각이 발전하는 과정도 업데이트 됩니다.** 단순하지만 아주 강력한 개발 모델 입니다.\n\n[codepen](https://codepen.io) 이나 [jsbin](https://jsbin.com) 에서 작업을 진행했다면, 중간 과정들은 버리고 마지막 결과물만 저장했을 것입니다. 좀 더 나은 결과물을 위해서 이리저리 탐색하며 고민하고 발전하는 과정은 없었던 것처럼 말입니다.\n\n### Interation 1\n\n별다른 고민없이 transform 함수로 변환한 데이터를 그대로 force simulation 에 넣어 돌려봤습니다. \\`traceResult.pids\\`는 \\`\\` 에, \\`traceResult.links\\` 는 \\`\\` 에 바인드 했습니다.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1428,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1932,"value":"md`### Iteration 2\n\nIteration 1 에는 문제가 있습니다. 데이터가 업데이트 될 때마다, 화면이 새롭게 그려집니다. 화면을 그리는데 사용한 데이터와 결과물(svg) 을 재활용하지 않기 때문입니다. 셀에서 \\`this\\` 는 [셀이 이전에 리턴한 값입니다.](https://observablehq.com/@tmcw/untitled/5) \\`this\\` 를 활용해 변경된 데이터만 화면에 반영되도록 코드를 바꾸었습니다.\n\n프로세스들 간 연결 관계는 어느정도 알아볼만 합니다만, ${highlighter(\n '연결이 없는 프로세스들은 중심부에서',\n 'outsider'\n)} 멀리 배치되어, 존재를 알기 쉽지 않습니다.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1922,"value":"iteration_2_data = mergeResult(this, transform(result))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1918,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1509,"value":"md`### Iteration 3\n\n프로세스들의 배치를 변경하기 위해, centering force 를 positioning force 로 변경했습니다. 화면 밖으로 벗어나는 프로세스들을 많이 줄일 수 있습니다. 하지만 제한된 공간에 모든 프로세스가 배치되다보니, 링크가 복잡해지고 프로세스 구분이 어려워집니다. 우선 \\`\\` 엘리먼트에 바인드된 프로세스의 정보를 바로 알 수 있도록 클릭 이벤트 핸들러를 추가했습니다.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1675,"value":"iteration_3_data = mergeResult(this, transform(result))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1512,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1544,"value":"iteration_3","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1515,"value":"md`### Iteration 4\n\n프로세스들간의 구분이 어려워진 문제를 해결하기 위해, application 별로 [schemeCategory10](https://github.com/d3/d3-scale-chromatic/blob/master/README.md#schemeCategory10) 컬러 스케일을 추가했습니다. application 을 알 수 없는 프로세스는 ${highlighter(html``, 'no_app')} 로 표시합니다. 프로세스들간의 연결관계가 명확하게 드러날 수 있도록 force simulation 의 link, charge 값을 조절했습니다. 연결관계가 ${highlighter('너무 많거나', 'too_many_links')}, ${highlighter('없는 경우', 'no_links')} 별도의 값이 적용되도록 코드를 변경했습니다.\n\n8배까지 확대할 수 있었던 줌 범위는 [1, 2] 로 2배까지 확대할 수 있도록 설정했습니다.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1722,"value":"iteration_4_data = mergeResult(this, transform(result))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1524,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1541,"value":"iteration_4","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1809,"value":"md`프로세스의 갯수는 ${Object.keys(result.pids).length} 개 정도지만, 원하는 프로세스를 곧바로 찾는 것은 쉽지 않습니다. 그래서 pid 또는 프로세스 이름을 입력하면 관련된 프로세스들을 강조하는 [text](https://observablehq.com/@jashkenas/inputs#text) 폼을 만들었습니다. 어지럽게 배치된 프로세스들 중에서 원하는 프로세스를 빠르게 찾을 수 있습니다. 이 정도면 Elixir 의 프로세스를 시각화 하기에 꽤 쓸만한 레이아웃이란 생각이 듭니다.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1525,"value":"viewof process = textInput({\n description: 'click find to highlight process',\n submit: 'find',\n placeholder: 'pid or name',\n defaultText: 'kernel_sup'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1848,"value":"md`### Iteration 5\n\nIteration 4 에 적용된 배치 방법들이 데이터가 많을 때에도 유효한지 궁금해 졌습니다. 기본적으로 1000 개 이상의 프로세스가 사용되는 [데이빗](https://daybit.com)의 API 서버의 프로세스 정보를 가져와 Iteration 4 에서 사용한 시각화 코드에 적용해 보았습니다.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2515,"value":"iteration_5_data = mergeResult(this, transform(daybitResult, 'daybit@cmbp'))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2318,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2338,"value":"iteration_5","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2439,"value":"md`프로세스의 갯수가 적을 때에는 force simulation 만으로도 프로세스들을 탐색하는데 충분했습니다. 하지만 프로세스가 많아지니 앱 하나의 구조를 한번에 파악하기도 쉽지 않아 보입니다. 자유롭게 노드들이 배치되는 force simulation 보다는 좀 더 많은 공간을 사용하더라도, 규칙적으로 배치될 수 있는 [계층 구조 레이아웃](https://observablehq.com/collection/@d3/d3-hierarchy)이 프로세스들을 구조적으로 파악하는데 좀 더 유리하다는 생각이 들었습니다.\n\n계층 구조 레이아웃을 사용하기 위해서는 데이터, 특히 링크 데이터(\\`result.links\\`)를 계층 구조 레이아웃에 맞게 변환해야 합니다. 그러기 위해서는 명확한 부모 - 자식 관계가 필요한데, 안타깝게도 visualixir 의 링크 데이터만으로는 부모 - 자식 관계를 알기 어렵습니다. \\`result.links\\` 데이터는 일정한 방향 (부모 ➡️ 자식 또는 자식 ➡️ 부모) 을 기준으로 생성되지 않기 때문입니다.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1833,"value":"md`### Iteration 6\n\n또한 링크 데이터를 사용해 표현한 결과가 [observer](http://erlang.org/doc/man/observer.html) 의 application window 와 미묘하게 다르다는 것을 발견했습니다. \\`kernel\\` 어플리케이션에서 ${highlighter(\n 'kernel_safe_sup'\n)} 프로세스와 자식들의 구조는 observer 의 그것과 조금 달라보입니다. 배치도 다른 데다, observer 에는 ${highlighter(\n '볼 수 없는 링크',\n 'kernel_links'\n)}나 ${highlighter('프로세스', 'kernel_noop')}가 보이기도 합니다.\n\n![image](https://user-images.githubusercontent.com/286950/62837703-76ccad00-bcad-11e9-8fa9-4fb40caaca2c.png)\n\n*observer 의 application window 에서 확인한 kernel 어플리케이션의 kernel_safe_sup 프로세스*\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2518,"value":"iteration_6_data = {\n const result = transform(daybitResult, 'daybit@cmbp')\n const nodeIds = _.chain(result.nodes)\n .filter(d => d.application === 'kernel')\n .map(d => d.id)\n .value()\n\n const links = _.chain(result.links)\n .filter(({source, target}) => _.some(nodeIds, i => i === source || i == target))\n .uniqBy(({source, target}) => [source, target].sort().join(','))\n .value()\n \n const nodes = _.chain(links)\n .map(({source, target}) => [source, target])\n .flatten()\n .uniq()\n .map(d => _.find(result.nodes, n => n.id === d))\n .value()\n return {nodes, links}\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2451,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2456,"value":"iteration_6","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":428,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3048,"value":"md`## What's Next?\n\n이번에 자세히 살펴보지 못한 visualixir 의 message passing 코드를 좀 더 살펴볼 생각입니다. visualixir 의 구현도 멋지지만, Elixir 코드를 작성하는 사용하기에는 아직 불편하다고 생각합니다. 다른 가능성과 개선점을 탐색해보고, 찾아낸 개선점들은 프로젝트에 기여해보려 합니다.\n\n\\`appmon_info\\` 프로세스를 중심으로 observer 도구의 정보를 노트북으로 가져오는 것도 실험해보려 합니다. 이것이 가능하다면 구리고 해킹하기도 어려운 [wx](https://erlang.org/doc/man/wx.html) 로 만들어진 observer 에서 벗어나 좀 더 최신의 도구들로 Elixir 프로세스들을 탐색할 수 있을지도... 아무튼 그렇습니다.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":175,"value":"md`---\n\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1283,"value":"node.visualize(selected)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1430,"value":"height = 400","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2260,"value":"viewof highlight = new View({})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1528,"value":"textInput = (opts) => {\n const {defaultText = '', ...rest} = opts\n const form = text(rest)\n // form.value = defaultText\n form.input.value = defaultText\n // form.dispatchEvent(new CustomEvent('input'))\n return form\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1497,"value":"highlighter = (text, key = text) => {\n const view = viewof highlight\n const el = (typeof text === 'string') ?\n html`${text}` :\n text\n el.addEventListener('mouseover', () => {\n view.value = {...view.value, ...{[key]: true}}\n })\n el.addEventListener('mouseout', () => {\n view.value = {...view.value, ...{[key]: false}}\n })\n el.value = {...view.value, ...{[key]: false}}\n el.dispatchEvent(new Event('input'))\n return el\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1532,"value":"searched = {\n return {\n value: process,\n highlight: !!this ? (!this.highlight) : false\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2315,"value":"daybitResult = await FileAttachment(\"daybitMock.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1422,"value":"transform = (result, node = selected) => {\n const nodes = _.chain(result.pids)\n .map((v, k) => ({...v, id: k}))\n .filter(d => d.node === node)\n .value()\n\n const links = _.chain(nodes)\n .map(({links, id}) => links.map(l => ({source: id, target: l})))\n .flatten()\n .filter(({target, source}) => result.pids[target] && result.pids[source])\n .uniqBy(({source, target}) => [source, target].sort().join(','))\n .value()\n\n return {nodes, links}\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1668,"value":"mergeResult = (prev, curr) => {\n if (prev) {\n return {\n nodes: _.map(curr.nodes, n => {\n const p = _.find(prev.nodes, d => d.id === n.id)\n if (p) {\n return {\n ...n,\n ...p\n }\n }\n return n\n }),\n links: curr.links\n }\n }\n return curr\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1535,"value":"applicationColor = {\n const scale = d3.scaleOrdinal(d3.schemeCategory10)\n return d => d.application == null ? '#fff' : scale(d.application)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1346,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1358,"value":"class MockSocket {\n constructor() {\n this._channel = new MockChannel()\n }\n \n channel(topic) {\n return this._channel\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":366,"value":"nodes = node.subscribe()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":362,"value":"node = Node.create()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1275,"value":"trace = Trace.create()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":317,"value":"socket = {\n let mocked = false;\n return Generators.observe(notify => {\n const socket = new Phx.Socket('ws://localhost:4000/socket');\n socket.connect();\n socket.onOpen(() => {\n mocked = false;\n notify(socket);\n });\n socket.onError(e => {\n console.error(`socket connecetion: ${socket.connectionState()}`);\n if (!mocked) {\n mocked = true;\n notify(new MockSocket());\n }\n });\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":102,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2010,"value":"defs = root => {\n const defs = root.append('defs')\n defs.append('marker')\n .attr('id', 'triangle')\n .attr('refX', 18)\n .attr('refY', 0)\n .attr('markerWidth', 6)\n .attr('markerHeight', 6)\n .attr('viewBox', '0 -5 10 10')\n .attr('orient', 'auto')\n .append('path')\n .attr('d', 'M0,-5L10,0L0,5')\n .style('fill', 'tomato')\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1017,"value":"function autoBox() {\n const {x, y, width, height} = this.getBBox();\n return [x, y, width, height];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1186,"value":"drag = simulation => {\n \n function dragstarted(d) {\n if (!d3.event.active) simulation.alphaTarget(0.3).restart();\n d.fx = d.x;\n d.fy = d.y;\n }\n \n function dragged(d) {\n d.fx = d3.event.x;\n d.fy = d3.event.y;\n }\n \n function dragended(d) {\n if (!d3.event.active) simulation.alphaTarget(0);\n d.fx = null;\n d.fy = null;\n }\n \n return d3.drag()\n .on(\"start\", dragstarted)\n .on(\"drag\", dragged)\n .on(\"end\", dragended);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":549,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"mermaidPkg = require('mermaid@8.4.4/dist/mermaid.min.js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"function mermaid(...args) {\n let div = document.createElement('div')\n div.innerHTML = mermaidPkg.mermaidAPI.render(`mermaid-render-element-${guid()}`, String.raw(...args))\n return div\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"function guid() {\n\treturn 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {\n\t\tvar r = Math.random()*16|0, v = c == 'x' ? r : (r&0x3|0x8);\n\t\treturn v.toString(16);\n\t});\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":398,"value":"_ = require('lodash')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":511,"value":"d3 = require('d3@5')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":112,"value":"import {slider, radio, autoSelect, button, text} from '@jashkenas/inputs'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1487,"value":"import {View} from '@mbostock/synchronized-views'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2047,"value":"import {status} from '@chitacan/labels'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2641,"value":"import {icon} from '@chitacan/rss'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":188,"value":"html`