Merge pull request #3 from thawsitt/features/mapping

Features/mapping

src/assets/map_config.js

@@ -27,7 +27,7 @@ config.colorSchemes = {
   color2: ['#feebe2', '#fbb4b9', '#f768a1', '#c51b8a', '#7a0177'],
   color3: ['#f2f0f7', '#cbc9e2', '#9e9ac8', '#756bb1', '#54278f'],
   color4: ['#ffffb2', '#fecc5c', '#fd8d3c', '#f03b20', '#bd0026'],
-  bw: ['#f7f7f7', '#cccccc', '#969696', '#636363', '#252525'],
+  bw: ['#ccc', '#999', '#666', '#323232', '#000'],
 }
 
 export default config;

src/components/App.css

@@ -1,3 +1,48 @@
 .ui.menu {
   margin: 0 !important;
 }
+
+.modal-description {
+  padding-bottom: 20px;
+}
+
+code.example {
+  color: grey;
+}
+
+.center {
+  position: absolute;
+  z-index: 800;
+  left: 50%;
+  top: 50%;
+  -webkit-transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
+}
+
+.loading-circle {
+  display: inline-block;
+  width: 100px;
+  height: 100px;
+  margin: auto;
+  border-radius: 50%;
+  background: #2faee0;
+  opacity: 0.8;
+  animation: loading-circle 2.4s cubic-bezier(0, 0.2, 0.8, 1) infinite;
+}
+
+@keyframes loading-circle {
+  0%,
+  100% {
+    animation-timing-function: cubic-bezier(0.5, 0, 1, 0.5);
+  }
+  0% {
+    transform: rotateY(0deg);
+  }
+  50% {
+    transform: rotateY(1800deg);
+    animation-timing-function: cubic-bezier(0, 0.5, 0.5, 1);
+  }
+  100% {
+    transform: rotateY(3600deg);
+  }
+}

src/components/App.js

@@ -1,57 +1,30 @@
 import React, { Component } from 'react';
 import './App.css';
 import Map from './Map';
-import { Menu } from 'semantic-ui-react';
+import axios from 'axios';
+import { Button, Menu, Modal, Header, Icon, Form } from 'semantic-ui-react';
 
 //==============
 // Top Menu Bar
 //==============
 
 class TopMenuBar extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      activeItem: 'home',
-    };
-    this.handleItemClick = this.handleItemClick.bind(this);
-  }
-
-  handleItemClick(e, { name }) {
-    this.setState({ activeItem: name });
-  }
-
   render() {
-    const { activeItem } = this.state;
-
     return (
       <Menu>
         <Menu.Item>
           <img src="/favicon.ico" alt="React Logo" />
         </Menu.Item>
 
-        <Menu.Item
-          name="home"
-          active={activeItem === 'home'}
-          onClick={this.handleItemClick}
-        >
-          Home
-        </Menu.Item>
-
-        <Menu.Item
-          name="project"
-          active={activeItem === 'project'}
-          onClick={this.handleItemClick}
-        >
-          Project
+        <Menu.Item name="map-action">
+          <ModalQuery handleInputURL={this.props.handleInputURL} />
         </Menu.Item>
 
-        <Menu.Item
-          name="about"
-          active={activeItem === 'about'}
-          onClick={this.handleItemClick}
-        >
-          About
-        </Menu.Item>
+        {this.props.searchTerm && (
+          <Menu.Item name="current-search">
+            Current query: "{this.props.searchTerm}"
+          </Menu.Item>
+        )}
 
         <Menu.Item name="version" position="right">
           <a href="https://github.com/thawsitt/react-map/releases">v 0.1.0</a>
@@ -61,16 +34,173 @@ class TopMenuBar extends Component {
   }
 }
 
+//==========================
+// Modal to paste query url
+//==========================
+
+class ModalQuery extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      modalOpen: false,
+      url: '',
+    };
+  }
+
+  handleOpen = () => this.setState({ modalOpen: true });
+
+  handleClose = () => this.setState({ modalOpen: false });
+
+  handleChange = (event) => this.setState({ url: event.target.value });
+
+  handleSubmit = (event) => {
+    this.props.handleInputURL(this.state.url);
+    this.setState({ modalOpen: false });
+    this.setState({ url: '' });
+  };
+
+  render() {
+    return (
+      <Modal
+        trigger={
+          <Button primary onClick={this.handleOpen}>
+            Map Search Results
+          </Button>
+        }
+        open={this.state.modalOpen}
+        onClose={this.handleClose}
+        size="small"
+      >
+        <Header icon="map marker alternate" content="Map Search Results" />
+        <Modal.Content>
+          <ModalDescription />
+          <Form>
+            <Form.Field>
+              <label>"Export Results" URL</label>
+              <input
+                type="text"
+                value={this.state.url}
+                onChange={this.handleChange}
+              />
+            </Form.Field>
+          </Form>
+        </Modal.Content>
+        <Modal.Actions>
+          <Button color="blue" onClick={this.handleSubmit} inverted>
+            <Icon name="checkmark" /> Map
+          </Button>
+        </Modal.Actions>
+      </Modal>
+    );
+  }
+}
+
+const ModalDescription = () => (
+  <div className="modal-description">
+    To map your search results,
+    <ul>
+      <li>
+        Go to the{' '}
+        <a
+          href="https://corpus-synodalium.com/philologic/beta/"
+          target="_blank"
+          rel="noreferrer noopener"
+        >
+          PhiloLogic database.
+        </a>
+      </li>
+      <li>Make a search query.</li>
+      <li>Click "Export results" button on top-right corner.</li>
+      <li>
+        Paste the resulting url below. The url should look something like this:
+      </li>
+    </ul>
+    <code className="example">
+      https://corpus-synodalium.com/philologic/beta/query?report=concordance&method=proxy&q=corpus&start=0&end=0&format=json
+    </code>
+  </div>
+);
+
 //====================
 // Main App Component
 //====================
 
 class App extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      searchTerm: null,
+      mappingData: null,
+      loading: false,
+    };
+  }
+
+  handleInputURL = (url) => {
+    const testURL = url.replace('end=0', 'end=1');
+    let query = null;
+    this.setState({ loading: true });
+    axios
+      .get(testURL)
+      .then((response) => response.data)
+      .then((data) => {
+        query = data.query;
+        query.end = data.results_length;
+        this.fetchData(query);
+      })
+      .catch((error) => {
+        console.error(error);
+        this.setState({ loading: false, searchTerm: null });
+      });
+  };
+
+  fetchData = (query) => {
+    const baseURL = 'https://corpus-synodalium.com/philologic/beta/query';
+    axios
+      .get(baseURL, { params: query })
+      .then((response) => response.data)
+      .then((data) => {
+        console.log(data);
+        this.setState({ searchTerm: query.q });
+        this.processData(data);
+      })
+      .catch((error) => {
+        console.error(error);
+      });
+  };
+
+  processData = ({ results }) => {
+    const dioceseMap = {};
+    results.forEach((result) => {
+      const metadata = result.metadata_fields;
+      const { record_id, diocese_id } = metadata;
+      if (diocese_id) {
+        if (dioceseMap.hasOwnProperty(diocese_id)) {
+          dioceseMap[diocese_id].add(record_id);
+        } else {
+          dioceseMap[diocese_id] = new Set([record_id]);
+        }
+      }
+    });
+    console.log(dioceseMap);
+    this.setState({
+      mappingData: dioceseMap,
+      loading: false,
+    });
+  };
+
   render() {
     return (
       <div>
-        <TopMenuBar />
-        <Map />
+        <TopMenuBar
+          handleInputURL={this.handleInputURL}
+          searchTerm={this.state.searchTerm}
+        />
+        <Map mappingData={this.state.mappingData} />
+        {this.state.loading && (
+          <div className="center">
+            <div className="loading-circle" />
+          </div>
+        )}
       </div>
     );
   }

src/components/Map.css

@@ -23,3 +23,26 @@
 .panel.panel-info {
   margin-top: 120px !important;
 }
+
+.panel-left {
+  position: fixed !important;
+  z-index: 800;
+  left: 0 !important;
+  width: 100px !important;
+  margin: 10px !important;
+  background: rgba(255, 255, 255, 0.8) !important;
+  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1) !important;
+}
+
+.panel-left.panel-legend {
+  bottom: 50px !important;
+  line-height: 19px;
+}
+
+.panel-left.panel-legend i {
+  width: 18px;
+  height: 18px;
+  margin-right: 8px;
+  float: left;
+  opacity: 1;
+}