Data samples view controls

lang/ui.en.json

@@ -383,6 +383,14 @@
     "defaultMessage": "diagram showing data collection micro:bit being connected to a person's wrist",
     "description": "Aria label for data collection image"
   },
+  "data-features-hide-action": {
+    "defaultMessage": "Hide data features",
+    "description": "Hide data features button text"
+  },
+  "data-features-show-action": {
+    "defaultMessage": "Show data features",
+    "description": "Show data features button text"
+  },
   "data-samples-label": {
     "defaultMessage": "Data samples",
     "description": "Heading for data samples column"
@@ -403,22 +411,6 @@
     "defaultMessage": "Short collections of movement data lasting 1 second. Your data samples are only stored on your computer, they do not get sent to anyone else.",
     "description": "Tooltip for data samples heading"
   },
-  "data-samples-view-data-features-option": {
-    "defaultMessage": "Data features",
-    "description": "Data samples view option"
-  },
-  "data-samples-view-graph-and-data-features-option": {
-    "defaultMessage": "Graphs and data features",
-    "description": "Data samples view option"
-  },
-  "data-samples-view-graph-option": {
-    "defaultMessage": "Graphs",
-    "description": "Data samples view option"
-  },
-  "data-samples-view-options-heading": {
-    "defaultMessage": "Views",
-    "description": "Data samples view options heading"
-  },
   "delete-action-aria": {
     "defaultMessage": "Delete action \"{action}\"",
     "description": "Aria label for action delete icon"
@@ -1063,6 +1055,10 @@
     "defaultMessage": "Settings actions menu",
     "description": "Label for settings actions menu button"
   },
+  "show-graphs-checkbox-label-text": {
+    "defaultMessage": "Show graphs",
+    "description": "Show graphs checkbox label text"
+  },
   "simple-ai-exercise-timer-resource-title": {
     "defaultMessage": "Simple AI exercise timer",
     "description": "Home page resource card title"
@@ -1311,4 +1307,4 @@
     "defaultMessage": "unplug and replug the USB cable",
     "description": "WebUSB error dialog"
   }
-}
+}

src/components/ActionDataSamplesCard.tsx

@@ -12,7 +12,6 @@ import {
 } from "@chakra-ui/react";
 import { ReactNode, useCallback } from "react";
 import { FormattedMessage, useIntl } from "react-intl";
-import { flags } from "../flags";
 import { DataSamplesView, GestureData, RecordingData } from "../model";
 import { useStore } from "../store";
 import { tourElClassname } from "../tours";
@@ -44,7 +43,7 @@ const ActionDataSamplesCard = ({
   clearNewRecordingId,
 }: ActionDataSamplesCardProps) => {
   const deleteGestureRecording = useStore((s) => s.deleteGestureRecording);
-  const view = useDataSamplesView();
+  const view = useStore((s) => s.settings.dataSamplesView);
   if (view === DataSamplesView.GraphAndDataFeatures) {
     // We split the cards in this case
     return (
@@ -264,9 +263,4 @@ const DataSample = ({
   );
 };
 
-const useDataSamplesView = () => {
-  const storeView = useStore((s) => s.settings.dataSamplesView);
-  return flags.fingerprints ? storeView : DataSamplesView.Graph;
-};
-
 export default ActionDataSamplesCard;

src/components/DataSamplesMenu.tsx

@@ -5,9 +5,7 @@ import {
   MenuButton,
   MenuDivider,
   MenuItem,
-  MenuItemOption,
   MenuList,
-  MenuOptionGroup,
   Portal,
   Text,
   useDisclosure,
@@ -20,26 +18,23 @@ import {
   RiUpload2Line,
 } from "react-icons/ri";
 import { FormattedMessage, useIntl } from "react-intl";
-import { flags } from "../flags";
-import { NameProjectDialog } from "./NameProjectDialog";
+import {
+  ConnectionFlowStep,
+  useConnectionStage,
+} from "../connection-stage-hooks";
 import { useLogging } from "../logging/logging-hooks";
-import { DataSamplesView } from "../model";
 import { useStore } from "../store";
 import { getTotalNumSamples } from "../utils/gestures";
 import { ConfirmDialog } from "./ConfirmDialog";
 import LoadProjectMenuItem from "./LoadProjectMenuItem";
-import {
-  ConnectionFlowStep,
-  useConnectionStage,
-} from "../connection-stage-hooks";
+import { NameProjectDialog } from "./NameProjectDialog";
+import ViewDataFeaturesMenuItem from "./ViewDataFeaturesMenuItem";
 
 const DataSamplesMenu = () => {
   const intl = useIntl();
   const logging = useLogging();
   const gestures = useStore((s) => s.gestures);
   const downloadDataset = useStore((s) => s.downloadDataset);
-  const setDataSamplesView = useStore((s) => s.setDataSamplesView);
-  const dataSamplesView = useStore((s) => s.settings.dataSamplesView);
   const { stage } = useConnectionStage();
   const deleteConfirmDisclosure = useDisclosure();
   const nameProjectDialogDisclosure = useDisclosure();
@@ -65,14 +60,6 @@ const DataSamplesMenu = () => {
     deleteAllGestures();
     deleteConfirmDisclosure.onClose();
   }, [deleteAllGestures, deleteConfirmDisclosure, logging]);
-  const handleViewChange = useCallback(
-    (view: string | string[]) => {
-      if (typeof view === "string") {
-        setDataSamplesView(view as DataSamplesView);
-      }
-    },
-    [setDataSamplesView]
-  );
 
   const handleSave = useCallback(
     (newName?: string) => {
@@ -131,29 +118,6 @@ const DataSamplesMenu = () => {
         />
         <Portal>
           <MenuList>
-            {flags.fingerprints && (
-              <>
-                <MenuOptionGroup
-                  defaultValue={dataSamplesView}
-                  title={intl.formatMessage({
-                    id: "data-samples-view-options-heading",
-                  })}
-                  type="radio"
-                  onChange={handleViewChange}
-                >
-                  <MenuItemOption value={DataSamplesView.Graph}>
-                    <FormattedMessage id="data-samples-view-graph-option" />
-                  </MenuItemOption>
-                  <MenuItemOption value={DataSamplesView.DataFeatures}>
-                    <FormattedMessage id="data-samples-view-data-features-option" />
-                  </MenuItemOption>
-                  <MenuItemOption value={DataSamplesView.GraphAndDataFeatures}>
-                    <FormattedMessage id="data-samples-view-graph-and-data-features-option" />
-                  </MenuItemOption>
-                </MenuOptionGroup>
-                <MenuDivider />
-              </>
-            )}
             <LoadProjectMenuItem icon={<RiUpload2Line />} accept=".json">
               <FormattedMessage id="import-data-samples-action" />
             </LoadProjectMenuItem>
@@ -169,6 +133,8 @@ const DataSamplesMenu = () => {
             >
               <FormattedMessage id="delete-data-samples-action" />
             </MenuItem>
+            <MenuDivider />
+            <ViewDataFeaturesMenuItem />
           </MenuList>
         </Portal>
       </Menu>

src/components/DataSamplesTable.tsx

@@ -2,6 +2,7 @@ import {
   Button,
   Grid,
   GridProps,
+  HStack,
   Text,
   useDisclosure,
   VStack,
@@ -19,6 +20,7 @@ import DataSamplesMenu from "./DataSamplesMenu";
 import HeadingGrid, { GridColumnHeadingItemProps } from "./HeadingGrid";
 import LoadProjectInput, { LoadProjectInputRef } from "./LoadProjectInput";
 import RecordingDialog from "./RecordingDialog";
+import ShowGraphsCheckbox from "./ShowGraphsCheckbox";
 
 const gridCommonProps: Partial<GridProps> = {
   gridTemplateColumns: "290px 1fr",
@@ -35,7 +37,12 @@ const headings: GridColumnHeadingItemProps[] = [
   {
     titleId: "data-samples-label",
     descriptionId: "data-samples-tooltip",
-    itemsRight: <DataSamplesMenu />,
+    itemsRight: (
+      <HStack>
+        <ShowGraphsCheckbox />
+        <DataSamplesMenu />
+      </HStack>
+    ),
   },
 ];
 

src/components/ShowGraphsCheckbox.tsx

@@ -0,0 +1,36 @@
+import { Checkbox } from "@chakra-ui/react";
+import { useCallback } from "react";
+import { FormattedMessage } from "react-intl";
+import { DataSamplesView } from "../model";
+import { useStore } from "../store";
+
+const ShowGraphsCheckbox = () => {
+  const { dataSamplesView, showGraphs } = useStore((s) => s.settings);
+  const setDataSamplesView = useStore((s) => s.setDataSamplesView);
+  const setShowGraphs = useStore((s) => s.setShowGraphs);
+
+  const handleShowGraphOnChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      const isChecked = e.target.checked;
+      setShowGraphs(isChecked);
+      setDataSamplesView(
+        isChecked
+          ? DataSamplesView.GraphAndDataFeatures
+          : DataSamplesView.DataFeatures
+      );
+    },
+    [setDataSamplesView, setShowGraphs]
+  );
+
+  return (
+    <>
+      {dataSamplesView !== DataSamplesView.Graph && (
+        <Checkbox isChecked={showGraphs} onChange={handleShowGraphOnChange}>
+          <FormattedMessage id="show-graphs-checkbox-label-text" />
+        </Checkbox>
+      )}
+    </>
+  );
+};
+
+export default ShowGraphsCheckbox;

src/components/ViewDataFeaturesMenuItem.tsx

@@ -0,0 +1,40 @@
+import { MenuItem } from "@chakra-ui/react";
+import { useCallback } from "react";
+import { RiEyeFill, RiEyeOffFill } from "react-icons/ri";
+import { FormattedMessage } from "react-intl";
+import { DataSamplesView } from "../model";
+import { useStore } from "../store";
+
+const ViewDataFeaturesMenuItem = () => {
+  const dataSamplesView = useStore((s) => s.settings.dataSamplesView);
+  const showGraphs = useStore((s) => s.settings.showGraphs);
+  const setDataSamplesView = useStore((s) => s.setDataSamplesView);
+
+  const handleShowDataFeatures = useCallback(() => {
+    setDataSamplesView(
+      showGraphs
+        ? DataSamplesView.GraphAndDataFeatures
+        : DataSamplesView.DataFeatures
+    );
+  }, [setDataSamplesView, showGraphs]);
+
+  const handleHideDataFeatures = useCallback(() => {
+    setDataSamplesView(DataSamplesView.Graph);
+  }, [setDataSamplesView]);
+
+  return (
+    <>
+      {dataSamplesView === DataSamplesView.Graph ? (
+        <MenuItem onClick={handleShowDataFeatures} icon={<RiEyeFill />}>
+          <FormattedMessage id="data-features-show-action" />
+        </MenuItem>
+      ) : (
+        <MenuItem onClick={handleHideDataFeatures} icon={<RiEyeOffFill />}>
+          <FormattedMessage id="data-features-hide-action" />
+        </MenuItem>
+      )}
+    </>
+  );
+};
+
+export default ViewDataFeaturesMenuItem;

src/flags.ts

@@ -23,10 +23,6 @@ export type Flag =
    * Flag to show the home page projects section which lacks content.
    */
   | "homePageProjects"
-  /**
-   * Flag to show fingerprints view option.
-   */
-  | "fingerprints"
   /**
    * Example flags used for testing.
    */
@@ -46,7 +42,6 @@ const allFlags: FlagMetadata[] = [
     name: "preReleaseNotice",
     defaultOnStages: ["review", "staging", "production"],
   },
-  { name: "fingerprints", defaultOnStages: ["local", "review", "staging"] },
   { name: "exampleOptInA", defaultOnStages: ["review", "staging"] },
   { name: "exampleOptInB", defaultOnStages: [] },
 ];

src/messages/ui.en.json

@@ -645,6 +645,18 @@
       "value": "diagram showing data collection micro:bit being connected to a person's wrist"
     }
   ],
+  "data-features-hide-action": [
+    {
+      "type": 0,
+      "value": "Hide data features"
+    }
+  ],
+  "data-features-show-action": [
+    {
+      "type": 0,
+      "value": "Show data features"
+    }
+  ],
   "data-samples-label": [
     {
       "type": 0,
@@ -679,30 +691,6 @@
       "value": "Short collections of movement data lasting 1 second. Your data samples are only stored on your computer, they do not get sent to anyone else."
     }
   ],
-  "data-samples-view-data-features-option": [
-    {
-      "type": 0,
-      "value": "Data features"
-    }
-  ],
-  "data-samples-view-graph-and-data-features-option": [
-    {
-      "type": 0,
-      "value": "Graphs and data features"
-    }
-  ],
-  "data-samples-view-graph-option": [
-    {
-      "type": 0,
-      "value": "Graphs"
-    }
-  ],
-  "data-samples-view-options-heading": [
-    {
-      "type": 0,
-      "value": "Views"
-    }
-  ],
   "delete-action-aria": [
     {
       "type": 0,
@@ -1228,7 +1216,7 @@
   "import-error-dialog-content": [
     {
       "type": 0,
-      "value": "Only MakeCode hex files or a data samples files (.json) can be opened by "
+      "value": "Only MakeCode hex files or data samples files (.json) can be opened by "
     },
     {
       "type": 1,
@@ -1859,6 +1847,12 @@
       "value": "Settings actions menu"
     }
   ],
+  "show-graphs-checkbox-label-text": [
+    {
+      "type": 0,
+      "value": "Show graphs"
+    }
+  ],
   "simple-ai-exercise-timer-resource-title": [
     {
       "type": 0,