refactor(wps functions)

change LayerSelect to controlled input fixed loading issues handle results

Author: eran-pinhas

src/App.css

@@ -23,15 +23,27 @@
 }
 
 @keyframes App-logo-spin {
- from { transform: rotate(0deg); }
- to { transform: rotate(360deg); }
+ from {
+ transform: rotate(0deg);
+ }
+ to {
+ transform: rotate(360deg);
+ }
 }
 
-.screen{
- width: 50%;
+.screen-left,
+.screen-right {
+ position: relative;
  flex-grow: 1;
 }
 
+.screen-left{
+ width: 65%
+}
+.screen-right{
+ width: 35%
+}
+
 .root {
  display: flex;
  flex-direction: row;

src/App.js

@@ -19,11 +19,11 @@ class App extends Component {
  render() {
  return (
  <div className="root">
- <div className="screen">
+ <div className="screen-left">
  <Layers onRef={ref => (this.layers = ref)} />
  <Map />
  </div>
- <div className="screen">
+ <div className="screen-right">
  <ToolsScreen
  addLayer={this.state.addLayer}
  setQueryHistory={setQueryHistory}

src/components/Icons/Icons.js

@@ -0,0 +1,37 @@
+import React from "react";
+
+export function LayersIcon({ className }) {
+ return (
+ <svg
+ className={className}
+ xmlns="http://www.w3.org/2000/svg"
+ version="1.1"
+ viewBox="0 0 56.018 56.018"
+ >
+ <g>
+ <path d="M55.741,53.809l-5.969-6.244c1.746-1.919,2.82-4.458,2.82-7.25c0-5.953-4.843-10.796-10.796-10.796S31,34.362,31,40.315 s4.843,10.796,10.796,10.796c2.441,0,4.688-0.824,6.499-2.196l6.001,6.277c0.196,0.205,0.459,0.309,0.723,0.309 c0.249,0,0.497-0.092,0.691-0.277C56.108,54.841,56.123,54.209,55.741,53.809z M41.796,49.111c-4.85,0-8.796-3.946-8.796-8.796 s3.946-8.796,8.796-8.796s8.796,3.946,8.796,8.796S46.646,49.111,41.796,49.111z" />
+ <path d="M37,27.396v-0.002c1.495-0.56,3.108-0.875,4.796-0.875c6.222,0,11.49,4.142,13.204,9.812V1.519 c0-0.321-0.154-0.623-0.416-0.812s-0.597-0.241-0.901-0.137l-17.73,5.91L19.229,2.545c-0.076-0.018-0.152-0.026-0.228-0.026 c-0.048,0-0.094,0.017-0.142,0.024c-0.026,0.004-0.051-0.006-0.076,0l-18,4C0.326,6.645,0,7.05,0,7.519v43 c0,0.304,0.138,0.59,0.375,0.78c0.179,0.144,0.4,0.22,0.625,0.22c0.072,0,0.145-0.008,0.217-0.023l17.807-3.957l12.772,2.254 C29.45,47.318,28,43.986,28,40.315C28,34.396,31.754,29.351,37,27.396z M20,45.68V4.782l15,3.529v17.764 c-5.436,2.604-9,8.16-9,14.24c0,2.338,0.516,4.613,1.493,6.687L20,45.68z" />
+ </g>
+ </svg>
+ );
+}
+
+export function TextIcon({ className }) {
+ return (
+ <svg
+ className={className}
+ xmlns="http://www.w3.org/2000/svg"
+ version="1.1"
+ viewBox="0 0 299.898 299.898"
+ >
+ <g>
+ <g>
+ <g>
+ <path d="M92.488,15.666c-0.428-1.329-1.214-2.44-2.213-3.274c-0.025-0.021-0.049-0.043-0.074-0.064 c-0.131-0.107-0.267-0.205-0.405-0.302c-0.06-0.043-0.119-0.087-0.181-0.128c-0.111-0.072-0.225-0.138-0.339-0.204 c-0.093-0.054-0.185-0.111-0.281-0.161c-0.09-0.047-0.184-0.087-0.276-0.13c-0.123-0.058-0.246-0.118-0.374-0.169 c-0.06-0.024-0.122-0.042-0.183-0.065c-0.146-0.054-0.291-0.112-0.443-0.157c-0.111-0.032-0.222-0.052-0.333-0.078 c-1.201-0.294-2.491-0.283-3.758,0.099c-0.034,0.01-0.07,0.017-0.104,0.028c-0.011,0.003-0.021,0.005-0.032,0.009 c-0.122,0.039-0.237,0.09-0.356,0.135c-0.092,0.035-0.185,0.066-0.275,0.104c-0.131,0.056-0.255,0.121-0.381,0.184 c-0.082,0.041-0.166,0.079-0.247,0.124c-0.12,0.066-0.234,0.139-0.349,0.211c-0.083,0.052-0.167,0.102-0.248,0.157 c-0.1,0.069-0.195,0.143-0.291,0.217c-0.092,0.07-0.184,0.138-0.272,0.213c-0.075,0.064-0.146,0.132-0.219,0.198 c-0.102,0.094-0.204,0.188-0.301,0.288c-0.051,0.053-0.098,0.108-0.148,0.163c-0.11,0.12-0.218,0.242-0.32,0.371 c-0.032,0.04-0.06,0.082-0.091,0.122c-0.11,0.146-0.218,0.294-0.317,0.449c-0.019,0.03-0.036,0.062-0.055,0.092 c-0.103,0.165-0.201,0.333-0.291,0.509c-0.014,0.027-0.026,0.056-0.039,0.084c-0.088,0.178-0.172,0.359-0.247,0.546 c-0.01,0.025-0.017,0.05-0.027,0.075c-0.065,0.169-0.13,0.338-0.183,0.514l-78.54,264.18c-1.121,3.777,1.035,7.754,4.812,8.882 c0.685,0.193,1.364,0.293,2.035,0.293c3.084,0,5.919-1.992,6.847-5.105l17.587-59.155h113.755l19.241,59.326 c0.978,3.006,3.777,4.934,6.79,4.934c0.728,0,1.471-0.114,2.206-0.336c3.763-1.214,5.819-5.255,4.598-8.996L92.488,15.666z M35.823,210.638L85.982,41.921l54.719,168.717H35.823z" />
+ <path d="M298.77,166.506c-7.668-11.967-18.214-19.292-31.38-21.798c-32.544-6.205-69.529,20.213-71.093,21.334 c-3.206,2.313-3.913,6.769-1.614,9.967s6.769,3.906,9.967,1.607c0.328-0.25,33.444-23.89,60.069-18.885 c8.661,1.649,15.508,6.169,20.884,13.787v24.607c-16.495-0.857-60.987-1.067-82.888,19.054 c-8.668,7.954-12.981,18.078-12.831,30.109c0.207,16.551,9.175,29.588,25.247,36.742c9.082,4.041,20.135,5.969,31.395,5.969 c13.801,0,27.898-2.889,39.077-8.251v1.289c0,3.948,3.192,7.14,7.14,7.14s7.14-3.192,7.154-7.14V170.354 C299.898,168.99,299.512,167.648,298.77,166.506z M220.944,269.993c-10.988-4.905-16.636-12.938-16.779-23.883 c-0.1-7.904,2.578-14.23,8.197-19.407c18.059-16.615,59.143-16.012,73.242-15.259v52.861 C271.461,274.307,241.203,279.02,220.944,269.993z" />
+ </g>
+ </g>
+ </g>
+ </svg>
+ );
+}

src/components/Icons/index.js

@@ -0,0 +1 @@
+export { default } from "./Icons";

src/components/LayerInput/LayerInput.css

@@ -3,16 +3,12 @@ import PropTypes from "prop-types";
 import Select from "react-select";
 
 import "./LayerInput.css";
+import { LayersIcon } from "../Icons/Icons";
 
 class LayerInput extends React.Component {
  constructor(props) {
- console.log(props);
  super(props);
 
- this.state = {
- urlValue: ""
- };
-
  this.handleSelect = this.handleSelect.bind(this);
  }
 
@@ -21,14 +17,22 @@ class LayerInput extends React.Component {
  }
 
  render() {
+ const { layers, className } = this.props;
+ const layerId = this.props.value;
+ const selectableLayers = layers.map(layer => ({
+ value: layer.id,
+ label: layer.displayName
+ }));
  return (
+ // <div>
+ // <LayersIcon className="layer-icon" />
  <Select
+ className={className}
+ value={selectableLayers.filter(l => l.value === layerId)}
  onChange={this.handleSelect}
- options={this.props.layers.map(layer => ({
- value: layer.id,
- label: layer.displayName
- }))}
+ options={selectableLayers}
  />
+ // </div>
  );
  }
 }

src/components/LayerInput/LayerInput.js

@@ -1,9 +1,42 @@
-input[type=text]{
- width: 80%;
- padding: 12px 20px;
- margin: 8px 0;
- display: inline-block;
- border: 1px solid #ccc;
- border-radius: 4px;
- box-sizing: border-box;
-}
+.process-form {
+ position: absolute;
+ left: 0;
+ right: 0;
+ overflow-y: auto;
+ padding: 0 12px;
+ max-height: calc(65% - 51px);
+}
+.process-form .literal-text-input {
+ width: 80%;
+ padding: 12px 20px;
+ margin: 8px 10px;
+ display: inline-block;
+ border: 1px solid #ccc;
+ border-radius: 4px;
+ box-sizing: border-box;
+ width: calc(100% - 55px);
+}
+
+.process-form .execute-button {
+ font-weight: bold;
+ margin-top: 12px;
+ background-color: #3b5998;
+ font-size: 15px;
+ color: white;
+ border: 0;
+ width: 100%;
+ padding: 20px;
+ border-radius: 0px;
+}
+
+.process-form .process-form-icon {
+ width: 30px;
+ padding: 13px 0;
+ vertical-align: middle;
+}
+
+.process-form .layer-select {
+ display: inline-block;
+ width: calc(100% - 35px);
+ padding: 0 10px;
+}

src/components/ProcessForm/ProcessForm.css

@@ -8,6 +8,7 @@ import LayerInput from "../LayerInput";
 // import LayerInput from '../../containers/LayerInputContainer'; todo remove LayerInputContainer
 
 import "./ProcessForm.css";
+import { TextIcon, LayersIcon } from "../Icons/Icons";
 
 class ProcessForm extends React.Component {
  constructor(props) {
@@ -50,32 +51,41 @@ class ProcessForm extends React.Component {
  }
 
  render() {
- const { inputs, handleOnSubmit } = this.props;
+ const { inputs, layers, onSubmit } = this.props;
  return (
- <form>
+ <form className="process-form">
  {inputs.map((formInput, i) => (
  <div>
  <h3>{formInput.title}</h3>
  <p>{formInput.abstractValue}</p>
  {formInput.type === InputTypes.COMPLEX ? (
- <LayerInput
- layers={this.props.layers}
- key={i}
- id={i}
- onSelect={this.handleAddComplexData}
- />
+ <div>
+ <LayersIcon className="process-form-icon" />
+ <LayerInput
+ className="layer-select"
+ layers={layers}
+ key={i}
+ id={i}
+ value={formInput.values[0]}
+ onSelect={this.handleAddComplexData}
+ />
+ </div>
  ) : (
- <input
- key={formInput.identifier}
- onChange={this.handleAddLiteralData}
- value={formInput.values[0]}
- id={`form-input-${i}`}
- type="text"
- />
+ <div>
+ <TextIcon className="process-form-icon" />
+ <input
+ className="literal-text-input"
+ key={formInput.identifier}
+ onChange={this.handleAddLiteralData}
+ value={formInput.values[0]}
+ id={`form-input-${i}`}
+ type="text"
+ />
+ </div>
  )}
  </div>
  ))}
- <button type="button" onClick={this.props.onSubmit}>
+ <button type="button" className="execute-button" onClick={onSubmit}>
  Execute
  </button>
  </form>

src/components/ProcessForm/ProcessForm.js

@@ -0,0 +1,2 @@
+#results-panel {
+}

src/components/ResultsPanel/ResultsPanel.css

@@ -0,0 +1,14 @@
+import React from "react";
+
+import "./ResultsPanel";
+
+export default function({ outputs }) {
+ return (
+ <div className="results-panel">
+ <h3>Results</h3>
+ {outputs.map(output => (<div className="result-item" key={output.identifier}>
+ {output.identifier}
+ </div>))}
+ </div>
+ );
+}