Extract color from images on ingest

README.md

@@ -30,14 +30,13 @@ If you need to clear your data and reset the entire development environment, fro
 
 ```
 mix ecto.reset
-mix meadow.elasticsearch.clear
+mix meadow.elasticsearch.teardown
 mix meadow.pipeline.purge
 clean-s3 dev -y
 
 ...then
 mix deps.get
 mix meadow.setup
-mix assets.install
 mix phx.server
 ```
 

app/assets/js/components/Search/ColorExperiment.jsx

@@ -0,0 +1,113 @@
+import React, { useState } from "react";
+import { HslColorPicker } from "react-colorful";
+
+export default function ColorExperiment() {
+  const styles = {
+    reactColorful: {
+      width: 500,
+      height: 500,
+    },
+  };
+  const [color, setColor] = useState({ h: 0, s: 0, l: 100 });
+  const [results, setResults] = useState([]);
+
+  const handleColorChange = (color) => {
+    setColor(color);
+    console.log(color);
+
+    fetch(
+      "https://devbox.library.northwestern.edu:3001/elasticsearch/meadow/_search",
+      {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(query(color.h, color.s, color.l)),
+      }
+    )
+      .then((response) => {
+        return response.json();
+      })
+      .then((results) => {
+        console.log(results.hits.hits);
+        setResults(results.hits.hits);
+      });
+  };
+
+  const query = (h, _s, _l) => {
+    return {
+      _source: {
+        includes: ["id", "title", "representativeFileSet", "color"],
+      },
+      query: {
+        nested: {
+          path: "color",
+          query: {
+            bool: {
+              must: [
+                {
+                  range: {
+                    "color.h": {
+                      gte: h - 20 < 0 ? 0 : h - 20,
+                      lte: h + 20 > 360 ? 360 : h + 20,
+                    },
+                  },
+                },
+                {
+                  range: {
+                    "color.s": {
+                      gte: 0,
+                      lte: 100,
+                    },
+                  },
+                },
+                {
+                  range: {
+                    "color.l": {
+                      gte: 0,
+                      lte: 100,
+                    },
+                  },
+                },
+              ],
+            },
+          },
+        },
+      },
+    };
+  };
+
+  return (
+    <div>
+      <HslColorPicker
+        style={styles.reactColorful}
+        color={color}
+        onChange={handleColorChange}
+      />
+      <hr />
+      <p>Selected Color: {JSON.stringify(color)}</p>
+      <p>Results: {results && results.length}</p>
+      <hr />
+      {results &&
+        results.map((result, index) => {
+          return (
+            <div
+              id={index}
+              className="card is-shadowless"
+              style={{ width: "30%", float: "left", margin: 20 }}
+            >
+              <div className="card-image">
+                <figure className="image is-square">
+                  <img
+                    src={`${result._source.representativeFileSet.url}/square/300,300/0/default.jpg`}
+                  />
+                </figure>
+                <p>{result._source.title}</p>
+                <p>{JSON.stringify(result._source.color)}</p>
+              </div>
+            </div>
+          );
+        })}
+    </div>
+  );
+}

app/assets/js/screens/Root.jsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { BrowserRouter, Route, Switch } from "react-router-dom";
 import { AuthProvider } from "../components/Auth/Auth";
+import ScreensColorExperiment from "./Search/ColorExperiment";
 import ScreensDashboardsBatchEditList from "@js/screens/Dashboards/BatchEdit/List";
 import ScreensDashboardsPreservationChecksList from "@js/screens/Dashboards/PreservationChecks/List";
 import ScreensDashboardsBatchEditDetails from "@js/screens/Dashboards/BatchEdit/Details";
@@ -114,6 +115,11 @@ export default class Root extends React.Component {
                   path="/collection/:id"
                   component={ScreensCollection}
                 />
+                <PrivateRoute
+                  exact
+                  path="/search/color-experiment"
+                  component={ScreensColorExperiment}
+                />
                 <PrivateRoute exact path="/search" component={ScreensSearch} />
                 <PrivateRoute
                   exact

app/assets/js/screens/Search/ColorExperiment.jsx

@@ -0,0 +1,49 @@
+import React from "react";
+import Layout from "@js/screens/Layout";
+import { Breadcrumbs, PageTitle } from "@js/components/UI/UI";
+import ColorExperiment from "@js/components/Search/ColorExperiment";
+import { ErrorBoundary } from "react-error-boundary";
+import UIFallbackErrorComponent from "@js/components/UI/FallbackErrorComponent";
+import { IconCheck } from "@js/components/Icon";
+import IconText from "@js/components/UI/IconText";
+import useGTM from "@js/hooks/useGTM";
+
+function ScreensColorExperiment(props) {
+  const { loadDataLayer } = useGTM();
+
+  React.useEffect(() => {
+    loadDataLayer({ pageTitle: "Color Experiment" });
+  }, []);
+
+  return (
+    <Layout>
+      <section className="section" data-testid="color-experiment-screen">
+        <div className="container">
+          <Breadcrumbs
+            items={[
+              {
+                label: "Search",
+                isActive: false,
+              },
+              {
+                label: "Color Experiment",
+                route: "/search/color-experiment",
+                isActive: true,
+              },
+            ]}
+          />
+          <PageTitle data-testid="color-experiment-title">
+            <IconText icon={<IconCheck />}>Color Experiment</IconText>
+          </PageTitle>
+          <ErrorBoundary FallbackComponent={UIFallbackErrorComponent}>
+            <ColorExperiment />
+          </ErrorBoundary>
+        </div>
+      </section>
+    </Layout>
+  );
+}
+
+ScreensColorExperiment.propTypes = {};
+
+export default ScreensColorExperiment;