feat(xod-client, xod-project, xod-arduino): make the new user-friendl…

…y table-log works fine, show correct labels and etc

packages/xod-arduino/src/transpiler.js

@@ -829,7 +829,7 @@ export const getTableLogNodeIds = def(
   R.compose(
     R.map(R.prop('originalId')),
     R.filter(
-      R.compose(R.propEq('patchPath', XP.TABLELOG_NODETYPE), R.prop('patch'))
+      R.compose(R.propEq('patchPath', XP.TSV_LOG_NODETYPE), R.prop('patch'))
     ),
     R.prop('nodes')
   )

packages/xod-client/src/debugger/selectors.js

@@ -11,7 +11,7 @@ import { DEBUGGER_TAB_ID } from '../editor/constants';
 import { SESSION_TYPE } from './constants';
 
 import { createMemoizedSelector } from '../utils/selectorTools';
-import { getTableLogSourceLabels } from './utils';
+import { getTableLogSourceLabels, removeLastNodeIdInChain } from './utils';
 
 export const getDebuggerState = R.prop('debugger');
 
@@ -186,7 +186,14 @@ export const getInteractiveNodeValuesForCurrentPatch = createSelector(
               sheets[lastSheetIndex].length
             }`;
           }),
-          filterOutValuesForCurrentPatch(activeIndex, nodeIdPath)
+          filterOutValuesForCurrentPatch(activeIndex, nodeIdPath),
+          // `tsv-log`, which is actually stores the data, encapsulated
+          // inside `table-log`, which label should be replaced with
+          // this value. So we have to cut the latest nodeId part from
+          // keys of table log values map
+          R.fromPairs,
+          R.map(R.over(R.lensIndex(0), removeLastNodeIdInChain)),
+          R.toPairs
         )(tableLogs);
 
         return R.merge(watchNodeValues, tableLogValues);

packages/xod-client/src/debugger/utils.js

@@ -39,6 +39,9 @@ export const getTetheringInetNodeId = R.curry(
 
 export const isErrorMessage = R.propEq('type', UPLOAD_MSG_TYPE.ERROR);
 
+// `a~b~c` -> `a~b`
+export const removeLastNodeIdInChain = R.replace(/(~[^~]+)$/, '');
+
 // :: Project -> [NodeId] -> PatchPath -> [{ nodeId: NodeId, label: String }]
 export const getTableLogSourceLabels = R.curry(
   (project, sourceNodeIds, rootPatchPath) =>
@@ -98,7 +101,7 @@ export const getTableLogSourceLabels = R.curry(
             },
             R.applySpec({
               nodeId: R.always(nodeId),
-              chunks: R.identity,
+              chunks: R.init, // Get rid of last NodeId, which points to internal `tsv-log`
             })
           ),
           R.map(

packages/xod-client/src/editor/actions.js

@@ -47,6 +47,7 @@ import * as DebuggerSelectors from '../debugger/selectors';
 
 import { parseDebuggerMessage } from '../debugger/debugProtocol';
 import { addMessagesToDebuggerLog } from '../debugger/actions';
+import { removeLastNodeIdInChain } from '../debugger/utils';
 import runWasmWorker from '../workers/run';
 import { getAccessToken } from '../user/selectors';
 import { updateBalances } from '../user/actions';
@@ -964,7 +965,14 @@ export const openTableLogTab = nodeId => (dispatch, getState) => {
     R.ifElse(
       R.contains(nodeId),
       () => Maybe.of(nodeId),
-      R.compose(Maybe, R.find(R.endsWith(nodeId)))
+      R.compose(
+        Maybe,
+        // `tsv-log`, which is actually stores the table log values
+        // is encapsulated inside `table-log` node, which node id
+        // is passed in this function so we need to find nodeId
+        // with a prefix with unknown nodeId: `${nodeId}~someNodeId`
+        R.find(R.compose(R.endsWith(nodeId), removeLastNodeIdInChain))
+      )
     ),
     R.unnest,
     R.values,

packages/xod-client/src/project/components/Node.jsx

@@ -11,6 +11,7 @@ import { noop } from '../../utils/ramda';
 import { isPinSelected } from '../../editor/utils';
 
 import RegularNodeBody from './nodeParts/RegularNodeBody';
+import TableLogNodeBody from './nodeParts/TableLogNodeBody';
 import WatchNodeBody from './nodeParts/WatchNodeBody';
 import TweakNodeBody from './nodeParts/TweakNodeBody';
 import TerminalNodeBody from './nodeParts/TerminalNodeBody';
@@ -115,7 +116,7 @@ class Node extends React.Component {
     return R.cond([
       [XP.isTerminalPatchPath, () => <TerminalNodeBody {...this.props} />],
       [XP.isWatchPatchPath, () => <WatchNodeBody {...this.props} />],
-      [XP.isTableLogPatchPath, () => <WatchNodeBody {...this.props} />],
+      [XP.isTableLogPatchPath, () => <TableLogNodeBody {...this.props} />],
       [XP.isConstantNodeType, () => <ConstantNodeBody {...this.props} />],
       [XP.isBindableCustomType, () => <ConstantNodeBody {...this.props} />],
       [XP.isTweakPath, () => <TweakNodeBody {...this.props} />],

packages/xod-client/src/project/components/nodeParts/TableLogNodeBody.jsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import * as XP from 'xod-project';
+
+import { NODE_CORNER_RADIUS } from '../../nodeLayout';
+import NodeLabel from './NodeLabel';
+import VariadicHandle from './VariadicHandle';
+
+const NODE_BODY_RECT_PROPS = {
+  rx: NODE_CORNER_RADIUS,
+  ry: NODE_CORNER_RADIUS,
+  // pxSize is set in root svg, let's occupy it all
+  width: '100%',
+  height: '100%',
+};
+
+const TableLogNodeBody = props => (
+  <g className={classNames('watch-node', { active: props.isDebugSession })}>
+    <rect className="body" {...NODE_BODY_RECT_PROPS} />
+    <NodeLabel
+      text={props.nodeValue || props.label || XP.getBaseName(props.type)}
+      width={props.pxSize.width}
+      height={props.pxSize.height}
+    />
+    <rect className="outline" {...NODE_BODY_RECT_PROPS} />
+    <VariadicHandle
+      pxSize={props.pxSize}
+      onMouseDown={event => {
+        event.stopPropagation();
+        props.onVariadicHandleDown(event, props.id);
+      }}
+    />
+  </g>
+);
+
+TableLogNodeBody.propTypes = {
+  id: PropTypes.string,
+  type: PropTypes.string,
+  label: PropTypes.string,
+  pxSize: PropTypes.shape({
+    width: PropTypes.number,
+    height: PropTypes.number,
+  }),
+  nodeValue: PropTypes.string,
+  isDebugSession: PropTypes.bool,
+  onVariadicHandleDown: PropTypes.func,
+};
+
+export default TableLogNodeBody;

packages/xod-client/test/tableLogSources.spec.js

@@ -4,6 +4,17 @@ import { defaultizeProject } from 'xod-project/test/helpers';
 
 import { getTableLogSourceLabels } from '../src/debugger/utils';
 
+const TABLE_LOG_NODES = {
+  'xod/debug/tsv-log': {},
+  'xod/debug/table-log': {
+    nodes: {
+      log: {
+        type: 'xod/debug/tsv-log',
+      },
+    },
+  },
+};
+
 describe('generate labels for table log sources', () => {
   const assertSameSources = (project, rootPatchPath, expectedLabelsForIds) => {
     const ids = R.keys(expectedLabelsForIds);
@@ -24,12 +35,12 @@ describe('generate labels for table log sources', () => {
     const project = defaultizeProject({
       patches: {
         '@/main': {},
-        'xod/debug/table-log': {},
+        ...TABLE_LOG_NODES,
       },
     });
 
     assertSameSources(project, '@/main', {
-      'a~n~t': '@/main > DELETED (a~n~t)',
+      'a~n~t~log': '@/main > DELETED (a~n~t~log)',
       t: '@/main > DELETED (t)',
     });
   });
@@ -63,14 +74,14 @@ describe('generate labels for table log sources', () => {
             },
           },
         },
-        'xod/debug/table-log': {},
+        ...TABLE_LOG_NODES,
       },
     });
 
     assertSameSources(project, '@/main', {
-      'a~n~t': '@/main > nested-1 > nested-2 > table-log',
-      'b~t': '@/main > nested-2 > table-log',
-      t: '@/main > table-log',
+      'a~n~t~log': '@/main > nested-1 > nested-2 > table-log',
+      'b~t~log': '@/main > nested-2 > table-log',
+      't~log': '@/main > table-log',
     });
   });
   it('should contain node labels if it is set', () => {
@@ -118,15 +129,15 @@ describe('generate labels for table log sources', () => {
             },
           },
         },
-        'xod/debug/table-log': {},
+        ...TABLE_LOG_NODES,
       },
     });
 
     assertSameSources(project, '@/main', {
-      'a~n~t': '@/main > Nested One > nested-2 > table-log',
-      'b~t': '@/main > Nested Two > table-log',
-      'c~n~t': '@/main > Nested Label > Log > table-log',
-      t: '@/main > My Table Log',
+      'a~n~t~log': '@/main > Nested One > nested-2 > table-log',
+      'b~t~log': '@/main > Nested Two > table-log',
+      'c~n~t~log': '@/main > Nested Label > Log > table-log',
+      't~log': '@/main > My Table Log',
     });
   });
   it('should add numbers to the duplicates on a correct nesting level', () => {
@@ -219,45 +230,49 @@ describe('generate labels for table log sources', () => {
             nd2: { type: '@/nested-double' },
           },
         },
-        'xod/debug/table-log': {},
+        ...TABLE_LOG_NODES,
       },
     });
 
     assertSameSources(project, '@/main', {
-      'a~n~t': '@/main > Nested > nested-2 > table-log',
-      'a2~n~t': '@/main > Nested #2 > nested-2 > table-log',
-      'a3~n~t': '@/main > nested-1 > nested-2 > table-log',
-      'b~n~t': '@/main > nested-label > Log > table-log',
-      'b2~n~t': '@/main > nested-label #2 > Log > table-log',
-      'd~t': '@/main > nested-double > table-log',
-      'd~t2': '@/main > nested-double > table-log #2',
-      'd2~t': '@/main > nested-double #2 > table-log',
-      'd2~t2': '@/main > nested-double #2 > table-log #2',
-      'd3~t': '@/main > Double Inside > table-log',
-      'd3~t2': '@/main > Double Inside > table-log #2',
-      'nc~n~n~t': '@/main > nested-complex > nested-1 > nested-2 > table-log',
-      'nc~n2~n~t':
+      'a~n~t~log': '@/main > Nested > nested-2 > table-log',
+      'a2~n~t~log': '@/main > Nested #2 > nested-2 > table-log',
+      'a3~n~t~log': '@/main > nested-1 > nested-2 > table-log',
+      'b~n~t~log': '@/main > nested-label > Log > table-log',
+      'b2~n~t~log': '@/main > nested-label #2 > Log > table-log',
+      'd~t~log': '@/main > nested-double > table-log',
+      'd~t2~log': '@/main > nested-double > table-log #2',
+      'd2~t~log': '@/main > nested-double #2 > table-log',
+      'd2~t2~log': '@/main > nested-double #2 > table-log #2',
+      'd3~t~log': '@/main > Double Inside > table-log',
+      'd3~t2~log': '@/main > Double Inside > table-log #2',
+      'nc~n~n~t~log':
+        '@/main > nested-complex > nested-1 > nested-2 > table-log',
+      'nc~n2~n~t~log':
         '@/main > nested-complex > nested-1 #2 > nested-2 > table-log',
-      'nc~nn~t': '@/main > nested-complex > nested-2 > table-log',
-      'nc~nn2~t': '@/main > nested-complex > nested-2 #2 > table-log',
-      'nc~nd~t': '@/main > nested-complex > nested-double > table-log',
-      'nc~nd~t2': '@/main > nested-complex > nested-double > table-log #2',
-      'nc~nd2~t': '@/main > nested-complex > nested-double #2 > table-log',
-      'nc~nd2~t2': '@/main > nested-complex > nested-double #2 > table-log #2',
-      'nc2~n~n~t':
+      'nc~nn~t~log': '@/main > nested-complex > nested-2 > table-log',
+      'nc~nn2~t~log': '@/main > nested-complex > nested-2 #2 > table-log',
+      'nc~nd~t~log': '@/main > nested-complex > nested-double > table-log',
+      'nc~nd~t2~log': '@/main > nested-complex > nested-double > table-log #2',
+      'nc~nd2~t~log': '@/main > nested-complex > nested-double #2 > table-log',
+      'nc~nd2~t2~log':
+        '@/main > nested-complex > nested-double #2 > table-log #2',
+      'nc2~n~n~t~log':
         '@/main > nested-complex #2 > nested-1 > nested-2 > table-log',
-      'nc2~n2~n~t':
+      'nc2~n2~n~t~log':
         '@/main > nested-complex #2 > nested-1 #2 > nested-2 > table-log',
-      'nc2~nn~t': '@/main > nested-complex #2 > nested-2 > table-log',
-      'nc2~nn2~t': '@/main > nested-complex #2 > nested-2 #2 > table-log',
-      'nc2~nd~t': '@/main > nested-complex #2 > nested-double > table-log',
-      'nc2~nd~t2': '@/main > nested-complex #2 > nested-double > table-log #2',
-      'nc2~nd2~t': '@/main > nested-complex #2 > nested-double #2 > table-log',
-      'nc2~nd2~t2':
+      'nc2~nn~t~log': '@/main > nested-complex #2 > nested-2 > table-log',
+      'nc2~nn2~t~log': '@/main > nested-complex #2 > nested-2 #2 > table-log',
+      'nc2~nd~t~log': '@/main > nested-complex #2 > nested-double > table-log',
+      'nc2~nd~t2~log':
+        '@/main > nested-complex #2 > nested-double > table-log #2',
+      'nc2~nd2~t~log':
+        '@/main > nested-complex #2 > nested-double #2 > table-log',
+      'nc2~nd2~t2~log':
         '@/main > nested-complex #2 > nested-double #2 > table-log #2',
-      t: '@/main > My Table Log',
-      t2: '@/main > My Table Log #2',
-      t3: '@/main > My Table Log #3',
+      't~log': '@/main > My Table Log',
+      't2~log': '@/main > My Table Log #2',
+      't3~log': '@/main > My Table Log #3',
     });
   });
 });

packages/xod-project/src/constants.js

@@ -126,7 +126,11 @@ export const PULSE_CONST_NODETYPES = {
 };
 
 export const WATCH_NODETYPE = 'xod/debug/watch';
+
+// User-friendly table-log node, that uses a tsv-log inside
 export const TABLELOG_NODETYPE = 'xod/debug/table-log';
+// Utility node that actually sends a tsv data to the XOD IDE
+export const TSV_LOG_NODETYPE = 'xod/debug/tsv-log';
 
 // node types that prints values into Serial
 // to debug xod programm, it should be omitted