DEV Community: Alan Garcia

Managing Streaming Data with Min and Max Heaps in JavaScript: A Digital Athlete Health Tech Perspective

Alan Garcia — Sat, 31 Aug 2024 01:47:59 +0000

Data management is crucial in health tech. Whether tracking performance metrics or monitoring recovery times for athletes, organizing data efficiently can make a significant difference in how insights are derived. One powerful tool for managing data in such scenarios is the heap, specifically min and max heaps. In this post, we'll explore how to implement and use min and max heaps in JavaScript, using real-world examples related to athlete data management.

What are Heaps?

A heap is a specialized binary tree-based data structure that satisfies the heap property. In a min heap, the parent node is always smaller than or equal to its child nodes. Conversely, in a max heap, the parent node is always greater than or equal to its child nodes. This makes heaps particularly useful for efficiently retrieving the minimum or maximum value from a dataset.

Min Heap Use Case: Tracking Recovery Times

Imagine you’re a clinician tracking the recovery times of athletes after a workout. You want to keep track of the shortest recovery time efficiently so that you can quickly identify which athlete recovered the fastest.

Creating a Min Heap

In JavaScript, you can create a min heap using an array and manage it with simple functions to maintain the heap property:

class MinHeap {
    constructor() {
        this.heap = [];
    }

    getMin() {
        return this.heap[0];
    }

    insert(value) {
        this.heap.push(value);
        this.bubbleUp();
    }

    bubbleUp() {
        let index = this.heap.length - 1;
        while (index > 0) {
            let parentIndex = Math.floor((index - 1) / 2);
            if (this.heap[parentIndex] <= this.heap[index]) break;
            [this.heap[parentIndex], this.heap[index]] = [this.heap[index], this.heap[parentIndex]];
            index = parentIndex;
        }
    }

    extractMin() {
        if (this.heap.length === 1) return this.heap.pop();
        const min = this.heap[0];
        this.heap[0] = this.heap.pop();
        this.bubbleDown();
        return min;
    }

    bubbleDown() {
        let index = 0;
        const length = this.heap.length;
        const element = this.heap[0];

        while (true) {
            let leftChildIndex = 2 * index + 1;
            let rightChildIndex = 2 * index + 2;
            let leftChild, rightChild;
            let swap = null;

            if (leftChildIndex < length) {
                leftChild = this.heap[leftChildIndex];
                if (leftChild < element) swap = leftChildIndex;
            }

            if (rightChildIndex < length) {
                rightChild = this.heap[rightChildIndex];
                if (
                    (swap === null && rightChild < element) ||
                    (swap !== null && rightChild < leftChild)
                ) {
                    swap = rightChildIndex;
                }
            }

            if (swap === null) break;
            [this.heap[index], this.heap[swap]] = [this.heap[swap], this.heap[index]];
            index = swap;
        }
    }
}

Using the Min Heap for Athlete Recovery Times

Now, let's apply this to our scenario:

const recoveryTimes = new MinHeap();
recoveryTimes.insert(10); // Athlete A
recoveryTimes.insert(7);  // Athlete B
recoveryTimes.insert(12); // Athlete C

console.log("Fastest recovery time:", recoveryTimes.getMin()); // Outputs: 7

Here, the min heap allows the clinician to quickly identify the athlete with the fastest recovery time, which is critical for making real-time decisions during a training session.

Max Heap Use Case: Monitoring Peak Performance Metrics

On the other hand, a max heap is ideal for scenarios where you need to track the highest values, such as monitoring peak performance metrics like the maximum heart rate reached during an intense workout.

Creating a Max Heap

A max heap can be implemented similarly to a min heap, with a few adjustments:

class MaxHeap {
    constructor() {
        this.heap = [];
    }

    getMax() {
        return this.heap[0];
    }

    insert(value) {
        this.heap.push(value);
        this.bubbleUp();
    }

    bubbleUp() {
        let index = this.heap.length - 1;
        while (index > 0) {
            let parentIndex = Math.floor((index - 1) / 2);
            if (this.heap[parentIndex] >= this.heap[index]) break;
            [this.heap[parentIndex], this.heap[index]] = [this.heap[index], this.heap[parentIndex]];
            index = parentIndex;
        }
    }

    extractMax() {
        if (this.heap.length === 1) return this.heap.pop();
        const max = this.heap[0];
        this.heap[0] = this.heap.pop();
        this.bubbleDown();
        return max;
    }

    bubbleDown() {
        let index = 0;
        const length = this.heap.length;
        const element = this.heap[0];

        while (true) {
            let leftChildIndex = 2 * index + 1;
            let rightChildIndex = 2 * index + 2;
            let leftChild, rightChild;
            let swap = null;

            if (leftChildIndex < length) {
                leftChild = this.heap[leftChildIndex];
                if (leftChild > element) swap = leftChildIndex;
            }

            if (rightChildIndex < length) {
                rightChild = this.heap[rightChildIndex];
                if (
                    (swap === null && rightChild > element) ||
                    (swap !== null && rightChild > leftChild)
                ) {
                    swap = rightChildIndex;
                }
            }

            if (swap === null) break;
            [this.heap[index], this.heap[swap]] = [this.heap[swap], this.heap[index]];
            index = swap;
        }
    }
}

Using the Max Heap for Peak Heart Rate

Let’s consider how a max heap could be used to track the peak heart rate of athletes during a workout:

const heartRates = new MaxHeap();
heartRates.insert(150); // Athlete A
heartRates.insert(165); // Athlete B
heartRates.insert(160); // Athlete C

console.log("Peak heart rate:", heartRates.getMax()); // Outputs: 165

Here, the max heap ensures that the clinician can quickly identify the athlete who reached the highest heart rate, which might signal that further attention or cooldown is necessary.

Other Basic Heap Operations

In addition to inserting elements and retrieving the min or max values, heaps support other basic operations, such as:

Extracting the min/max: This removes the root of the heap (the smallest element in a min heap or the largest in a max heap) and rebalances the heap.
Heapify: Converting an arbitrary array into a heap, ensuring that the heap property is maintained.
Peek: Viewing the min or max value without removing it from the heap.

These operations are essential for efficiently managing and processing data in real-time, making heaps a valuable tool in health tech applications.

Simplifying Heap Operations in Python and JavaScript

In Python, the heapq module provides a simple and efficient way to manage min heaps using lists. Here's an example:

import heapq

# Create an empty list to represent the heap
recovery_times = []

# Add elements to the heap
heapq.heappush(recovery_times, 10)  # Athlete A
heapq.heappush(recovery_times, 7)   # Athlete B
heapq.heappush(recovery_times, 12)  # Athlete C

# Retrieve the smallest element (fastest recovery time)
fastest_recovery_time = heapq.heappop(recovery_times)
print(f"Fastest recovery time: {fastest_recovery_time}")  # Outputs: 7

For JavaScript, although there isn't a built-in heap module, you can use third-party libraries like @datastructures-js/priority-queue to achieve similar functionality:

// First, you would need to install the @datastructures-js/priority-queue library using npm:
// npm install @datastructures-js/priority-queue

const { MinPriorityQueue } = require('@datastructures-js/priority-queue');

// Create a new min heap
const minHeap = new MinPriorityQueue();

// Add elements to the heap
minHeap.enqueue(10); // Athlete A
minHeap.enqueue(7);  // Athlete B
minHeap.enqueue(12); // Athlete C

// Retrieve the smallest element
const fastestRecoveryTime = minHeap.dequeue().element;
console.log("Fastest recovery time:", fastestRecoveryTime); // Outputs: 7

By leveraging these tools, you can focus on the critical aspects of your application, such as analyzing athlete data, without getting bogged down in the details of heap implementation.

Retrieving data efficiently in JavaScript

Heaps, particularly min and max heaps, are powerful tools for managing and retrieving critical data efficiently in JavaScript. Whether you’re tracking recovery times or monitoring peak performance metrics, these structures help clinicians and health tech professionals make informed decisions quickly. By understanding and implementing heaps, you can ensure that your athlete data is organized, accessible, and ready for analysis when it matters most.

By using heaps in your health tech applications, you’ll be able to handle data in a way that supports better outcomes for athletes, providing the insights needed to optimize performance and recovery.

`for...in` vs. `for...of` in JavaScript:

Alan Garcia — Fri, 30 Aug 2024 20:58:01 +0000

Data plays a crucial role in healthcare. From tracking vital signs to analyzing performance metrics, clinicians often rely on algorithms to sift through vast amounts of data. In JavaScript, the choice between using for...in and for...of can impact how efficiently these algorithms run, especially when dealing with enumerable properties and large datasets.

The Basics: `for...in` and `for...of`

Let's start with a quick overview.

for...in: This loop iterates over all enumerable properties of an object. This includes properties that are part of the object itself as well as those inherited through the prototype chain.
for...of: Introduced in ECMAScript 6 (ES6), this loop iterates over the values of an iterable object (like arrays, strings, Maps, Sets, etc.). It does not include properties that are not enumerable.

Scenario 1: Tracking Athlete Vital Signs with Sparse Arrays

Let’s consider a scenario where a clinician is monitoring an athlete’s vital signs over a period. Suppose the data collected is stored in a sparse array, where only certain indices are populated, representing irregular data collection times.

let vitalSigns = [75, , , 80, , 72]; // Sparse array where some data points are missing

Using for...in:

When you use for...in to iterate over this array, it will loop over all the enumerable properties, including those that are empty:

for (let index in vitalSigns) {
    console.log(\`Index: ${index}, Value: ${vitalSigns[index]}\`);
}

Output:

Index: 0, Value: 75
Index: 3, Value: 80
Index: 5, Value: 72

Here, for...in only iterates over the indices with values, effectively skipping the undefined values. This might be desirable when focusing on existing data points, but it could also mask the absence of data—a critical consideration in healthcare diagnostics where missing data can be as important as the data itself.

Using for...of:

On the other hand, for...of iterates over the values directly, which may include undefined values if present:

for (let value of vitalSigns) {
    console.log(\`Value: ${value}\`);
}

Output:

Value: 75
Value: undefined
Value: undefined
Value: 80
Value: undefined
Value: 72

In this case, for...of helps in identifying missing data points, which might be crucial for a clinician diagnosing an athlete. For instance, if certain vitals are missing, it could indicate an issue with the monitoring equipment or a need for further investigation into the athlete's condition during those times.

Scenario 2: Analyzing Diagnostic Data with Custom Properties

Consider a scenario where diagnostic data is stored in an object, with additional properties that provide context, such as the time of day or the type of activity being performed by the athlete.

let diagnostics = {
    heartRate: [70, 75, 80],
    bloodPressure: [120, 125, 130],
    timeOfDay: "morning", // Custom property not part of the core data
    activityType: "running" // Another custom property
};

Using for...in:

When iterating over this object with for...in, the loop will iterate over all the enumerable properties, including those that are not directly part of the core diagnostic data:

for (let key in diagnostics) {
    console.log(\`Key: ${key}, Value: ${diagnostics[key]}\`);
}

Output:

Key: heartRate, Value: 70,75,80
Key: bloodPressure, Value: 120,125,130
Key: timeOfDay, Value: morning
Key: activityType, Value: running

This might be useful if you need to consider the context alongside the data. However, if you're only interested in the core diagnostic metrics (heart rate and blood pressure), this might add unnecessary complexity to your algorithm.

Using for...of:

If you convert the diagnostic data to an array of values or entries, you can use for...of to focus only on the data you need:

let diagnosticData = Object.values(diagnostics).slice(0, 2); // Only heartRate and bloodPressure

for (let values of diagnosticData) {
    console.log(\`Values: ${values}\`);
}

Output:

Values: 70,75,80
Values: 120,125,130

Here, for...of allows you to zero in on the data without being distracted by the additional properties. This is akin to a clinician focusing solely on the vital metrics during a diagnosis, filtering out extraneous information to make a more accurate assessment.

Time Complexity Considerations: Sparse Arrays and Enumerable Properties

In healthcare algorithms, efficiency is often paramount, especially when dealing with large datasets. The choice between for...in and for...of can influence the time complexity of your algorithm.

Sparse Arrays: With for...in, the loop skips over missing indices, potentially making it faster when dealing with sparse arrays. However, this skipping can also mean that certain data gaps are overlooked, which may or may not be desirable depending on the diagnostic needs.
Enumerable Properties: for...in will loop over all enumerable properties, including inherited ones. This could lead to unexpected behavior if you’re not careful, especially in complex objects where some properties might not be relevant to the core diagnostic data. This is where for...of might offer a cleaner, more predictable iteration, focusing strictly on the data values.

In both cases, the decision on which loop to use should be informed by the specific requirements of your algorithm. Are you looking to process data efficiently and skip over irrelevant properties, or do you need to ensure that every potential piece of information is considered, even if it adds to the complexity?

Leveraging TypeScript for Clearer Data Structures

While JavaScript provides flexibility, introducing TypeScript can offer an additional layer of clarity, particularly in complex scenarios where distinguishing between core diagnostic data and additional context is crucial.

Bonus Insight

Defining Core vs. Non-Core Diagnostic Data

TypeScript allows you to explicitly define what constitutes core diagnostic data versus non-core data through interfaces, making your code more predictable and easier to work with.

interface DiagnosticData {
    heartRate: number[];
    bloodPressure: number[];
}

interface AthleteDiagnostic extends DiagnosticData {
    timeOfDay: string;
    activityType: string;
}

Example: Using Interfaces for Clarity

The DiagnosticData interface clearly defines the core data—heart rate and blood pressure—that are essential for diagnosing an athlete.
The AthleteDiagnostic interface extends this by adding non-core data, such as timeOfDay and activityType, which provide valuable context but are not part of the core diagnostic process.

This separation ensures that when you’re working with an AthleteDiagnostic object, it’s immediately clear which data points are central to the diagnosis and which are supplementary. This clarity is crucial in healthcare, where misinterpreting data can lead to incorrect conclusions.

Your Choice

Choosing between for...in and for...of in JavaScript is akin to selecting the right diagnostic tool in a clinician’s repertoire. Each has its strengths, whether you’re dealing with sparse arrays or objects with enumerable properties. In healthcare, where data accuracy and efficiency are critical—especially when diagnosing athletes—understanding these differences can help you build more effective algorithms that lead to better outcomes for patients.

Incorporating TypeScript into your JavaScript projects can further enhance clarity by clearly defining core versus non-core diagnostic data, making your code safer, more maintainable, and better suited for complex healthcare applications.

`nextjs-eject`: Control and Customization

Alan Garcia — Tue, 27 Aug 2024 17:15:14 +0000

When working with Next.js, developers often appreciate the convenience and structure it provides. However, there are times when you might want more control over your project’s configuration and setup. This is where nextjs-eject comes into play.

nextjs-eject is a tool that allows you to "eject" from the standard Next.js setup, giving you full access to customize the underlying Webpack configuration, Babel setup, and more. Created by Kevin Bowersox, this tool is especially useful for developers who want to fine-tune their Next.js applications or need to integrate specific tools and libraries that might not be fully supported by the default configuration.

Key Features:

Full Control: After running nextjs-eject, you can modify the Webpack and Babel configurations to suit your needs. This is ideal for projects that require unique build setups or specific optimizations.
Customization: You can easily add or modify plugins, loaders, and presets to your Webpack and Babel configurations, providing greater flexibility in how your Next.js application is built and run.
AWS Lambda Optimization: For those deploying Next.js apps to AWS Lambda, nextjs-eject offers the ability to fine-tune your configurations for better performance and cost-effectiveness. By optimizing Webpack and Babel setups, you can reduce the bundle size and improve cold start times, which directly impacts the cost and efficiency of running your application on serverless infrastructure.
Cost Effectiveness: Beyond Lambda, having control over your build processes allows you to streamline dependencies and remove unnecessary bloat, which can reduce the overall cost of your cloud deployments.

How It Works:

To use nextjs-eject, simply run the command npx nextjs-eject in your project directory. This will generate a config directory in your project, containing the customizable configuration files. From there, you can tweak the settings to your liking.

When to Use `nextjs-eject`:

Custom Build Processes: If your project has specific requirements that the default Next.js configuration doesn't meet, nextjs-eject provides the flexibility needed.
AWS Lambda Deployments: For applications running on AWS Lambda, optimizing your build process with nextjs-eject can lead to more efficient use of resources and lower costs.
Learning and Experimentation: Ejecting allows you to see how Next.js is configured under the hood, offering a valuable learning experience.
Advanced Integrations: For projects that need to integrate with non-standard tools or services, the ability to modify Webpack and Babel configurations can be crucial.

Conclusion:

nextjs-eject is a powerful tool for developers who want to take their Next.js projects to the next level by gaining full control over their build and configuration processes. Whether you're looking to optimize your app, integrate advanced tools, or simply learn more about how Next.js works, nextjs-eject is a valuable resource to consider.

This tool represents just one of the many ways you can extend and customize Next.js to fit the unique needs of your project. As you explore the Next.js ecosystem, nextjs-eject should definitely be on your radar for cases where you need to go beyond the defaults, especially when considering cost-effective cloud deployments on platforms like AWS Lambda.

Answer: Firebase Storage: String does not match format 'base64': Invalid character found

Alan Garcia — Mon, 08 Feb 2021 16:28:26 +0000

Nov 12 '17

if image is a base64 data URL you can use 'data_url' parameter and metadata:

function uploadImage(image){
  const user = getCurrentUser();
  const refImage = app.storage().ref(`profileImages/${user.uid}`);

  refImage.putString(image, 'data_url', {contentType:’image/jpg’}).then(() => {
    console.log('Image uploaded');
  });
}

Open Full Answer

Answer: Converting date from Python to Javascript

Alan Garcia — Wed, 30 Dec 2020 19:06:39 +0000

Feb 16 '11

Javascript's Date() takes milliseconds as an argument. Python's uses seconds. You have to multiply by 1,000.

Open Full Answer

Answer: React environment variables working in development, not in deployment to netlify

Alan Garcia — Mon, 17 Aug 2020 15:50:59 +0000

Apr 2 '20

In netlify you won’t be able to access environment variables for the client unless you have built them into your scripts during a build. That is why you should not store secret keys in the builds of your client scripts.

There is no server side on Netlify, except when using…

Open Full Answer

Answer: React testing library on change for Material UI Select component

Alan Garcia — Fri, 07 Aug 2020 23:10:57 +0000

Apr 28 '20

171

material-ui's select component uses the mouseDown event to trigger the popover menu to appear. If you use fireEvent.mouseDown that should trigger the popover and then you can click your selection within the listbox that appears. see example below.

import React from "react"
import { render, fireEvent, within } from "react-testing-library";

…

Open Full Answer

Answer: Intercept navigation change with jest.js (or how to override and restore location.href)

Alan Garcia — Fri, 07 Aug 2020 03:24:41 +0000

Sep 13 '17

Use location.assign() method instead instead of assigning new location string to location.href. Then you can mock and test it with no problems:

it('test navigation happened', () => {
  window.location.assign = jest.fn();

  // here you call location.assign('http://some-url');
  redirectToSomeUrl();

  expect(window.location.assign).toBeCalledWith('http://some-url');

  // location.href hasn't changed because location.assign was mocked
});

Open Full Answer

DEV Community: Alan Garcia

Managing Streaming Data with Min and Max Heaps in JavaScript: A Digital Athlete Health Tech Perspective

What are Heaps?

Min Heap Use Case: Tracking Recovery Times

Creating a Min Heap

Using the Min Heap for Athlete Recovery Times

Max Heap Use Case: Monitoring Peak Performance Metrics

Creating a Max Heap

Using the Max Heap for Peak Heart Rate

Other Basic Heap Operations

Simplifying Heap Operations in Python and JavaScript

Retrieving data efficiently in JavaScript

`for...in` vs. `for...of` in JavaScript:

The Basics: for...in and for...of

Scenario 1: Tracking Athlete Vital Signs with Sparse Arrays

Scenario 2: Analyzing Diagnostic Data with Custom Properties

Time Complexity Considerations: Sparse Arrays and Enumerable Properties

Leveraging TypeScript for Clearer Data Structures

Bonus Insight

Defining Core vs. Non-Core Diagnostic Data

Example: Using Interfaces for Clarity

Your Choice

`nextjs-eject`: Control and Customization

Key Features:

How It Works:

When to Use nextjs-eject:

Conclusion:

Answer: Firebase Storage: String does not match format 'base64': Invalid character found

Answer: Converting date from Python to Javascript

Answer: React environment variables working in development, not in deployment to netlify

Answer: React testing library on change for Material UI Select component

Answer: Intercept navigation change with jest.js (or how to override and restore location.href)

The Basics: `for...in` and `for...of`

When to Use `nextjs-eject`: