Numenta Live Streams, 25 Apr 2019

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: BHTMS - Refactoring, cleanup, React mouse hover interactions for simple scalar encoder

Description

Broadcasted live on Twitch -- Watch live at https://www.twitch.tv/rhyolight_

A

Sorry that might be too loud the only way for me to really listen to music loud as, if I put my headphones on, hey it's 9 o'clock that didn't do my hair, that's actually too bad.

A

So welcome to building HTM systems. I think this is like the third or fourth maybe session that we've done so, let's do a quick review of where we're at and what we're doing here.

A

First of all, this is the end web site. This is the old version we're going to replace it with our version. Oh yeah also I have been updating the readme a little bit, I think I'm going to do that. One more time, I'm, adding some of these links, sort of as I go along I love that you can edit this right here.

B

A

Temporary deployment to interrupt you or development.

A

Eventually be released to this, your own understand, leave that and the Poirot ku is building. This is the one that bought us thought sorry, I brought Bratislava forget the other day. This one building is ship systems, so I'm gonna put these in the readme, so anybody can easily link to them, even if there they come later, putting it guys whoa what happened?

A

Oh crap, what yeah I somehow hit a button and ruined my my edit shoot? Oh wow, it's still there. Okay, that was really.

A

So this is going to be a work session today. I'm gonna, try and get as work done so I'm open for chat and stuff, but I'm gonna be driving forward. So I'm not gonna, be like just bringing up stuff to BS about.

A

If anybody wants to help by the way once I get into the code, I'll do the live, shared thing with BS code, that was, that seems like it'll be cool. This is good. I wanted. I won't commit.

C

A

Let me do this earlier: okay hold on hold on something's wrong here, so I'm just going to copy this I think this. This page is like on a sink or something you just do a hard read brush. Try this again, I could do this locally. I know it did make it in okay, never mind it apparently made it.

A

It did make it I, just missed it all right, those weird anyway, so the only link that you're gonna need you guys in twitch world or online or whatever. Is this one, this github link to building HTM systems, and that should be on my twitch dashboard here, yeah right here, github repo suppose I like this little back after. Let's do this, so that's fetch of lead. We lead us right to do. Why did it do that?

A

But actually it links back to twitch all of these linked to twitch all right, I'm, sorry, I'm, a little bit I'm I have to fix this. This is so silly building a ship systems. Oh I, didn't even add the repo your own there yeah isn't that great? Okay, here's the URL.

A

All I'm doing this up, let's see if this button works, while I'm doing this.

A

This is the malcolm in the middle' yak. She everything because I'm I'm, honest I, shouldn't be doing this right now: okay, but I'll. Let it play out because it's funny, can you hear the audio to this, because if supposedly you guys can hear the audio but I can I hook this up like three weeks ago and I never had a chance to use it.

A

Fix the thing yeah cool, all.

B

Right, so if you go here now, you'll actually get.

A

Go to the get up repo- and this has got all the links in there for all this stuff. So, like insight, simple HTM, this twitch channel the forum, the archives, you want to see any of the old links for I'm, putting all archives of all of these here on YouTube, so that was yesterday unless that was Tuesday and then Trello, which is this board, which I'll be doing all my planning with and I like the Trello, because it's super low maintenance. It's like just throw ideas.

C

A

And just move them into wherever they need to go. Okay,.

B

So this is, this is sort of like the landing.

A

Page for this project, I'm gonna keep it in the readme that every if you want to refer someone to this project as it's being developed on Twitter, just send it to the read me all. The links will be here describing what's going on as the Jazz too loud.

A

The cello is open, yeah, it's open um if you want to get added to the team, so there is a team.

A

So I've got a team here called team HTM.

D

A

Does this work.

A

I'm still trying to figure this out, so here's TV butene, page hateship community, so here's a team page here and I think you can ask to be added. You have to have an account. Here's who's in it, so the tech guns already in there but doc while you're in here and it's open for suggestions, meaning.

A

D

A

You want this, the brainstorm sort of like the suggestion place and some suggestions. I've already said no, not I will along fix, will asked I made a suggestion of like a suave, plug-and-play sort of HTM ement a ssin, but I think that would be work that I don't want to do for this. I really I want to have like a specific HTML from India I. Think I explained this in that in the last live stream.

A

So what we're going to do today is continue working on this simple, scalar, encoder and and I think we might take some opportunity to clean up a little bit too. So so, let's go look at this. You see what's going on in this boy.

A

I'm gonna turn the jazz down a little can only you can only have so much. This is pretty good, though I like this. This is um the MIDI hands street band I hope that they don't mute this part of the audio. If anyone sees this on youtube and this parts muted, that's why? Because somebody owns the copyright, so let's get this running locally, so we can.

A

Get building HTM systems I think I'm. Oh, let me get.

A

Let me just get that Reed, you change that I just made and then open this up in BS code.

B

A

Let's close, let's close everything out and I'm gonna do a live share and.

A

Copy to clipboard, okay, so I think I can just paste this in here. If anybody's got BS code and they want to follow.

B

A

Me you can open up this code base if you clone it on I, don't get well I, don't.

D

Know exactly know what.

A

You need to do, but you would typically have a git clone and you do work of that.

A

So here's the component showcase that Bratislava added so I wanted to look over some of this new stuff that got added so first, let's run this.

A

Which is NPM, oh I have to turn this music off. This song will be flagged by copyright holder and they won't. Let me they they'll Dima. They D monetize the video which I don't make any money up, ending these videos by the way that in youtube they do monetize the video and they will block the video entirely if that song plays through, hopefully the six seconds, if they heard wasn't long enough for him to do it but stupid his Krum been straight band, but Warp Records owns the copyright, so I can only blame them.

A

D

A

Sorry anyway, NPM run dev. So now we should be running this on localhost right. So this is what we have going home, encoders coding numbers. This is what we're working on laughs. For the most part, the most amount of work has been going into just translating this one diagram from just sort of a standalone d3.js component into a react component, John and I'm, trying to follow this diagram pattern from the red blob visualization. So what was wherever those I gotta find that what was it called red blob? I? Don't want Twitter red blob.

A

There was red blob games, that's it so I love these visualizations. So these this is sort of the pattern. I want to follow. Here's a good one with the hexagonal grids hexagons in the house. Sorry I get excited about hexagons. This is so cool, so this is the type of stuff I want to. I want to do. I love the style, I love this pattern, sort of just the data presentation pattern.

A

Perhaps we could do something like that: I'm, not sure how it goes see you go mobile and it slips right in that's great, so I want to try and make our visualizations like this, because it's very cool.

A

A

Anyway, I'm not here to showcase this, although I could what we're so I'm just gonna click it through this we've got categories. We should have nothing. I got locked. What's going on.

A

I still don't have a favicon, the category is time and then the component showcase.

A

So this is cool. This is demos, available components for creating tutorials, ok. So this is how to use a code block. Essentially, so let's take a look at this because I haven't had a chance to take a good look at it component showcase. So here's the code block content, so he's just got this as a string, template literal template and it just has code in it. Okay, so this is nice like multi-line string and JavaScript harmony, I'm gonna set constant and so he's got highlighted lines.

A

It's absolutely great, so I wanted to be able to do, and so we instead, the layout. We just have the code block as the content and then the highlighted lines as the highlighted lines. That seems so easy. So let's try and put this in place. Let's, let's use this and.

A

The coders are there any? No there's no code blocks here, but there's there's a lot tech here so where we would want to use. This is encoding numbers, but because we haven't added the the text in around this yet so maybe I think I would probably be going on the wrong direction if I went and implemented that right away. So what I'll do is I'll add another card, because I know we're gonna have to do this for moving text from WordPress site to new page.

A

This would be, let's call it out by page encoding of numbers. That's the one. I want to do. First, word presence in it. It's a new page as content, so I'm gonna add a bigger description than this. How do I do that return more detail description, so content of this page includes code blocks which should be which should use the new code react component.

A

See, example, and.

A

The component showcase example and showcase so.

A

Labels, this is I'm going to create a new label and call it let's say: presentation, content, maybe content.

A

Content perhaps I make it pink, so this is content for the page.

A

I'll leave it at that all right, so that basically means.

A

Can't type this content in encoding numbers I want to extract this out. With this code example and.

D

A

It this is where the the diagram will be real. The diagram will be here and that's the one we're working on.

A

D

The one we're working on here- that's.

A

Gonna be the diagram and then content after we're there too, and then there's more diagrams that we're going to have to create. So we could start moving over the content and just put placeholders so I'm gonna make a note of that too.

A

Just add diagram place holders for.

A

Or unfinished work.

A

B

A

To do we're still sort of doing this working on react stuff right now, so this is the one that will deploy. This is sort of our staging area and this is localhost.

A

So this is our builds I'm just checking in with everything so I'm not gonna work on that right now, I'm gonna work on getting this thing to work properly right. So the last time we were working on this I had just put in in the simple scalar encoder here.

A

Oh this, so we're gonna keep doing this.

A

We now using simple HTM, which has a scaler encoder. As you can see right here, and this scalar encoder deep, does the rabbit hole go. Does it go all the way here yeah? So you can see.

A

This is so in this is inside node modules, but this is basically the scalar encoder code. I gotta show this music is freaking me out right now. Sorry too, intense too intense I'm, gonna change it on honestly I'm changing it to nighttime lo-fi. That's like my favorite programming music at this point, because it's always chill man.

A

You can't get more chill than this and now I. Just realized that my my text is often we're gonna fix it I do this. Every video I know one of these days. I will figure out the right way to fix that, but not.

D

A

A

Okay, this is our scaler encoder. This is code, we're not going to touch. This is just the this is what we're trying to show how it works. All right. This is a whole page, is about how this works, so we've got it broken out really cleanly at least I. Think so.

A

So that well, but where we're gonna be working, it's not in here node modules. It's in this simple scalar encoder react component. Okay, and that is the diagram and I should call this vehicle. I'm thinking about changing names, around I sort of wanna I feel like I might end up creating a a diagram, abstract class at some point.

A

So just keep that in mind, because because I want all my diagrams to behave similarly, so so right here between these two classes, we may want to add a diagram component or something like that that so, as we create more diagrams I, think that's something we should think about, but for right now we're just using we're just creating the one and we need to make it like as clean and as efficient as possible. So so, how does it work right now? Let's review we're in encoding numbers. So here's our a react.

A

Page, hey Mark, can container yeah something like that. I, don't know, but I'm gonna call all these diagrams, so I like I, think I will probably use the word diagram, because all of these components will have a d3 rendering component to it a UI interaction component to it and most likely a data storage component to it so yeah. Well, we can talk about names later I I want to just refresh my memory about how we use this thing. So one of the things I remember not liking is having to give it an ID.

A

It doesn't make sense if you shouldn't have to give it an ID. So that's something fix me. uh We're gonna have to refactor soon, so it might be a good time. Now is a good time as any min and Max value bits. This is this should be like initial value, but I'll just leave it at value.

A

It's and with with isn't pixels I. Guess that's fine! So in this this is our react component where we take the props and that make that our state object.

A

So here's here's another thing that maybe I'm not crazy about is even having a having a state object. That's that sort of thing can get messy after a while.

A

Thanks for the follow dragon bite appreciate it we're doing some react coding right now and I'm and I'm actually just looking through this to refresh my memory about what it, how I built it and what's what it's doing and looking for opportunities to clean up and where I see that I'm just going to put a fixed me, maybe remove state property because it I mean at some point. You have to be explicit about what your, what a class's properties are and when you put everything into a state object, you're, not being very explicit.

A

So, as you can see, we go to this state a lot, so we've got bits and encoding and ID and width and and it's all, it's really cleaner to just pull those all out in the constructor. So.

B

A

Who's looking at your class can look and say: oh, these are the these are the private properties of the class, so I'm probably gonna, do that, but.

B

I still want to I want to scan through.

A

B

Sure I know I'm doing so. Here's another thing that bothers me isn't.

A

Code I remember this Don fix me function relies on entirely on side effects, so that's sort of a code smell, so this function doesn't take anything and it doesn't return anything what it does it computes by manner of a side effect, and- and that's that's something- you don't really want to do it's bad. It's a bad programming practice, because it's not explicit about what it's doing.

A

When you hand a code of function, something and you get something back, you kind of know what it's doing when you just call it, it doesn't feel document so I can fix. This component did mount. This is a react thing and I'm could just make this component did mount right.

A

I just is there anywhere else and I'm calling set up diagram know so I could just make this component did now.

A

A

I'm gonna make so I'm just looking at the chats life program. One hour to write four hours understand one month later: yeah, that's the that's! What I'm trying to do is clean this up, so when I, when I come back or other people come through here, because this is open source code.

B

A

Know I want to try and make this friendly for people to come in and understand what it's doing. I want people other people to understand. What's going on and functional, no I'm, not gonna, go with all functional.

B

I like functional.

A

Programming but there's a time and a place for it, and this isn't it in my opinion, okay, so I'm gonna, make a note about this component. Did mount react component did mount.

A

React component component did no good they're trying to find a link to it. There we go so I'm just going to add this as a comment, so people know that it's a react thing I'm not doing the whole, pretty commenting thing yet, maybe when we get to dock, if we ever do I, don't think we're gonna create docks for this honestly, if I'm going to create docks or anything it'll be simple htm', which I think would be a good effort to put really clean documentation and generate it.

A

But this is. This is just sort of the website. So I know what Marc's answer: ISM there's a time and a place for functional programming. Sometimes olp works really well, sometimes functional works. Well, sometimes procedural works. The best honestly well you're, always sort of doing procedural programming.

A

Okay, so on component did mount. This basically sets up I'll. Make a note sets up the diagram since I changed the name, d3 diagram, all right, so yeah. So this is basically calling the d3 function. So is when components mounted that means we have access to the Dom.

A

Ad number line, so all of these d3 functions are taking a component that we're gonna call it a group.

A

A

All right, so here's our.

A

This is the markup for this component, which has an SVG with an ID, some type of style that is specified here and then some hard-coded stuff number line hover, which I was working on this before this is not currently not working. So that's where we'll probably go to next after we clean this up a bit and then we have prop types which aren't really necessary, but probably a good idea to keep so we'll get back to the handle number line. I'm just trying to get my head around this.

A

What else we need to do this is the value marker I think this is all legit that will fix this. Okay, there's a magic six here, that's not obvious! I will need to go through and and sort of do a last pass for the arrangement of things and took things like this magic sticks house and make make some standard padding. You know, setting somewhere, so I will do that.

A

Here's another just spacing you know. I should probably call this out somewhere for what it is exactly but I'm not gonna, think about it right now pad output cells, here's the state again!

A

This is what's drawing the the grid right here: the output cells and it's not doing I, don't think it's doing it perfectly either, but we'll fix that, but just as far as code style, clarity.

A

This is our scale.

A

This type of stuff, we might end up pulling out into some standards, perhaps.

A

Some styles for diagrams.

B

A

And treat cells? Okay, so I've got this treat cells because I want to essentially do the same, treat all rectangles the same, whether they are when they get updated or when they are new, just give them the same treatment, because when they get updated they might move or change color.

A

So we're just saying all rectangles get treated this way. Any new rectangles that get entered into the mix also get this treatment and any that are removed from the mix are just removed from the Dom okay, this one we haven't figured out yet we're still working on that. This is the dump okay, so everything looks okay here at least I've got fixed meats in the places where I want to fix things and I'm, pretty sure that we set up tests oops.

A

No I thought we had tests, I could have swore or that might have been somewhere else. I don't think I have we have added any tests here. Every no I don't even have a source of test directory.

A

Okay, so I'm mildly concerned about that, but as long as a simple HTM, it's the main thing that I'm concerned about so right now, I'm since I, don't have much experience with react. I have even less experience, testing, rad components, so I'm just going to fix some of these things and make sure that still works. Well, it renders I mean the the handle events and updates aren't working, but, like the state object, I'm gonna I am going to remove this. Let's just say so.

A

The things that we want off the state object our bits and encoding ID with value they're all the things that we passed. It.

A

And obviously I don't need this at all. I could just say crops.

A

This foul April prop stuff, Wow or no I'll, just leave it that this stuff in- and these are all required, props, so I can I can assume that they're there and that's because we did this.

A

Okay, let's see how do I get the or anybody who's coming in I want to share this with you. If anyone wants to follow along with my code, if you have Visual Studio code installed and this twitch highlighter thing, you can follow that link and actually highlight the code that I'm working on. If you see something that I don't, for example,.

A

A

What else did we send it here? Id min max Val bits with ID and I forgot, the max.

A

B

B

A

Okay, this is gonna, break everything so, and the encode so I'm gonna change in code I know that we're also sticking encoding on there and then I'm, not gonna. Do that anymore?

A

Okay, so this is a this is this can now just be well if I'm, if I'm gonna, I might as I might as.

B

A

This at this point, and just only use the props to extract things.

A

Props props, props, okay, so now props are only here. I've created this, the encoder and I'll. Get back to this fix me in a minute code function this binding! That's fine!.

A

Okay, now all the places we still have this dot state or probably anywhere in state. So we can change that. So we could probably change this that state to this dot.

A

Yes, this one trips; no, no, no just this, not this time.

A

Okay, this stop the stop. A coating see that's about what I want, but I'll fix that a minute, this dot, this dot, this dot all right, so we're just getting rid of this state container and it's gone okay, so there's no more state container, which we've pulled out all the properties right here, so we're being explicit, and this should now work.

A

This should continue to work. So, let's see if it compiles see if this still loads, okay, so everything loaded.

A

So that seemed to work now, let's fix this any code thing. So how do we want this to work? Well, the encode function doesn't necessarily have anything to do.

A

All we're doing is using our encoder that we set up here with some of our initial properties, so it does so yeah it does. We need access to this encoder that's attached to the instance, but we don't necessarily need to do this update as a side-effect. We could send the encode function, what it is going to be using, which is bits not assumed that it's where it's going to get it, and we can.

E

A

Assign that to our encoding here and just say: we're gonna get our bits from the outside. We're not going to make any assumptions about. Well we're going. Basically we're yeah we're going to be explicit about what we're doing here, we're going to send in the bits to encode we're going to get an encoding and then we're going to return simply return the encode not assign it to anything, not mutate anything. So we haven't mutated. Anything in here. We've just performed a function.

A

So now we're being explicit about what this is doing, use the coder to turn bits into.

A

Wait a minute: this is not bits its value, that's what I've got wrong here value!

A

That's why it wasn't coding properly in the first place. Okay, so I have to fix this. It's not bits! It's Bao, all right.

A

So what what happens with this encoding? Well, we use it whenever we're treating the rectangles right, that's how we create our rectangles array.

A

B

A

Broke anything compiled and hey look. Actually we have Anna coding here, which is what we wanted.

A

Okay, so let's go back and see what other cleanup we want to do here.

A

This is uh the two linear scales goes value to screen screen to value at all, Keith Lord, another fix me. Okay, we've got a magic magic, padding value here.

A

This is for the marker, okay, so so, let's see what this exactly is. This is for this marker. If I it's six pixels right now, so if I make it sixty what changes all right so you've moved that moved from here to here, which was interesting. I didn't expect that to happen, like I thought it would move in one dimension, not both dimensions. So that means oh, because this magic six is being used to to change them, both okay. So what happens if we make it zero I.

A

Think I'm probably applying this wrong, because this doesn't really make sense to me. This is supposed to be twenty seven and a half and it's I'm subtracting a magical, six pixels. Let's just get rid of this. It's one.

C

Of those things that it must have made sense.

A

At the time, I think you just leave it like this all right, so we got rid of a magic number. That's another code, smell I know, there's another magic number sort of magic. So here's another spacing number. So if I move, if I change this seven to zero, that didn't that didn't honestly I saw it move up a little like this thing moved up: seven pixels, but it looks fine. So let's, let's not use it.

A

Let's decomp liqu, eight things: okay and.

A

So I'm keeping these texts and marks and I don't really even need to do this. I can just leave them to God.

A

I'm gonna I will probably I, might use this later, so I'm just gonna leave it like this so again, but we still have some more styling standardize, some styles for the that's something that we could do here as well as far as the SVG sort of styles of reason here, but I'm not gonna, do that right now, so all right, so we're in a good spot.

A

Here, let's, um let's figure out whether this encoding is actually working, because this is looks like it's encoding, something way over to the right, but we've got the value in the middle, so this coding I would expect to be in the middle here somewhere, so something's wrong.

A

This is falco. This is the only diagram that I have those I mean running right now, so I'm gonna. If that's the case, then I was right to take them out, but they were where they came from. They were individually applied to this diagram, so.

D

A

So, let's figure out why the encoding is not right, so.

A

We have should have a console log of this encoding 27.5. Let's see there, we go if the coding is right. So there's something to do with the rectangles is wrong.

A

So the we set up the encoder, oh yeah, we didn't use, we hard-coded it to a hundred, but this should be what should it be? What was it in there? Other example, not this one and in our old code, when we look at the old source, widgets HTML coding numbers. These are the old. This is the old stuff. This was a simple scalar code, not forget those yeah.

A

There it is new scanner, coder and Kota prams where's, that kind of family. Oh, it's I'm, passing it in render simple numbered encoder.

A

Okay, okay, so let's start with this I: did it all the way down here, simple, simple, scalar encoder, so I passed it eighteen and a hundred I? Don't.

B

Know why and I.

A

Passed it founded false, so maybe young made mission with that I. Don't think I think that's the default. But let's, let's start, let's use the exact same.

A

A

Yeah they are that's. These are user configurable! That's what I'm doing I'm configuring them.

A

Okay, but the problem is oh, it's. The problem is just in the display, I think so like this. That's the problem see how see how this spins way out over here, I'm, just not I'm, not rendering the correct of the correct width. So my output cells are rendering rectangles way out here, where they shouldn't be.

A

So that should be easy to fix. That's gonna be down in this add outfit cells: here's where we calculate X and here's the scale that we're using fits to output display. So this is going to take the index and return that the actual pixel value of x that we want.

A

And it is a scale, that's going from zero to the number of bits which is correct. This is what's wrong. It's this. This value is wrong. This width I think, with what width am I telling it.

A

500, that's why I think.

A

But that should should be okay. This should be 500 to this. Svg width is 500 this, but this is not so there's a bad cat. There's a bad calculation.

A

Since going on, let's put it, let's put a debugger right.

A

Okay, so we're an eye and I'm gonna add a watch for.

A

A

It's to outfit display, okay, so 10! That's that's right! That's what I would want. It should go to 10 if we oh, if the width is right. Okay, almost 20, almost 30, so it's not quite and the bits we have the number of bits here.

A

This should be called once per bit in the output card, because the data.

E

Is this encoding.

B

A

Let's, actually, what I really want is a break point. There.

D

A

I want to see what this encoding is.

A

100 and the bits should be in.

B

A

So there's a hundred bits and they're each ten pixels, so it's going out to a thousand. So why is why? Is it deciding that they're, ten pixels each and bit stout of slave?

A

B

A

Fixed the breakpoint problem, the other day, I just put debugger statements and I still don't know why that's doing that.

B

A

So this range isn't doing what I expect it to do. I should be giving it zero. Okay, let's put a debugger right here, look just to make sure that I'm creating it the right parameters, so zero to 50 bits, zero!

A

A

That's right! So I'm, starting at 10 and going to 490. Essentially so this this function should never return anything over 490. Yet it seems to be returning over 500 here so I'm gonna console.log, some stuff.

A

Could it be that the cell is with with is the width of the individual columns in the diagram.

A

There's no columns in the diagram we're just scaling we're just creating rectangles and their spacing them out across a space from some from some x pixel to another x Piersol and we're saying we want this many rectangles within that space and spacing them out and.

A

I've done this several times so I'm, not sure I know this should work pretty easily so I'm just going to do this turn out weird and because I want to I want to log each one of these.

B

A

A

A

My son of a debugger.

A

I still have another debugger I have two debuggers.

A

Okay, okay, so we're definitely getting.

E

Pixels out, I was just doing this to.

A

Confirm that our pixel value is over 500. So here's what's driving me nuts right now, I'm using this bits to output, display I'm telling it.

A

To go from zero to bits with this back.

A

Ok, I'm creating this this lot or they call it linear, it's just a it's just a linear scale.

A

From the domain 0 to 50, that's how many bits that I want to display just.

A

A

Now this isn't the width of the rectangles. This is the x-value of each rectangle, the I'm, going to use this to take a bit an index of a bit and translate it to the X, the pixel x-value of where that should display.

A

That's what this scale linear does I'm saying within this range is 0 to 50. Translate. We return me a function that translates into this range, which is 10 to 490, so I can call this every time with every index. I can call it and it'll just return me the x value of it. So this should be within the range 10 to 490, but it's not at the list. I'm specifically telling it to return values between 10 and 490.

A

That's what it should do, but what happens when you get to the console when we start calling it right here it's to output display with this index, oh I'm, calling it with indexes outside of the range that I specimen.

A

Okay, that's the problem! Why.

B

Is that happening I.

A

Must be something wrong with the encoder because I'm sending it an encoding with too many bits in it? That's the problem so now so I know that's the problem. That makes perfect sense alright. So this is fine. It's something with this encoding so and I looked at it and I thought. Oh, it's fine, because all the bits were in the middle, but what I didn't realize it's twice as long as it should be. All the bits do need to be in the middle, but it can't be that long. So what did I do wrong?

A

I must have created the encoder wrong, I told it. The end should be 55.

A

Min and max.

A

Don't worry you so this is just the number of on bits and.

A

It's this width, this width I create this. So if I created a corner and I say your values are gonna, be within min and Max. Give me a hundred bits back. What I need to use is this stuff? It's okay, that's it! That's all I needed to do. I! Think, let's test to see, if that's really I think that's all I needed to do. Yes. Yes, all right! That's a celebration and a cow.

A

So now we need to make this move when we interact with it.

A

Which sounds like a good plan, but first, let's take all our cleanup and commit some code here. Just.

D

Want to look through all the stuff that we did.

A

C

A

I, don't know what this oh yeah, those are just properties, property names, clean up.

A

Fix and fix meas that I, just added took out state yeah. Okay, oh I, haven't fixed that one thing. There's one more thing: I want to fix before we commit this. This thing that I have to set it an ID I shouldn't have to send it an ID I'm, just I should be able to create as many of these simple scalar coders in line and the code as I want, and it should handle its own ID.

A

So what I'm going to do is I'm going to generate a random ID for each one of them in its constructor, and so that way it knows it's JavaScript code knows where it's Dom code is, and they can sync they can use that to sync, that's the only reason I ID is because of that. So instead of this and.

A

This will also get updated. It will use the same ID so instead of this I can simply generate a random ID. Does that sound? Like is anybody out? There no react, because this is something that I can. Maybe I could just look it up.

A

React react, Jess, random, ID, okay, how.

B

To generate unique.

A

Ids for form labels, though I really what I should really do is just JavaScript random, Dom element, ID I know, there's there's functions that do this simpler than this. Do it generator.

A

Oh I could do that now that would that won't work as it could be happening, although many times. Oh, you need to be cognizant of the keys and react as its how react finds elements in the Dom? Okay, let me take a look at this.

A

That I hope you understand. The issue that I've got here will I am only giving it this ID. The only reason I have this ID is because.

A

Yeah, just because to link it to the Dom to link the do I even but so I can get the d3 code. With my d3 logic, that's happens after the component mounts. That's what it is, so the d3 logic can attach to the Dom that those been created. That's the only reason that I need an ID and if there's a better way to do it than just creating a sort of random ID or or if the react already gives me one which maybe this is what it's, what I could do.

A

How it finds on so this shouldn't affect how a reactor finds elements in the Dom, but how a ID them right.

A

Keys help react, identify which items have changed. Our added or removed keys should be given to the elements inside the array to help the elements to give the elements of stable identity. Oh I see it yeah, okay,.

A

Only if you use a component, an array which you may okay I might at this point, so I don't so I won't. I won't worry about this until I've got a raise of components which, which makes sense, I might eventually have a raise of diagrams.

A

So if I'm going to I'll, just okay I'll put this aside for later I get this I think I know I, think I get this. This would be something that if I were creating an array of diagram components or something I might want to add here if I was making a list of them, which I'm not sure I'm going to be doing so. At this point, I'm all I'm gonna do is generate some random string.

A

I'll say: random: gooood, JavaScript, gooood goo, it's good enough.

A

I, don't want to install something for it like it doesn't have to be a perfect youíd. It doesn't really have to be a good. Let's just say, ID.

A

That's it! That's it that simple base64-encoded.

A

A

There we go alphanumeric Jenner, generate random, alphanumeric string.

A

Good enough I'm gonna do it.

A

And eventually, so, this is something that I end up doing for all of my components. This would be something that I might put in an abstract base class, but for now I'm just going to do this and we'll make ID ten.

A

So this should work thanks, we'll talk to you later, he dropped in and helped me out and then left. So this should work right. This should work.

A

Yeah I mean it no doesn't didn't work. Oh.

A

It's I marked it as required yeah. So that tells me the properties works are pretty stuff, so I don't need an ID anymore. This min Max value bits with.

A

Property I did not match.

A

Property ID did not match whether this where's this coming from.

A

Server and client- oh snap,.

B

Oh, that's interesting so.

A

We're doing we're getting into some isomorphic issues here, apparently there's some client component there's a con there's a client instance of this component, and it is jet also generating a random ID and it doesn't match what the client has. So this code.

A

This code is what am I, where am I looking at this mine yeah.

A

This is being run this. This encoder component is being created on node and in the client and there's some communication happening and they're like hey. These things aren't don't have the same. Ids.

C

A

That's interesting, I didn't realize what can I do here, because I'm gonna have more than one simple scalar encoder on the page, so they have to have different IDs I guess I could just real I could just I'll just make the user, which is me that's that I go too far.

A

I'm just gonna make the user me provide.

A

This sorry so I'll just say: okay, your simple scalar coder, one that'll work so and it's not that bad, it's just it's just I was hoping not to have to give everything an idea better. Well, yeah falco there has to be I assumed. This was happening because I think it's a part of either the next framework that I'm using or react itself. I, don't know, what's reacting what's next, but next is sort of the the server-side framework I'm using to serve reactive components to the client yeah it's next. So that was that.

A

Did you see what happened? Will this when I gave it a random ID? In my in my code it gave me a mismatch between the client, the server, so that was interesting, so I'm just gonna go and do it this way. I don't need that either so I will just explicitly I'll just require an ID and explicitly call it out. That's that's not so bad all right. Let me commit this, so I can get opponents and pages I'm just going to call this cleanup and encoding fixes.

A

All right, so you guys should be able to see that.

A

B

Yeah 15 seconds ago, okay, so.

A

And that's running in CI I forgot I should probably put this in a PR, but there's no I, don't think there's anything going on in CI a--. Is there not much I knew.

E

We had tests didn't.

A

Weren't there tests- maybe thought of so I'll, just put this in CI and I. Don't maybe didn't do anything I can't.

D

A

Oh, it does Heroku right, it does a broken deployment, so.

E

This is actually.

A

This will go, live and as soon as this is done, this is the Heroku deployment. Okay, so we haven't actually done anything yet and I'm gonna take break so.

A

I'm going to leave the mobile came on I'll, take a quick break stretch. My bones stretch, my bones: I, don't know yeah sure.

D

B

A

B

How did that happen.

A

That's not supposed to happen.

A

Oh I've had that before somebody showed me: mata yerba, Mattei, I, love, I, love this stuff. That's a nice ear! Bramante cup mine mine broke down. It was made out of like coconuts or something. This is my coffee cup.

A

Sorry I like strolling Twitter right now. Somebody said.

A

A

He's going he's goading he's going full Buddhist on this okay, anyway, I'm I'm, digressing II left.

B

A

Good to see ya good, to see everybody um where was I, you know what we were gonna do now.

A

I had a friend who worked at a cafe and he made me a drink with a shot of Ma Tei an espresso. He called this sad bunny wat days can be pretty bitter, but this is high in caffeine. Speaking of I got a full unfolded. Cherry coke I usually get diet. So like this, it's a treat all right. um Let's get this component working! Let's, let's get this working like a mouse interacting and everything, because it's it's not working right now right.

A

What we need here is this look. I have some of the events going right here: I'm just spitting out paychecks, but I. Don't even think it's right, like page X right here, look down side of it. Now it's stopped, so this mouse handler is not even like working consistently.

A

So what I want to do is: let's just do something real stupid. First, just cuz I mean the first thing you want to do is like see some interaction, I'm on a look. What Lacroix Crick's great all this sparkling water is great.

A

As long as it doesn't have sugar or sweetener in it, I think we should drink more water and if, if it's sparkling so be it I like sparkling water and I, don't drink alcohol I used to so whenever I'm in the mood for an alcoholic drink, sometimes they'll just have sparkling water and it's something.

A

And if you put a lime in it, it looks like you're getting like you're drinking with your buddies.

A

Where were we, we were at a place. We were at a mouse interaction place that mouse interaction.

A

House interaction here it is handle, live, handle number line, hover, that's what we wanted and I was trying to use the page X for something what I want to do is to change I. Honestly I may have to go, buy a fan today because it feels hot in here already there's not much air moving.

A

There's a hardware store across the street.

B

A

Instead of console logging, this and I don't think this page. X is the right thing by the way. What.

D

I really want to do what.

A

I was trying to do is to get a d3 event, because there's a there's, a d3 mouse object. I should be able to get into it, which is what I would like, but it didn't work when I tried it last time here, I hurt my advance. Thanks. Did you blow into the screen? It's a little hot.

A

So, whatever value I get here's what here's? Basically, what I want I want e line X and right now, let's just say it's e page X, what it's not so I'm just gonna log it and I also want to move.

A

Excuse me I want to move the marker, so the value marker I'm gonna get rid of this fixed meal. I'll worry about that. Oh I! Don't.

C

A

Meas they get they're distracting, I want to fix them, but these things are gonna move these things have to move. So what I have to make the marker essentially dependent upon data.

A

So either add value markers should be like change value marker, because because this is only getting called once, it looks like all. These are getting only called once no I know how to capture Mouse events with d3. But what I'm saying is it didn't work with this because I'm I'm doing this? The react way right, I'm doing I'm, I'm, saying here's the mousemove handler that and I'm telling react to this so react might not update the Dom event, might not use the Dom event API and the way that the three is expecting.

A

Obviously, it's not because the mouse d3 is never getting the event update, and it could be that this function is just being called too soon right. It should be called after d3 has a chance. So that's probably the situation, but either way I should be able. I shouldn't have to depend on d3 to get the mouse avenged to be able to get it from react or from this event, whatever this event object is that react is handing me here. It's not a real event if it's a simulated event, a synthetic event, they call it.

A

A

What I'm figuring out here is so when I set all this up in component did mount. This is called blunts, okay and so I'm, adding value marker one time and one time only the number line two now the output cells is a little bit of a different story as I'm calling it once, but it's different than these others. The difference is, it's.

A

Rectangles rely on this on data, it's a it's data bound so, and this is a d3 thing if you create a selection that doesn't exist yet, and you bind it to data like this, then essentially, you can tell it when new rectangle or when the rectangles are updated. Do this do this with them? That's what this isn't saying when when data is applied, do this to the rectangles, if any new data enters into the mix, you're gonna want to add a new rectangle and rectangles, and and treat them the same way.

A

So this is. This is great when you've got- and this is like for every rectangle- that's going to be in this output array and- and this function runs on each one and, for example, the color is on or off depending on the value of the data.

A

Gonna turn this switching songs. Sorry.

A

It's a little teeny bit too loud, okay.

A

So this, let me go look and see how I did this in the other one, because I had it working, fine and I, don't remember: did I make a data-driven exactly how did I make a data-driven? So this is the old one update value. This looks like the function.

A

So this goes straight to a selection. It's not data driven at all that it selects something that expects to be there already and it just moves it. So I could do that.

A

Then I could call this function many times right, that's something we could do.

A

If I wanted to do that, then this wouldn't be add value marker. It would be like set value marker. So, let's see, let's see, let's see what it would take to do. This I won't be a pending this time. I will just be.

A

This means we're going to need to add it here.

A

We're gonna have to add it to its markup right, because we're going to expect this marker to exist already, because there's only one of them, so it makes sense, instead of tying it to a data element with just like one piece of data in it.

A

Usually you do that when you've got a whole bunch of elements that you want to plot or graph, and then you can, you can programmatically plot them across a space, but for just one thing, I think it's I think we can just add the marker. So.

B

A

Is the encoding, so we could add the marker right here. Let's.

B

A

What we did in the other one it was here: it is G, class value text and rect. That was it. That's the value marker I'm, trying to be a little more specific than that.

A

So let's say value marker number marker, another value marker or was it mark? What did I call it value marker, okay, value marker and it's got a text in erect and that's they're there they're just always there, and so now we need to change this new way. So, instead of add value marker, it's at F to rename.

B

A

Set value marker and we're not going to be getting a a group and let's, let's be explicit about this and we'll take the value as a grand, so here set value marker, we're not going to give it a group, because it's already there and we're gonna, give it thee this stuff. How are you e.

B

A

Okay, so oh, we do want to give it a parent, though.

A

So, let's, oh, we have this dot parent I! Guess that's what we'll sign that, while we're being explicit, let's and the parent is the SVG I think we set that out and yeah component did now.

A

B

A

Behind whoops, so I keep trying to use idea. Shortcuts I wanted to move this down one. So now, we've got the number line in the output cells. These are.

A

Created once here.

A

Already in markup, updated.

A

Update something like that: let's move the line, use alt, + era, piece, perfect, I. Think I was that's great.

D

Because I use it a lot actually thank.

A

You well hey, I thought you're, taking off okay, so set value. Marker now is still wrong because it's appending to this. Well, it's not anything right now, but we need to get the text.

A

We are going to simply select.

B

A

Is it find iris through the Sun not sight.

A

Select just text right, I should use quotes plus.

B

A

In the wrong time zone, that's funny, so we want the text and we want the mark.

A

Rect, so it's just a it's just a rect and that and then you don't need this, you don't need this. All we need is X dot text.

A

And house and device all that the tab is just a workout I think this might work. I think this might work, let's see, okay, so on the mark, it's a little off the mark.

A

haha Oh, we do have a problem here: class yeah.

A

This is a thing with react: class name.

A

Okay, so the markers still sort of off- that's weird, that we need to do that. Let's go find it Oh, because the value marker I probably have CSS somewhere.

A

X&Amp;Y font, size, class' do I, have any mark or css. So one thing I do not like about react, is having all the CSS and the the style and the logic and the markup all in the same place. It's us doesn't feels weird to me real weird.

A

So am I ever actually getting the Gino's. That's the problem, that's what my brother's I need to select the group by name when I do this and it's not parent. Its parent select value marker right. Okay- and this can be- it can be a negative G as it is.

A

So how did it fit float it up and I'm, not sure why cuz the whole value marker has floated up. Excuse me, oh so, I think it's just it didn't perform this translation on it. I need to translate it.

A

Yeah I just have to have this translation. Oh here's, another code smell there's only one translation.

A

Okay, because it's just for the number line, what about this outfit cells I, must have translated it to I, did not I used top margin instead, okay, so okay, another fix me use root, translation or margins, not both okay and I'm. Gonna put this right here and I'm also going to do.

B

A

I'm also going to transform so I had this number line and then I translate it down and then, when I do the value marker I could translate it down. That's probably what I want to do. I, probably I, think the translation is cleaner unless yeah yeah yeah yeah I'm going to do this.

A

And I can I can add this to the function here because it can be called many times because we're just setting it yeah, it's not efficient, but it's not a fish if it'll work right so I'm going again, I'm gonna put a fix me here.

A

This should work yeah that worked okay.

A

All right so now I've sort of cleaned up this and now I should be able to set value marker.

A

Now, let's offload, let's make these functions know about their parents. Not this component did mount function, especially for value marker. It doesn't feel like this. This should be something it knows about so.

C

A

Just let's just take this out for now, so we can call set value marker from anywhere and do that.

A

So now I should be able to call set value. Marker.

A

A

This handle number line hover as long as this is what I think it is and I'm not sure about that.

B

We'll find out.

A

Of course I can't tell oh, it didn't fit an air out, so oh it and actually it's deep under stocked. This is this, so it's set value marker with 27.5 right, because that's the value, of course, so I'm going to set it with line X and we'll just I just because I want.

D

To see what happens, I just want to see it move.

A

Its I just want to see something happen and it's like off the charts immediately so because it's plotting the values that are way way off to the even here so page X, certainly isn't the right.

A

The right X to get what I want is.

A

I want to get the pixel value, basically, the reverse: mapping from bits to output display I want the reverse of that, but not in where it not an outfit cells. This is in number line, but we made the scales here so value to screen, so I need to use screen to value and that will that will get me and I send in the X there, and that should give me the rage. Let's try that so.

A

Knowing that this is not the right line, X I know that okay, I'm going to say.

A

Value equals this dot.

A

It's to output, display I forgot what it was already screen to value.

A

Screen to value- oh, my gosh rhinock, so we're taking the value of the mouse and the pixel in the screen in pixels, and we should get back a value within the value range should we specified and that's what I want to say as the marker, knowing that this is what this isn't gonna work, because line X is wrong, but at least want to see movement. Okay, so now at least I can see movement and it's a linear movement. It's not like an exponential jump. Okay, so that's good! So it means that our range is working.

A

We just have to get the proper x-value and.

C

A

Is really jumpy, as you can see, it should be a lot smoother than this. So, like the events that we're getting the hover events were getting from reactors are, are coming really slowly and I. Don't know why so there's two problems so far. I wonder if I even need to do this stuff, nice code I'll never seen that I've always shift delete control, V nice code, all I'm, sorry, I, don't know what you mean by code. All shift shift delete, control, V I'm on a Mac I, don't know if that makes a difference.

A

Anyway, so here's a question: first of all, this function is not getting called, maybe maybe we'll if you're still listening. Can you tell me if I'm doing this wrong so essentially I want to on hover over the number line, which is what I've.

B

Got highlighted.

A

A

Okay, that's got it. I want this function to be called, but it's not getting called enough like there's, obviously a delay as I'm moving I'm up I'm moving, and it's really it's only happening occasionally and I'm, not sure exactly why it happens. When I move up and down like this, so perhaps it's it has to be directly over. Oh, it has to be directly over one of these elements.

A

Okay, so that's a clue if I put it immediately over the line it slides smoothly. So what exactly so it's this path if I keep it on the path.

A

I'm, adding the it's okay, it's probably because I'm adding it to the number line. Perhaps they should add the hover to the whole SVG element and decide what to do with it in that fashion, because here I'm, just adding it to the number line and the number to light out. The number line elements are so small, so I figured it out. Well, it says the number line elements it's an SVG, so they're, so small.

A

What I probably need to do is change this, so it's not on the number line and just have a complete like SVG Mouse hover, and so this would be handle SVG mouse over mouse mouse. Hover, I'm gonna call it over mouse over right.

A

So, in this case, our our event page might be in a better place. So, let's, let's see what happens when I do this? Let's see if it even works, can't a free property bind of undefined. Oh yeah.

B

A

Changed the that's: how I got this to work? I forgot I! Did that right here? That's why this when I said? Oh, this is really what I expected. It's only because I use this binding, it's a JavaScript thing: sweet, okay, so I've got I've, got the mouse over interaction. That I want I mean it's! It's not perfect, but so now that I've, let's see what we have in this in this element here.

A

So bubbles buttons cancelable e-excuse me movement, X, movement, Y, page X, page y screen, X screen why?

A

What I really want to get right here is exactly the position of the mouse right now. That's because that's where I want the marker to be right over the mouse, you want the cat, it's not loud enough. Is it hold on I? Think I can fix it. Oh, the volume is like full blast.

B

A

Thanks for reminding me of the cow sound.

A

A

Well, let's say: let's ask Google react.js get Mouse position.

A

Digging mouse coordinates and react.

A

I could just yeah I could just do a subtraction, but I'd rather see if there's a way I can do it without doing any math, because when you start doing these little bitty.

A

Modifications to things in one place and you end up doing another one in another place and another one in another place. Then you get some really strange interactions and it's hard to debug. So if I can get, if I could get go somewhere to an API and get the exact value that I want I, don't have to worry about that.

A

So there's screen X and screen Y react events, so this is basically yeah on mousemove bind. Oh they did. They did the bind right here. Oh I'm gonna. Do that? That's better all right! That makes sense. Yeah, UI, stuff, totally gets hacky, I'm gonna, try and keep it unhappy, and one of the ways I can do. That is by doing this. So so I can do this bind trick right here. So I can say this on Mouse. With this this yeah yeah, that's great, so I don't need this right.

A

I can do this all at the same time when I register the event here, all right that should work. My this should still be my this all right. It still works cuz. Otherwise it would've broken. Okay, cool! So hey we just cleaned something up.

B

Okay and let's BG.

A

So, okay, so let's look in here at screen, expose screen X.

A

Screen X is negative, 16.

A

So on the page, I could probably figure it. Maybe you're right, maybe there's a maybe the best way to do this is this is probably just has to do with a margin that I'm already setting up right. So here it is, it stops as soon as I get well. That's because my mouse listener stops there, but it's basically oh.

A

The values not getting updated either.

A

Value one: let's change, though, while we're while we're here. Oh that's, all right set value marker value. What we're not doing is we also need to in the text? Oh, it's should be doing this.

A

Value right there, yeah and, of course I'm gonna have to round that.

A

A

D

What here's, what I was.

B

A

Mouse is less than 80 returned so, but I was I was uh finding on the run on the wrong element and I was actually say: I was using d3 and then taking away some of the margins, so maybe that is what I should be doing and then getting the min value and then making sure that it's precision rounded x2 value. This was my old code, so I can't I, don't really trust it see I'm doing the screen.

A

Devalue is essentially the same as extra value, so I'm doing all these translations before even sending it in so page X, and let me look into the marker. It's it's. Probably this visit this magic 40, let's see if it's this magic 40.

A

Almost it's the 40 plus this little buffer. Isn't it whatever buffer? That is, it's 40, plus the 10 that I used right or was it I Saira member using a 10 there? It is gutter.

A

Got her- and this should be that's okay, so it's this gutter plus the 40 and the 40 I should call it.

A

They translate the whole thing over. What, if I don't translate this? What happens? I'm gonna I'm gonna? Not do this translation? Oh that's just down! Okay, okay! So that's the 40 down.

A

So that forty should be.

A

Top gutter and we'll make this.

A

A

A

A

Just getting rid of some of these magic numbers here.

A

I'm gonna go with translations using gutter margins.

A

Is their variable, the offset of the react element now I'm doing all the offsets myself.

A

Thank the is there a left, I think I just made side.

A

You could just have top inside top inside yeah.

A

Sometimes they call it offset.

A

Okay, I think I'm. Okay, with that, so I've just got scythe cutter top cutter.

A

Marker height, it's separate, it was a little too big. I'm gonna make it theory. Let's make it 20.

A

Speaker, 21 I, don't know what I'm doing we're just messing around okay, okay, so we're getting close now. I definitely do once we have to make that one adjustment- oh this is going to be not.

A

This is not what I thought it was so that 40.

A

So there's the page X's is 40 pixels off for some reason. First, we want to take out the side gutter.

A

I'm not even looking at my.

A

Stream health that comes and goes Tess. It's excellent right now.

A

Stable all right.

A

So I need to figure out. I could certainly use page X here.

A

There's two things that I want to do on this mouse-over, because I could be hovering down here or I could be hovering up here. So I'm gonna deal with the top case first, and it doesn't matter whether I'm. The only thing that matters is down here down here is which which update, which display update, am I going to do, and I'm only up stating the value marker right now.

A

D

A

40 I mean I assumed this should work, it's perfect right, but so, where else is that 40 coming from top gutter, this top gutter being used somewhere? That's not top it's not so! There's another 24 marker height, oh.

A

Here's a top margin. This is for the output cells, though.

A

23 second delay: I, don't know what to tell you guys, I'm sorry about that. I am.

A

Like this was today, and it says, I had like four unstable periods, 15 seconds of instability, 20 seconds of instability.

A

But how do I know I can select an issue just be experiencing some networking and encoding issues, so I'm rod cast drops frames, broadcaster, software systems, okay, very large, delay, I'll. Put that very large delay. Let's say that there's no way to just get the origin of the slider line itself as an object, yeah.

A

I mean the number line it's here. It's right here number line and.

B

A

So why does the number line start I've translated it 40 down, but I've translated it 0, x and y, so I'm wondering why is it oh I think it adds itself? Oh.

A

There's a translation, that's it moves them, but so it pads itself.

A

I know why I know why I remember doing this. Now: it's in the scale side, gutter, yeah, so I, added side, cutter, I, don't need to put zero here so.

A

These already take into account the side gutter. So when I get the value marker I want to translate it.

A

It's like that are in top gutter. I. Think.

A

Is that right? No, that's not right! That's not right! That's not! That's! Not what I want to when I update the value I'm trying to translate the mouse, the page X to the value. Oh I'm, already pulling out the side there. It's this minus 40! That's tripping me up what where's that 40 coming from I mean I, understand it works, but I just don't understand why it works.

A

B

I'll do so.

A

Let's just add fix me: where the does this 40 come from.

A

We still should do this.

A

This precision round thing.

A

We're going to just route it to one that way it will show up as a oh I. Don't have that utility.

A

This was in we'll live util, so I had a utility library, apparently precision round I'm gonna come back to this and pull it later, yeah that was 42. It would be easy to explain it somehow. All right I'm just add this to it as a function up here. This that make ideas gone and.

A

Another fix me and it kills.

A

Okay, precision around.

A

Working out beautiful, all right, Bobo all right. So if we go below the balance we don't want to, we don't want to do it.

A

So if the value, if value is greater than this dot max or value, is less, let's do less tempers if it's less than less than this dot min or value is greater.

A

A

Some people won't like that, so I'll fix it sweets.

A

And else why not, otherwise we set the value marker.

A

Great, oh, that's it! Okay! That works, hooray, I,.

A

Want to go fastened and those guys, that's working, okay, so a couple things: let's make some little little things hey.

B

You guys are at Addyson.

A

Things, thank you so I'm gonna add a.

A

Center value marker and simple scalar and coder around.

A

That's just gonna be a UI thing. I.

A

Don't have a label for you by UI.

A

Made this one blue: they can.

B

A

Oh this is this is all so now I'll just make it a you, I think, okay, um so that could be something somebody else does if you want to it's just a simple like that marker sort of starts right at the X of the mark, but it should sort of depend on how wide the text is and center somewhere nicely all right. So we got one interaction working. So, let's, let's go: let's yeah I'm. Definitely gonna use the Y value to split.

A

A

Yeah getting hosted thanks net pixel appreciate it. Hello, viewers from net pixel I am making some visual components that are that are going to explain concepts of hierarchical to coral memory, which is an artificial intelligence technology based upon how intelligence works in the neocortical common loop in the brain, and no that's not all just BS like this really we're doing it.

A

I work for a company that investigates general intelligence, algorithms in the brain and we've come up with a bunch of different algorithms that we think are happening in your neocortex, and this is going to be a visualization.

E

Of those things so.

A

For for details for details.

A

Let me send you to the the read me: this is the place to check it out.

A

You are doing that and I just spent 30 minutes to set an interval and react yeah the on new to react. So I am really fumbling through this right now, I've gotten a lot of help from people which is nice, so each one of these is a page and I'm trying to create these diagram react components that are using d3.js for it, but I'm using like react for Mouse interactions, and so then I got a call into d3.

A

But what it's eventually going to look like- is this page here so I'm sort of translating all of this prose with the code examples, and then these diagrams into react, because these are not react, components right.

A

So all of these code, examples and d3.js widgets I'm, translating into react components, there's a several of them and there's they're, all very dynamic and interactive, and so all of these are going to get translated and we're going to create this elaborate documentation around HTM systems and explaining how they work, how to encode data for them, and all of this stuff will be translated into reactor components. And some of these are not even finished now.

A

I'm trying to get real visual with stuff and explain how coatings work to be input into brain, like systems I even have some more depth, visualizations for spatial, pooling for initial connections for spatial pooler's or talks about receptive fields, potential pools.

A

So this stuff is all working. It's just I haven't gotten to moving this yet so I will eventually get to these. Translating these all into react components as well, so I thank you for the follow and that pixel I appreciate it. So a lot of visual stuff is going to be happening on this stream over the next month or so I'll be working on this, every Thursday for sure for several hours, every Thursday, 9:00 a.m. Pacific.

A

So right now we're not very far along. We were here, and so we've got a lot of work to do and I'm still working on sort of just the basics of translating these react components into well. Translating these d3 widgets into react and I'm going to be using Redux for the data at some point soon. As soon as we need to that's the idea anyway, so did I commit I can't remember. I was about to okay. First of all, what did I do.

A

Thank you for the follow-up hood Zach.

A

Yeah, let's come in and what I did was I. Oh I, fixed mouse interaction with number line.

A

Do another push I'm just pushing straight upstream. All of these are getting deployed in real time. Building HTM systems Heroku here.

D

Which is another did.

B

A

That to the readme I think I think I did I. Think I did.

C

A

So you can click here and get to this too. So so in real time is every time I push I come in we'll get an update here. It hasn't quite updated yet, but it will in a few moments, we'll get to see that, but having a few quick stream problems so I had that. Okay, okay, so this is this is all good. Now we want to enable the other mouse over interaction, so we've so we've got one here.

A

We're gonna have one interaction for the number line, which is essentially going to change the value, but you notice that the encoding is not updating. So we need to update the encoding when we update the value, so we are going to do that and that will look better that'll look cool so in the handle script. We're just setting set value marker.

A

What we should probably have as a function called set value on on this object that will set the value marker and also set a new encoding or I could just say this dot encoder got encode value. I could do this right right here, say coding equals.

A

But I'm not sure that that's gonna repaint anything yeah I, don't think that's gonna repaint anything. So so what needs to happen is we need to call ad outfit cells or that this essentially needs to be calling.

A

And again, I got halfway through this and I stopped. What I wanted to do was offload this piece of information out of this ad number line here, for example, so we're not sending it it's group we're going to have it understand what how to get to its group at least then we're keeping the number line coupling with the Dom in the same place. So I'm going to do the same thing here and that'll. Allow us to call these functions without knowing anything about the Dom.

A

Okay, so now I can call ad outfit cells from here I think once I've set the encoding, this ad outfit cells.

A

There we go that's what I wanted to see awesome.

B

A

Awesome, so that's that's d3, so we've got an interactive, so so this is. This was part of the big challenge. Here was getting a component and react that encapsulate d3, so the d3 initializes itself after the react component is available, which is this function here.

A

Component did mount so that's when we go in and we hook up the s, the d3 magic and then we can call add output cells over and over to render the app and- and it's add- but let's I mean it might be a good second idea to say, render outfit cells because it could also do the same thing cuz we could call add number line over and over so let's just say, render number line just for consistency and set value marker and again, let's just render value marker and yeah.

A

Let's just keep that out so so we can't call these as many times as we want. Although this will just whoops.

A

Yeah because we already have them in the Dom, so all this stuff should still work, yeah, refresh the works and we're actually using the encoder from simple HTM, which is great now I want to commit again because I finally got work.

A

Auto encoding on us hover value change.

A

Now this should have part of this already done.

A

Well, maybe it's not the point.

A

No I'll deal with that later. That's not Rico!

A

Okay, this so now that other piece is to render these Bezier curves right and if you look at the demo, not the demo, but the original number encoder and you hover over here.

C

A

Get these nice Bezier curves that pop up and they're like frame it like this, is this bucket can represent any value from you know, 30s whatever to 46 like that's the you see how it see down here, so that should perfectly overlap just like that. So that's what we want to do next and that's just going to be another Mouse interaction.

A

Well, the same the same event handler and we're just gonna we're going to separate on at why, at a certain point, whether we're going to interact with the top bar or the this thing, so we'll probably separate it based on what we could do it just to see the element source. If it's this thing, let's do that and.

B

A

To rely on Y, so if.

D

A

Anywhere over here anywhere, we'll have that one. But if it's over this this box right, if it's over this box, the mouse we want to do something different.

A

So here's our handle SVG mouse over.

A

Getting our line-x all we care about is X and the value that's fine, and then, if it's outside of the range. So if it's down here it won't be a value. So we don't we're only gonna care about the value.

A

I'm just wondering how, let's, let's let's do this- let's split this I'm gonna split this and call this handle number line. Hover and I'll just send the e here and then we'll create one called handle.

A

Output cell cover and then we'll put all this here and it'll just say, handle number line, hover e.

A

Okay, so we've got this nicely segregated. Does this work I tried to do like an option move function in IntelliJ, you can move an entire function as if people are aligned, which is nice, okay,.

A

So now we have to decide which one we want to do so I don't know. What's this is synthetic event is, but I would expect a real event to have a target. So let's see what target what the differences is are in the target here. Oh oh I didn't use this.

B

B

A

Where's the console alright, so here the target is Rex SVG's, also it sorts of stuff down. Here, it's rectangle, it's always rectangle, but this it could be a marker rectangle. So this is tricky because it it's sort of tripping itself up.

A

I see something here: is this yeah? It actually is tripping on the marker. So it's it's moving the mouse and then it's updating the marker and then the next mouse hover is again like the marker. So we don't want marker hovers. We only want.

D

A

It's a rect class bit right so.

D

A

Just say that so, if if the target has class I know this might not work.

B

A

This dot handle outfit saw her the else.

A

And a line number line hover.

A

Yeah, so there's no so I didn't make that a jQuery thing, so I could just wrap it in jQuery.

A

I could just do this. Somebody might hate me for that. Does everybody hate me for that.

A

This is still at work.

A

Oh I, don't even have jQuery on there on here. So.

A

What should I do hello, Alexander, big Aleph? What's up um I'm trying to I'm inside a react component right now and I am I want to I, have a reference to a Dom element. I just want to see if it has a certain class and I don't want to pull in jQuery if I don't want to and I know, there's an easy way to do this and I've completely forgotten how to do it.

A

Let's go back to the there we go target. He I think he can I say just attribute dot class or something like that.

A

A

That's msg attributes wait a minute. I know what to do. The target powder, no good attribute right.

A

Now get class I like as a for a former front-end engineer. This is sort of stupid right.

A

You're learning react and English. That's good, learn both.

A

I had it was quite a few Russians on HTM forum on our forum, which you can can see here and just annoy last stream. Someone with a Russian sounding name I think he was from Poland Vladislav. Helped me with several react things so I'm happy to have the help.

D

A

I'm gonna I'm, just gonna, ask Google for the react way. React je je s, get element class, find elements now just get the react. Components element it's not an it. It's not it's just a Dom element interacting with the Dom assessing Donna limits and react, get elements by class name.

A

Javascript get on the class class name property. Gentlemen spike last name: I just saved our class name right doc, while you're in Prague; okay. Let's, let's just do that, then.

B

A

Let's see if that works.

A

Okay, sometime een, it works, so it didn't break anyway. Handle hover.

A

So but it's still so this is actually I, don't think ever happening.

A

Sbg, animated string: oh it's the SVG, it's the SVG! Well, what about what about the current target.

A

Is it always the SPG, so there's this time it's direct once arrived target class name.

A

And in value base value, I didn't expect class name to be SVG animated string. So.

A

So I can't just do an equate.

A

Oh Rada Slavs from Prague from Prague, okay, yeah yeah check, Czech Republic.

A

What is an SVG animated string and made it.

A

Interface represents string attributes which can be animated from each SVD declaration, so the class names can be animated, I didn't think they could. You need to create SVG attribute before do anything Alice atom, Animas read only if the govern attribute properties being animated. It contains the current.

E

A

Value, it doesn't matter which one apparently so, okay, I'm just gonna, use it I'm, gonna, say class name, dot and him what was it an inviolable? This seems kind of weird to do this. This seems like a little bit too much information, but.

C

B

Okay, so that's what I wanted.

A

I, when it hovers over this, it shouldn't do anything because I haven't programmed it to but hovers anywhere else. It changes the value okay. So it did what I wanted, but I don't I'm, really not sure if this will always work, because this an invaluable.

A

Okay, so what do we want it to do so when we're hovering over the cell and II.

A

Then we want to do something different. So let's look back at the old code.

A

And let's see what it does when it hovers.

A

Update output bits that maybe it update out the bits?

A

Okay. So no! No, that's not it! It's the bet. It's the Bezier curve. This is the line.

A

Humper range there, so this is my line. Data for the curves. This is sky. Cupcake is the getting these lines right was. This was a little bit tricky so so I draw you know: I have to get the points where they're supposed to be and then draw a nice curve between them. So we're gonna have to figure that out hover range, so select it out a bit.

A

Excuse me so I have to get this, but let's, let's steal this whole hover range function.

A

Because it is something that I can call and just send it, the selected bit in the output in the encoding bazi a thank you Bazzi, a I, always say it wrong. Baazi a curve is that right, Daisy yeah.

B

They see up first, you set bossy a is it aa or.

A

A I should just look it up right this year, Oscar.

A

B

D

E

And play busy acres busy.

B

A

E

B

Busy 8dayz a Bayesian Bezier. Thank you.

A

Okay, ignore the jst s crap, but this hover range I'm, hoping it looks like it's a function. I could just pull out, which is great, so I'm just going to try and pull this out. I know a second work. I know: there's gonna be some values that it will not have access to. But it's a start. Oh and I.

A

Probably can just take this whole, so this expects to get a selected bit actually look at this in this case, I'm passing it a selected bit, but it never actually gets it. It gets it selected bit from this date it from somewhere else jst us, which I'm not going to talk too much about we're. Removing that.

A

Okay, so here's this is gonna break everything, so what I'm gonna do is sort of just just unselect it. We certainly need to get the selected output bit so somehow, based upon this hover based upon this hover, I need to identify which bit I am in so I should be able to do that using the reverse scale that I created that I used to create this.

A

So if we go back to the output cells function, here's the scale that I used bits to output this way, I'm gonna, have to create a reverse scale. For this and I don't mind doing this right here honestly. So this is essentially going to be this reversed. So I'm just going to say from the UI range to the bits, and that should give me back an index between zero and the number of bits.

A

So this not good Sabbath display its display two bit different.

A

So so now I should be able to get like same thing. That I did here this line. X thing and again: where does the 40 come from I? Don't I don't know, but I'm gonna leave it in for now. So I've got my range, so this should be my line. X and I should be able to say fit index equals display.

A

Two-Bit range max.

A

And so big integer index, let's see what that does.

A

It breaks so it does. D3 is not defined.

A

Did I pass it in or something probably do.

B

That doesn't make sense a.

A

Width is not defined. Oh.

A

These three is to fight with the side, so I don't have a width here. It's this hour with, and this dumb.

A

The console says.

A

Zero one two, three, four, five, six, seven, eight! Yes, yes, yes, so all we have to do is ceiling it.

A

So the bit index is going to be a half dot ceiling.

A

B

E

Then where's this other.

B

A

Blog I don't want this, stop doing check it out. That's it all the way to 50 25 cetera works, that's what one right! Okay, so I know the outfit cell that I want. Let's call that selected outlet bit instead of big index selected, help a bit and now.

A

Hover group, okay, so I'm, probably gonna, have to go, look and see. If there's any other Dom elements, is there a hover right, so I think I added all this? No, no, no I think this. Is it I think it's this range? Yes, this is it so this is this little Damas is the.

A

D

Ii, a bit Bezier.

A

Curve, there's a path left, a path race of those are the two based Bezier curves, and the circle is going to be a dot that selects this like right in the middle of the rectangle. So we want this and we'll put it at that after the encoding.

A

Down in our markup out and after the output cells.

A

Okay class range visibility:hidden, okay, so this is gonna operate on that so here it is here's the hover group. So if we have the bit oh so this is actually just called index. So let's just call index.

B

A

Let's just undo this and see what happens, see what breaks I mean everything's, gonna, break I'm sure, starting with this paddock, because I don't because that's gonna be C X. So that's gonna, be side. Gutter x, bits bits to output, display that was defined of here.

A

Okay, I'm gonna I might try and I'm not sure this is exactly what I wanted to do, but I want to make sure it works first. Similarly, just a fix. We don't define these on every hover call: okay mm-hmm!

A

So you see I'm, saying I'm, just I'm creating the snails here, but I'm doing it every time somebody hovers. So it's not efficient, but I just want to make sure that these scales are the right ones that I'm gonna be using, because I should be able to call this to get I.

A

Don't even have a cell with do I yeah I do see, but it's out an outfit cells so divided by bits. So that's something again that I'm gonna have to either calculate on the fly or stash somewhere.

A

And this is like this: you know this is not ticking of a deal. The calculator the sliders stop bits, so so, with line-x. Already today, e.

A

Cx is the gutter plus that plus the cell, with divided by 2.

B

A

Is not a top margin? This is gutter top gutter plus 30 I. Don't know why? Yet so, let's just deal with the circle first, because that's the easy part. So, let's see if this works, of course, I didn't I, always I'm going to do this for a long time. It's like it used to react last name last name process.

A

Okay, so bits is not define. That's easy! That's just this top bits side gutter. They start with side good.

A

Get range from bit index is not defined, get range from bit index is displayed to barrage. No, no, no! It's bits too.

A

By using this I'm, not even using this yet so it's not I just.

B

Want to see that.

A

Circle work hover group is not defined hover group, so I must have done that somewhere. This other one.

A

There is have a group, this select sheet at range, so I think I can easily do that right here.

A

And this is not SVG its parent.

A

A

Okay, please work okay, so stop working.

A

A

And the up that sucker.

A

Other group it's there, but.

A

Trying to select a circle that maybe does exist. Thank you and your doctor I think I'm trying to did I put a circle. So it thinks that there's a circle here- and there is this- is the circle class range? Maybe it's the visibility I didn't change here. It is hover group attribute visibility.

A

So actually, I'll just turn it on. Maybe that works yeah see that's what I wanted I want. This die okay, so that shows us that our hover is working. We just have to put it in the right spot so to see why it's gonna be top gutter plus I, don't really know! This is again one of the one of the magic numbers it's going to work better, probably like 80 yeah.

A

What does this one do? This was like right at the tippy top right, so it's actually using the same way as the rectangles in there. So, however, it's calculating should work that number line hover.

A

Help it sells so hover, whatever it uses, 4y top margin, which is 120 okay, so.

A

Still trying to figure out the best way.

A

D

C

Up these margins.

A

A

Yeah, it's supposed to stay in that horizontal line I'm just putting it right, I'm just trying to put it in the right place. It definitely follows the mouse. It follows the mouse like this, so that little dot is right here. It only follows the mouse. While it's over the rectangles once it's over here, the value should be moving.

A

So I'm going to say top.

B

A

A

A

Something I don't know, but it's 120 I know that so whatever I put here 120.

A

Top margin, wherever I put top margin, six places all six six places.

A

Oh, those are back to places not that one. This one place a sealing place all right. I've just turned it's trying to standardize a little bit top margin.

B

A

B

Should I ignore the.

A

Top gunner or should I put, let's just try this up. It's all stop mark I'm, not sure if I, if that should include the gutter or not.

A

That's not what I wanted.

A

It's not for the top yeah, that's what I want. You got some PO, but now it's off its off a little bit. I thought it was right in the right spot, since it's hot, we don't want for the side cutter.

A

The selected index is suddenly off. No, it's not it's the birthday.

A

Just want to make sure that the index is a right is one yeah.

D

So the index is right.

A

But it's putting the the circle in the wrong place. It's just one off is just it off by one this year. Right, cuz, this index is one, but it's really 1-1 or I could just floor. It is so sealing it right.

A

That make sense.

A

B

D

Really is zero. It.

A

Should be zero, everything else is working.

A

Okay, this is good. This is good progress all right, so the the bays see a curves, let's see if we can hook them up real, quick, let's see how hard this is going to be all right. Let's just let's do one.

A

So there's an encoder min and Max here, I haven't actually pulled the encoder out, but I think I'd have to say this dot. Actually, let's just say: let's coder equal, this dot and coder and the value range. That is right. That's this. That was something that did not work, get ranged from bit index. Okay, we need to look back and find that.

A

Drop cards get range from bit index. Oh.

A

Yeah, so this is something I had to just use the line function, so these are a couple things that I'm gonna have to pull out up here as well. No I now starting to remember this.

A

We can put it in the function, but it's not gonna be the best place of the function. So there's a line function here that we need to get, and this get range from bit index for now, I'm going to put them in side. This handle output cell hover function. However, it's not really where I want them to be, because this function gets called all the time.

B

A

And it's not necessarily the greatest thing to be creating these things that don't need to be created right now, so this is a d3 thing, so.

C

E

Is good like for.

D

This, for example, this would be created way off somewhere.

A

Else but I'll fix that in a minute, yeah.

B

We'll get to it as soon as.

A

It as soon as it works I will add a fixed me get range from bit, so this now should work. So we should get a value range here.

A

What is this value scale mark side margin, so that's another thing that I don't have value scale side margins.

A

Value scale, top margin, value, scale, side margin, so I'm not I.

A

Think I think I can use the gutter for this I think this is side gutter.

A

Okay, let's see what breaks what's broken anything broken value to X is not defined value to X. That is in.

A

Let's see value to X that is defined in.

A

Set up value axis: oh, this is in the value axis, so that's in the number line yeah so here it here, it is I. Think yeah.

B

This is the axis.

A

That I need to call.

A

Wow I just went off into the ether. What happened.

A

I like this song, because it reminds me of that: well, it is it's just like sampling, so that classical piano tune. I forget what it's called it's in another language.

A

I really drug out this cherry coke, it's I still got like a third of it left. It's almost lunchtime, so I will take a break for lunch, but I probably will come back after.

D

A

That's it I, don't know how to say it though yeah. That's it Eric, that's a tea. It's a tie, great stuff.

A

All right anyway,.

D

A

A

Let me try and figure out what I what it is trying to do. First,.

A

And its value to X, so I am getting the so for each one of these lines or for each for this range, I essentially have a Center, which is where the the circle is and then I have a left value, bound or right value round.

A

And so this is just supposed to calculate near X of far X. So if I I calculate my own left value bound and it should give me a pixel value for where that should be. So that's a that's another range.

A

Which is this scale, linear, min and Max, and width so I mean I. Think I could just create this again. These this is stuff that I'm going to need to clean up.

A

I could put this down here with these other things that don't need to be created here.

A

Ajax and then this is going to be this Stockman stop max.

A

A

All right value top, are you scale top margin.

B

A

Is going to be top gutter?

A

I, don't really know this I, don't really know if these numbers are good or not value, scale, top margin, I'm, not sure this is the right values, but we'll we'll make adjustments all right. So it's not drawing a line, probably because there's something down here like this.

A

Well, I think I gotta continue, I'm commenting things for it to work, left line, data, push value, scale top margin again, which is going to be.

A

Okay, let's see what happens, look at that it worked, it worked. It worked perfectly. It worked great okay,.

B

Awesome, oh that's not.

A

Right see that that works good, you know the curves a little bit iffy. If you get too far off of that of the right side needs to stop right. There cow sound.

A

Lots of cows I need, like a whole herd of cows.

A

Okay, so we guess we still have this little bug here, but I'm gonna leave it no I'm, not gonna, leave it the right, so we just have to bound to the right range at the max value right. So I think that would happen already. I mean I just copied this code, it does it see it does it. Why does it? Why does this do it and the other code doesn't so there must be something that I so we're talking about the right line and it's gonna be the right lines, second value.

A

So this is the origin right line data push whoops. This is the sense. This is a circle. Cx CY! It's this piece of data right line data push the far X is the far X.

A

This is higher than the max. It seems.

A

It's got to be so, let's put it, let's put a I.

A

Just think for a moment here.

A

Far X is 510 see, that's the problem should never be more than 490. So oh I know what it is.

A

Maybe maybe so when we made the value 2x here, I I, just I didn't add the gutters, so I think I just need to add the gutters tier to this range.

A

Because when I did it for excuse me.

A

Or I should just be using this value to screen not not value to X, because it's min and Max yeah I should be using this value to screen not by X. So I created this value to X I, don't need it I, but I think this guy.

A

So instead of value to X, we'll call value to spring see if that works.

A

Well, sort of almost almost but I still I'm off a little bit so probably because I don't need to add those buffers that I think I added here like this. Oh no, these are the intermediate a curving points, so the new. So it's the side, gutter I, don't need to add because that's taken counted, that's accounted for in the value to screen.

A

That's what I want that's perfect! So now the guttering is is totally accounted for in the scale function, and this is perfect, almost perfect good enough for now, yeah yeah see it's a little off. There see how that's off so I could I'll worry about that later.

A

I'm gonna take screenshot of that oops, the third one yeah. This is I'm gonna I'm gonna file that as a bug.

A

Okay, just sick, no I want to create a new card. Just a great team, but I want it to pop up right away. Okay fix value rate range.

A

Your curve display bugger.

A

Bug UI diagram.

A

Simple scalar coder react component.

A

Quite overlap, the don't.

B

Quite sink with the.

A

The actual value range for selected bit- some hoping I, can just take this.

A

B

A

Just market out it was.

A

I'm talking about right here.

A

I, don't know if that helps or not, but there so can I and you just like drag this over that'd- be cool drop files, cool, sweet, hey, so I got a little picture here and there we go. I got a bug. Anyone wants to work on a bug. I'm gonna commit and I'm gonna go grab something to eat and come back and and I'm gonna start probably putting in some sub content. I might as well try and put in some content around this page and then make some space holders.

A

I got a lot of fixed meats in there. I know I've better put those fix keys back in four.

A

Maybe I should just clean this out like this line function here, honestly, I could put this line function up here. I could put it right here.

A

Because it just defines the curves that should still work.

A

Yeah that stores the other thing in there not render happen selves, be so I. Think I did this I cleaned up the translations.

A

This get range from from bit index could be moved.

A

But I'm not sure these things, this bits too.

A

This is actually done when the number line is first rendered.

A

So I could get rid of this.

A

And I would put it so it happens right here in render number line. I know it doesn't I thought it was a value marker, River value to screen.

A

Seraph useful, like so.

B

A

A

What's the difference here, zero two bits: yeah.

B

E

Are bits all right? This.

A

Is not, this is for the output bits, not the what I was thinking. This is an output bits, not the market. Here's where it is bits to output display, okay, so this this so I could remove this here. I could actually create this when the component is mounted and just say this dot and keep all my scales that I'm using sort of throughout because it's this is the same thing I'm doing up here and creating these scales. These scales are happening.

A

I could do this in the same place, then I would at least keep this keep all my scales in the same spot.

A

So then I'll have all my scales and.

A

Down here, I will have to fix.

A

B

A

Say this dot and this dot.

B

A

Know see what happened here failed to fetch.

A

A

Bill to fetch just failed to fetch.

A

Just to make sure that there's you're going on here, I'm still getting the same problem. What did I mess up? I messed up, something.

A

I changed too much, certainly change too much.

B

A

Most likely this is.

A

What did I just do.

A

Wait to get range bits to output, display, ha there's one bits to output display. So that's that's, certainly a problem, but that's two outlets. Wait. Is this done bits to output, display there's another one? This should be this dot.

A

B

B

A

Okay, so that's just a little cleanup, so we got some of those functions out be we still have this function but I'm just going to leave it here. The.

A

Excuse me, I could move this pretty easily I could make it just.

A

Class function, I think.

A

B

A

Inch from two index, how am I using I'm using index encoder? That's it I'm, just calling just calling up once.

A

Yeah I'm not sure why I did it this way, but should be pretty easy just to do the just to do this and.

A

And then just called this dot right.

B

Yeah, okay, so I pulled that out.

A

I still know where this 40's coming from, but that's okay, okay, I'm gonna, commit.

A

And what we did was we got to got output cell house overs.

A

Cool all right, so we've got a diagram for the most part working there's a couple of bugs buggy things like I said you can see here. Okay, what do we got here? Add a language selector and put text and language block, so people can translate its blocks into their native languages.

A

And testing frameworks for react. Oh thank you.

A

A lot of surface area and integration tests as react components have lots of interactions, I'm a little afraid, honestly, a little afraid.

A

A

Okay, so let's I'm gonna keep this in brainstorm cuz! That's that's good! So let's say: let's I definitely know we're. Gonna want some set up some unit testing.

A

And a few basic tests that you know I said have something more specific: I should say: create unit tests for simple scalar encoder react component.

A

That's grunt work and automation, so this should read and should.

A

Run in Travis.

B

B

A

All right, you guys I'm going to take a lunch, break and II gonna run upstairs and grab a sandwich or something.