Related to #38

Readings and videos

• Writing Better Tests with React Testing Library - Time to React - August 2019
• How to use React Testing Library Tutorial
• Five Things You (Probably) Didn't Know About Testing Library
• Common mistakes with React Testing Library
• Avoid Nesting when you're Testing
• https://istanbul.js.org/
• https://jestjs.io/docs/en/tutorial-react
• Advanced React Component Mocks https://medium.com/@ericdcobb/advanced-react-component-mocks-with-jest-and-react-testing-library-f1ae8838400b

Deploy and setup continuous integration

related to #73

Checkout sample test case:

• https://github.com/mithi/hexapod/blob/master/src/tests/cases/ikSolver/case1.js

and how it's called

• https://github.com/mithi/hexapod/blob/master/src/tests/ikSolver.test.js

Some edges cases to test are listed here

• https://github.com/mithi/hexapod/blob/master/src/hexapod/solvers/ik/HexapodSupportCheck.js
• https://github.com/mithi/hexapod/blob/master/src/hexapod/solvers/ik/IKInfo.js

You might also want to checkout the modules themselves:

• https://github.com/mithi/hexapod/tree/master/src/hexapod/solvers/ik

To have an idea on what kinds of tests to make.

Ideas are welcome.

Thanks!

Add the following:

• github actions (build passing)
• code climate (maintainability)
• hit count
• buy me a coffee
• code style: prettier
• contributions welcome
• total lines: https://github.com/XAMPPRocky/tokei
• code coverage
• license

You can do

const localFrame = hexapod.localFrame, 

So you dont have to type it all the time

Readings

• https://www.freecodecamp.org/news/performance-and-user-tracking-in-react-with-google-analytics/
• https://github.com/react-ga/react-ga
• https://medium.com/@malith.dev/track-users-in-your-react-app-with-google-analytics-6364ebfcbae8
• https://github.com/iqbal125/react-hooks-google-analytics/blob/master/src/App.js
• https://medium.com/@wendeehsu/google-analytics-in-react-js-c1b78dc1bbda
• https://www.bounteous.com/insights/2019/11/19/non-interaction-events-google-analytics/
• https://nextein.now.sh/guides/04-adding-analytics
• https://chrome.google.com/webstore/detail/google-analytics-debugger/jnkmfdileelhofjcijamephohjechhna

Videos

Google Analytics, Ultimate Beginner’s Guide
https://www.youtube.com/watch?v=gBeMELnxdIg

Google Analytics Tutorial 2019: Beginner To Expert
https://www.youtube.com/watch?v=1T83gm6GBt0

• https://github.com/mithi/hexapod/blob/master/src/components/generic/Slider.js
• https://github.com/mithi/hexapod/blob/master/src/components/generic/NumberInputField.js

I should be able to do the following:

leg.coxiaPoint
leg.femurPoint
leg.footTipPoint
leg.bodyContactPoint

https://github.com/mithi/hexapod/blob/master/src/hexapod/Linkage.js

The best practice i've discovered is to compute the transformation matrix outside and pass it
to the hexagon. This is because usually we use the same transformation matrix not only to the hexagon but other things like legs or coordinate frames (axes). So we'll just compute the transformation matrix only once for all the objects that need it. This is why we don't need these kinds of abstractions anymore.

https://www.w3schools.com/howto/howto_js_off-canvas.asp

When you look at the app state, on load, latestCameraView is undefined even though we explicitly define it . Why?

Also when we move from one page to another it does not remember this default state, if we don't change the camera view on page load, (ie we intend to use the default camera view). What happens is it moves to a camera view that we don't intend (probably plotly's default camera view)

however, when we do change it (ie we explicitly play with the camera view), the app state does remember this camera view.

This is not the behavior we intend. We need to fix it.

https://github.com/mithi/hexapod/blob/master/src/hexapod/solvers/LinkageIKSolver.js

From:

class LinkageIKSolver {
    legXaxis = new Vector(1, 0, 0, "legXaxis")
    bodyContactPoint = new Vector(0, 0, 0, "localBodyContact")
    coxia
    femur
    tibia
    summa
    rho
    p1
    targetFootTipPoint
    parsVector
    pars
    beta
    gamma
    obtainedSolution
    reachedTarget
    message```

To:

class LinkageIKSolver {
    legXaxis = new Vector(1, 0, 0, "legXaxis")
    dimensions = { coxia: null, femur: null, tibia: null, summa: null, pars: null }
    points = {
        bodyContactPoint: zeroVec("bodyContactPoint"),
        coxiaPoint: zeroVec("coxiaPoint"),
        femurPoint: zeroVec("femurPoint"),
        footTipPoint: zeroVec("actualFootTipPoint"),
        targetFootTipPoint: zeroVec("targetFootTipPoint"),
    }
    angles = { alpha: null, beta: null, gamma: null, rho: null }
    vectors = {
        legXaxis: new Vector(1, 0, 0, "legXaxis"),
        parsVector: null
    }
    additionalInfo = {
        obtainedSolution: false,
        reachedTarget: false,
        message: "",
    }

When we used identity from mathjs in the Linkage module, all sorts of bugs came up on mobile.
It might be better if we don't use this library at all.

I don't think anyone uses this function, I should probably just delete it.

Using only a partial bundle of Plotly reduced the bundle size by 50%.
Right now, Plotly still occupies 75% of the bundle.
#54

Other things that we can try:

• Remove MathJS as dependency and just write all the matrix multiplications from scratch
• Remove ReactMarkdown and just write them in html
• Figure out if react-icons is taking up more space than it should
• Check if it's a good idea to use preact and eject

Related Links

Eject

• https://codeburst.io/how-i-cut-my-react-javascript-bundle-size-in-half-with-three-lines-of-code-fe7798ecbd3f

Preact

• https://preactjs.com/guide/v10/switching-to-preact

Codesplitting

• https://reactjs.org/docs/code-splitting.html
• https://www.emgoto.com/react-bundles-and-code-splitting/

Importing only one icon from react-icon

• https://hackernoon.com/lets-make-our-bundle-size-even-smaller-7a5727bb110

https://github.com/mithi/hexapod/blob/master/src/hexapod/solvers/ik/IKSolver.js

Pay attention to right front alpha:

• When the alpha is -75 it's okay
• But when it is-75.01 it's not

so we must pass something unique in the htmlFor of each input widget, which is the id for the inputField, each inputfield must have an id which is unique to whole page

from rx = 2.63 to rx = 2.64 alpha should not jump that high

Add check.

that tx, ty, tz are between -1 and 1,
rx, ry, rz, hipStance and legStance are within what is specified in

https://github.com/mithi/hexapod/blob/master/src/components/vars.js

We can return null (early exit) or throw and error

It should work on all modern web browsers (including mobile web browsers like iOS safari)

• https://create-react-app.dev/docs/making-a-progressive-web-app

Your app will work regardless of network state, even if offline. This means your users will be able to use your app at 10,000 feet and on the subway.

Readings

• https://blog.logrocket.com/from-create-react-app-to-pwa/
• https://felixgerschau.com/how-to-make-your-react-app-a-progressive-web-app-pwa/
• https://create-react-app.dev/docs/making-a-progressive-web-app/
• facebook/create-react-app#2398

As per the observation found in NumberInputField => handleChange() method propagating the exception when pass any character in place of number it directly goes to float conversion that means validation not handled properly.

This function has a high cognitive complexity, rewrite this

Issue 1: Input fields are switching places with each other (why?)

Hexagon cloning function

    cloneTrotShift(frame, tx = 0, ty = 0, tz = 0) {
        let clone = new Hexagon(this.dimensions, {hasNoPoints: false } )
        clone.cog = this.cog.cloneTrotShift(frame, tx, ty, tz)
        clone.head = this.head.cloneTrotShift(frame, tx, ty, tz)
        clone.verticesList = this.verticesList.map(point =>
            point.cloneTrotShift(frame, tx, ty, tz)
        )
        return clone
    }

New Hexagon constructor to remove computation

    constructor(dimensions, flags = { hasNoPoints: false } ) {
        this.dimensions = dimensions
        if (hasNoPoints) { return }

        const { front, middle, side } = this.dimensions
        const vertexX = [middle, front, -front, -middle, -front, front]
        const vertexY = [0, side, side, 0, -side, -side]

        this.verticesList = POSITION_LIST.map(
            (position, i) =>
                new Vector(vertexX[i], vertexY[i], 0, `${position}Vertex`, i)
        )
        this.head = new Vector(0, side, 0, "headPoint", 7)
        this.cog = new Vector(0, 0, 0, "centerOfGravityPoint", 6)
    }

Rename from legsWithoutGravity to legsNoGravity

Rename from legsOnGroundWithoutGravity to groundLegsNoGravity

Destructure this ie

{xAxis, yAxis, zAxis } = this.localFrame

Example:

There is a sudden jump from tx = -0.73 to tx = -0.74

Find all the hard-coded strings in the code base. List them all here.
Please take a look at the link texts.py below to get a better idea of what I'm trying to do.

Related to: #37

Something like this:

• https://github.com/mithi/hexapod-robot-simulator/blob/master/texts.py

Examples (but not limited to)

Headers:

• Inverse Kinematics
• Forward Kinematics
• Dimensions
• Leg Patterns

LandingPage Message
Hyperlinks texts and paths

Make sure that this does not introduce breaking changes

Related to #27

Readings:

• https://www.robinwieruch.de/react-internationalization
• https://medium.com/@jishnu61/6-easy-steps-to-localize-your-react-application-internationalization-with-i18next-8de9cc3a66a1
• https://www.smashingmagazine.com/2017/01/internationalizing-react-apps/
• https://github.com/i18next/react-i18next

Put the block of _computeMaybeGroundContact() this this line directly since its the only one using it

Rename _computePointsWrtHexapodsCog to _computePointsWrtHexapodCog