{
const sync: DataPoint[] = [];
data.forEach((entry, index) => {
- if (entry.type === 'marker') {
+ if (entry.type === EntryType.MARKER) {
markers.push({
x: index,
name: '',
});
}
- if (entry.type === 'trigger') {
+ if (entry.type === EntryType.TRIGGER) {
const prevSecondary = data[index - 1] ? data[index - 1].secondaryLevel : 0;
const currentSecondary = (entry.secondaryLevel + 3) * 2; // apply scale
@@ -166,22 +131,7 @@ const CompositeCanvas = ({ data, width, height }: Props) => {
return (
<>
-
-
- Navigation
- Pinch to zoom
- Drag to pan
- Ctrl + wheel scroll to zoom X axis
- Hold Shift to speed up zoom 5 times
-
- }
- >
-
-
-
+
{
+ const { sm } = useBreakpoint();
+ const [options, setOptions] = useState();
+ const [plotData, setPlotData] = useState();
+
+ useEffect(() => {
+ const xData: number[] = [];
+ const yData: (number | null)[] = [];
+
+ data.forEach((entry: ToothLogEntry, index) => {
+ if (entry.type === EntryType.TRIGGER) {
+ yData.push(entry.toothTime);
+ xData.push(index);
+ }
+ });
+
+ setPlotData([
+ xData,
+ yData,
+ ]);
+
+ setOptions({
+ title: 'Tooth logs',
+ width,
+ height,
+ scales: {
+ x: { time: false },
+ },
+ series: [
+ {
+ label: 'Event',
+ },
+ {
+ label: 'Tooth time',
+ points: { show: false },
+ stroke: Colors.ACCENT,
+ fill: Colors.ACCENT,
+ scale: 'toothTime',
+ value: (self, rawValue) => `${rawValue.toLocaleString()}μs`,
+ paths: bars!({ size: [0.6, 100] }),
+ },
+ ],
+ axes: [
+ {
+ stroke: Colors.TEXT,
+ grid: { stroke: Colors.MAIN_LIGHT },
+ },
+ {
+ scale: 'toothTime',
+ label: '',
+ stroke: Colors.TEXT,
+ grid: { stroke: Colors.MAIN_LIGHT },
+ },
+ ],
+ cursor: {
+ drag: { y: false },
+ },
+ });
+ }, [data, width, height, sm]);
+
+ if (!sm) {
+ return ;
+ }
+
+ return (
+ <>
+
+
+
+ );
+};
+
+export default ToothCanvas;
diff --git a/src/utils/api.ts b/src/utils/api.ts
index cffd865..eab8bc4 100644
--- a/src/utils/api.ts
+++ b/src/utils/api.ts
@@ -90,8 +90,15 @@ export const loadLogs = (onProgress?: onProgressType, signal?: AbortSignal) =>
export const loadCompositeLogs = (onProgress?: onProgressType, signal?: AbortSignal) =>
fetchWithProgress(
- 'https://d29mjpbgm6k6md.cloudfront.net/trigger-logs/composite_1.csv.gz',
+ 'https://d29mjpbgm6k6md.cloudfront.net/trigger-logs/composite_1_2.csv.gz',
// 'https://d29mjpbgm6k6md.cloudfront.net/trigger-logs/2.csv.gz',
onProgress,
signal,
).then((response) => response);
+
+export const loadToothLogs = (onProgress?: onProgressType, signal?: AbortSignal) =>
+ fetchWithProgress(
+ 'https://d29mjpbgm6k6md.cloudfront.net/trigger-logs/tooth_3.csv.gz',
+ onProgress,
+ signal,
+ ).then((response) => response);
diff --git a/src/utils/colors.ts b/src/utils/colors.ts
new file mode 100644
index 0000000..a42b474
--- /dev/null
+++ b/src/utils/colors.ts
@@ -0,0 +1,17 @@
+// eslint-disable-next-line import/prefer-default-export
+export enum Colors {
+ RED = '#f32450',
+ CYAN = '#8dd3c7',
+ YELLOW = '#ffff00',
+ PURPLE = '#bebada',
+ GREEN = '#77de3c',
+ BLUE = '#2fe3ff',
+ GREY = '#334455',
+
+ // dark theme
+ ACCENT = '#1e88ea',
+ TEXT = '#ddd',
+ MAIN = '#222629',
+ MAIN_DARK = '#191C1E',
+ MAIN_LIGHT = '#2E3338',
+}
diff --git a/src/utils/logs/TriggerLogsParser.ts b/src/utils/logs/TriggerLogsParser.ts
new file mode 100644
index 0000000..08377cc
--- /dev/null
+++ b/src/utils/logs/TriggerLogsParser.ts
@@ -0,0 +1,160 @@
+import { isNumber } from '../tune/expression';
+
+export enum EntryType {
+ TRIGGER = 'trigger',
+ MARKER = 'marker',
+}
+
+export interface CompositeLogEntry {
+ type: EntryType;
+ primaryLevel: number;
+ secondaryLevel: number;
+ trigger: number;
+ sync: number;
+ refTime: number;
+ maxTime: number;
+ toothTime: number;
+ time: number;
+}
+
+export interface ToothLogEntry {
+ type: EntryType;
+ toothTime: number;
+ time: number;
+}
+
+class TriggerLogsParser {
+ COMMENT_PREFIX = '#';
+
+ MARKER_PREFIX = 'MARK';
+
+ isTooth: boolean = false;
+
+ isComposite: boolean = false;
+
+ resultComposite: CompositeLogEntry[] = [];
+
+ resultTooth: ToothLogEntry[] = [];
+
+ parse(buffer: ArrayBuffer): TriggerLogsParser {
+ const raw = (new TextDecoder()).decode(buffer);
+ this.parseCompositeLogs(raw);
+ this.parseToothLogs(raw);
+
+ return this;
+ }
+
+ getCompositeLogs(): CompositeLogEntry[] {
+ return this.resultComposite;
+ }
+
+ getToothLogs(): ToothLogEntry[] {
+ return this.resultTooth;
+ }
+
+ private parseToothLogs(raw: string): void {
+ this.resultTooth = [];
+
+ raw.split('\n').forEach((line) => {
+ const trimmed = line.trim();
+
+ if (trimmed.startsWith(this.COMMENT_PREFIX)) {
+ return;
+ }
+
+ if (trimmed.startsWith(this.MARKER_PREFIX)) {
+ const previous = this.resultTooth[this.resultTooth.length - 1] || {
+ toothTime: 0,
+ time: 0,
+ };
+
+ this.resultTooth.push({
+ type: EntryType.MARKER,
+ toothTime: previous.toothTime,
+ time: previous.time,
+ });
+
+ return;
+ }
+
+ const split = trimmed.split(',');
+ if (!isNumber(split[0])) {
+ return;
+ }
+
+ const time = Number(split[1]);
+ if (!time) {
+ return;
+ }
+
+ this.resultTooth.push({
+ type: EntryType.TRIGGER,
+ toothTime: Number(split[0]),
+ time,
+ });
+ });
+ }
+
+ private parseCompositeLogs(raw: string): void {
+ this.resultComposite = [];
+
+ raw.split('\n').forEach((line) => {
+ const trimmed = line.trim();
+
+ if (trimmed.startsWith(this.COMMENT_PREFIX)) {
+ return;
+ }
+
+ if (trimmed.startsWith(this.MARKER_PREFIX)) {
+ const previous = this.resultComposite[this.resultComposite.length - 1] || {
+ primaryLevel: 0,
+ secondaryLevel: 0,
+ trigger: 0,
+ sync: 0,
+ refTime: 0,
+ maxTime: 0,
+ toothTime: 0,
+ time: 0,
+ };
+
+ this.resultComposite.push({
+ type: EntryType.MARKER,
+ primaryLevel: previous.primaryLevel,
+ secondaryLevel: previous.secondaryLevel,
+ trigger: previous.trigger,
+ sync: previous.sync,
+ refTime: previous.refTime,
+ maxTime: previous.maxTime,
+ toothTime: previous.toothTime,
+ time: previous.time,
+ });
+
+ return;
+ }
+
+ const split = trimmed.split(',');
+ if (!isNumber(split[0])) {
+ return;
+ }
+
+ const time = Number(split[7]);
+ if (!time) {
+ return;
+ }
+
+ this.resultComposite.push({
+ type: EntryType.TRIGGER,
+ primaryLevel: Number(split[0]),
+ secondaryLevel: Number(split[1]),
+ trigger: Number(split[2]),
+ sync: Number(split[3]),
+ refTime: Number(split[4]),
+ maxTime: Number(split[5]),
+ toothTime: Number(split[6]),
+ time,
+ });
+ });
+ }
+}
+
+export default TriggerLogsParser;