Rudimentary Patch UI

[Firionus]

Implement Patch UI according to Wireframes while leaving out non-essential features.

ToDo

• [x] Navbar and Tabs
• [x] Table
• [x] Add New Fixture Button
• [x] Patch-State Management "read only"
• [x] Fixture Type Page
• [x] Add New Fixture Dialog
• [x] Add Jest Test Setup that at least allows for basic, low-level Unit Tests (testing algorithms or similar)
• [x] Test Navigation in Cypress

---

after implementing API server-side:

• [x] update dependencies
• [x] fix version issues due to update
  • [x] does not compile due to node-sass 6 not supported -> changed to node-sass 5
  • [x] remaining issues when doing npm install
• [x] update npm itself?
• [x] check how we can apply variables from Blueprint.js in JS or whether we should change to SASS, etc.
• [x] pull out react-hotkeys-hook and replace with Blueprint.js (they added hooks now)
• [x] Ensure Hotkey Help Dialog opens by pressing "?" on german keyboard (#51)
• [x] fix WebSocket connection issue (only in firefox, needs minutes to properly connect, Chrome works) (#52)
  • [x] track https://forum.kee.pm/t/bug-firefox-the-kee-browser-extension-stalls-websocket-connections-to-localhost/3473
  • [x] change Reconnection Behavior to use HTTP for checking whether Server is up and only then try to connect WS once or twice
• [x] Connect WebSocket during Startup - if it doesn't work, display Alert
  • [x] Ensure you can't click on anything if Altert is open
  • [x] Ensure Hotkeys don't work while Alert is open => only render main app if connection is open (remove Dialog for this)
  • [x] Ensure Event Listeners will only be added once to webSocketConnection - currently does so for every component that calls the hook
• [x] Subscribe to Patch Stream
• [x] Add Fixture Type
• [x] Delete Fixture Type
• [x] Add Fixtures
• [x] Delete Fixtures
• [x] Test Basic Add/Delete for Fixtures/Fixture Types
• [x] disallow any type with linting (-> explicit any now creates warning)
• [x] When not selecting a fixture in Fixture Types it should not display empty but "Select Fixture" or something like that
• [x] Validate incoming messages -> nah, it all comes from our own server, so we should be fine. If we want to do it in the future, we can use io-ts or something like that
• [x] Test: When WebSocket connection can't be established or is closed the pop-up appears and prevents all interaction
  • [x] https://github.com/cypress-io/cypress/issues/2492#issuecomment-525736484
• [x] Change Adress format to Universe.Address to avoid sorting issues, etc. -> don't know why I would want this as a user now
• [x] Make Typing for React Tabulator work
• [x] Selected Row in Table not highlighted
• [x] Select Multiple Fixtures in Fixture Patch
• [x] move state of "no fixture (type) selected" from name="" to Option/Some/undefined/whatever
• [x] add text label and shortcut to remove button
• [x] Install a CSS-in-JS solution and use it throughout the code base (Emotion? Other ones?) (pushed to later date when we actually need it)
• [x] Edit values in Table: FID, Name, Universe, Address
• [x] Fix Bug:
  • Set Universe to 0, change Universe to empty, change FID, Universe shows up as 0 again
  • Set Universe to 0, change Universe to empty, reload, Universe is 0 again
  • Setting Universe from 0 to empty does not fire a cell edited event
  • MCVE: https://jsfiddle.net/1vnr7byw/ (change Alice and Bob's Toy Count to empty string, observe event is only fired for Bob)
  • Traced to closed but unfixed issue https://github.com/olifolkerd/tabulator/issues/1700
  • [x] Try if it can be solved with a custom editor and/or mutators
  • Proposed Fix: Don't allow setting Universe to empty in UI, only DMX Address which has the same effect
• [x] test editing
• [x] test that "removal" of universe/address values works (needs to set to -1 in messaging)
• [x] Design a Keyboard-only story (no mouse for higher speed)
  • [x] Add Fixture/GDTF
  • [x] Patch Tabs
  • [x] Patch Tables (way too much work and Tabulator isn't an end solution anyway)
  • [x] Optimize add fixture story
  • [x] Tests
• [x] Make a React element for labels with hotkey hints
  • [x] Fix Unique Key Warnings
• [x] Check for remaining TODOs
• [x] Crash when submitting Add Fixture Form without selecting Fixture Type
• [x] Add Fixtures: Select one Fixture Type, select DMX mode from it, change fixture type, dmx mode selector opens, but click outside, will result in non-valid DMX mode being shown in text field while selected item under the hood is undefined, so by default the first mode of the selected fixture type is used. This should be communicated or be invalid.
• [x] "Add Fixtures" Validation
  • [x] Validation: integer, min, max, required (for fixture type, mode (automatically done right now - still validate), FID)
  • [x] perform on blur for each field
  • [x] perform for all fields on submit and block submit if invalid
  • [x] color field red and show popover next to it with detailed message if invalid
  • [x] Allow empty Universe and Address which should be added to the Patch as unpatched (-1 in the JSON, empty in UI)
  • [x] Easy Tests
  • [x] Refactors
• [x] Review code for bad style (cluttered components that do more than one thing, bad naming, ...)

Ommited Features

moved to other issues

• Search (#43)
• Undo/Redo (#44)
• Universe Bar (#45)
• Info Pane while adding fixtures (#46)
• FixtureType Details (#47)
• AutoPatch (#48)
• Error Handling in Patch UI (#22)
• Visual Snapshot Testing (#49)
• "Add Fixture" Defaults (#50)

Mockup

[Firionus]

waiting on #27 to finalize API and test against the server implementation

[Firionus]

When adding new fixtures, the client needs to assign their DMX Addresses. By default it makes sense to put these in the "next free gap" of the approriate size. I wrote an algorithm in Kotlin to find these gaps:

/**
 * Finds the first gap in [inputList] at or after [target]. The minimum size of the gap can be specified by [gapSize].
 *
 * [inputList] does not have to be sorted.
 */
fun nextGap(inputList: List<Int>, target: Int, gapSize: Int = 1): Int {
    val list = inputList.sorted()
    var firstCandidate = list.binarySearch(target)

    if (firstCandidate < 0) {
        // negative returned index means the targetFid does not exist in Patch yet
        firstCandidate = -firstCandidate-1
    }

    var last: Int = target-1
    var current: Int

    for (i in firstCandidate..list.lastIndex) {
        current = list[i]
        if (current > last + gapSize) {
            return last + 1
        }
        last = current
    }

    return last + 1
}

Note this algorithm does not consider the upper limit of 512 on DMX Addresses, so that needs to be added in an outer layer.

The associated unit test:

    @Test
    fun testFindGapAtOrAfter() {
        val exampleArray = arrayOf(10,11,12,20,21,23)
        exampleArray.shuffle(kotlin.random.Random(42))
        val exampleList = exampleArray.asList()

        // gapSize 1
        assertEquals(1, nextGap(exampleList, 1))
        assertEquals(3, nextGap(exampleList, 3))
        assertEquals(13, nextGap(exampleList, 10))
        assertEquals(13, nextGap(exampleList, 12))
        assertEquals(19, nextGap(exampleList, 19))
        assertEquals(22, nextGap(exampleList, 20))
        assertEquals(22, nextGap(exampleList, 21))
        assertEquals(22, nextGap(exampleList, 22))
        assertEquals(24, nextGap(exampleList, 23))
        assertEquals(24, nextGap(exampleList, 24))

        // bigger gapSize
        assertEquals(1, nextGap(exampleList, 1, 9))
        assertEquals(24, nextGap(exampleList, 1, 10))
        assertEquals(13, nextGap(exampleList, 12, 7))
        assertEquals(24, nextGap(exampleList, 12, 8))
        assertEquals(18, nextGap(exampleList, 18, 2))
        assertEquals(24, nextGap(exampleList, 18, 3))
        assertEquals(24, nextGap(exampleList, 23, 9))
        assertEquals(24, nextGap(exampleList, 24, 9))
    }

[Firionus]

working on this on branch feature/patch-ui