Fix white screen on Diff viewer

CatalogueOfLife · Nov 23, 2021 · 719a192 · 719a192
1 parent a7483e0
commit 719a192
Show file tree

Hide file tree

Showing 9 changed files with 191 additions and 51 deletions.
diff --git a/src/App.js b/src/App.js
@@ -43,6 +43,7 @@ import MetaDataValidator from "./pages/tools/MetaDataValidator";
 import NameMatch from "./pages/tools/NameMatch";
 import GBIFTaxonomyReview from "./pages/tools/GBIFTaxonomyReview";
 import DiffViewer from "./pages/tools/DiffViewer";
+import NameUsageSearch from "./pages/NameSearch/Search";
 
 const theme = {
   colorPrimary: "deepskyblue",
@@ -228,6 +229,13 @@ class App extends Component {
                   path="/dataset"
                   render={(props) => <DatasetList location={props.location} />}
                 />
+                <Route
+                  exact
+                  key="nameUsageSearch"
+                  path={`/nameusage/search`}
+                  component={NameUsageSearch}
+                />
+
                 <Route
                   exact
                   key="metadatavalidator"

diff --git a/src/api/gitVersion.js b/src/api/gitVersion.js
@@ -2,16 +2,15 @@ import axios from "axios";
 import config from "../config";
 
 export const getGitVersion = () => {
-  return axios(`/gitVersion.json`).then(res => res.data)
+  return axios(`/gitVersion.json`).then((res) => res.data);
 };
 
 export const getBackendGitVersion = () => {
-    return axios(`${config.dataApi}version`).then(res => {
-        const splitted = res.data.split('  ');
-        return {
-            short: splitted[0].trim(),
-            created: splitted[1].trim()
-        }
-    })
-  };
-
+  return axios(`${config.dataApi}version`).then((res) => {
+    const splitted = res.data.split(" ");
+    return {
+      short: splitted[0].trim(),
+      created: splitted[1].trim(),
+    };
+  });
+};
diff --git a/src/config.js b/src/config.js
@@ -9,7 +9,7 @@ if (
 ) {
   env = environments.prod;
 } else if (domain.endsWith("localhost")) {
-  env = environments.dev;
+  env = environments.prod;
 } else {
   env = environments.dev;
 }

diff --git a/src/pages/DatasetList/ColumnFilter.js b/src/pages/DatasetList/ColumnFilter.js
@@ -61,6 +61,7 @@ class ColumnFilter extends React.Component {
         defaultValue={excludeColumns}
         onChange={this.handleHideColumnChange}
         showSearch
+        maxTagCount={4}
       >
         {columns.map((f) => {
           return (

diff --git a/src/pages/DatasetList/ColumnFilter2.js b/src/pages/DatasetList/ColumnFilter2.js
@@ -0,0 +1,98 @@
+import React from "react";
+
+import { Select } from "antd";
+const Option = Select.Option;
+
+class ColumnFilter extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      showColumns: [],
+    };
+  }
+
+  componentDidMount = () => {
+    this.setColumns(this.props.columns);
+  };
+
+  componentDidUpdate = (nextProps) => {
+    if (!this.props.columns || this.props.columns.length === 0) {
+      this.setColumns(nextProps.columns);
+    }
+  };
+  setColumns = (columns) => {
+    let excludeColumns = JSON.parse(
+      localStorage.getItem("colplus_datasetlist_hide_columns")
+    ) || [
+      "creator",
+      "version",
+      "confidence",
+      "editor",
+      "geographicScope",
+      "private",
+      "modified",
+      "created",
+      "completeness",
+    ];
+    // Handle metadata update
+    if (excludeColumns.includes("organisations")) {
+      excludeColumns = [
+        "creator",
+        "version",
+        "confidence",
+        "editor",
+        "geographicScope",
+        "private",
+        "modified",
+        "created",
+        "completeness",
+      ];
+    }
+
+    this.setState({
+      showColumns: columns
+        .filter((c) => !excludeColumns.includes(c.key))
+        .map((c) => c.key),
+    });
+  };
+
+  handleHideColumnChange = (showColumns) => {
+    const { columns } = this.props;
+    const excludeColumns = columns
+      .filter((c) => !showColumns.includes(c.key))
+      .map((c) => c.key);
+    localStorage.setItem(
+      "colplus_datasetlist_hide_columns",
+      JSON.stringify(excludeColumns)
+    );
+    this.setState({ showColumns }, () => {
+      this.props.onChange(excludeColumns);
+    });
+  };
+
+  render = () => {
+    const { showColumns } = this.state;
+    const { columns } = this.props;
+    return (
+      <Select
+        style={{ width: "100%" }}
+        mode="multiple"
+        placeholder="Please select"
+        value={showColumns}
+        onChange={this.handleHideColumnChange}
+        showSearch
+        maxTagCount={4}
+      >
+        {columns.map((f) => {
+          return (
+            <Option key={f.key} value={f.key}>
+              {f.title}
+            </Option>
+          );
+        })}
+      </Select>
+    );
+  };
+}
+
+export default ColumnFilter;
diff --git a/src/pages/DatasetList/index.js b/src/pages/DatasetList/index.js
@@ -2,15 +2,15 @@ import React from "react";
 import axios from "axios";
 import { NavLink } from "react-router-dom";
 import { LockOutlined, UnlockOutlined, PlusOutlined } from "@ant-design/icons";
-import { Table, Alert, Row, Col, Form, Button } from "antd";
+import { Table, Alert, Row, Col, Form, Button, Tooltip } from "antd";
 import config from "../../config";
 import qs from "query-string";
 import Layout from "../../components/LayoutNew";
 import moment from "moment";
 import history from "../../history";
 import Auth from "../../components/Auth";
 import SearchBox from "./SearchBox";
-import ColumnFilter from "./ColumnFilter";
+import ColumnFilter from "./ColumnFilter2";
 import DatasetLogo from "./DatasetLogo";
 import ImportButton from "../../pages/Imports/importTabs/ImportButton";
 import withContext from "../../components/hoc/withContext";
@@ -92,32 +92,62 @@ class DatasetList extends React.Component {
           dataIndex: "creator",
           key: "creator",
           sorter: true,
+          ellipsis: {
+            showTitle: false,
+          },
           render: (text, record) => {
-            return text && _.isArray(text)
-              ? text.map((t) => t.name).join(", ")
-              : "";
+            return text && _.isArray(text) ? (
+              <Tooltip
+                placement="topLeft"
+                title={text.map((t) => t.name).join(", ")}
+              >
+                {text.map((t) => t.name).join(", ")}
+              </Tooltip>
+            ) : (
+              ""
+            );
           },
         },
         {
           title: "Editor",
           dataIndex: "editor",
           key: "editor",
           sorter: true,
+          ellipsis: {
+            showTitle: false,
+          },
           render: (text, record) => {
-            return text && _.isArray(text)
-              ? text.map((t) => t.name).join(", ")
-              : "";
+            return text && _.isArray(text) ? (
+              <Tooltip
+                placement="topLeft"
+                title={text.map((t) => t.name).join(", ")}
+              >
+                {text.map((t) => t.name).join(", ")}
+              </Tooltip>
+            ) : (
+              ""
+            );
           },
         },
         {
           title: "Contributor",
           dataIndex: "contributor",
           key: "contributor",
           sorter: true,
+          ellipsis: {
+            showTitle: false,
+          },
           render: (text, record) => {
-            return text && _.isArray(text)
-              ? text.map((t) => t.name).join(", ")
-              : "";
+            return text && _.isArray(text) ? (
+              <Tooltip
+                placement="topLeft"
+                title={text.map((t) => t.name).join(", ")}
+              >
+                {text.map((t) => t.name).join(", ")}
+              </Tooltip>
+            ) : (
+              ""
+            );
           },
         },
         {
@@ -378,24 +408,24 @@ class DatasetList extends React.Component {
     } */
     const filteredColumns = isEditorOrAdmin(this.props.user)
       ? [
-        ...defaultColumns,
-        {
-          title: "Action",
-          dataIndex: "",
-          width: 60,
-          key: "__actions__",
-          render: (text, record) =>
-            record.origin === "external" &&
+          ...defaultColumns,
+          {
+            title: "Action",
+            dataIndex: "",
+            width: 60,
+            key: "__actions__",
+            render: (text, record) =>
+              record.origin === "external" &&
               canEditDataset(record, this.props.user) ? (
-              <ImportButton
-                key={record.key}
-                record={{ datasetKey: record.key }}
-              />
-            ) : (
-              ""
-            ),
-        },
-      ]
+                <ImportButton
+                  key={record.key}
+                  record={{ datasetKey: record.key }}
+                />
+              ) : (
+                ""
+              ),
+          },
+        ]
       : defaultColumns;
 
     const columns = _.filter(
@@ -450,10 +480,10 @@ class DatasetList extends React.Component {
                 <FormItem
                   style={{ width: "100%" }}
                   {...formItemLayout}
-                  label="Hidden columns"
+                  label="Show columns"
                 >
                   <ColumnFilter
-                    columns={columns}
+                    columns={defaultColumns}
                     onChange={this.handleColumns}
                   />
                 </FormItem>

diff --git a/src/pages/NameSearch/Search.js b/src/pages/NameSearch/Search.js
@@ -0,0 +1,13 @@
+import React from "react";
+import Layout from "../../components/LayoutNew";
+import { withRouter } from "react-router";
+import NameSearch from "./index";
+const NameUsageSearch = ({ location }) => {
+  return (
+    <Layout selectedKeys={"NameUsageSearch"}>
+      <NameSearch location={location} />
+    </Layout>
+  );
+};
+
+export default withRouter(NameUsageSearch);
diff --git a/src/pages/NameSearch/index.js b/src/pages/NameSearch/index.js
@@ -199,7 +199,7 @@ class NameSearchPage extends React.Component {
     });
     const url = datasetKey
       ? `${config.dataApi}dataset/${datasetKey}/nameusage/search`
-      : `${config.dataApi}name/search`;
+      : `${config.dataApi}nameusage/search`;
     axios(`${url}?${qs.stringify(newParamsWithPaging)}`)
       .then((res) => {
         this.setState({

diff --git a/src/pages/tools/DiffViewer.js b/src/pages/tools/DiffViewer.js
@@ -222,15 +222,6 @@ const DiffViewer = ({ location, addError, rank }) => {
             <Col flex="auto"></Col>
           </Row>
         )}
-        {_.get(this.state, "data") === "" && (
-          <Row style={{ marginTop: "40px" }}>
-            <Col flex="auto"></Col>
-            <Col>
-              <Empty description="No diff between import attempts" />
-            </Col>
-            <Col flex="auto"></Col>
-          </Row>
-        )}
       </PageContent>
     </Layout>
   );