phonology csv export

Author: Ivan Beloborodov

src/components/PhonologyModal/graphql.js

@@ -53,7 +53,8 @@ export const createPhonologyMutation = gql`
     $tiers: [String]!,
     $chartThreshold: Int!,
     $keepList: [Int]!,
-    $joinList: [Int]!) {
+    $joinList: [Int]!,
+    $generateCsv: Boolean!) {
       phonology(perspective_id: $perspectiveId,
         vowel_selection: $vowelSelection,
         group_by_description: $groupByDescription,
@@ -62,7 +63,8 @@ export const createPhonologyMutation = gql`
         maybe_tier_list: $tiers,
         chart_threshold: $chartThreshold,
         keep_list: $keepList,
-        join_list: $joinList) {
+        join_list: $joinList,
+        generate_csv: $generateCsv) {
         triumph
       }
   }

src/components/PhonologyModal/index.js

@@ -20,6 +20,7 @@ class PhonologyModal extends React.Component {
       translationsMode: 'all',
       enabledGroup: false,
       chartThreshold: DEFAULT_CHART_THRESHOLD,
+      enabledCsv: false,
       tierList: [],
       loadedTiers: false,
       enabledTiers: false,
@@ -185,6 +186,7 @@ class PhonologyModal extends React.Component {
         chartThreshold: this.state.chartThreshold,
         keepList: this.state.selectedKeepList,
         joinList: this.state.selectedJoinList,
+        generateCsv: this.state.enabledCsv,
       },
     }).then(() => {
       window.logger.suc('Phonology is being created. Check out tasks for details.');
@@ -290,6 +292,16 @@ class PhonologyModal extends React.Component {
               </List.Item>
             </List>
 
+            <List>
+              <List.Item>
+                <Checkbox
+                  label="Export phonology data to a CSV file."
+                  checked={this.state.enabledCsv}
+                  onChange={(e, { checked }) => this.setState({ enabledCsv: checked })}
+                />
+              </List.Item>
+            </List>
+
             <List>
               <List.Item>
                 <Checkbox

src/components/TaskList/index.js

@@ -21,9 +21,9 @@ function Task(props) {
   } = props;
 
   const links = result_link_list.map(link => (
-    <a href={link} key={link}>
-      {link}
-    </a>
+    <div key={link}>
+      <a href={link} key={link}>{link}</a>
+    </div>
   ));
 
   return (