Merge branch 'dev-2106' into 'master'

Dev 2106

See merge request !1

src/view/Manage/Map/Component/Relation.jsx

@@ -196,6 +196,8 @@ G6.registerNode(
           visible: false,
         });
       }
+      width1 = r * 2.5
+      width2 = r * 4
 
       if (depthCount[cfg.depth] > 10) {
         group.addShape('image', {

src/view/Manage/Map/index.jsx

@@ -30,8 +30,8 @@ const graphModes = [
 class Map extends React.Component {
   constructor(props) {
     super(props);
-    this.state = { 
-      type: 'square', 
+    this.state = {
+      type: 'square',
       tabKey: '',
       loadingTopics: false,
       topics: null
@@ -46,9 +46,9 @@ class Map extends React.Component {
         payload: null,
         callback: data => {
           this.setState({
-            loadingTopics: false, 
-            topics: data||[],
-            tabKey: (data||[]).length>0?data[0].id:'',
+            loadingTopics: false,
+            topics: data || [],
+            tabKey: (data || []).length > 0 ? data[0].id : '',
           });
         },
         error: () => {
@@ -68,51 +68,53 @@ class Map extends React.Component {
 
   render() {
     const { type, tabKey, topics, loadingTopics } = this.state;
+
+    const switchMode = <div className=''>
+      <Radio.Group
+        value={type}
+        onChange={this.onTypeChange} size="small"
+      >
+        {
+          graphModes && graphModes.map((mode, index) => {
+            return (
+              <Tooltip key={index} title={mode.title || ''} >
+                <Radio.Button value={mode.key}>{(mode.title || '').substring(0, 1)}</Radio.Button>
+              </Tooltip>
+            );
+          })
+        }
+      </Radio.Group>
+    </div>
+
+
     return (
       <div className='asset-map' style={{ backgroundColor: '#fff' }}>
-      {
-        loadingTopics ? <Spin /> : <>
         {
-          topics && topics.length>0 && <Tabs 
-            activeKey={tabKey}
-            size='large' 
-            centered
-            onChange={this.onTabChange}
-          >
-          {
-            topics && topics.map((topic) => {
-              return (
-                <TabPane tab={topic.name||''} key={topic.id||''}>
-                  <div className='d-flex px-3' style={{ height: 53, alignItems: 'center' }}>
-                  <Radio.Group 
-                    value={type} 
-                    onChange={this.onTypeChange}
-                    style={{ marginLeft: 'auto' }}
-                  >
-                  {
-                    graphModes && graphModes.map((mode, index) => {
-                      return (
-                        <Tooltip key={index} title={mode.title||''} >
-                          <Radio.Button value={mode.key}>{(mode.title||'').substring(0, 1)}</Radio.Button>
-                        </Tooltip>
-                      );
-                    })
-                  }
-                  </Radio.Group>
-                  </div>
-                  { 
-                    tabKey===topic.id && <div className='map-container' style={{ padding: '0 10px' }}>
-                      <MapContent type={type} topic={topic} {...this.props} />
-                    </div> 
-                  }
-                </TabPane>
-              );
-            })
-          }
-          </Tabs>
+          loadingTopics ? <Spin /> : <>
+            {
+              topics && topics.length > 0 && <Tabs
+                activeKey={tabKey}
+                size='large'
+                centered
+                onChange={this.onTabChange}
+              >
+                {
+                  topics && topics.map((topic) => {
+                    return (
+                      <TabPane tab={topic.name || ''} key={topic.id || ''}>
+                        {
+                          tabKey === topic.id && <div className='map-container' >
+                            <MapContent type={type} topic={topic} switchMode={switchMode} {...this.props} />
+                          </div>
+                        }
+                      </TabPane>
+                    );
+                  })
+                }
+              </Tabs>
+            }
+          </>
         }
-        </>
-      }
       </div>
     );
   }

src/view/Manage/Map/index.less

@@ -7,7 +7,7 @@
   }
 
   .map-container {
-    height: calc(100vh - 64px - 30px - 57px - 53px) !important;
+    height: calc(100vh - 64px - 30px - 57px/*  - 53px */) !important;
     overflow: auto !important;
   }
 }
\ No newline at end of file