Merge pull request #40 from coreofscience/limit-by-file-size

Limit by file size

Author: odarbelaeze

src/components/providers/FilesProvider.tsx

@@ -41,15 +41,33 @@ const FilesProvider: FC<Props> = ({ children }: Props) => {
     });
   }, []);
 
+  const swap = useCallback(
+    (hash: string) => {
+      setFiles((prev) => {
+        const index = prev.findIndex((file) => file.hash === hash);
+        if (index < 0) {
+          return prev;
+        }
+        return [
+          files[index],
+          ...prev.slice(0, index),
+          ...prev.slice(index + 1),
+        ];
+      });
+    },
+    [files]
+  );
+
   const value = useMemo(
     () => ({
       add,
       files,
       remove,
       track,
       progress,
+      swap,
     }),
-    [add, files, remove, track, progress]
+    [add, files, remove, track, progress, swap]
   );
 
   return <FileContext.Provider value={value}>{children}</FileContext.Provider>;

src/components/upload/FileCard.css

@@ -5,14 +5,14 @@
   justify-content: space-between;
   box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.25);
   position: relative;
-  padding: 35px 1em;
+  padding: 45px 1em 50px;
   text-align: center;
   margin-top: 1em;
 }
 
 .fileCard .fileCard__closeButton {
-  background-color: #f0972f;
-  color: #fcfcfc;
+  background-color: var(--color-tree-root);
+  color: var(--color-bg);
   height: 30px;
   width: 30px;
   border: none;
@@ -46,27 +46,45 @@
 .fileCard .fileCard__keywords {
   margin-top: 1em;
   font-size: 16px;
-  color: #5b5b5b;
+  color: var(--color-label);
   max-width: 90%;
 }
 
 .fileCard .fileCard__statGroup {
   margin-top: 1em;
 }
+
 .fileCard .fileCard__stats {
   margin-top: 0.5em;
   display: flex;
   flex-direction: column;
   align-items: center;
 }
+
 .fileCard .fileCard__stats__count {
   font-size: 24px;
   font-weight: 600;
 }
+
 .fileCard .fileCard__stats__unit {
   font-size: 14px;
-  color: #5b5b5b;
+  color: var(--color-label);
+}
+
+.fileCard .fileCard__weight {
+  position: absolute;
+  bottom: 0.5rem;
+  right: 0.5rem;
+}
+
+.fileCard .fileCard__weight small {
+  font-size: 60%;
 }
+
+.fileCard.capped .fileCard__weight small {
+  color: var(--color-red-accent);
+}
+
 .fileCard_progressBar {
   position: absolute;
   bottom: 0;
@@ -77,9 +95,42 @@
   background: #f0f0f0;
 }
 .fileCard_progressBar .fileCard_progressAdjustment {
-  background: #009d35;
+  background: var(--color-tree-leaf);
   width: 100%;
   transform-origin: 0%;
   height: 3px;
   margin: 0;
 }
+
+.fileCard.capped {
+  background: var(--color-bg-accent);
+}
+
+.fileCard .fileCard__moveButton {
+  background-color: var(--color-tree-root);
+  color: var(--color-bg);
+  height: 30px;
+  width: 30px;
+  border: none;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  top: 0;
+  left: 0;
+  transition: background-color 200ms cubic-bezier(0.42, 0, 0.56, 1.7);
+}
+
+.fileCard .fileCard__moveButton:hover,
+.fileCard .fileCard__moveButton:active {
+  background-color: var(--color-tree-leaf);
+}
+
+.fileCard .fileCard__moveButton img {
+  width: 14px;
+  height: 14px;
+}
+
+.fileCard .fileCard__moveButton svg.move-icon path {
+  fill: var(--color-bg);
+}

src/components/upload/FileCard.tsx

@@ -1,6 +1,11 @@
 import React, { FC } from "react";
 
 import CancelFile from "../vectors/CancelFile";
+import MoveFirstIcon from "../vectors/MoveFirstIcon";
+
+import { round } from "../../utils/mathUtils";
+import { MAX_SIZE } from "../../utils/computeQuantities";
+
 import "./FileCard.css";
 
 interface Props {
@@ -9,7 +14,11 @@ interface Props {
   articles?: number;
   citations?: number;
   remove?: () => void;
+  move?: () => void;
   progress: number;
+  capped?: boolean;
+  size: number;
+  cumSize: number;
 }
 
 const FileCard: FC<Props> = ({
@@ -19,9 +28,23 @@ const FileCard: FC<Props> = ({
   citations = 0,
   progress = 0,
   remove = () => {},
+  move = () => {},
+  capped = true,
+  size = 0,
+  cumSize = 0,
 }: Props) => {
+  const countFormat = new Intl.NumberFormat(undefined);
+  const weightFormat = new Intl.NumberFormat(undefined, {
+    minimumFractionDigits: 2,
+  });
+
   return (
-    <div className="fileCard">
+    <div className={capped ? "fileCard capped" : "fileCard"}>
+      {capped && (
+        <button onClick={move} className="fileCard__moveButton">
+          <MoveFirstIcon />
+        </button>
+      )}
       <button onClick={remove} className="fileCard__closeButton">
         <CancelFile />
       </button>
@@ -31,18 +54,28 @@ const FileCard: FC<Props> = ({
       <small className="fileCard__keywords">{keywords.join(", ")}</small>
       <div className="fileCard__statGroup">
         <span className="fileCard__stats">
-          <strong className="fileCard__stats__count">{articles}</strong>
+          <strong className="fileCard__stats__count">
+            {countFormat.format(articles)}
+          </strong>
           <small className="fileCard__stats__unit">
             {articles === 1 ? "article" : "articles"}
           </small>
         </span>
         <span className="fileCard__stats">
-          <strong className="fileCard__stats__count">{citations}</strong>
+          <strong className="fileCard__stats__count">
+            {countFormat.format(citations)}
+          </strong>
           <small className="fileCard__stats__unit">
             {citations === 1 ? "citation" : "citations"}
           </small>
         </span>
       </div>
+      <div className="fileCard__weight">
+        <small title="To keep our costs down, we need to limit the ammount of data we process for each tree.">
+          {weightFormat.format(round(cumSize, 2))} /{" "}
+          {weightFormat.format(round(MAX_SIZE, 2))} [MB]
+        </small>
+      </div>
       <div className="fileCard_progressBar">
         <div
           className="fileCard_progressAdjustment"

src/components/upload/Home.tsx

@@ -7,13 +7,19 @@ import FileDropper from "./FileDropper";
 import UploadIndicator from "./UploadIndicator";
 import FileErrors from "./FileErrors";
 
-import { FileMetadata } from "../../utils/customTypes";
 import useFiles from "../../hooks/useFiles";
 import FirebaseContext from "../../context/FirebaseContext";
 
+import computeQuantities, { MAX_SIZE } from "../../utils/computeQuantities";
+import { round } from "../../utils/mathUtils";
+
 import "./Home.css";
 
-const numberFormat = new Intl.NumberFormat();
+const countFormat = new Intl.NumberFormat();
+const weightFormat = new Intl.NumberFormat(undefined, {
+  minimumFractionDigits: 2,
+  maximumFractionDigits: 2,
+});
 
 const createTree = async ({
   app,
@@ -54,21 +60,13 @@ const Home: FC<{}> = () => {
   const firebase = useContext(FirebaseContext);
   const history = useHistory();
 
-  const totalArticles = files.reduce((acc, el) => acc + (el.articles || 0), 0);
-  const totalCitations = files.reduce(
-    (acc, el) => acc + (el.citations || 0),
-    0
-  );
-  const articleCap = Math.min(totalArticles, 500);
-  const citationCap = files
-    .reduce(
-      (acc: FileMetadata[], el) =>
-        acc.reduce((acc, el) => acc + (el.articles || 0), 0) >= articleCap
-          ? acc
-          : [...acc, el],
-      []
-    )
-    .reduce((acc, el) => acc + (el.citations || 0), 0);
+  const {
+    totalArticles,
+    totalCitations,
+    articleCap,
+    citationCap,
+    sizeCap,
+  } = computeQuantities(files);
 
   const [create, { isLoading, isError }] = useMutation(createTree, {
     onSuccess: (treeId: string) => history.push(`/tree/${treeId}`),
@@ -87,18 +85,24 @@ const Home: FC<{}> = () => {
       <div className="information-cant-article">
         <div className="frame-article">
           <span className="total-articles">
-            {numberFormat.format(articleCap)}/
-            {numberFormat.format(totalArticles)}
+            {countFormat.format(articleCap)}/{countFormat.format(totalArticles)}
           </span>
           <span className="articles">articles</span>
         </div>
         <div className="frame-article">
           <span className="total-articles">
-            {numberFormat.format(citationCap)}/
-            {numberFormat.format(totalCitations)}
+            {countFormat.format(citationCap)}/
+            {countFormat.format(totalCitations)}
           </span>
           <span className="articles">citations</span>
         </div>
+        <div className="frame-article">
+          <span className="total-articles">
+            {weightFormat.format(round(sizeCap, 2))}/
+            {weightFormat.format(round(MAX_SIZE, 2))}
+          </span>
+          <span className="articles">size [MB]</span>
+        </div>
       </div>
       <br></br>
       <div>Time to create your Tree of Science.</div>

src/components/upload/UploadIndicator.tsx

@@ -1,19 +1,41 @@
-import React, { FC, useContext } from "react";
+import React, { FC, useContext, useEffect, useState } from "react";
 import "./UploadIndicator.css";
 
 import FileCard from "./FileCard";
 import FileContext from "../../context/FileContext";
 import useFiles from "../../hooks/useFiles";
+import { MAX_SIZE } from "../../utils/computeQuantities";
 
 interface Props {}
 
 const UploadIndicator: FC<Props> = () => {
-  const { remove } = useContext(FileContext);
+  const { remove, swap } = useContext(FileContext);
   const { progress } = useContext(FileContext);
   const files = useFiles();
+
+  const [cappedFiles, setCappedFiles] = useState<{ [hash: string]: boolean }>(
+    {}
+  );
+
+  let cumSize = 0;
+
+  useEffect(() => {
+    let size = 0;
+    for (const file of files) {
+      size += file.blob.size / 2 ** 20;
+
+      if (size <= MAX_SIZE) {
+        setCappedFiles((prev) => ({ ...prev, [file.hash]: false }));
+      } else {
+        setCappedFiles((prev) => ({ ...prev, [file.hash]: true }));
+      }
+    }
+  }, [files]);
+
   return (
     <div className="uploadIndicator">
       {files.map((file) => {
+        cumSize += file.blob.size / 2 ** 20;
         return (
           <FileCard
             name={file.name}
@@ -22,6 +44,10 @@ const UploadIndicator: FC<Props> = () => {
             citations={file.citations}
             keywords={file.keywords}
             remove={() => remove(file.hash)}
+            move={() => swap(file.hash)}
+            capped={cappedFiles[file.hash]}
+            size={file.blob.size / 2 ** 20}
+            cumSize={cumSize}
             key={file.hash}
           />
         );

src/components/vectors/MoveFirstIcon.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+
+const MoveFirstIcon = () => (
+  <svg
+    className="move-icon"
+    viewBox="0 0 18 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M16 10L8 2M10 10l-8 8M16 18l-8-8M10 2l-8 8"
+      stroke="#FCFCFC"
+      stroke-width="3"
+    />
+  </svg>
+);
+
+export default MoveFirstIcon;

src/context/FileContext.tsx

@@ -5,6 +5,7 @@ const FileContext = createContext<FileContexType>({
   add: () => {},
   remove: () => {},
   track: () => {},
+  swap: () => {},
   progress: {},
   files: [],
 });

src/index.css

@@ -370,6 +370,7 @@ template {
   --color-tree-trunk: #904c14;
   --color-bg: #fcfcfc;
   --color-bg-accent: #f0f0f0;
+  --color-red-accent: rgb(226, 132, 148);
   --color-link: #366fc6;
   --color-link-hover: #3a6099;
   --color-label: #5b5b5b;