Merge pull request #1748 from openforis/development

Merge development into main Production 2024-06-24

package.json

@@ -85,9 +85,11 @@
     "ogr2ogr": "^1.5.0",
     "ol": "^6.4.3",
     "prop-types": "^15.7.2",
+    "quick-lint-js": "^3.2.0",
     "react": "^16.8.0",
     "react-dom": "^16.8.0",
     "react-grid-layout": "^1.3.0",
+    "react-markdown": "^8.0.7",
     "shpjs": "^4.0.2"
   },
   "devDependencies": {

src/clj/collect_earth_online/db/projects.clj

@@ -108,6 +108,7 @@
      :availability       (:availability project)
      :name               (:name project)
      :description        (:description project)
+     :learningMaterial   (:learning_material project)
      :privacyLevel       (:privacy_level project)
      :boundary           (:boundary project) ;; Boundary is only used for Planet queries
      :aoiFeatures        (tc/jsonb->clj (:aoi_features project))
@@ -427,6 +428,7 @@
         imagery-id           (or (:imageryId params) (get-first-public-imagery))
         name                 (:name params)
         description          (:description params)
+        learning-material    (:learningMaterial params)
         privacy-level        (:privacyLevel params)
         aoi-features         (or (:aoiFeatures params)
                                  [(make-geo-json-polygon (tc/val->double (:lonMin params))
@@ -461,6 +463,7 @@
                                                       institution-id
                                                       name
                                                       description
+                                                      learning-material
                                                       privacy-level
                                                       imagery-id
                                                       (tc/clj->jsonb aoi-features)
@@ -570,6 +573,7 @@
         imagery-id           (or (:imageryId params) (get-first-public-imagery))
         name                 (:name params)
         description          (:description params)
+        learning-material    (:learningMaterial params)
         privacy-level        (:privacyLevel params)
         aoi-features         (or (:aoiFeatures params)
                                  [(make-geo-json-polygon (tc/val->double (:lonMin params))
@@ -603,6 +607,7 @@
                   project-id
                   name
                   description
+                  learning-material
                   privacy-level
                   imagery-id
                   (tc/clj->jsonb aoi-features)

src/clj/collect_earth_online/generators/external_file.clj

@@ -85,13 +85,14 @@
                              (str/split r #"\t")
                              (zipmap header-keys r)
                              (update r geom-key tc/str->pg "geometry")
-                             (update r :visible_id tc/val->int)))
+                             (update r :visible_id tc/val->float)
+                             (update r :visible_id int)))
                          (str/split body-text #"\r\n|\n|\r"))]
     (if (apply distinct? header-keys)
       [header-keys body]
       (pu/init-throw (str "The provided "
-                           design-type
-                           " SHP file must not contain duplicate column titles.")))))
+                          design-type
+                          " SHP file must not contain duplicate column titles.")))))
 
 (defmethod get-file-data :csv [_ design-type ext-file folder-name]
   (let [rows       (str/split (slurp (str folder-name ext-file)) #"\r\n|\n|\r")
@@ -125,7 +126,8 @@
                                (split-row r)
                                (into (ordered-map) (map vector header-keys r))
                                (assoc r geom-key (tc/str->pg (make-wkt-point (:lon r) (:lat r)) "geometry"))
-                               (update r :visible_id tc/val->int)
+                               (update r :visible_id tc/val->float)
+                               (update r :visible_id int)
                                (dissoc r :lon :lat)))
                            (rest rows))]
       (if (and (some #(= % :lon) header-keys)

src/css/custom.css

@@ -864,3 +864,37 @@ body {
     margin-top: 60px;
     overflow-x: hidden;
 }
+
+/********************/
+/* Plot Information */
+/********************/
+.plot-info__list {
+  list-style: none;
+  padding: 0;
+  margin: 1rem 0;
+  background: #f9f9f9;
+  border-radius: 8px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.plot-info__item {
+  padding: 0.5rem 1rem;
+  border-bottom: 1px solid #eaeaea;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.plot-info__item:last-child {
+  border-bottom: none;
+}
+
+.plot-info__key {
+  font-weight: bold;
+  margin-right: 0.5rem;
+}
+
+.plot-info__value {
+  color: #555;
+  font-style: italic;
+}

src/js/collection.jsx

@@ -1,8 +1,8 @@
-import React from "react";
+import React, { useEffect, useRef } from "react";
 import ReactDOM from "react-dom";
 import _ from "lodash";
 
-import { LoadingModal, NavigationBar } from "./components/PageComponents";
+import { LoadingModal, NavigationBar, LearningMaterialModal } from "./components/PageComponents";
 import SurveyCollection from "./survey/SurveyCollection";
 import {
   PlanetMenu,
@@ -1088,7 +1088,6 @@ class Collection extends React.Component {
             toggleShowSamples={this.toggleShowSamples}
             state={{showBoundary: this.state.showBoundary,
                     showSamples: this.state.showSamples}}
-
           />
           {this.state.currentPlot.id &&
             this.state.currentProject.projectOptions.showPlotInformation && (
@@ -1171,7 +1170,7 @@ function ImageAnalysisPane({ imageryAttribution }) {
 class SideBar extends React.Component {
   checkCanSave = () => {
     const { answerMode, currentPlot, inReviewMode, surveyQuestions, collectConfidence } = this.props;
-    const { confidence, confidenceComment } = currentPlot;
+    const { confidence } = currentPlot;
     const visibleSurveyQuestions = filterObject(surveyQuestions, ([_id, val]) => val.hideQuestion != true);
     const noneAnswered = everyObject(visibleSurveyQuestions, ([_id, sq]) => safeLength(sq.answered) === 0);
     const hasSamples = safeLength(currentPlot.samples) > 0;
@@ -1488,7 +1487,8 @@ class ExternalTools extends React.Component {
     super(props);
     this.state = {
       showExternalTools: true,
-      auxWindow: null
+      auxWindow: null,
+      showLearningMaterial: false,
     };
   }
 
@@ -1582,8 +1582,22 @@ class ExternalTools extends React.Component {
     </a>
   );
 
-  render() {
+  learningMaterialButton = () => (
+    <input
+      className="btn btn-outline-lightgreen btn-sm btn-block my-2"
+      onClick={this.toggleLearningMaterial}
+      type="button"
+      value="Interpretation Instructions"
+    />
+  );
 
+  toggleLearningMaterial = () => {
+    this.setState(prevState => ({
+      showLearningMaterial: !prevState.showLearningMaterial
+    }));
+  };
+
+  render() {
     return this.props.currentPlot.id ? (
       <>
         <CollapsibleTitle
@@ -1597,8 +1611,15 @@ class ExternalTools extends React.Component {
             {this.toggleViewButtons()}
             {this.props.KMLFeatures && this.kmlButton()}
             {this.props.currentProject.projectOptions.showGEEScript && this.geeButton()}
+            {this.learningMaterialButton()}
           </div>
         )}
+        {this.state.showLearningMaterial && (
+          <LearningMaterialModal
+            learningMaterial={this.props.currentProject.learningMaterial}
+            onClose={this.toggleLearningMaterial}
+          />
+        )}
       </>
     ) : null;
   }
@@ -1626,13 +1647,15 @@ class PlotInformation extends React.Component {
         />
         {this.state.showInfo ? (
           hasExtraInfo ? (
-            <ul className="mb-3 mx-1">
+            <ul className="plot-info__list mb-3 mx-1">
               {Object.entries(this.props.extraPlotInfo)
                 .filter(([_key, value]) => value && !(value instanceof Object))
+                .sort((a, b) => a[0].localeCompare(b[0])) // Sorting the array by keys alphabetically
                 .map(([key, value]) => (
-                  <li key={key}>
-                    {key} - {value}
-                  </li>
+                  <li key={key} className="plot-info__item">
+                  <span className="plot-info__key">{key}</span>
+                  <span className="plot-info__value">{value}</span>
+                </li>
                 ))}
             </ul>
           ) : (

src/js/components/PageComponents.jsx

@@ -1,6 +1,8 @@
 import "../../css/custom.css";
 
 import React from "react";
+import ReactMarkdown from 'react-markdown';
+
 import SvgIcon from "./svg/SvgIcon";
 import { getLanguage, capitalizeFirst } from "../utils/generalUtils";
 import { getPreference, setPreference } from "../utils/preferences";
@@ -440,3 +442,34 @@ export function LoadingModal({ message }) {
     </div>
   );
 }
+
+export const LearningMaterialModal = ({ learningMaterial, onClose }) => {
+    return (
+    <div
+      className="modal fade show"
+      id="quitModal"
+      onClick={onClose}
+      style={{ display: "block", backgroundColor: "rgba(0, 0, 0, 0.4)" }}
+    >
+      <div
+        className="modal-dialog modal-dialog-centered"
+        onClick={(e) => e.stopPropagation()}
+        role="document"
+      >
+        <div className="modal-content" id="quitModalContent">
+          <div className="modal-header">
+            <h5 className="modal-title" id="quitModalTitle">
+              Learning Material
+            </h5>
+            <button aria-label="Close" className="close" onClick={onClose} type="button">
+              &times;
+            </button>
+          </div>
+          <div className="modal-body">
+            <ReactMarkdown>{learningMaterial}</ReactMarkdown>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

src/js/project/Overview.jsx

@@ -1,5 +1,6 @@
-import React, { useContext } from "react";
+import React, { useContext, useState } from "react";
 
+import { LearningMaterialModal } from "../components/PageComponents";
 import { capitalizeFirst } from "../utils/generalUtils";
 import { ProjectContext } from "./constants";
 
@@ -12,6 +13,7 @@ export function Overview(props) {
     projectOptions,
     projectOptions: { showGEEScript, showPlotInformation, collectConfidence, autoLaunchGeoDash },
     projectId,
+    learningMaterial
   } = useContext(ProjectContext);
   return (
     <div id="project-info">
@@ -39,6 +41,16 @@ export function Overview(props) {
             value={description}
           />
         </div>
+        <div className="form-group">
+          <label htmlFor="learning-material">Learning Material</label>
+          <textarea
+            className="form-control form-control-sm"
+            id="learning-material"
+            maxLength="2000"
+            onChange={(e) => setProjectDetails({ learningMaterial: e.target.value })}
+            value={learningMaterial}
+          />
+        </div>
       </div>
       <h3>Visibility</h3>
       <div className="mb-3 ml-3" id="project-visibility">
@@ -312,7 +324,12 @@ class ProjectTemplateSelection extends React.Component {
 ProjectTemplateSelection.contextType = ProjectContext;
 
 export function OverviewReview() {
-  const { doiPath , name, description, privacyLevel, projectOptions } = useContext(ProjectContext);
+  const { doiPath , name, description, privacyLevel, projectOptions, learningMaterial } = useContext(ProjectContext);
+  const [learningMaterialOpen, setLearningMaterialOpen] = useState(false);
+  const toggleLearningMaterial = () => {
+    setLearningMaterialOpen(!learningMaterialOpen);
+  };
+
   return (
     <div className="d-flex flex-column">
       <label>
@@ -321,6 +338,13 @@ export function OverviewReview() {
       <label>
         <b>Description:</b> {description}
       </label>
+      <label>
+        <b>Learning Material: </b>
+        <button onClick={toggleLearningMaterial}
+                className="btn btn-outline-lightgreen btn-sm w-5">
+          View Interpretation Instructions
+        </button>
+      </label>
       <label>
         <b>Visibility:</b> {capitalizeFirst(privacyLevel)}
       </label>
@@ -348,6 +372,7 @@ export function OverviewReview() {
           Geo-Dash Window
         </li>
       </ul>
+      {learningMaterialOpen && <LearningMaterialModal learningMaterial={learningMaterial} onClose={toggleLearningMaterial} />}
     </div>
   );
 }

src/js/project/ReviewChanges.jsx

@@ -93,6 +93,7 @@ export default class ReviewChanges extends React.Component {
     aoiFeatures: this.context.aoiFeatures,
     aoiFileName: this.context.aoiFileName,
     description: this.context.description,
+    learningMaterial: this.context.learningMaterial,
     name: this.context.name,
     privacyLevel: this.context.privacyLevel,
     projectOptions: this.context.projectOptions,

src/sql/changes/2024-05-04_add_learning_material_column.sql

@@ -0,0 +1 @@
+alter table projects add learning_material text;