lancegliser’s gists

lancegliser / getIntersectionOverUnion.test.ts

Created September 23, 2022 20:12

Typescript intersection over union

	import { getIntersectionOverUnion } from "./math";

	describe("getIntersectionOverUnion", () => {
	// Values from https://learnopencv.com/intersection-over-union-iou-in-object-detection-and-segmentation

	it("should accept two sets of coordinates and return a numeric value", () => {
	const intersectionOverUnion = getIntersectionOverUnion(
	[1202, 123, 1650, 868],
	[1162.0001, 92.0021, 1619.9832, 694.0033]
	);

lancegliser / typescriptDebouncedOnChangeImplementation.tsx

Created November 4, 2021 14:50

Provides a lodash debounced based implementation of an onChange handler to update state with full Typescript support

	import React, {
	useState,
	useEffect,
	ChangeEvent,
	useMemo,
	ChangeEventHandler,
	} from "react";
	import { TextField } from "@material-ui/core";
	import { debounce } from "lodash";

lancegliser / mapbox-render-bezier-gradient-zoom-lines.ts

Last active April 8, 2020 00:18

Provides an example for drawing curved lines from nodes using turf.js' bezier functionality including line styling with gradients, transparency, and zoom customization. Oh and popups.

	import mapboxgl, {
	getBezierLine, getDarkenedColor,
	getTransparency,
	primaryColor, setMapCursorPointer, unsetMapCursorPointer
	} from "../../../../../Projects/Demo/frontend/src/utils/mapbox/mapbox";
	import {EventData, MapboxGeoJSONFeature, MapMouseEvent} from "mapbox-gl";
	import {Properties} from "@turf/helpers";
	import midpoint from "@turf/midpoint";
	import * as turfHelpers from "@turf/helpers";
	import bezierSpline from "@turf/bezier-spline";

lancegliser / mapbox-utilities.ts

Created April 8, 2020 00:11

A set of common functions you can customize for your application

	// @ts-ignore - Wish this didn't suck, but it does and I'm moving on.
	import MapiClient, { SdkConfig } from "@mapbox/mapbox-sdk";
	import MapboxGeocoder, {
	GeocodeService,
	GeocodeRequest,
	GeocodeResponse,
	} from "@mapbox/mapbox-sdk/services/geocoding";
	import mapboxgl, {
	EventData,
	LngLat,

lancegliser / mapbox-corrections.css

Created April 8, 2020 00:06

A set of common corrections to the css provided by mapboxgl to handle some edge cases I've found.

	.mapboxgl-popup-content {
	/* The content is delcared with a white background, but no default color */
	color: #222;
	}

	.mapboxgl-ctrl-bottom-left {
	/* Provides a barrier to prevent long content from overlapping the other control groups */
	right: 56px;
	}

lancegliser / getHtmlElementFromVueComponent.ts

Created April 8, 2020 00:02

Rendering a Vue component from outside a view instance in JS / TS

	import rootVM from "@/main.ts";
	import YourComponent from "@/components/YourComponent.vue";

	export const getHtmlElementFromVueComponent = (): HTMLElement => {
	const element = document.createElement("span");
	// This may not show an IDE error.
	// You can reproduce what's being ignored using npm run test:unit.
	// @ts-ignore
	const yourComponent = new Vue({
	...YourComponent,

lancegliser / d3-v5-multi-line-chart.js

Created March 12, 2020 13:34

A dirt simple example of a D3 chart using multiple lines, dots, and text elements on version 5.

	const render = (data) => {
	console.log(data);
	var height = 900;
	var width = 1000;

	var margin = { top: 20, right: 15, bottom: 25, left: 25 };

	width = width - margin.left - margin.right;
	height = height - margin.top - margin.bottom;

lancegliser / keywordsResponseTypes.ts

Created February 7, 2020 16:50

An example of creating a wrapping object that allows for data property only (without function) partial constructors for nested classes with functions.

	type NonFunctionPropertyNames<T> = {
	[K in keyof T]: T[K] extends Function ? never : K;
	}[keyof T];
	type NonFunctionProperties<T> = Pick<T, NonFunctionPropertyNames<T>>;
	type PartialWithoutFunctions<T> = Partial<NonFunctionProperties<T>>;

	interface IKeywordsResponseArguments {
	results?: PartialWithoutFunctions<KeywordResult>[];
	}
	export class KeywordsResponse extends ResultsResponse {

lancegliser / .GoogleMap.vue

Created January 20, 2020 18:57

Provides a single component for displaying a google map using minimum properties using typescript and Vue's composition API

	<template>
	<div
	class="google-map"
	ref="mapContainer"
	:style="{ 'min-height': minHeight }"
	/>
	</template>

	<script lang="ts">
	import {

lancegliser / .ErrorBoundary.vue

Last active January 15, 2020 21:11

Basic error boundary component for Vue JS using the V2 composition api. Adapated from https://github.com/dillonchanis/vue-error-boundary

	<script lang="ts">
	import {
	createComponent,
	createElement,
	onErrorCaptured,
	reactive,
	SetupContext
	} from "@vue/composition-api";
	import DefaultFallbackUI from "./ErrorBoundaryFallbackUI.vue";
	import { IErrorBoundaryState } from "@/components/errorBoundary/IErrorBoundary";

Lance Gliser lancegliser