Merge pull request rapyuta-robotics#84 from rapyuta-robotics/feature/…

…tf-connector

add show-hide for individual links and joint names in RobotModel options

src/components/optionRow.jsx

@@ -1,11 +1,16 @@
 import React from 'react';
 import { HalfWidth, StyledOptionRow } from './styled';
 
-const OptionRow = ({ label, children }) => (
-  <StyledOptionRow>
-    <HalfWidth>{label}:</HalfWidth>
-    <HalfWidth>{children}</HalfWidth>
-  </StyledOptionRow>
-);
+const OptionRow = ({ label, children, separator }) => {
+  return (
+    <StyledOptionRow>
+      <HalfWidth>
+        {label}
+        {separator || ':'}
+      </HalfWidth>
+      <HalfWidth>{children}</HalfWidth>
+    </StyledOptionRow>
+  );
+};
 
 export default OptionRow;

src/panels/index.jsx

@@ -56,6 +56,7 @@ class Wrapper extends React.Component {
     this.updateInfoTabs = this.updateInfoTabs.bind(this);
     this.toggleGraphModal = this.toggleGraphModal.bind(this);
 
+    this.vizInstances = new Set();
     this.ros = new ROSLIB.Ros();
     this.viewer = new Amphion.TfViewer(this.ros, {
       onFramesListUpdate: this.updateFramesList,
@@ -366,6 +367,7 @@ class Wrapper extends React.Component {
               rosInstance={this.ros}
               rosTopics={rosTopics}
               rosStatus={rosStatus}
+              vizInstances={this.vizInstances}
               visualizations={visualizations}
               viewer={this.viewer}
               connectRos={this.connectRos}
@@ -399,6 +401,8 @@ class Wrapper extends React.Component {
           {_.map(visualizations, vizItem => (
             <Visualization
               options={vizItem}
+              vizInstances={this.vizInstances}
+              id={vizItem.key}
               key={vizItem.key}
               viewer={this.viewer}
               rosTopics={rosTopics}

src/panels/sidebar/globalOptions.jsx

@@ -66,7 +66,7 @@ class GlobalOptions extends React.PureComponent {
             >
               {_.map(framesList, f => (
                 <option key={f} value={f}>
-                  {f}
+                  {f.replace('-tf-connector', '')}
                 </option>
               ))}
             </Select>

src/panels/sidebar/index.jsx

@@ -84,8 +84,11 @@ class Sidebar extends React.Component {
       updateVizOptions,
       viewer,
       visualizations,
+      vizInstances: vizInstancesSet,
     } = this.props;
 
+    const vizInstances = [...vizInstancesSet];
+
     const { rosInput } = this.state;
     return (
       <SidebarWrapper>
@@ -155,6 +158,10 @@ class Sidebar extends React.Component {
                   const relatedTopics = _.filter(rosTopics, t =>
                     _.includes(vizObject.additionalMessageTypes, t.messageType),
                   );
+                  const vizInstance = _.filter(
+                    vizInstances,
+                    v => v.key === vizItem.key,
+                  );
                   return (
                     <VizOptions
                       options={vizItem}
@@ -163,6 +170,7 @@ class Sidebar extends React.Component {
                       topics={topics}
                       relatedTopics={relatedTopics}
                       vizObject={vizObject}
+                      vizInstance={vizInstance}
                       rosInstance={rosInstance}
                       updateVizOptions={updateVizOptions}
                       removeVisualization={removeVisualization}

src/panels/sidebar/vizOptions/index.jsx

@@ -28,6 +28,7 @@ const VizOptions = ({
   options,
   topics,
   relatedTopics,
+  vizInstance,
   vizObject: { icon },
   updateVizOptions,
   removeVisualization,
@@ -85,6 +86,7 @@ const VizOptions = ({
           <VizSpecificOptions
             options={options}
             topics={topics}
+            vizInstance={vizInstance}
             relatedTopics={relatedTopics}
             updateVizOptions={updateVizOptions}
           />

src/panels/sidebar/vizOptions/robotModel.jsx

@@ -0,0 +1,87 @@
+import React from 'react';
+import { keys, map } from 'lodash';
+import { VizItem, VizItemCollapse } from '../../../components/styled/viz';
+import Chevron from '../../../components/chevron';
+import { Input, StyledOptionRow } from '../../../components/styled';
+import OptionRow from '../../../components/optionRow';
+
+class RobotModelLinksJoints extends React.PureComponent {
+  constructor(props) {
+    super(props);
+    this.state = {
+      linksCollapsed: true,
+      jointsCollapsed: true,
+    };
+
+    this.toggleCollapsed = this.toggleCollapsed.bind(this);
+  }
+
+  toggleCollapsed(name) {
+    // eslint-disable-next-line react/destructuring-assignment
+    const current = this.state[name];
+    this.setState({ [name]: !current });
+  }
+
+  render() {
+    const { jointsCollapsed, linksCollapsed } = this.state;
+    const { vizInstance } = this.props;
+
+    const { urdfObject } = vizInstance[0];
+    const { joints, links } = urdfObject;
+
+    return (
+      <>
+        <VizItem>
+          <StyledOptionRow>
+            <VizItemCollapse
+              collapsed={linksCollapsed}
+              onClick={() => this.toggleCollapsed('linksCollapsed')}
+            >
+              <Chevron />
+            </VizItemCollapse>
+            Links
+          </StyledOptionRow>
+          {!linksCollapsed &&
+            links &&
+            map(keys(links), (name, index) => {
+              const link = links[name];
+              return (
+                <OptionRow key={index} label={name}>
+                  <Input
+                    type="checkbox"
+                    name={name}
+                    data-id={name}
+                    defaultChecked
+                    onChange={e => {
+                      const { checked } = e.target;
+                      if (checked) {
+                        link.show();
+                      } else {
+                        link.hide();
+                      }
+                    }}
+                  />
+                </OptionRow>
+              );
+            })}
+        </VizItem>
+        <StyledOptionRow>
+          <VizItemCollapse
+            collapsed={jointsCollapsed}
+            onClick={() => this.toggleCollapsed('jointsCollapsed')}
+          >
+            <Chevron />
+          </VizItemCollapse>
+          Joints
+        </StyledOptionRow>
+        {!jointsCollapsed &&
+          joints &&
+          map(keys(joints), (name, index) => {
+            return <OptionRow key={index} label={name} separator=" " />;
+          })}
+      </>
+    );
+  }
+}
+
+export default RobotModelLinksJoints;

src/panels/sidebar/vizOptions/vizSpecificOption.jsx

@@ -11,31 +11,33 @@ import RangeOptions from './range';
 import PointOptions from './point';
 import InteractiveMarkerOptions from './interactiveMarkerOptions';
 import WrenchOptions from './wrench';
+import RobotModelLinksJoints from './robotModel';
 
 const {
   VIZ_TYPE_IMAGE,
-  VIZ_TYPE_WRENCH,
+  VIZ_TYPE_INTERACTIVEMARKER,
   VIZ_TYPE_LASERSCAN,
   VIZ_TYPE_MAP,
   VIZ_TYPE_MARKER,
   VIZ_TYPE_MARKERARRAY,
   VIZ_TYPE_ODOMETRY,
   VIZ_TYPE_PATH,
-  VIZ_TYPE_INTERACTIVEMARKER,
+  VIZ_TYPE_POINT,
   VIZ_TYPE_POINTCLOUD,
   VIZ_TYPE_POLYGON,
   VIZ_TYPE_POSE,
   VIZ_TYPE_POSEARRAY,
   VIZ_TYPE_RANGE,
   VIZ_TYPE_ROBOTMODEL,
   VIZ_TYPE_TF,
-  VIZ_TYPE_POINT,
+  VIZ_TYPE_WRENCH,
 } = CONSTANTS;
 
 const VizSpecificOptions = ({
   options: { vizType },
   options,
   topics,
+  vizInstance,
   relatedTopics,
   updateVizOptions,
 }) => {
@@ -103,7 +105,7 @@ const VizSpecificOptions = ({
         <RangeOptions options={options} updateVizOptions={updateVizOptions} />
       );
     case VIZ_TYPE_ROBOTMODEL:
-      return null;
+      return <RobotModelLinksJoints vizInstance={vizInstance} />;
     case VIZ_TYPE_TF:
       return null;
     case VIZ_TYPE_WRENCH:

src/panels/visualizations/index.jsx

@@ -251,13 +251,16 @@ class Visualization extends React.PureComponent {
 
   resetVisualization() {
     const {
+      id,
       options,
       options: { topicName, visible, vizType },
       rosInstance,
       viewer,
+      vizInstances,
     } = this.props;
     if (this.vizInstance) {
       this.vizInstance.destroy();
+      vizInstances.delete(this.vizInstance);
     }
 
     this.vizInstance = Visualization.getNewViz(
@@ -270,6 +273,8 @@ class Visualization extends React.PureComponent {
     if (!this.vizInstance) {
       return;
     }
+    this.vizInstance.key = id;
+    vizInstances.add(this.vizInstance);
     if (vizType === VIZ_TYPE_ROBOTMODEL) {
       viewer.addRobot(this.vizInstance);
     } else if (vizType === VIZ_TYPE_IMAGE) {