From 98467ef7f6f55ccbd8b80f38f852690222eb7156 Mon Sep 17 00:00:00 2001
From: dhruvkhanna38 <34186136+dhruvkhanna38@users.noreply.github.com>
Date: Sat, 27 May 2023 13:14:56 -0700
Subject: [PATCH 1/5] Created a new path /DemoCopyStream with button to copy
 data collected from microbit as .csv

---
 package.json                 |   1 +
 src/index.jsx                |  10 ++
 src/pages/DemoCopyStream.tsx | 315 +++++++++++++++++++++++++++++++++++
 src/pages/Index.tsx          |   1 +
 yarn.lock                    |  37 +++-
 5 files changed, 360 insertions(+), 4 deletions(-)
 create mode 100644 src/pages/DemoCopyStream.tsx

diff --git a/package.json b/package.json
index 38cc2ed..d51b426 100644
--- a/package.json
+++ b/package.json
@@ -42,6 +42,7 @@
         "@types/node": "^16.11.6",
         "d3": "^7.1.1",
         "jacdac-ts": "^1.24.20",
+        "react-copy-to-clipboard": "^5.1.0",
         "react-jacdac": "^1.1.3",
         "rxjs": "^7.5.2",
         "rxjs-spy": "^8.0.2",
diff --git a/src/index.jsx b/src/index.jsx
index 53e8c1f..6dab3a3 100644
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -4,6 +4,7 @@ import { Demo } from './pages/Demo'
 const Jacdac = lazy(() => import('./pages/Jacdac'))
 const Dashboard = lazy(() => import('./pages/Dashboard'))
 const MicrobitController = lazy(() => import('./pages/MicrobitController'))
+const DemoCopyStream = lazy(() => import('./pages/DemoCopyStream'))
 
 import { HashRouter, Routes, Route } from 'react-router-dom'
 import Index from './pages/Index'
@@ -17,6 +18,15 @@ ReactDOM.render(
         <Routes>
             <Route path="/" element={<Index />} />
             <Route path="basic" element={<Demo />} />
+            <Route
+                path="democopystream"
+                element={
+                    <Suspense fallback={null}>
+                        <DemoCopyStream />
+                    </Suspense>
+                }
+            />
+            ,
             <Route
                 path="jacdac"
                 element={
diff --git a/src/pages/DemoCopyStream.tsx b/src/pages/DemoCopyStream.tsx
new file mode 100644
index 0000000..3a38172
--- /dev/null
+++ b/src/pages/DemoCopyStream.tsx
@@ -0,0 +1,315 @@
+import React, { FC, useState, useEffect, useRef } from 'react'
+// import ConnectButton from "../../jacdac-docs/src/components/buttons/ConnectButton"
+
+// import { JDBus } from "jacdac-ts/src/jdom/bus"
+
+import { SRV_ACCELEROMETER, REPORT_UPDATE, throttle, startDevTools, inIFrame } from 'jacdac-ts'
+import { useServices, useChange, useBus } from 'react-jacdac'
+import { Button } from '@mui/material'
+import { OutputEngine } from '../sonification/OutputEngine'
+import { JacdacProvider } from 'react-jacdac'
+import { bus } from '../bus'
+import { DataSink } from '../sonification/DataSink'
+import { NoteHandler } from '../sonification/handler/NoteHandler'
+import { OutputStateChange } from '../sonification/OutputConstants'
+import { filter, Observable, OperatorFunction, pipe, Subject, UnaryFunction } from 'rxjs'
+import { Datum } from '../sonification/Datum'
+import { RunningExtremaHandler } from '../sonification/handler/RunningExtremaHandler'
+import { SlopeParityHandler } from '../sonification/handler/SlopeParityHandler'
+import { Speech } from '../sonification/output/Speech'
+import { NoteSonify } from '../sonification/output/NoteSonify'
+
+const TONE_THROTTLE = 100
+
+/**
+ * helper function to filter out null values from subjects, and create an observable<Datum> for the sink to subscribe.
+ * Source: https://stackoverflow.com/questions/57999777/filter-undefined-from-rxjs-observable
+ * @returns observable <datum>
+ */
+
+function filterNullish<T>(): UnaryFunction<Observable<T | null | undefined>, Observable<T>> {
+    return pipe(filter((x) => x != null) as OperatorFunction<T | null | undefined, T>)
+}
+
+/**
+ * Helper function to copy data to the clipboard and remove data from the clipboard.
+ * @param {Object} props - Component props
+ * @param {Array} props.xData - X data array
+ * @param {Array} props.yData - Y data array
+ * @param {Array} props.zData - Z data array
+ * @param {Object} props.textareaRef - Reference to the textarea element
+ * @param {Function} props.setCopied - Setter function for the copied state
+ * @param {boolean} props.copied - Copied state indicating whether the data has been copied
+ * @param {Function} props.setXStreamData - Setter function for the X stream data
+ * @param {Function} props.setYStreamData - Setter function for the Y stream data
+ * @param {Function} props.setZStreamData - Setter function for the Z stream data
+ * @returns {JSX.Element} - Copy to clipboard button component
+ */
+
+function CopyToClipboardButton(props) {
+    const { xData, yData, zData, textareaRef, setCopied, copied, setXStreamData, setYStreamData, setZStreamData } =
+        props
+    const dataExists = xData.length > 0 || yData.length > 0 || zData.length > 0
+    const dataRows: string[] = []
+    const [totalCount, setTotalCount] = useState(0)
+    const copyToClipboard = async () => {
+        if (!dataExists || !textareaRef.current) return
+        const header = 'x,y,z'
+
+        if (dataExists) {
+            const maxLength = Math.max(xData.length, yData.length, zData.length)
+            for (let i = 0; i < maxLength; i++) {
+                const xValue = xData[i]?.value ?? ''
+                const yValue = yData[i]?.value ?? ''
+                const zValue = zData[i]?.value ?? ''
+                dataRows.push(`${xValue},${yValue},${zValue}`)
+            }
+        }
+
+        const csv = [header, ...dataRows].join('\n')
+
+        textareaRef.current.value = csv
+        textareaRef.current.select()
+        try {
+            await navigator.clipboard.writeText(csv)
+            setCopied(true)
+            setTotalCount(dataRows.length)
+        } catch (error) {
+            console.error('Failed to copy to clipboard:', error)
+        }
+    }
+
+    const removeFromClipboard = () => {
+        if (textareaRef.current) {
+            textareaRef.current.value = ''
+            navigator.clipboard.writeText('') // Clear the clipboard
+            setCopied(false)
+            setTotalCount(0)
+        }
+        // Clear the input stream data
+        setXStreamData([])
+        setYStreamData([])
+        setZStreamData([])
+    }
+
+    useEffect(() => {
+        if (copied) {
+            const timeout = setTimeout(() => setCopied(false), 2000)
+            return () => clearTimeout(timeout)
+        }
+    }, [copied])
+
+    return (
+        <>
+            <Button onClick={copyToClipboard} disabled={!dataExists}>
+                {copied ? 'Copied!' : 'Copy to Clipboard'}
+            </Button>
+            <Button onClick={removeFromClipboard} disabled={!dataExists}>
+                Remove from Clipboard
+            </Button>
+            <p>Total values collected: {totalCount}</p> {/* Display the total count */}
+            <textarea ref={textareaRef} style={{ position: 'absolute', left: -9999 }} readOnly />
+        </>
+    )
+}
+
+function ConnectButton() {
+    const bus = useBus()
+    const connected = useChange(bus, (_) => _.connected)
+    const services = useServices({ serviceClass: SRV_ACCELEROMETER })
+    const [streaming, setStreaming] = useState(false)
+    const [xSink, setXSink] = useState<DataSink>()
+    const [ySink, setYSink] = useState<DataSink>()
+    const [zSink, setZSink] = useState<DataSink>()
+    const [xAxisStream, setXAxisStream] = useState<Subject<Datum>>()
+    const [yAxisStream, setYAxisStream] = useState<Subject<Datum>>()
+    const [zAxisStream, setZAxisStream] = useState<Subject<Datum>>()
+    const [xStreamData, setXStreamData] = useState<Datum[]>([])
+    const [yStreamData, setYStreamData] = useState<Datum[]>([])
+    const [zStreamData, setZStreamData] = useState<Datum[]>([])
+    const textareaRef = useRef<HTMLTextAreaElement>(null)
+    const [copied, setCopied] = useState(false)
+
+    useEffect(() => {
+        if (!inIFrame() && window.location.hash === '#dbg') startDevTools()
+    }, [])
+
+    useEffect(() => {
+        if (streaming && xSink && xAxisStream && ySink && yAxisStream && zSink && zAxisStream) {
+            const xSubscription = xAxisStream.subscribe((datum) => {
+                setXStreamData((prevData) => [...prevData, datum])
+            })
+            const ySubscription = yAxisStream.subscribe((datum) => {
+                setYStreamData((prevData) => [...prevData, datum])
+            })
+            const zSubscription = zAxisStream.subscribe((datum) => {
+                setZStreamData((prevData) => [...prevData, datum])
+            })
+
+            return () => {
+                xSubscription.unsubscribe()
+                ySubscription.unsubscribe()
+                zSubscription.unsubscribe()
+            }
+        }
+    }, [streaming, xAxisStream, yAxisStream, zAxisStream])
+
+    // register for accelerometer data events
+    useEffect(() => {
+        if (!services || services.length === 0) return
+        const accelService = services[0]
+
+        console.log(accelService.specification)
+        const unsubs = accelService.readingRegister.subscribe(
+            REPORT_UPDATE,
+            // don't trigger more than every 100ms
+            throttle(async () => {
+                if (!streaming || !xSink || !ySink || !zSink) return
+                const [x, y, z] = accelService.readingRegister.unpackedValue
+                console.log('vpotluri: calling PushPoint.')
+                if (xSink && xAxisStream) xAxisStream.next(new Datum(xSink.id, x))
+                if (ySink && yAxisStream) yAxisStream.next(new Datum(ySink.id, y))
+                if (zSink && zAxisStream) zAxisStream.next(new Datum(zSink.id, z))
+                // OutputEngine.getInstance().pushPoint(x, sink.id)
+            }, TONE_THROTTLE),
+        )
+
+        // cleanup callback
+        return () => unsubs?.()
+    }, [services])
+
+    const handleConnect = async () => {
+        if (connected) {
+            console.log('DISCONNECT')
+            await bus.disconnect()
+        } else {
+            console.log('connect')
+            await bus.connect()
+        }
+    }
+
+    const handleStartStreaming = () => {
+        console.log('entering handel stream')
+        let xSinkID: number = 0
+        let ySinkID: number = 1
+        let zSinkID: number = 2
+        let srcX = xSink
+        let srcY = ySink
+        let srcZ = zSink
+        if (!streaming) {
+            console.log('streaming was false')
+            /**
+             * check if a sink exists to stream X axis data to. else create one.
+             */
+            if (!srcX) {
+                srcX = OutputEngine.getInstance().addSink('jacdac accelerometer X axis')
+                console.log(`added sink to stream x axis data ${xSink}`)
+                srcX.addDataHandler(new NoteHandler([-1, 1], new NoteSonify(-1)))
+                // src.addDataHandler(new FilterRangeHandler([-1, 0], new NoiseSonify()))
+                // dummy stats. Do we know the min and max for accelerometer?
+                //max:
+                // srcX.addDataHandler(new RunningExtremaHandler(-1, new Speech()))
+                //slope for min
+                srcX.addDataHandler(new SlopeParityHandler(-1, new Speech()))
+                //min
+                // srcX.addDataHandler(new RunningExtremaHandler(1, new Speech()))
+                xSinkID = srcX.id
+                setXSink(srcX)
+            }
+
+            /**
+             * check if a sink exists to stream Y axis data to. else create one.
+             */
+            if (!srcY) {
+                srcY = OutputEngine.getInstance().addSink('jacdac accelerometer Y axis')
+                console.log(`added sink to stream y axis data ${ySink}`)
+                srcY.addDataHandler(new NoteHandler([-1, 1], new NoteSonify(1)))
+                // src.addDataHandler(new FilterRangeHandler([-1, 0], new NoiseSonify()))
+                // dummy stats. Do we know the min and max for accelerometer?
+                ySinkID = srcY.id
+                setYSink(srcY)
+            }
+
+            /**
+             * check if a sink exists to stream Z axis data to. else create one.
+             */
+            if (!srcZ) {
+                srcZ = OutputEngine.getInstance().addSink('jacdac accelerometer Z axis')
+                console.log(`added sink to stream z axis data ${zSink}`)
+                // srcZ.addDataHandler(new NoteHandler([-1,1], new NoteSonify(0)))
+                // src.addDataHandler(new FilterRangeHandler([-1, 0], new NoiseSonify()))
+                // dummy stats. Do we know the min and max for accelerometer?
+                //max:
+                // srcZ.addDataHandler(new RunningExtremaHandler(1, new Speech()))
+                //min
+                // srcZ.addDataHandler(new RunningExtremaHandler(1, new Speech()))
+                zSinkID = srcZ.id
+                setZSink(srcZ)
+            }
+            /**
+             * check if a observable exists for each of the axes.
+             * If not, create an RXJS Subject, filter out null values and change it to be typed as observable<datum>, and then set this as a stream for the source.
+             */
+
+            let sourceX = xAxisStream
+            if (!sourceX) {
+                sourceX = new Subject<Datum>()
+                setXAxisStream(sourceX)
+                OutputEngine.getInstance().setStream(xSinkID, sourceX.pipe(filterNullish()))
+            }
+
+            let sourceY = yAxisStream
+            if (!sourceY) {
+                sourceY = new Subject<Datum>()
+                setYAxisStream(sourceY)
+                OutputEngine.getInstance().setStream(ySinkID, sourceY.pipe(filterNullish()))
+            }
+
+            let sourceZ = zAxisStream
+            if (!sourceZ) {
+                sourceZ = new Subject<Datum>()
+                setZAxisStream(sourceZ)
+                OutputEngine.getInstance().setStream(zSinkID, sourceZ.pipe(filterNullish()))
+            }
+
+            OutputEngine.getInstance().next(OutputStateChange.Play)
+        } else {
+            OutputEngine.getInstance().next(OutputStateChange.Stop)
+        }
+
+        setStreaming(!streaming)
+    }
+
+    return (
+        <>
+            <Button onClick={handleConnect}>{bus?.connected ? 'Disconnect' : 'Connect'}</Button>
+            {bus && (
+                <Button onClick={handleStartStreaming} disabled={services.length === 0}>
+                    {streaming ? 'Stop streaming' : 'Start streaming'}
+                </Button>
+            )}
+
+            {
+                <CopyToClipboardButton
+                    xData={xStreamData}
+                    yData={yStreamData}
+                    zData={zStreamData}
+                    textareaRef={textareaRef}
+                    setCopied={setCopied}
+                    copied={copied}
+                    setXStreamData={setXStreamData}
+                    setYStreamData={setYStreamData}
+                    setZStreamData={setZStreamData}
+                />
+            }
+        </>
+    )
+}
+
+export default function Page() {
+    return (
+        <JacdacProvider initialBus={bus}>
+            <ConnectButton />
+        </JacdacProvider>
+    )
+}
diff --git a/src/pages/Index.tsx b/src/pages/Index.tsx
index c6391e2..c05e50e 100644
--- a/src/pages/Index.tsx
+++ b/src/pages/Index.tsx
@@ -7,6 +7,7 @@ const Index: FC = (props) => {
         { name: 'Jacdac', url: '/jacdac' },
         { name: 'Jacdac and microbit', url: '/jacdacmicrobit' },
         { name: 'Dashboard', url: '/dashboard' },
+        { name: 'Demo Copy Stream', url: '/democopystream' },
     ]
 
     return (
diff --git a/yarn.lock b/yarn.lock
index 0223fc7..8a5d7e2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4395,9 +4395,9 @@ caniuse-api@^3.0.0:
     lodash.uniq "^4.5.0"
 
 caniuse-lite@^1.0.0, caniuse-lite@^1.0.30000981, caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001125, caniuse-lite@^1.0.30001272, caniuse-lite@^1.0.30001274:
-  version "1.0.30001276"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001276.tgz#7049685eb972eb09c0ecbb57227b489d76244fb1"
-  integrity sha512-psUNoaG1ilknZPxi8HuhQWobuhLqtYSRUxplfVkEJdgZNB9TETVYGSBtv4YyfAdGvE6gn2eb0ztiXqHoWJcGnw==
+  version "1.0.30001489"
+  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001489.tgz"
+  integrity sha512-x1mgZEXK8jHIfAxm+xgdpHpk50IN3z3q3zP261/WS+uvePxW8izXuCu6AHz0lkuYTlATDehiZ/tNyYBdSQsOUQ==
 
 capture-exit@^2.0.0:
   version "2.0.0"
@@ -5007,6 +5007,13 @@ copy-descriptor@^0.1.0:
   resolved "https://registry.yarnpkg.com/copy-descriptor/-/copy-descriptor-0.1.1.tgz#676f6eb3c39997c2ee1ac3a924fd6124748f578d"
   integrity sha1-Z29us8OZl8LuGsOpJP1hJHSPV40=
 
+copy-to-clipboard@^3.3.1:
+  version "3.3.3"
+  resolved "https://registry.yarnpkg.com/copy-to-clipboard/-/copy-to-clipboard-3.3.3.tgz#55ac43a1db8ae639a4bd99511c148cdd1b83a1b0"
+  integrity sha512-2KV8NhB5JqC3ky0r9PMCAZKbUHSwtEo4CwCs0KXgruG43gX5PMqDEBbVU4OUzw2MuAWUfsuFmWvEKG5QRfSnJA==
+  dependencies:
+    toggle-selection "^1.0.6"
+
 core-js-compat@^3.18.0, core-js-compat@^3.19.0, core-js-compat@^3.6.2:
   version "3.19.1"
   resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.19.1.tgz#fe598f1a9bf37310d77c3813968e9f7c7bb99476"
@@ -12748,6 +12755,15 @@ prop-types@^15.6.2, prop-types@^15.7.2:
     object-assign "^4.1.1"
     react-is "^16.8.1"
 
+prop-types@^15.8.1:
+  version "15.8.1"
+  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
+  integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
+  dependencies:
+    loose-envify "^1.4.0"
+    object-assign "^4.1.1"
+    react-is "^16.13.1"
+
 proxy-addr@~2.0.5:
   version "2.0.7"
   resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-2.0.7.tgz#f19fe69ceab311eeb94b42e70e8c2070f9ba1025"
@@ -12940,6 +12956,14 @@ react-app-polyfill@^2.0.0:
     regenerator-runtime "^0.13.7"
     whatwg-fetch "^3.4.1"
 
+react-copy-to-clipboard@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/react-copy-to-clipboard/-/react-copy-to-clipboard-5.1.0.tgz#09aae5ec4c62750ccb2e6421a58725eabc41255c"
+  integrity sha512-k61RsNgAayIJNoy9yDsYzDe/yAZAzEbEgcz3DZMhF686LEyukcE1hzurxe85JandPUG+yTfGVFzuEw3xt8WP/A==
+  dependencies:
+    copy-to-clipboard "^3.3.1"
+    prop-types "^15.8.1"
+
 react-dev-utils@^11.0.3:
   version "11.0.4"
   resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-11.0.4.tgz#a7ccb60257a1ca2e0efe7a83e38e6700d17aa37a"
@@ -12984,7 +13008,7 @@ react-error-overlay@^6.0.9:
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.9.tgz#3c743010c9359608c375ecd6bc76f35d93995b0a"
   integrity sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew==
 
-react-is@^16.7.0, react-is@^16.8.1:
+react-is@^16.13.1, react-is@^16.7.0, react-is@^16.8.1:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
@@ -15018,6 +15042,11 @@ to-regex@^3.0.1, to-regex@^3.0.2:
     regex-not "^1.0.2"
     safe-regex "^1.1.0"
 
+toggle-selection@^1.0.6:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/toggle-selection/-/toggle-selection-1.0.6.tgz#6e45b1263f2017fa0acc7d89d78b15b8bf77da32"
+  integrity sha512-BiZS+C1OS8g/q2RRbJmy59xpyghNBqrr6k5L/uKBGRsTfxmu3ffiRnd8mlGPUVayg8pvfi5urfnu8TU7DVOkLQ==
+
 toidentifier@1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/toidentifier/-/toidentifier-1.0.0.tgz#7e1be3470f1e77948bc43d94a3c8f4d7752ba553"

From 946db225dd04f4e4cd5bb72ab6860d5b7e0db24d Mon Sep 17 00:00:00 2001
From: dhruvkhanna38 <34186136+dhruvkhanna38@users.noreply.github.com>
Date: Tue, 6 Jun 2023 12:15:26 -0700
Subject: [PATCH 2/5] feature: CopyToClipboardHandler add to dashboard.tsx

---
 src/pages/Dashboard.tsx                       | 15 +++-
 .../handler/CopyToClipboardHandler.ts         | 77 +++++++++++++++++++
 src/sonification/handler/DataHandler.ts       |  7 +-
 src/sonification/handler/SimpleDataHandler.ts | 26 ++++---
 src/sonification/output/Copy.ts               | 33 ++++++++
 5 files changed, 141 insertions(+), 17 deletions(-)
 create mode 100644 src/sonification/handler/CopyToClipboardHandler.ts
 create mode 100644 src/sonification/output/Copy.ts

diff --git a/src/pages/Dashboard.tsx b/src/pages/Dashboard.tsx
index 3591f07..b77bfc5 100644
--- a/src/pages/Dashboard.tsx
+++ b/src/pages/Dashboard.tsx
@@ -51,6 +51,7 @@ import { DatumOutput } from '../sonification/output/DatumOutput'
 import { NoteSonify } from '../sonification/output/NoteSonify'
 import { NoiseSonify } from '../sonification/output/NoiseSonify'
 import { Speech } from '../sonification/output/Speech'
+import { Copy } from '../sonification/output/Copy'
 import { NoteHandler } from '../sonification/handler/NoteHandler'
 import { OutputStateChange } from '../sonification/OutputConstants'
 import { Datum } from '../sonification/Datum'
@@ -59,6 +60,7 @@ import { RunningExtremaHandler } from '../sonification/handler/RunningExtremaHan
 import { SlopeParityHandler } from '../sonification/handler/SlopeParityHandler'
 import { FileOutput } from '../sonification/output/FileOutput'
 import { SimpleDataHandler } from '../sonification/handler/SimpleDataHandler'
+import { CopyToClipboardHandler } from '../sonification/handler/CopyToClipboardHandler'
 
 export interface JDServiceWrapper {
     name: string
@@ -219,8 +221,8 @@ export const AVAILABLE_DATA_OUTPUT_TEMPLATES = {
                         sp.polite = value == 1 ? true : false
                     }
                 },
-            }
-        ]
+            },
+        ],
     },
 }
 
@@ -355,6 +357,13 @@ export const AVAILABLE_DATA_HANDLER_TEMPLATES: DataHandlerWrapper[] = [
         dataOutputs: [initializeDataOutput(AVAILABLE_DATA_OUTPUT_TEMPLATES.speech)],
         createHandler: (domain: [number, number]) => new SimpleDataHandler(),
     },
+    {
+        name: 'Copy Handler',
+        id: `Copy Handler-${Math.floor(Math.random() * Date.now())}`,
+        description: 'Copies the data of the chosen sensor',
+        dataOutputs: [],
+        createHandler: (domain: [number, number]) => new CopyToClipboardHandler(),
+    },
 ]
 
 function saveText(name: string, data: string, mimeType?: string) {
@@ -546,6 +555,7 @@ export function DashboardView() {
         template: DataHandlerWrapper,
     ) => {
         console.log(add, serviceId, valueId, template)
+
         const servicesCopy = services.map((service) => {
             if (serviceId === service.id) {
                 const values = service.values.map((value) => {
@@ -730,7 +740,6 @@ export function DashboardView() {
                                             type: 'number',
                                         }}
                                     /> */}
-
                                 </Box>
                             </Box>
                             <Box role="region" aria-labelledby="header-configure-add" sx={{ mb: 2, mt: 4 }}>
diff --git a/src/sonification/handler/CopyToClipboardHandler.ts b/src/sonification/handler/CopyToClipboardHandler.ts
new file mode 100644
index 0000000..20009e1
--- /dev/null
+++ b/src/sonification/handler/CopyToClipboardHandler.ts
@@ -0,0 +1,77 @@
+import { DataHandler } from './DataHandler'
+import { DataSink } from '../DataSink'
+import { Datum } from '../Datum'
+import { DatumOutput } from '../output/DatumOutput'
+import { OutputStateChange } from '../OutputConstants'
+import { Observable, filter } from 'rxjs'
+import { tap } from 'rxjs/operators'
+
+export class CopyToClipboardHandler extends DataHandler {
+    private copiedData: Datum[] = []
+
+    constructor(output?: DatumOutput) {
+        super(output)
+    }
+
+    /**
+     * Set up a subscription to copy the incoming data
+     *
+     * @param sink$ The sink that is producing data for us
+     */
+    public setupSubscription(sink$: Observable<OutputStateChange | Datum>) {
+        super.setupSubscription(
+            sink$.pipe(
+                tap((data) => {
+                    if (data instanceof Datum) {
+                        this.copiedData.push(data)
+                    }
+                }),
+            ),
+        )
+    }
+
+    /**
+     * Get the copied data
+     *
+     * @returns The copied data
+     */
+    public getCopiedData(): Datum[] {
+        return this.copiedData
+    }
+
+    /**
+     * Copies the data in the copiedData array as CSV to the clipboard
+     */
+    public copyToClipboard() {
+        if (this.copiedData.length === 0) {
+            console.log('No data available to copy')
+            return
+        }
+
+        const headings = Object.keys(this.copiedData[0])
+        const csvData = [headings.join(',')]
+            .concat(this.copiedData.map((datum) => Object.values(datum).join(',')))
+            .join('\n')
+
+        navigator.clipboard.writeText(csvData).then(() => {
+            console.log('Data copied to clipboard')
+        })
+    }
+
+    /**
+     * Clear the copied data
+     */
+    public clearCopiedData() {
+        this.copiedData = []
+    }
+
+    complete(): void {
+        this.copyToClipboard()
+        this.clearCopiedData()
+        super.complete()
+    }
+
+    public toString(): string {
+        return `CopyToClipboardHandler`
+    }
+}
diff --git a/src/sonification/handler/DataHandler.ts b/src/sonification/handler/DataHandler.ts
index 0ba1ba7..5665648 100644
--- a/src/sonification/handler/DataHandler.ts
+++ b/src/sonification/handler/DataHandler.ts
@@ -8,7 +8,6 @@ const DEBUG = false
  * A DataHandler class is used to decide how to output each data point.
  */
 export abstract class DataHandler extends Subject<OutputStateChange | Datum> {
-    
     private subscription?: Subscription
     private _outputs: Array<DatumOutput>
 
@@ -23,8 +22,8 @@ export abstract class DataHandler extends Subject<OutputStateChange | Datum> {
     }
 
     /**
-     * 
-     * @param output 
+     *
+     * @param output
      */
     public removeOutput(output: DatumOutput) {
         this._outputs = this._outputs.filter((o) => o !== output)
@@ -70,7 +69,9 @@ export abstract class DataHandler extends Subject<OutputStateChange | Datum> {
      */
     constructor(output?: DatumOutput) {
         super()
+
         this._outputs = new Array<DatumOutput>()
+
         if (output) this.addOutput(output)
     }
 }
diff --git a/src/sonification/handler/SimpleDataHandler.ts b/src/sonification/handler/SimpleDataHandler.ts
index 23fecc5..115b2c5 100644
--- a/src/sonification/handler/SimpleDataHandler.ts
+++ b/src/sonification/handler/SimpleDataHandler.ts
@@ -3,13 +3,18 @@ import { Datum } from '../Datum'
 import { DatumOutput } from '../output/DatumOutput'
 import { DataHandler } from './DataHandler'
 import { bufferCount, filter, map, Observable, tap } from 'rxjs'
-import { getSonificationLoggingLevel, OutputStateChange, SonificationLevel, SonificationLoggingLevel } from '../OutputConstants'
+import {
+    getSonificationLoggingLevel,
+    OutputStateChange,
+    SonificationLevel,
+    SonificationLoggingLevel,
+} from '../OutputConstants'
 
 const DEBUG = true
 
 /**
  * A DataHandler that notifies if a set of point/s are seen
-  */
+ */
 export class SimpleDataHandler extends DataHandler {
     /**
      * a value denoting the number of points that the user should be notified after. defaults to 1 if not specified in the constructor. The user is then notified for every point.
@@ -41,15 +46,14 @@ export class SimpleDataHandler extends DataHandler {
      *
      * @param sink The sink that is producing data for us
      */
-     public setupSubscription(sink$: Observable<OutputStateChange | Datum>) {
+    public setupSubscription(sink$: Observable<OutputStateChange | Datum>) {
         super.setupSubscription(
-            sink$.pipe(bufferCount(this.threshold), 
-map((frames) => {
-    return frames[frames.length-1]
-}
-
-    ),                
-            filter((val) => {
+            sink$.pipe(
+                bufferCount(this.threshold),
+                map((frames) => {
+                    return frames[frames.length - 1]
+                }),
+                filter((val) => {
                     return true
                 }),
             ),
@@ -90,4 +94,4 @@ const debugStatic = (level: number, message: string) => {
             console.log(message)
         } else console.log('debug message dumped')
     }
-}
\ No newline at end of file
+}
diff --git a/src/sonification/output/Copy.ts b/src/sonification/output/Copy.ts
new file mode 100644
index 0000000..bd2bd95
--- /dev/null
+++ b/src/sonification/output/Copy.ts
@@ -0,0 +1,33 @@
+import { Datum } from '../Datum'
+import { getSonificationLoggingLevel, OutputStateChange, SonificationLoggingLevel } from '../OutputConstants'
+import { DatumOutput } from './DatumOutput'
+import { CopyToClipboardHandler } from '../handler/CopyToClipboardHandler'
+
+const DEBUG = true
+
+// Define the CopyToClipboardOutput class
+export class Copy extends DatumOutput {
+    private copyToClipboardHandler: CopyToClipboardHandler
+
+    constructor(copyToClipboardHandler: CopyToClipboardHandler) {
+        super()
+        this.copyToClipboardHandler = copyToClipboardHandler
+    }
+
+    public copyToClipboard(data: Datum) {
+        // Implement the copy to clipboard functionality using the provided data
+    }
+
+    public removeFromClipboard() {
+        // Implement the remove from clipboard functionality
+    }
+
+    protected output(datum: Datum) {
+        super.output(datum)
+        this.copyToClipboard(datum) // Call the copyToClipboard method when outputting the datum
+    }
+
+    public toString(): string {
+        return 'Copy'
+    }
+}

From 1935074b8bfbde2bb85152d345cedd222bede3e8 Mon Sep 17 00:00:00 2001
From: dhruvkhanna38 <34186136+dhruvkhanna38@users.noreply.github.com>
Date: Wed, 14 Jun 2023 22:48:47 -0700
Subject: [PATCH 3/5] feat: Adding Sink Name to Datum.ts class

---
 src/pages/Dashboard.tsx                  |  5 ++-
 src/pages/MicrobitController.tsx         | 49 +++++++++++++-----------
 src/sonification/Datum.ts                | 11 +++++-
 src/sonification/handler/ScaleHandler.ts |  6 ---
 4 files changed, 39 insertions(+), 32 deletions(-)

diff --git a/src/pages/Dashboard.tsx b/src/pages/Dashboard.tsx
index b77bfc5..a444acc 100644
--- a/src/pages/Dashboard.tsx
+++ b/src/pages/Dashboard.tsx
@@ -465,12 +465,15 @@ export function DashboardView() {
                         const sinkId = sink.id
 
                         const rawSubject = new Subject<Datum>()
+                        let sinkName = `${jds.specification.name} ${jds.device.name} ${v}`
 
                         OutputEngine.getInstance().setStream(sinkId, rawSubject)
 
                         const jdUnsubscribe = jds.readingRegister.subscribe(REPORT_UPDATE, () => {
                             // console.log(jds.specification.name, v, jds.readingRegister.unpackedValue[i])
-                            rawSubject.next(new Datum(sinkId, jds.readingRegister.unpackedValue[i]))
+                            let datum: Datum = new Datum(sinkId, jds.readingRegister.unpackedValue[i])
+                            datum.setSinkName(sinkName)
+                            rawSubject.next(datum)
                         })
 
                         const unsubscribe = () => {
diff --git a/src/pages/MicrobitController.tsx b/src/pages/MicrobitController.tsx
index 6007812..dd5c9f5 100644
--- a/src/pages/MicrobitController.tsx
+++ b/src/pages/MicrobitController.tsx
@@ -42,7 +42,7 @@ function filterNullish<T>(): UnaryFunction<Observable<T | null | undefined>, Obs
     return pipe(filter((x) => x != null) as OperatorFunction<T | null | undefined, T>)
 }
 
-function MicroBitButton(props: {outputEngine: OutputEngine, service: JDService}) {
+function MicroBitButton(props: { outputEngine: OutputEngine; service: JDService }) {
     const { service, outputEngine } = props
     const downEvent = useEvent(service, ButtonEvent.Down)
     const upEvent = useEvent(service, ButtonEvent.Up)
@@ -54,26 +54,22 @@ function MicroBitButton(props: {outputEngine: OutputEngine, service: JDService})
     const handleButton = (id: string, down: boolean) => {
         // only act on an up event
 
-        if (down)
-            setState("down")
-        else
-            setState("up")
+        if (down) setState('down')
+        else setState('up')
 
         if (down) return
 
-        if (id === "A+B") {
-            if (outputEngine.value === OutputStateChange.Play)
-                outputEngine.next(OutputStateChange.Stop)
-            else
-                outputEngine.next(OutputStateChange.Play)
+        if (id === 'A+B') {
+            if (outputEngine.value === OutputStateChange.Play) outputEngine.next(OutputStateChange.Stop)
+            else outputEngine.next(OutputStateChange.Play)
         }
     }
     useEffect(() => {
-        if (instanceName === "") return
+        if (instanceName === '') return
         downEvent.subscribe(EVENT, () => handleButton(instanceName, true))
     }, [downEvent, instanceName])
-    useEffect(() =>{
-        if (instanceName === "") return
+    useEffect(() => {
+        if (instanceName === '') return
         upEvent.subscribe(EVENT, () => handleButton(instanceName, false))
     }, [upEvent, instanceName])
 
@@ -81,7 +77,14 @@ function MicroBitButton(props: {outputEngine: OutputEngine, service: JDService})
         const resolveIName = async () => setInstanceName(await service.resolveInstanceName())
         resolveIName()
     }, [])
-    return (<div key={service.friendlyName}><br/><>{instanceName} {state}</></div>)
+    return (
+        <div key={service.friendlyName}>
+            <br />
+            <>
+                {instanceName} {state}
+            </>
+        </div>
+    )
 }
 
 function ConnectButton() {
@@ -123,13 +126,11 @@ function ConnectButton() {
         return () => unsubs?.()
     }, [services])
 
-    useEffect(()=>{
-        OutputEngine.getInstance().subscribe((e: OutputStateChange)=>{
-            console.log("Chaning streaming state ", e)
-            if (e === OutputStateChange.Play) 
-                setStreaming(true);
-            else 
-                setStreaming(false);
+    useEffect(() => {
+        OutputEngine.getInstance().subscribe((e: OutputStateChange) => {
+            console.log('Chaning streaming state ', e)
+            if (e === OutputStateChange.Play) setStreaming(true)
+            else setStreaming(false)
         })
         return () => OutputEngine.getInstance().unsubscribe()
     }, [])
@@ -234,7 +235,7 @@ function ConnectButton() {
         }
     }
 
-    console.log("STREAMING STATE: ", streaming)
+    console.log('STREAMING STATE: ', streaming)
 
     return (
         <>
@@ -245,7 +246,9 @@ function ConnectButton() {
                 </Button>
             )}
             {buttons &&
-                buttons.map((button,i) => <MicroBitButton key={i} service={button} outputEngine={OutputEngine.getInstance()}/>)}
+                buttons.map((button, i) => (
+                    <MicroBitButton key={i} service={button} outputEngine={OutputEngine.getInstance()} />
+                ))}
         </>
     )
 }
diff --git a/src/sonification/Datum.ts b/src/sonification/Datum.ts
index 47d75c7..e538de6 100644
--- a/src/sonification/Datum.ts
+++ b/src/sonification/Datum.ts
@@ -6,8 +6,6 @@ import * as d3 from 'd3'
  *
  * All data points have certain properties and abilities, however
  * @field value The raw data value associated with this point
- * @field adjustedValue An adjusted value that may be assigned to a point for output.
- * @field previous The previous point in the sequence for this sink
  * @method toString() Returns a string describing this data point
  * @field sink The data sink this point is associated with [not sure if we need this pointer, but for completeness...]
  */
@@ -16,6 +14,7 @@ export class Datum {
     value: number
     sinkId: number
     time: number
+    sinkName?: String
 
     constructor(sinkId: number, value: number, time?: number) {
         this.value = value
@@ -24,6 +23,14 @@ export class Datum {
         else this.time = d3.now()
     }
 
+    public setSinkName(sinkName: String) {
+        this.sinkName = sinkName
+    }
+
+    public getSinkName() {
+        return this.sinkName
+    }
+
     public toString(): string {
         return `(raw: ${this.value}, ${this.time})`
     }
diff --git a/src/sonification/handler/ScaleHandler.ts b/src/sonification/handler/ScaleHandler.ts
index 41c2aa4..900ff28 100644
--- a/src/sonification/handler/ScaleHandler.ts
+++ b/src/sonification/handler/ScaleHandler.ts
@@ -12,11 +12,8 @@ import {
 import { RangeEndExpander } from '../stat/RangeEndExpander'
 import assert from 'assert'
 
-
 const DEBUG = false
 
-
-
 /**
  * A DataHandler that scales the given value based on a specified min and max
  *
@@ -118,7 +115,6 @@ export class ScaleHandler extends DataHandler {
                 }),
 
                 debug(SonificationLoggingLevel.DEBUG, 'scaled', DEBUG),
-
             ),
         )
     }
@@ -148,11 +144,9 @@ const debug = (level: number, message: string, watch: boolean) => (source: Obser
 }
 
 const debugStatic = (level: number, message: string) => {
-
     if (DEBUG) {
         if (level >= getSonificationLoggingLevel()) {
             console.log(message)
         } //else console.log('debug message dumped')
     }
-
 }

From c4a27a18599f825ad0b7b378852efcd48613c565 Mon Sep 17 00:00:00 2001
From: khanna38 <khanna38@uw.edu>
Date: Wed, 27 Sep 2023 12:41:16 -0700
Subject: [PATCH 4/5] Cleaning up the old copy handler

---
 src/index.jsx                                 |   9 -
 src/pages/Dashboard.tsx                       |  51 ++-
 src/pages/Demo.tsx                            |  14 +-
 src/pages/DemoCopyStream.tsx                  | 315 ------------------
 src/pages/Index.tsx                           |   1 -
 src/sonification/CopyEngine.ts                | 213 ++++++++++++
 .../handler/CopyToClipboardHandler.ts         |  55 ++-
 src/sonification/output/Copy.ts               |   2 +-
 8 files changed, 321 insertions(+), 339 deletions(-)
 delete mode 100644 src/pages/DemoCopyStream.tsx
 create mode 100644 src/sonification/CopyEngine.ts

diff --git a/src/index.jsx b/src/index.jsx
index 6dab3a3..92186b1 100644
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -4,7 +4,6 @@ import { Demo } from './pages/Demo'
 const Jacdac = lazy(() => import('./pages/Jacdac'))
 const Dashboard = lazy(() => import('./pages/Dashboard'))
 const MicrobitController = lazy(() => import('./pages/MicrobitController'))
-const DemoCopyStream = lazy(() => import('./pages/DemoCopyStream'))
 
 import { HashRouter, Routes, Route } from 'react-router-dom'
 import Index from './pages/Index'
@@ -18,14 +17,6 @@ ReactDOM.render(
         <Routes>
             <Route path="/" element={<Index />} />
             <Route path="basic" element={<Demo />} />
-            <Route
-                path="democopystream"
-                element={
-                    <Suspense fallback={null}>
-                        <DemoCopyStream />
-                    </Suspense>
-                }
-            />
             ,
             <Route
                 path="jacdac"
diff --git a/src/pages/Dashboard.tsx b/src/pages/Dashboard.tsx
index a444acc..deb2936 100644
--- a/src/pages/Dashboard.tsx
+++ b/src/pages/Dashboard.tsx
@@ -362,7 +362,49 @@ export const AVAILABLE_DATA_HANDLER_TEMPLATES: DataHandlerWrapper[] = [
         id: `Copy Handler-${Math.floor(Math.random() * Date.now())}`,
         description: 'Copies the data of the chosen sensor',
         dataOutputs: [],
-        createHandler: (domain: [number, number]) => new CopyToClipboardHandler(),
+        createHandler: (domain: [number, number]) =>
+            new CopyToClipboardHandler([
+                (domain[1] - domain[0]) * 0.4 + domain[0],
+                (domain[1] - domain[0]) * 0.6 + domain[0],
+            ]),
+        parameters: [
+            {
+                name: 'Min',
+                type: 'number',
+                default: (obj?: DataHandler | DatumOutput) => {
+                    if (obj) {
+                        const frh = obj as CopyToClipboardHandler
+                        return frh.domain[0]
+                    } else {
+                        return 0.4
+                    }
+                },
+                handleUpdate: (value: number, obj?: DataHandler | DatumOutput) => {
+                    if (obj) {
+                        const frh = obj as CopyToClipboardHandler
+                        frh.domain = [value, frh.domain[1]]
+                    }
+                },
+            },
+            {
+                name: 'Max',
+                type: 'number',
+                default: (obj?: DataHandler | DatumOutput) => {
+                    if (obj) {
+                        const frh = obj as CopyToClipboardHandler
+                        return frh.domain[1]
+                    } else {
+                        return 0.6
+                    }
+                },
+                handleUpdate: (value: number, obj?: DataHandler | DatumOutput) => {
+                    if (obj) {
+                        const frh = obj as CopyToClipboardHandler
+                        frh.domain = [frh.domain[0], value]
+                    }
+                },
+            },
+        ],
     },
 ]
 
@@ -459,9 +501,10 @@ export function DashboardView() {
                     name: `${jds.specification.name} ${jds.device.name}`,
                     id: serviceId,
                     values: serviceInfo.values.map((v, i) => {
-                        const sink = OutputEngine.getInstance().addSink(
-                            `JacDac Service = ${jds.specification.name}; Index = ${i}`,
-                        )
+                        const description = `JacDac Service = ${jds.specification.name}; Index = ${i}`
+
+                        const sink = OutputEngine.getInstance().addSink(description)
+
                         const sinkId = sink.id
 
                         const rawSubject = new Subject<Datum>()
diff --git a/src/pages/Demo.tsx b/src/pages/Demo.tsx
index 31ad9b7..a45a448 100644
--- a/src/pages/Demo.tsx
+++ b/src/pages/Demo.tsx
@@ -24,11 +24,15 @@ import Table from 'arquero/dist/types/table/table'
 const DEMO_VIEW_MAP = {
     simple: { value: 'simple', label: 'Simple sonification', component: DemoSimple },
     highlightRegion: { value: 'highlightRegion', label: 'Highlight points for region', component: DemoHighlightRegion },
-    speechHighlight: { value: 'speechHighlight', label: 'Speak points in range', component: DemoSpeakRange},
-    fileOutput: {value: 'fileOutput', label: 'Point of interest notification', component: DemoFileOutput},
-    slopeParityV1: {value: 'slopeParityV1', label: 'Slope direction change notification', component: DemoSlopeParityV1},
-    slopeParityV2: {value: 'slopeParityV2', label: 'Slope parity notification', component: DemoSlopeParityV2},
-    runningExtrema: {value: 'runningExtrema', label: 'Running extrema notification', component: DemoRunningExtrema}
+    speechHighlight: { value: 'speechHighlight', label: 'Speak points in range', component: DemoSpeakRange },
+    fileOutput: { value: 'fileOutput', label: 'Point of interest notification', component: DemoFileOutput },
+    slopeParityV1: {
+        value: 'slopeParityV1',
+        label: 'Slope direction change notification',
+        component: DemoSlopeParityV1,
+    },
+    slopeParityV2: { value: 'slopeParityV2', label: 'Slope parity notification', component: DemoSlopeParityV2 },
+    runningExtrema: { value: 'runningExtrema', label: 'Running extrema notification', component: DemoRunningExtrema },
 }
 
 let demoViewRef: React.RefObject<DemoSimple<DemoProps, DemoState> | DemoHighlightRegion> = React.createRef()
diff --git a/src/pages/DemoCopyStream.tsx b/src/pages/DemoCopyStream.tsx
deleted file mode 100644
index 3a38172..0000000
--- a/src/pages/DemoCopyStream.tsx
+++ /dev/null
@@ -1,315 +0,0 @@
-import React, { FC, useState, useEffect, useRef } from 'react'
-// import ConnectButton from "../../jacdac-docs/src/components/buttons/ConnectButton"
-
-// import { JDBus } from "jacdac-ts/src/jdom/bus"
-
-import { SRV_ACCELEROMETER, REPORT_UPDATE, throttle, startDevTools, inIFrame } from 'jacdac-ts'
-import { useServices, useChange, useBus } from 'react-jacdac'
-import { Button } from '@mui/material'
-import { OutputEngine } from '../sonification/OutputEngine'
-import { JacdacProvider } from 'react-jacdac'
-import { bus } from '../bus'
-import { DataSink } from '../sonification/DataSink'
-import { NoteHandler } from '../sonification/handler/NoteHandler'
-import { OutputStateChange } from '../sonification/OutputConstants'
-import { filter, Observable, OperatorFunction, pipe, Subject, UnaryFunction } from 'rxjs'
-import { Datum } from '../sonification/Datum'
-import { RunningExtremaHandler } from '../sonification/handler/RunningExtremaHandler'
-import { SlopeParityHandler } from '../sonification/handler/SlopeParityHandler'
-import { Speech } from '../sonification/output/Speech'
-import { NoteSonify } from '../sonification/output/NoteSonify'
-
-const TONE_THROTTLE = 100
-
-/**
- * helper function to filter out null values from subjects, and create an observable<Datum> for the sink to subscribe.
- * Source: https://stackoverflow.com/questions/57999777/filter-undefined-from-rxjs-observable
- * @returns observable <datum>
- */
-
-function filterNullish<T>(): UnaryFunction<Observable<T | null | undefined>, Observable<T>> {
-    return pipe(filter((x) => x != null) as OperatorFunction<T | null | undefined, T>)
-}
-
-/**
- * Helper function to copy data to the clipboard and remove data from the clipboard.
- * @param {Object} props - Component props
- * @param {Array} props.xData - X data array
- * @param {Array} props.yData - Y data array
- * @param {Array} props.zData - Z data array
- * @param {Object} props.textareaRef - Reference to the textarea element
- * @param {Function} props.setCopied - Setter function for the copied state
- * @param {boolean} props.copied - Copied state indicating whether the data has been copied
- * @param {Function} props.setXStreamData - Setter function for the X stream data
- * @param {Function} props.setYStreamData - Setter function for the Y stream data
- * @param {Function} props.setZStreamData - Setter function for the Z stream data
- * @returns {JSX.Element} - Copy to clipboard button component
- */
-
-function CopyToClipboardButton(props) {
-    const { xData, yData, zData, textareaRef, setCopied, copied, setXStreamData, setYStreamData, setZStreamData } =
-        props
-    const dataExists = xData.length > 0 || yData.length > 0 || zData.length > 0
-    const dataRows: string[] = []
-    const [totalCount, setTotalCount] = useState(0)
-    const copyToClipboard = async () => {
-        if (!dataExists || !textareaRef.current) return
-        const header = 'x,y,z'
-
-        if (dataExists) {
-            const maxLength = Math.max(xData.length, yData.length, zData.length)
-            for (let i = 0; i < maxLength; i++) {
-                const xValue = xData[i]?.value ?? ''
-                const yValue = yData[i]?.value ?? ''
-                const zValue = zData[i]?.value ?? ''
-                dataRows.push(`${xValue},${yValue},${zValue}`)
-            }
-        }
-
-        const csv = [header, ...dataRows].join('\n')
-
-        textareaRef.current.value = csv
-        textareaRef.current.select()
-        try {
-            await navigator.clipboard.writeText(csv)
-            setCopied(true)
-            setTotalCount(dataRows.length)
-        } catch (error) {
-            console.error('Failed to copy to clipboard:', error)
-        }
-    }
-
-    const removeFromClipboard = () => {
-        if (textareaRef.current) {
-            textareaRef.current.value = ''
-            navigator.clipboard.writeText('') // Clear the clipboard
-            setCopied(false)
-            setTotalCount(0)
-        }
-        // Clear the input stream data
-        setXStreamData([])
-        setYStreamData([])
-        setZStreamData([])
-    }
-
-    useEffect(() => {
-        if (copied) {
-            const timeout = setTimeout(() => setCopied(false), 2000)
-            return () => clearTimeout(timeout)
-        }
-    }, [copied])
-
-    return (
-        <>
-            <Button onClick={copyToClipboard} disabled={!dataExists}>
-                {copied ? 'Copied!' : 'Copy to Clipboard'}
-            </Button>
-            <Button onClick={removeFromClipboard} disabled={!dataExists}>
-                Remove from Clipboard
-            </Button>
-            <p>Total values collected: {totalCount}</p> {/* Display the total count */}
-            <textarea ref={textareaRef} style={{ position: 'absolute', left: -9999 }} readOnly />
-        </>
-    )
-}
-
-function ConnectButton() {
-    const bus = useBus()
-    const connected = useChange(bus, (_) => _.connected)
-    const services = useServices({ serviceClass: SRV_ACCELEROMETER })
-    const [streaming, setStreaming] = useState(false)
-    const [xSink, setXSink] = useState<DataSink>()
-    const [ySink, setYSink] = useState<DataSink>()
-    const [zSink, setZSink] = useState<DataSink>()
-    const [xAxisStream, setXAxisStream] = useState<Subject<Datum>>()
-    const [yAxisStream, setYAxisStream] = useState<Subject<Datum>>()
-    const [zAxisStream, setZAxisStream] = useState<Subject<Datum>>()
-    const [xStreamData, setXStreamData] = useState<Datum[]>([])
-    const [yStreamData, setYStreamData] = useState<Datum[]>([])
-    const [zStreamData, setZStreamData] = useState<Datum[]>([])
-    const textareaRef = useRef<HTMLTextAreaElement>(null)
-    const [copied, setCopied] = useState(false)
-
-    useEffect(() => {
-        if (!inIFrame() && window.location.hash === '#dbg') startDevTools()
-    }, [])
-
-    useEffect(() => {
-        if (streaming && xSink && xAxisStream && ySink && yAxisStream && zSink && zAxisStream) {
-            const xSubscription = xAxisStream.subscribe((datum) => {
-                setXStreamData((prevData) => [...prevData, datum])
-            })
-            const ySubscription = yAxisStream.subscribe((datum) => {
-                setYStreamData((prevData) => [...prevData, datum])
-            })
-            const zSubscription = zAxisStream.subscribe((datum) => {
-                setZStreamData((prevData) => [...prevData, datum])
-            })
-
-            return () => {
-                xSubscription.unsubscribe()
-                ySubscription.unsubscribe()
-                zSubscription.unsubscribe()
-            }
-        }
-    }, [streaming, xAxisStream, yAxisStream, zAxisStream])
-
-    // register for accelerometer data events
-    useEffect(() => {
-        if (!services || services.length === 0) return
-        const accelService = services[0]
-
-        console.log(accelService.specification)
-        const unsubs = accelService.readingRegister.subscribe(
-            REPORT_UPDATE,
-            // don't trigger more than every 100ms
-            throttle(async () => {
-                if (!streaming || !xSink || !ySink || !zSink) return
-                const [x, y, z] = accelService.readingRegister.unpackedValue
-                console.log('vpotluri: calling PushPoint.')
-                if (xSink && xAxisStream) xAxisStream.next(new Datum(xSink.id, x))
-                if (ySink && yAxisStream) yAxisStream.next(new Datum(ySink.id, y))
-                if (zSink && zAxisStream) zAxisStream.next(new Datum(zSink.id, z))
-                // OutputEngine.getInstance().pushPoint(x, sink.id)
-            }, TONE_THROTTLE),
-        )
-
-        // cleanup callback
-        return () => unsubs?.()
-    }, [services])
-
-    const handleConnect = async () => {
-        if (connected) {
-            console.log('DISCONNECT')
-            await bus.disconnect()
-        } else {
-            console.log('connect')
-            await bus.connect()
-        }
-    }
-
-    const handleStartStreaming = () => {
-        console.log('entering handel stream')
-        let xSinkID: number = 0
-        let ySinkID: number = 1
-        let zSinkID: number = 2
-        let srcX = xSink
-        let srcY = ySink
-        let srcZ = zSink
-        if (!streaming) {
-            console.log('streaming was false')
-            /**
-             * check if a sink exists to stream X axis data to. else create one.
-             */
-            if (!srcX) {
-                srcX = OutputEngine.getInstance().addSink('jacdac accelerometer X axis')
-                console.log(`added sink to stream x axis data ${xSink}`)
-                srcX.addDataHandler(new NoteHandler([-1, 1], new NoteSonify(-1)))
-                // src.addDataHandler(new FilterRangeHandler([-1, 0], new NoiseSonify()))
-                // dummy stats. Do we know the min and max for accelerometer?
-                //max:
-                // srcX.addDataHandler(new RunningExtremaHandler(-1, new Speech()))
-                //slope for min
-                srcX.addDataHandler(new SlopeParityHandler(-1, new Speech()))
-                //min
-                // srcX.addDataHandler(new RunningExtremaHandler(1, new Speech()))
-                xSinkID = srcX.id
-                setXSink(srcX)
-            }
-
-            /**
-             * check if a sink exists to stream Y axis data to. else create one.
-             */
-            if (!srcY) {
-                srcY = OutputEngine.getInstance().addSink('jacdac accelerometer Y axis')
-                console.log(`added sink to stream y axis data ${ySink}`)
-                srcY.addDataHandler(new NoteHandler([-1, 1], new NoteSonify(1)))
-                // src.addDataHandler(new FilterRangeHandler([-1, 0], new NoiseSonify()))
-                // dummy stats. Do we know the min and max for accelerometer?
-                ySinkID = srcY.id
-                setYSink(srcY)
-            }
-
-            /**
-             * check if a sink exists to stream Z axis data to. else create one.
-             */
-            if (!srcZ) {
-                srcZ = OutputEngine.getInstance().addSink('jacdac accelerometer Z axis')
-                console.log(`added sink to stream z axis data ${zSink}`)
-                // srcZ.addDataHandler(new NoteHandler([-1,1], new NoteSonify(0)))
-                // src.addDataHandler(new FilterRangeHandler([-1, 0], new NoiseSonify()))
-                // dummy stats. Do we know the min and max for accelerometer?
-                //max:
-                // srcZ.addDataHandler(new RunningExtremaHandler(1, new Speech()))
-                //min
-                // srcZ.addDataHandler(new RunningExtremaHandler(1, new Speech()))
-                zSinkID = srcZ.id
-                setZSink(srcZ)
-            }
-            /**
-             * check if a observable exists for each of the axes.
-             * If not, create an RXJS Subject, filter out null values and change it to be typed as observable<datum>, and then set this as a stream for the source.
-             */
-
-            let sourceX = xAxisStream
-            if (!sourceX) {
-                sourceX = new Subject<Datum>()
-                setXAxisStream(sourceX)
-                OutputEngine.getInstance().setStream(xSinkID, sourceX.pipe(filterNullish()))
-            }
-
-            let sourceY = yAxisStream
-            if (!sourceY) {
-                sourceY = new Subject<Datum>()
-                setYAxisStream(sourceY)
-                OutputEngine.getInstance().setStream(ySinkID, sourceY.pipe(filterNullish()))
-            }
-
-            let sourceZ = zAxisStream
-            if (!sourceZ) {
-                sourceZ = new Subject<Datum>()
-                setZAxisStream(sourceZ)
-                OutputEngine.getInstance().setStream(zSinkID, sourceZ.pipe(filterNullish()))
-            }
-
-            OutputEngine.getInstance().next(OutputStateChange.Play)
-        } else {
-            OutputEngine.getInstance().next(OutputStateChange.Stop)
-        }
-
-        setStreaming(!streaming)
-    }
-
-    return (
-        <>
-            <Button onClick={handleConnect}>{bus?.connected ? 'Disconnect' : 'Connect'}</Button>
-            {bus && (
-                <Button onClick={handleStartStreaming} disabled={services.length === 0}>
-                    {streaming ? 'Stop streaming' : 'Start streaming'}
-                </Button>
-            )}
-
-            {
-                <CopyToClipboardButton
-                    xData={xStreamData}
-                    yData={yStreamData}
-                    zData={zStreamData}
-                    textareaRef={textareaRef}
-                    setCopied={setCopied}
-                    copied={copied}
-                    setXStreamData={setXStreamData}
-                    setYStreamData={setYStreamData}
-                    setZStreamData={setZStreamData}
-                />
-            }
-        </>
-    )
-}
-
-export default function Page() {
-    return (
-        <JacdacProvider initialBus={bus}>
-            <ConnectButton />
-        </JacdacProvider>
-    )
-}
diff --git a/src/pages/Index.tsx b/src/pages/Index.tsx
index c05e50e..c6391e2 100644
--- a/src/pages/Index.tsx
+++ b/src/pages/Index.tsx
@@ -7,7 +7,6 @@ const Index: FC = (props) => {
         { name: 'Jacdac', url: '/jacdac' },
         { name: 'Jacdac and microbit', url: '/jacdacmicrobit' },
         { name: 'Dashboard', url: '/dashboard' },
-        { name: 'Demo Copy Stream', url: '/democopystream' },
     ]
 
     return (
diff --git a/src/sonification/CopyEngine.ts b/src/sonification/CopyEngine.ts
new file mode 100644
index 0000000..1d29508
--- /dev/null
+++ b/src/sonification/CopyEngine.ts
@@ -0,0 +1,213 @@
+import { Datum } from './Datum'
+import { getSonificationLoggingLevel, OutputStateChange, SonificationLoggingLevel } from './OutputConstants'
+import { DataSink } from './DataSink'
+import { BehaviorSubject, distinctUntilChanged, map, merge, Observable, shareReplay, tap } from 'rxjs'
+import assert from 'assert'
+import { create } from 'rxjs-spy'
+
+const DEBUG = false
+
+/**
+ * OutputEngine class
+ * Has a single instances
+ * Users of our library get an instance of this to control it i.e. get sink, play, etc.
+ */
+export class CopyEngine extends BehaviorSubject<OutputStateChange> {
+    public spy = create()
+
+    /**
+     * The Output Engine. Enforce that there is only ever one.
+     * @todo ask group if there is a better way to enforce this.
+     */
+    private static copyEngineInstance: CopyEngine
+
+    /**
+     * A map of Data sinks handled by the Copy Engine.
+     */
+    private sinks: Map<
+        number,
+        {
+            sink: DataSink
+            stream$: Observable<OutputStateChange | Datum> | undefined
+        }
+    >
+
+    /**
+     * @returns A dataSink Id that is unique
+     */
+    public getUniqueId(): number {
+        let newId = 0
+        this.sinks.forEach((value, key) => {
+            newId = key > newId ? key : newId
+        })
+        return newId + 1
+    }
+
+    /**
+     * Get a sink given an Id. Throws an error of sinkId doesn't exist.
+     * @param sinkId
+     * @returns Returns the DataSink associated with sinkId.
+     */
+    public getSink(sinkId: number): DataSink {
+        let sink = this.sinks.get(sinkId)?.sink
+        assert(sink, `no sink associated with ${sinkId}`)
+        return sink
+    }
+
+    /**
+     * AddSink takes optional arguments, and based on what is provided either constructs
+     * a new data sink or uses a given one. In either case, it adds it to the set of sinks.
+     *
+     * @param description A description for the sink
+     * @param sinkId A unique id for the sink
+     * @param sink The DataSink object
+     */
+    public addSink(description?: string, sinkId?: number, sink?: DataSink, stream$?: Observable<Datum>): DataSink {
+        description = description ? description : 'Unknown Sink'
+        sinkId = sink ? sink.id : sinkId
+        if (!sinkId) sinkId = this.getUniqueId()
+        assert(!this.sinks.has(sinkId), 'sinkId is not unique')
+        sink = sink ? sink : new DataSink(sinkId, description)
+        assert(sink?.id == sinkId, "sinkId and sink.id don't match")
+        this.sinks.set(sinkId, { sink: sink, stream$: undefined })
+        if (stream$) this.setStream(sinkId, stream$)
+        return sink
+    }
+
+    /**
+     * Removes a data sink. Once removed, that Id may be re-used.
+     * @param sinkId Data sink to remove.
+     */
+    public deleteSink(sink?: DataSink, sinkId?: number) {
+        sink = sinkId ? this.sinks.get(sinkId)?.sink : sink
+        sink?.complete()
+        if (sink) {
+            this.sinks.delete(sink.id)
+        }
+
+        if (!sink && !sinkId) throw Error('Must specify sink or ID')
+    }
+
+    /**
+     * @deprecated
+     *
+     * pushPoint is sort of legacy. It feeds data in to the sink by calling
+     * sink.next(). However this should not be used as things like automatic
+     * calls to complete() when the stream ends break when you use this approach.
+     *
+     * @param x A number
+     * @param sinkId Which sink it should go to
+     */
+    pushPoint(x: number, sinkId: number) {
+        let sink = this.getSink(sinkId)
+        sink.next(new Datum(sinkId, x))
+    }
+
+    /////////////////// STREAM SUPPORT /////////////////////////////////
+
+    /**
+     * Sets up the stream and/or hot swaps this stream
+     * for another.
+     *
+     * Makes sure that the stream replaces SWAP events with the
+     * correct Play/Pause event and doesn't ever repeat the same state
+     *
+     * @todo should we disable hot swapping?
+     * @param data$ an observable stream of Datum
+     */
+    public setStream(sinkId: number, data$: Observable<Datum>) {
+        debugStatic(SonificationLoggingLevel.DEBUG, `Setting Stream: ${sinkId}`)
+        let res = this.sinks.get(sinkId)
+        if (!res) return
+        if (res.stream$) res?.sink?.complete()
+        let sink = res.sink
+
+        data$.subscribe({
+            complete: () => {
+                this.next(OutputStateChange.Stop)
+                sink.complete()
+                this.deleteSink(sink)
+            },
+        })
+
+        let filteredState$ = this.pipe(
+            map((state) => {
+                switch (state) {
+                    case OutputStateChange.Swap:
+                        {
+                            debugStatic(SonificationLoggingLevel.DEBUG, 'Swapping Play and Pause')
+                            if (this.value == OutputStateChange.Pause) return OutputStateChange.Play
+                            else if (this.value == OutputStateChange.Play) return OutputStateChange.Pause
+                            else Error('can only swap Play and Pause')
+                        }
+                        return state
+                    default:
+                        debugStatic(SonificationLoggingLevel.DEBUG, `state changed to ${OutputStateChange[state]}`)
+                        return state
+                }
+            }),
+            // distinctUntilChanged(),
+            // shareReplay doesn't seem to work as expected
+            // only works for adding new sinks to the chain
+            // does not update OutputStateChange for newly added handlers or outputs
+            shareReplay(1),
+        )
+        let combined$ = merge(filteredState$, data$)
+
+        sink.setupSubscription(combined$)
+
+        this.sinks.set(sink.id, {
+            sink: sink,
+            stream$: combined$,
+        })
+    }
+
+    ////////////////// CONSTRUCTOR /////////////////////////////////////
+    /**
+     * Set up the output board. set up maps needed to keep track of sinks and outputs.
+     *
+     * Also turns this into a "hot" stream
+     */
+    private constructor() {
+        super(OutputStateChange.Undefined)
+        this.sinks = new Map()
+        this.spy.show()
+        this.spy.log()
+    }
+
+    /**
+     * Create a new OutputEngine. Enforces that there is only ever one
+     * @returns The OutputEngine's instance..
+     */
+    public static getInstance(): CopyEngine {
+        if (!CopyEngine.copyEngineInstance) {
+            CopyEngine.copyEngineInstance = new CopyEngine()
+        }
+
+        return CopyEngine.copyEngineInstance
+    }
+}
+
+//////////// DEBUGGING //////////////////
+import { tag } from 'rxjs-spy/operators/tag'
+import { Copy } from './output/Copy'
+
+const debug = (level: number, message: string, watch: boolean) => (source: Observable<any>) => {
+    if (watch) {
+        return source.pipe(tag(message))
+    } else {
+        return source.pipe(
+            tap((val) => {
+                debugStatic(level, message + ': ' + val)
+            }),
+        )
+    }
+}
+
+const debugStatic = (level: number, message: string) => {
+    if (DEBUG) {
+        if (level >= getSonificationLoggingLevel()) {
+            console.log(message)
+        } //else console.log('debug message dumped')
+    }
+}
diff --git a/src/sonification/handler/CopyToClipboardHandler.ts b/src/sonification/handler/CopyToClipboardHandler.ts
index 20009e1..b2e100e 100644
--- a/src/sonification/handler/CopyToClipboardHandler.ts
+++ b/src/sonification/handler/CopyToClipboardHandler.ts
@@ -2,15 +2,35 @@ import { DataHandler } from './DataHandler'
 import { DataSink } from '../DataSink'
 import { Datum } from '../Datum'
 import { DatumOutput } from '../output/DatumOutput'
-import { OutputStateChange } from '../OutputConstants'
 import { Observable, filter } from 'rxjs'
+import { getSonificationLoggingLevel, OutputStateChange, SonificationLoggingLevel } from '../OutputConstants'
 import { tap } from 'rxjs/operators'
 
+const DEBUG = false
+
 export class CopyToClipboardHandler extends DataHandler {
     private copiedData: Datum[] = []
 
-    constructor(output?: DatumOutput) {
+    private _domain: [number, number]
+    public get domain(): [number, number] {
+        return this._domain
+    }
+    public set domain(value: [number, number]) {
+        this._domain = value
+    }
+
+    public insideDomain(num: number): boolean {
+        debugStatic(SonificationLoggingLevel.DEBUG, `checking if ${num} is inside ${this.domain}`)
+        return num >= this.domain[0] && num <= this.domain[1]
+    }
+
+    constructor(domain?: [number, number], output?: DatumOutput) {
         super(output)
+        debugStatic(SonificationLoggingLevel.DEBUG, 'setting up Copy handler')
+        if (domain) {
+            debugStatic(SonificationLoggingLevel.DEBUG, `setting up copy range handeler with domain ${domain}`)
+            this._domain = domain
+        } else this._domain = [0, 0]
     }
 
     /**
@@ -23,7 +43,7 @@ export class CopyToClipboardHandler extends DataHandler {
             sink$.pipe(
                 tap((data) => {
                     if (data instanceof Datum) {
-                        this.copiedData.push(data)
+                        if (this.insideDomain(data.value)) this.copiedData.push(data)
                     }
                 }),
             ),
@@ -72,6 +92,33 @@ export class CopyToClipboardHandler extends DataHandler {
     }
 
     public toString(): string {
-        return `CopyToClipboardHandler`
+        return `CopyRangeHandler: Keeping only data in ${this.domain[0]},${this.domain[1]}`
+    }
+}
+
+//////////// DEBUGGING //////////////////
+import { tag } from 'rxjs-spy/operators/tag'
+const debug = (level: number, message: string, watch: boolean) => (source: Observable<any>) => {
+    if (watch) {
+        return source.pipe(
+            tap((val) => {
+                debugStatic(level, message + ': ' + val)
+            }),
+            tag(message),
+        )
+    } else {
+        return source.pipe(
+            tap((val) => {
+                debugStatic(level, message + ': ' + val)
+            }),
+        )
+    }
+}
+
+const debugStatic = (level: number, message: string) => {
+    if (DEBUG) {
+        if (level >= getSonificationLoggingLevel()) {
+            console.log(message)
+        } // else console.log('debug message dumped')
     }
 }
diff --git a/src/sonification/output/Copy.ts b/src/sonification/output/Copy.ts
index bd2bd95..b6435f7 100644
--- a/src/sonification/output/Copy.ts
+++ b/src/sonification/output/Copy.ts
@@ -7,7 +7,7 @@ const DEBUG = true
 
 // Define the CopyToClipboardOutput class
 export class Copy extends DatumOutput {
-    private copyToClipboardHandler: CopyToClipboardHandler
+    private copyToClipboardHandler?: CopyToClipboardHandler
 
     constructor(copyToClipboardHandler: CopyToClipboardHandler) {
         super()

From fff430619371c9ba00f3a7176f708795e2448da3 Mon Sep 17 00:00:00 2001
From: khanna38 <khanna38@uw.edu>
Date: Wed, 4 Oct 2023 12:49:35 -0700
Subject: [PATCH 5/5] Creating a copy engine to copy multiple streams of data

---
 src/pages/Dashboard.tsx                       |   1 -
 src/sonification/CopyEngine.ts                | 204 ++----------------
 .../handler/CopyToClipboardHandler.ts         |   8 +
 3 files changed, 28 insertions(+), 185 deletions(-)

diff --git a/src/pages/Dashboard.tsx b/src/pages/Dashboard.tsx
index deb2936..1d909c1 100644
--- a/src/pages/Dashboard.tsx
+++ b/src/pages/Dashboard.tsx
@@ -504,7 +504,6 @@ export function DashboardView() {
                         const description = `JacDac Service = ${jds.specification.name}; Index = ${i}`
 
                         const sink = OutputEngine.getInstance().addSink(description)
-
                         const sinkId = sink.id
 
                         const rawSubject = new Subject<Datum>()
diff --git a/src/sonification/CopyEngine.ts b/src/sonification/CopyEngine.ts
index 1d29508..5dc1e7a 100644
--- a/src/sonification/CopyEngine.ts
+++ b/src/sonification/CopyEngine.ts
@@ -7,177 +7,37 @@ import { create } from 'rxjs-spy'
 
 const DEBUG = false
 
-/**
- * OutputEngine class
- * Has a single instances
- * Users of our library get an instance of this to control it i.e. get sink, play, etc.
- */
-export class CopyEngine extends BehaviorSubject<OutputStateChange> {
-    public spy = create()
-
+export class CopyEngine {
     /**
      * The Output Engine. Enforce that there is only ever one.
      * @todo ask group if there is a better way to enforce this.
      */
     private static copyEngineInstance: CopyEngine
-
-    /**
-     * A map of Data sinks handled by the Copy Engine.
-     */
-    private sinks: Map<
-        number,
-        {
-            sink: DataSink
-            stream$: Observable<OutputStateChange | Datum> | undefined
-        }
-    >
-
-    /**
-     * @returns A dataSink Id that is unique
-     */
-    public getUniqueId(): number {
-        let newId = 0
-        this.sinks.forEach((value, key) => {
-            newId = key > newId ? key : newId
-        })
-        return newId + 1
-    }
-
-    /**
-     * Get a sink given an Id. Throws an error of sinkId doesn't exist.
-     * @param sinkId
-     * @returns Returns the DataSink associated with sinkId.
-     */
-    public getSink(sinkId: number): DataSink {
-        let sink = this.sinks.get(sinkId)?.sink
-        assert(sink, `no sink associated with ${sinkId}`)
-        return sink
-    }
-
-    /**
-     * AddSink takes optional arguments, and based on what is provided either constructs
-     * a new data sink or uses a given one. In either case, it adds it to the set of sinks.
-     *
-     * @param description A description for the sink
-     * @param sinkId A unique id for the sink
-     * @param sink The DataSink object
-     */
-    public addSink(description?: string, sinkId?: number, sink?: DataSink, stream$?: Observable<Datum>): DataSink {
-        description = description ? description : 'Unknown Sink'
-        sinkId = sink ? sink.id : sinkId
-        if (!sinkId) sinkId = this.getUniqueId()
-        assert(!this.sinks.has(sinkId), 'sinkId is not unique')
-        sink = sink ? sink : new DataSink(sinkId, description)
-        assert(sink?.id == sinkId, "sinkId and sink.id don't match")
-        this.sinks.set(sinkId, { sink: sink, stream$: undefined })
-        if (stream$) this.setStream(sinkId, stream$)
-        return sink
-    }
-
-    /**
-     * Removes a data sink. Once removed, that Id may be re-used.
-     * @param sinkId Data sink to remove.
-     */
-    public deleteSink(sink?: DataSink, sinkId?: number) {
-        sink = sinkId ? this.sinks.get(sinkId)?.sink : sink
-        sink?.complete()
-        if (sink) {
-            this.sinks.delete(sink.id)
-        }
-
-        if (!sink && !sinkId) throw Error('Must specify sink or ID')
-    }
-
-    /**
-     * @deprecated
-     *
-     * pushPoint is sort of legacy. It feeds data in to the sink by calling
-     * sink.next(). However this should not be used as things like automatic
-     * calls to complete() when the stream ends break when you use this approach.
-     *
-     * @param x A number
-     * @param sinkId Which sink it should go to
-     */
-    pushPoint(x: number, sinkId: number) {
-        let sink = this.getSink(sinkId)
-        sink.next(new Datum(sinkId, x))
-    }
-
-    /////////////////// STREAM SUPPORT /////////////////////////////////
-
-    /**
-     * Sets up the stream and/or hot swaps this stream
-     * for another.
-     *
-     * Makes sure that the stream replaces SWAP events with the
-     * correct Play/Pause event and doesn't ever repeat the same state
-     *
-     * @todo should we disable hot swapping?
-     * @param data$ an observable stream of Datum
-     */
-    public setStream(sinkId: number, data$: Observable<Datum>) {
-        debugStatic(SonificationLoggingLevel.DEBUG, `Setting Stream: ${sinkId}`)
-        let res = this.sinks.get(sinkId)
-        if (!res) return
-        if (res.stream$) res?.sink?.complete()
-        let sink = res.sink
-
-        data$.subscribe({
-            complete: () => {
-                this.next(OutputStateChange.Stop)
-                sink.complete()
-                this.deleteSink(sink)
-            },
-        })
-
-        let filteredState$ = this.pipe(
-            map((state) => {
-                switch (state) {
-                    case OutputStateChange.Swap:
-                        {
-                            debugStatic(SonificationLoggingLevel.DEBUG, 'Swapping Play and Pause')
-                            if (this.value == OutputStateChange.Pause) return OutputStateChange.Play
-                            else if (this.value == OutputStateChange.Play) return OutputStateChange.Pause
-                            else Error('can only swap Play and Pause')
-                        }
-                        return state
-                    default:
-                        debugStatic(SonificationLoggingLevel.DEBUG, `state changed to ${OutputStateChange[state]}`)
-                        return state
+    private copiedDataMap: Map<String, Datum[]> = new Map()
+
+    public setCopiedData(key: String | undefined, data: Datum[]) {
+        if (key !== undefined) {
+            if (this.copiedDataMap.has(key)) {
+                const existingArray = this.copiedDataMap.get(key)
+                if (existingArray) {
+                    existingArray.push(...data)
                 }
-            }),
-            // distinctUntilChanged(),
-            // shareReplay doesn't seem to work as expected
-            // only works for adding new sinks to the chain
-            // does not update OutputStateChange for newly added handlers or outputs
-            shareReplay(1),
-        )
-        let combined$ = merge(filteredState$, data$)
-
-        sink.setupSubscription(combined$)
-
-        this.sinks.set(sink.id, {
-            sink: sink,
-            stream$: combined$,
-        })
+            } else {
+                this.copiedDataMap.set(key, data)
+            }
+        } else {
+            // Handle the case where SinkName is undefined
+            console.error('getSinkName() returned undefined')
+        }
     }
 
-    ////////////////// CONSTRUCTOR /////////////////////////////////////
-    /**
-     * Set up the output board. set up maps needed to keep track of sinks and outputs.
-     *
-     * Also turns this into a "hot" stream
-     */
-    private constructor() {
-        super(OutputStateChange.Undefined)
-        this.sinks = new Map()
-        this.spy.show()
-        this.spy.log()
+    public printCopiedData(): void {
+        console.log(this.copiedDataMap)
     }
 
     /**
-     * Create a new OutputEngine. Enforces that there is only ever one
-     * @returns The OutputEngine's instance..
+     * Create a new CopyEngine. Enforces that there is only ever one
+     * @returns The CopyEngine's instance..
      */
     public static getInstance(): CopyEngine {
         if (!CopyEngine.copyEngineInstance) {
@@ -187,27 +47,3 @@ export class CopyEngine extends BehaviorSubject<OutputStateChange> {
         return CopyEngine.copyEngineInstance
     }
 }
-
-//////////// DEBUGGING //////////////////
-import { tag } from 'rxjs-spy/operators/tag'
-import { Copy } from './output/Copy'
-
-const debug = (level: number, message: string, watch: boolean) => (source: Observable<any>) => {
-    if (watch) {
-        return source.pipe(tag(message))
-    } else {
-        return source.pipe(
-            tap((val) => {
-                debugStatic(level, message + ': ' + val)
-            }),
-        )
-    }
-}
-
-const debugStatic = (level: number, message: string) => {
-    if (DEBUG) {
-        if (level >= getSonificationLoggingLevel()) {
-            console.log(message)
-        } //else console.log('debug message dumped')
-    }
-}
diff --git a/src/sonification/handler/CopyToClipboardHandler.ts b/src/sonification/handler/CopyToClipboardHandler.ts
index b2e100e..2b72b21 100644
--- a/src/sonification/handler/CopyToClipboardHandler.ts
+++ b/src/sonification/handler/CopyToClipboardHandler.ts
@@ -5,10 +5,13 @@ import { DatumOutput } from '../output/DatumOutput'
 import { Observable, filter } from 'rxjs'
 import { getSonificationLoggingLevel, OutputStateChange, SonificationLoggingLevel } from '../OutputConstants'
 import { tap } from 'rxjs/operators'
+import { CopyEngine } from '../CopyEngine'
 
 const DEBUG = false
 
 export class CopyToClipboardHandler extends DataHandler {
+    private copyEngine: CopyEngine = CopyEngine.getInstance()
+
     private copiedData: Datum[] = []
 
     private _domain: [number, number]
@@ -69,6 +72,10 @@ export class CopyToClipboardHandler extends DataHandler {
         }
 
         const headings = Object.keys(this.copiedData[0])
+        const key: String | undefined = this.copiedData[0].getSinkName()
+
+        this.copyEngine.setCopiedData(key, this.copiedData)
+
         const csvData = [headings.join(',')]
             .concat(this.copiedData.map((datum) => Object.values(datum).join(',')))
             .join('\n')
@@ -86,6 +93,7 @@ export class CopyToClipboardHandler extends DataHandler {
     }
 
     complete(): void {
+        this.copyEngine.printCopiedData()
         this.copyToClipboard()
         this.clearCopiedData()
         super.complete()