Merge pull request #269 from codaco/feature/graphml-ego-warning

add ego info to graphml selection
complexdatacollective · Jan 7, 2020 · ce11245 · ce11245
2 parents f0e0f8e + ca77606
commit ce11245
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 37 deletions.
diff --git a/src/renderer/containers/ExportScreen.js b/src/renderer/containers/ExportScreen.js
@@ -26,7 +26,7 @@ class ExportScreen extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      exportFormat: 'graphml',
+      exportFormat: 'csv',
       exportNetworkUnion: false,
       csvTypes: new Set([...Object.keys(availableCsvTypes), 'ego']),
       useDirectedEdges: true,
@@ -182,48 +182,52 @@ class ExportScreen extends Component {
               }}
             />
           </div>
+          <div className="export__csv-types">
+            <Toggle
+              disabled={this.state.exportFormat === 'graphml'}
+              label="Include Ego data?"
+              input={{
+                name: 'export_ego_data',
+                onChange: this.handleEgoDataChange,
+                value: this.state.exportFormat === 'csv' && this.state.useEgoData,
+              }}
+            />
+            <DrawerTransition in={!showCsvOpts}>
+              <div className="export__ego-info">* Ego data not supported for this export format. See <a className="external-link" href="https://documentation.networkcanvas.com/docs/tutorials/server-workflows/#managing-and-exporting-data-in-server">documentation</a>.</div>
+            </DrawerTransition>
+          </div>
           <DrawerTransition in={showCsvOpts}>
-            <div className="export__csv-types">
-              <Toggle
-                label="Include Ego data?"
-                input={{
-                  name: 'export_ego_data',
-                  onChange: this.handleEgoDataChange,
-                  value: this.state.useEgoData,
-                }}
-              />
-              <div className="export__subpanel">
-                <div className="export__subpanel-content">
-                  <h4>Include the following files:</h4>
-                  {
-                    Object.entries(availableCsvTypes).map(([csvType, label]) => (
-                      <div key={`export_csv_type_${csvType}`}>
-                        <Checkbox
-                          label={label}
-                          input={{
-                            name: 'export_csv_types',
-                            checked: this.state.csvTypes.has(csvType),
-                            value: csvType,
-                            onChange: this.handleCsvTypeChange,
-                          }}
-                        />
-                      </div>
-                    ))
-                  }
-                  <DrawerTransition in={this.state.useEgoData}>
-                    <div key="export_csv_type_ego">
+            <div className="export__subpanel">
+              <div className="export__subpanel-content">
+                <h4>Include the following files:</h4>
+                {
+                  Object.entries(availableCsvTypes).map(([csvType, label]) => (
+                    <div key={`export_csv_type_${csvType}`}>
                       <Checkbox
-                        label="Ego Attribute List"
+                        label={label}
                         input={{
-                          name: 'export_ego_attributes',
-                          checked: this.state.csvTypes.has('ego'),
-                          value: 'ego',
+                          name: 'export_csv_types',
+                          checked: this.state.csvTypes.has(csvType),
+                          value: csvType,
                           onChange: this.handleCsvTypeChange,
                         }}
                       />
                     </div>
-                  </DrawerTransition>
-                </div>
+                  ))
+                }
+                <DrawerTransition in={this.state.useEgoData}>
+                  <div key="export_csv_type_ego">
+                    <Checkbox
+                      label="Ego Attribute List"
+                      input={{
+                        name: 'export_ego_attributes',
+                        checked: this.state.csvTypes.has('ego'),
+                        value: 'ego',
+                        onChange: this.handleCsvTypeChange,
+                      }}
+                    />
+                  </div>
+                </DrawerTransition>
               </div>
             </div>
           </DrawerTransition>

diff --git a/src/renderer/containers/__tests__/ExportScreen-test.js b/src/renderer/containers/__tests__/ExportScreen-test.js
@@ -70,12 +70,26 @@ describe('<ExportScreen />', () => {
       expect(subject.state('exportFormat')).toEqual('csv');
     });
 
+    it('does not warn about ego data for csv export', () => {
+      const radioWrapper = subject.findWhere(n => n.name() === 'Radio' && n.prop('label') === 'CSV');
+      radioWrapper.dive().find('input').simulate('change', { target: { value: 'csv' } });
+      const toggleWrapper = subject.find('Toggle').at(0);
+      expect(toggleWrapper.dive().find('.form-field-toggle').at(0).hasClass('form-field-toggle--disabled')).toBe(false);
+    });
+
     it('selects graphml format', () => {
       const radioWrapper = subject.findWhere(n => n.name() === 'Radio' && n.prop('label') === 'GraphML');
       radioWrapper.dive().find('input').simulate('change', { target: { value: 'graphml' } });
       expect(subject.state('exportFormat')).toEqual('graphml');
     });
 
+    it('warns about ego data not downloading', () => {
+      const radioWrapper = subject.findWhere(n => n.name() === 'Radio' && n.prop('label') === 'GraphML');
+      radioWrapper.dive().find('input').simulate('change', { target: { value: 'graphml' } });
+      const toggleWrapper = subject.find('Toggle').at(0);
+      expect(toggleWrapper.dive().find('.form-field-toggle').at(0).hasClass('form-field-toggle--disabled')).toBe(true);
+    });
+
     it('selects a csv type', () => {
       const csvType = 'adjacencyMatrix';
       const checkbox = subject.find('Checkbox').first().dive().find('input');

diff --git a/src/renderer/styles/containers/_export.scss b/src/renderer/styles/containers/_export.scss
@@ -37,4 +37,10 @@
     justify-content: flex-end;
     padding: 0 spacing(large);
   }
+
+  &__ego-info {
+    float: right;
+    font-style: italic;
+    font-size: small;
+  }
 }
diff --git a/src/renderer/ui b/src/renderer/ui