Merge branch 'develop' into flash-video

app/package.json

@@ -1,7 +1,7 @@
 {
     "name": "fiftyone",
     "productName": "FiftyOne",
-    "version": "0.13.1",
+    "version": "0.13.2",
     "license": "Apache-2.0",
     "description": "FiftyOne by Voxel51",
     "main": "./dist/main.js",

app/src/components/FieldsSidebar.tsx

@@ -611,7 +611,7 @@ const ScalarsCell = ({ modal }: ScalarsCellProps) => {
         filtering.filteredScalars(modal)
       )}
       entries={scalars
-        .filter((name) => !(name === "filepath" && modal))
+        .filter((name) => !(["filepath", "id"].includes(name) && modal))
         .map((name) => {
           return {
             name,

app/src/components/Header.tsx

@@ -6,15 +6,14 @@ import React, {
   useState,
 } from "react";
 import styled from "styled-components";
-import { Checkbox } from "@material-ui/core";
 import { useRecoilState, useRecoilValue, useResetRecoilState } from "recoil";
 import AuosizeInput from "react-input-autosize";
 import { Machine, assign } from "xstate";
 import { useMachine } from "@xstate/react";
 import uuid from "uuid-v4";
 import { animated, useSpring } from "react-spring";
 import { ThemeContext } from "styled-components";
-import { Close } from "@material-ui/icons";
+import { Close, Group } from "@material-ui/icons";
 import { GitHub, MenuBook } from "@material-ui/icons";
 
 import { BestMatchDiv } from "./ViewBar/ViewStage/BestMatch";
@@ -25,7 +24,7 @@ import ExternalLink from "./ExternalLink";
 import { Slack } from "../icons";
 import * as atoms from "../recoil/atoms";
 import * as selectors from "../recoil/selectors";
-import socket, { http, appContext } from "../shared/connection";
+import socket, { http } from "../shared/connection";
 import { useTheme } from "../utils/hooks";
 import { packageMessage } from "../utils/socket";
 
@@ -335,20 +334,21 @@ const Input = styled.input`
   }
 `;
 
-const TshirtForm = () => {
+const TeamsForm = () => {
   const [formState, setFormState] = useState({
     email: "",
+    firstname: "",
+    lastname: "",
+    company: "",
+    role: "",
     discover: "",
-    helping: "",
-    improve: "",
-    tshirt: false,
   });
   const [submitText, setSubmitText] = useState("Submit");
-  const [submitted, setSubmitted] = useRecoilState(atoms.feedbackSubmitted);
+  const [submitted, setSubmitted] = useRecoilState(atoms.teamsSubmitted);
   const portalId = 4972700;
-  const formId = "b56682f6-c297-4cea-95c4-9e05a00528af";
+  const formId = "87aa5367-a8f1-4ed4-9e23-1fdf8448d807";
   const postUrl = `https://api.hsforms.com/submissions/v3/integration/submit/${portalId}/${formId}`;
-  const closeFeedback = useRecoilValue(atoms.closeFeedback);
+  const closeTeams = useRecoilValue(atoms.closeTeams);
   const theme = useTheme();
 
   const setFormValue = (name) => (e) =>
@@ -359,9 +359,8 @@ const TshirtForm = () => {
   const disabled =
     !(
       formState.email?.length &&
-      formState.helping?.length &&
-      formState.improve?.length &&
-      formState.discover?.length
+      formState.firstname?.length &&
+      formState.lastname?.length
     ) || submitted.submitted;
   const submit = () => {
     if (disabled) {
@@ -373,8 +372,8 @@ const TshirtForm = () => {
     const finalize = () => {
       setSubmitText("Submitted. Thank you!");
       setSubmitted({ ...submitted, submitted: true });
-      fetch(`${http}/feedback?submitted=true`, { method: "post" });
-      setTimeout(() => closeFeedback && closeFeedback.close(), 2000);
+      fetch(`${http}/teams?submitted=true`, { method: "post" });
+      setTimeout(() => closeTeams && closeTeams.close(), 2000);
     };
 
     fetch(postUrl, {
@@ -385,28 +384,28 @@ const TshirtForm = () => {
         submittedAt: Date.now(),
         fields: [
           {
-            name: "email",
-            value: formState.email,
+            name: "firstname",
+            value: formState.firstname,
           },
           {
-            name: "is_fiftyone_helping_your_work_how_so_",
-            value: formState.helping,
+            name: "lastname",
+            value: formState.lastname,
           },
           {
-            name: "how_could_we_improve_fiftyone_",
-            value: formState.improve,
+            name: "email",
+            value: formState.email,
           },
           {
-            name: "app_how_did_you_hear_about_us",
-            value: formState.discover,
+            name: "company",
+            value: formState.company,
           },
           {
-            name: "zoom_call_and_t_shirt",
-            value: formState.tshirt,
+            name: "role",
+            value: formState.role,
           },
           {
-            name: "app_context",
-            value: appContext,
+            name: "app_how_did_you_hear_about_us",
+            value: formState.discover,
           },
         ],
         context: { pageName: "FiftyOne App" },
@@ -427,50 +426,48 @@ const TshirtForm = () => {
   };
   return (
     <>
+      <Input
+        key="firstname"
+        placeholder={"First name*"}
+        value={formState.firstname ?? ""}
+        maxLength={40}
+        onChange={setFormValue("firstname")}
+      />
+      <Input
+        key="lastname"
+        placeholder={"Last name*"}
+        value={formState.lastname ?? ""}
+        maxLength={40}
+        onChange={setFormValue("lastname")}
+      />
       <Input
         key="email"
-        placeholder={"Email"}
+        placeholder={"Email*"}
         type="email"
         value={formState.email ?? ""}
         onChange={setFormValue("email")}
       />
       <Input
-        key="discover"
-        placeholder={"How did you discover FiftyOne?"}
-        value={formState.discover ?? ""}
+        key="company"
+        placeholder={"Company"}
+        value={formState.company ?? ""}
         maxLength={100}
-        onChange={setFormValue("discover")}
+        onChange={setFormValue("company")}
       />
       <Input
-        key="helping"
-        placeholder={"Is FiftyOne helping your work?"}
-        value={formState.helping ?? ""}
-        onChange={setFormValue("helping")}
+        key="role"
+        placeholder={"Role"}
+        value={formState.role ?? ""}
         maxLength={100}
+        onChange={setFormValue("role")}
       />
       <Input
-        key="improve"
-        placeholder={"How could we improve FiftyOne?"}
-        value={formState.improve ?? ""}
+        key="discover"
+        placeholder={"How did you hear about FiftyOne?"}
+        value={formState.discover ?? ""}
         maxLength={100}
-        onChange={setFormValue("improve")}
+        onChange={setFormValue("discover")}
       />
-      <div style={{ display: "flex" }}>
-        <Checkbox
-          checked={formState.tshirt}
-          onChange={() =>
-            setFormState({ ...formState, tshirt: !formState.tshirt })
-          }
-          style={{
-            color: theme.brand,
-            paddingLeft: 0,
-            paddingTop: 0,
-          }}
-        />
-        <p style={{ color: theme.fontDark, marginTop: 4 }}>
-          I'm open to a Zoom call and a free t-shirt!
-        </p>
-      </div>
       <Button
         key="submit"
         onClick={submit}
@@ -593,44 +590,49 @@ const DatasetSelector = () => {
   );
 };
 
-const FeedbackButton = ({ addNotification }) => {
-  const [appFeedbackIsOpen, setAppFeedbackIsOpen] = useRecoilState(
-    atoms.appFeedbackIsOpen
+const TeamsButton = ({ addNotification }) => {
+  const [appTeamsIsOpen, setAppTeamsIsOpen] = useRecoilState(
+    atoms.appTeamsIsOpen
   );
-  const [feedbackSubmitted, setFeedbackSubmitted] = useRecoilState(
-    atoms.feedbackSubmitted
+  const [teamsSubmitted, setTeamsSubmitted] = useRecoilState(
+    atoms.teamsSubmitted
   );
-  const [closeFeedback, setCloseFeedback] = useRecoilState(atoms.closeFeedback);
-  const tshirtText = (
+  const [closeTeams, setCloseTeams] = useRecoilState(atoms.closeTeams);
+  const text = (
     <span>
-      We are super dedicated to making FiftyOne as valuable as possible for our
-      users. If you're willing to jump on a quick Zoom call with us to chat
-      about your use cases in more detail, let us know by checking the box
-      below. We'll <i>mail you a free t-shirt</i> for your trouble :)
+      FiftyOne is and will always be open source software that is freely
+      available to individual users, all 20,000 and counting. However, if you’re
+      part of a team, you may need more. That’s why we’ve begun deploying
+      team-based versions of FiftyOne with multi-user collaboration features to
+      early adopters.
+      <br />
+      <br />
+      Are you interested in a team-based deployment of FiftyOne? Let us know how
+      to contact you and our founders will reach out to make it happen!
     </span>
   );
   const theme = useContext(ThemeContext);
-  const showFeedbackButton = useRecoilValue(selectors.showFeedbackButton);
+  const showTeamsButton = useRecoilValue(selectors.showTeamsButton);
 
   const onClick = () => {
-    if (!appFeedbackIsOpen) {
-      setAppFeedbackIsOpen(true);
+    if (!appTeamsIsOpen) {
+      setAppTeamsIsOpen(true);
       const callback = addNotification.current({
-        kind: "We'd love your feedback",
-        message: tshirtText,
-        children: [<TshirtForm key="t-shirt" />],
-        onClose: () => setAppFeedbackIsOpen(false),
+        kind: "Get FiftyOne for your team",
+        message: text,
+        children: [<TeamsForm key="teams" />],
+        onClose: () => setAppTeamsIsOpen(false),
       });
-      setCloseFeedback({ close: callback });
+      setCloseTeams({ close: callback });
     }
   };
 
-  return showFeedbackButton === "shown" ? (
+  return showTeamsButton === "shown" ? (
     <Button
       onClick={onClick}
       style={{ marginRight: "0.5rem", position: "relative" }}
     >
-      Want a free t-shirt?
+      Have a team?
       <div
         style={{
           position: "absolute",
@@ -645,23 +647,17 @@ const FeedbackButton = ({ addNotification }) => {
           }}
           onClick={(e) => {
             e.stopPropagation();
-            setFeedbackSubmitted({ ...feedbackSubmitted, minimized: true });
-            fetch(`${http}/feedback`, { method: "post" });
-            closeFeedback && closeFeedback.close();
+            setTeamsSubmitted({ ...teamsSubmitted, minimized: true });
+            fetch(`${http}/teams`, { method: "post" });
+            closeTeams && closeTeams.close();
           }}
         />
       </div>
     </Button>
-  ) : showFeedbackButton === "minimized" ? (
-    <img
+  ) : showTeamsButton === "minimized" ? (
+    <Group
+      style={{ cursor: "pointer", marginRight: "0.5em" }}
       onClick={onClick}
-      style={{
-        cursor: "pointer",
-        marginRight: "0.5rem",
-        height: "1.5rem",
-        width: "1.5rem",
-      }}
-      src={"./t-shirt.svg"}
     />
   ) : null;
 };
@@ -684,7 +680,7 @@ const Header = ({ addNotification }) => {
       <RightDiv>
         <IconWrapper>
           <Suspense fallback={null}>
-            <FeedbackButton addNotification={addNotification} />
+            <TeamsButton addNotification={addNotification} />
           </Suspense>
           <ExternalLink
             title="Slack"

app/src/components/Sample.tsx

@@ -163,9 +163,9 @@ const SampleInfo = React.memo(({ id }) => {
       }
     } else if (
       scalars.includes(cur) &&
-      ![null, undefined].includes(sample[cur])
+      ![null, undefined].includes(sample[cur === "id" ? "_id" : cur])
     ) {
-      const value = prettify(sample[cur], false);
+      const value = prettify(sample[cur === "id" ? "_id" : cur], false);
       acc = [
         ...acc,
         <Tag

app/src/recoil/atoms.ts

@@ -18,13 +18,13 @@ export const connected = atom({
   default: false,
 });
 
-export const closeFeedback = atom({
-  key: "closeFeedback",
+export const closeTeams = atom({
+  key: "closeTeams",
   default: null,
 });
 
-export const feedbackSubmitted = atom({
-  key: "feedbackSubmitted",
+export const teamsSubmitted = atom({
+  key: "teamsSubmitted",
   default: {
     submitted: false,
     minimized: false,
@@ -176,8 +176,8 @@ export const colorSeed = atomFamily<number, boolean>({
   default: 1,
 });
 
-export const appFeedbackIsOpen = atom({
-  key: "appFeedbackIsOpen",
+export const appTeamsIsOpen = atom({
+  key: "appTeamsIsOpen",
   default: false,
 });