Python Panels

.github/workflows/pr.yml

@@ -7,6 +7,7 @@ on:
       - develop
       - feat/*
       - main
+      - py-panels-develop
       - release/v[0-9]+.[0-9]+.[0-9]+
 
 jobs:

app/package.json

@@ -23,6 +23,7 @@
     "devDependencies": {
         "@testing-library/react": "latest",
         "@testing-library/react-hooks": "latest",
+        "@types/react-plotly.js": "^2.6.3",
         "@typescript-eslint/eslint-plugin": "^5.44.0",
         "@typescript-eslint/parser": "^5.44.0",
         "@vitest/coverage-v8": "^0.34.6",
@@ -51,6 +52,8 @@
     ],
     "packageManager": "yarn@3.2.1",
     "dependencies": {
-        "jpeg-js": "^0.4.4"
+        "jpeg-js": "^0.4.4",
+        "react-player": "^2.16.0",
+        "react-plotly.js": "^2.6.0"
     }
 }

app/packages/analytics/.eslintrc

@@ -0,0 +1,5 @@
+{
+  "rules": {
+    "react-hooks/rules-of-hooks": "off"
+  }
+}

app/packages/analytics/.gitignore

@@ -0,0 +1,11 @@
+.DS_Store
+build/**
+node_modules/**
+
+.yarn/*
+!.yarn/releases
+!.yarn/plugins
+!.yarn/sdks
+!.yarn/versions
+
+yarn-error.log

app/packages/analytics/.prettierignore

@@ -0,0 +1 @@
+build

app/packages/analytics/README.md

@@ -0,0 +1,28 @@
+# FiftyOne Analytics
+
+FiftyOne Analytics package.
+
+## Configuring Analytics
+
+```typescript
+const [info, setInfo] = useAnalyticsInfo();
+
+setInfo({
+    writeKey: "<segment_write_key>",
+    userId: "123",
+    userGroup: "group1",
+    doNotTrack: false,
+});
+```
+
+## Tracking Events from React
+
+```typescript
+function MyComponent() {
+    const trackEvent = useTrackEvent();
+
+    useEffect(() => {
+        trackEvent("my_component_loaded", { customProp: 42 });
+    }, []);
+}
+```

app/packages/analytics/babel.config.js

@@ -0,0 +1,7 @@
+/* global module */
+module.exports = {
+  presets: [
+    ["@babel/preset-env", { targets: { node: "current" } }],
+    "@babel/preset-typescript",
+  ],
+};

app/packages/analytics/package.json

@@ -0,0 +1,16 @@
+{
+    "name": "@fiftyone/analytics",
+    "author": "Voxel51, Inc.",
+    "version": "0.0.0",
+    "description": "FiftyOne analytics",
+    "homepage": "https://github.com/voxel51/fiftyone/app/packages/analytics",
+    "license": "Apache-2.0",
+    "bugs": {
+        "url": "https://github.com/voxel51/fiftyone/"
+    },
+    "main": "./src/index.ts",
+    "private": true,
+    "dependencies": {
+        "@segment/analytics-next": "^1.70.0"
+    }
+}

app/packages/analytics/src/index.ts

@@ -0,0 +1,6 @@
+export { default as useTrackEvent } from "./useTrackEvent";
+export { default as usingAnalytics, Analytics } from "./usingAnalytics";
+export { default as useAnalyticsInfo } from "./useAnalyticsInfo";
+export { analyticsInfo } from "./state";
+export { DEFAULT_WRITE_KEYS } from "./keys";
+export type { AnalyticsInfo } from "./usingAnalytics";

app/packages/analytics/src/keys.ts

@@ -0,0 +1,4 @@
+export const DEFAULT_WRITE_KEYS = {
+  dev: "MrAGfUuvQq2FOJIgAgbwgjMQgRNgruRa", // oss-dev
+  prod: "SjCRPH72QTHlVhFZIT5067V9rhuq80Dl", // oss-prod
+};

app/packages/analytics/src/state.ts

@@ -0,0 +1,7 @@
+import { atom } from "recoil";
+import { AnalyticsInfo } from "./usingAnalytics";
+
+export const analyticsInfo = atom<AnalyticsInfo>({
+  key: "analyticsInfo",
+  default: null,
+});

app/packages/analytics/src/useAnalyticsInfo.ts

@@ -0,0 +1,10 @@
+import { useRecoilState } from "recoil";
+import { analyticsInfo } from "./state";
+import { AnalyticsInfo } from "./usingAnalytics";
+
+export default function useAnalyticsInfo(): [
+  AnalyticsInfo,
+  (info: AnalyticsInfo) => void
+] {
+  return useRecoilState<AnalyticsInfo>(analyticsInfo);
+}

app/packages/analytics/src/useTrackEvent.ts

@@ -0,0 +1,21 @@
+import * as fos from "@fiftyone/state";
+import usingAnalytics, { AnalyticsInfo } from "./usingAnalytics";
+import { useRecoilValue } from "recoil";
+import { useCallback } from "react";
+import { analyticsInfo } from "./state";
+
+/**
+ * Track an event. This can be called from any component to track an event, however
+ * only when a user is opted in to analytics, will an event be sent to the analytics
+ * service.
+ */
+export default function useTrackEvent() {
+  const info = useRecoilValue<AnalyticsInfo>(analyticsInfo);
+  return useCallback(
+    (eventName: string, properties?: Record<string, any>) => {
+      const analytics = usingAnalytics(info);
+      analytics.trackEvent(eventName, properties);
+    },
+    [info]
+  );
+}

app/packages/analytics/src/usingAnalytics.ts

@@ -0,0 +1,86 @@
+import { AnalyticsBrowser } from "@segment/analytics-next";
+
+export type AnalyticsInfo = {
+  writeKey: string;
+  userId: string;
+  userGroup: string;
+  doNotTrack?: boolean;
+  debug: boolean;
+};
+
+let _analytics: Analytics = null;
+
+export default function usingAnalytics(info: AnalyticsInfo): Analytics {
+  if (!_analytics) {
+    _analytics = new Analytics();
+  }
+  if (info) {
+    _analytics.load(info);
+  }
+  return _analytics;
+}
+
+export class Analytics {
+  private _segment?: AnalyticsBrowser;
+  private _debug = false;
+  load(info: AnalyticsInfo) {
+    if (this._segment) return;
+    this._debug = info?.debug;
+    if (!info || info.doNotTrack) {
+      console.warn("Analytics disabled");
+      console.log(info);
+      this.disable();
+      return;
+    }
+    if (!info.writeKey) {
+      console.warn("Analytics disabled (no write key)");
+      this.disable();
+      return;
+    }
+    this.enable(info);
+  }
+
+  enable(info: AnalyticsInfo) {
+    this._segment = AnalyticsBrowser.load({
+      writeKey: info.writeKey,
+    });
+    if (info.userId) {
+      this.identify(info.userId);
+    }
+    if (info.userGroup) {
+      this.group(info.userGroup);
+    }
+  }
+
+  disable() {
+    this._segment = null;
+  }
+
+  page(name?: string, properties?: {}) {
+    if (!this._segment) return;
+    this._segment.page(name, properties);
+  }
+
+  track(name: string, properties?: {}) {
+    if (this._debug) {
+      console.log("track", name, properties);
+    }
+    if (!this._segment) return;
+    this._segment.track(name, properties);
+  }
+
+  trackEvent(name: string, properties?: {}) {
+    if (!this._segment) return;
+    this.track(name, properties);
+  }
+
+  identify(userId: string, traits?: {}) {
+    if (!this._segment) return;
+    this._segment.identify(userId, traits);
+  }
+
+  group(groupId: string, traits?: {}) {
+    if (!this._segment) return;
+    this._segment.group(groupId, traits);
+  }
+}

app/packages/analytics/tsconfig.json

@@ -0,0 +1,26 @@
+{
+    "compilerOptions": {
+        "target": "ESNext",
+        "module": "ESNext",
+        "lib": ["ESNext", "DOM", "DOM.Iterable"],
+        "moduleResolution": "Node",
+        "sourceMap": true,
+        "resolveJsonModule": true,
+        "esModuleInterop": true,
+        "noEmit": true,
+        "noUnusedLocals": true,
+        "noUnusedParameters": true,
+        "noImplicitReturns": true,
+        "noImplicitAny": false,
+        "plugins": [],
+        "types": ["vite/client"],
+        "jsx": "react-jsx"
+    },
+    "include": ["./src"],
+    "references": [
+        { "path": "../components" },
+        { "path": "../looker" },
+        { "path": "../flashlight" },
+        { "path": "../utilities" }
+    ]
+}

app/packages/analytics/vite.config.ts

@@ -0,0 +1,18 @@
+import { UserConfig } from "vite";
+
+export default <UserConfig>{
+  esbuild: true,
+  build: {
+    lib: {
+      entry: "src/index.ts",
+      formats: ["es"],
+    },
+    target: "es2015",
+    minify: false,
+  },
+  resolve: {
+    alias: {
+      "@fiftyone/looker": "@fiftyone/looker/src/index.ts",
+    },
+  },
+};

app/packages/app/package.json

@@ -15,6 +15,7 @@
         "copy-to-desktop": "rm -rf ../desktop/dist/ && cp -r ./dist ../desktop/dist"
     },
     "dependencies": {
+        "@fiftyone/analytics": "*",
         "@fiftyone/components": "*",
         "@fiftyone/core": "*",
         "@fiftyone/relay": "*",

app/packages/app/src/components/Analytics.tsx

@@ -0,0 +1,46 @@
+import { isElectron } from "@fiftyone/utilities";
+import React, { useCallback } from "react";
+import ReactGA from "react-ga4";
+import { graphql, useFragment } from "react-relay";
+import gaConfig from "../ga";
+import AnalyticsConsent from "./AnalyticsConsent";
+import type { NavGA$data, NavGA$key } from "./__generated__/NavGA.graphql";
+
+const useCallGA = (info: NavGA$data) => {
+  return useCallback(() => {
+    const dev = info.dev;
+    const buildType = dev ? "dev" : "prod";
+    ReactGA.initialize(gaConfig.app_ids[buildType], {
+      testMode: false,
+      gaOptions: {
+        storage: "none",
+        cookieDomain: "none",
+        clientId: info.uid,
+        page_location: "omitted",
+        page_path: "omitted",
+        kind: isElectron() ? "Desktop" : "Web",
+        version: info.version,
+        context: info.context,
+        checkProtocolTask: null, // disable check, allow file:// URLs
+      },
+    });
+  }, [info]);
+};
+
+export default function Analytics({ fragment }: { fragment: NavGA$key }) {
+  const info = useFragment(
+    graphql`
+      fragment Analytics on Query {
+        context
+        dev
+        doNotTrack
+        uid
+        version
+      }
+    `,
+    fragment
+  );
+  const callGA = useCallGA(info);
+
+  return <AnalyticsConsent callGA={callGA} info={info} />;
+}