CadQuery MVP integration #281
Reference in New Issue
Block a user
Delete Branch "kurt/274"
Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?
Preview Link
I also did a bit of tidy up work, and decided to make the new IDE a little more accessible from the main website. This stuff is still in development, but the other main Cad package on the website we plan on deprecating soon anyway so now the bug plus button has the following options.
The IDE looks like this now (not it's final form, but just some quick bits of tidy up).
@jmwright, I think I'm going to have to move on from the lamda-docker images, I picked them originally because I liked the idea of not having to think about scaling, and being charged very little in the mean time. but they
Since it's working atm, I'll leave it as is, but will also be thinking and researching a little as to what I think a good way to deploy things are, open to input, especially since you mentioned caching benefits earlier.
@franknoirot, your call on if you want to review any of the frontend stuff on this one. The main thing I did was get rid of the store middle where and added "thunks" instead as I was having more issues with stale state and thunks mostly solved with (with one hacky bit, but the hackiness shouldn't spread), I've sprinkled a few comments around the place.
@@ -13,6 +13,7 @@]},"dependencies": {"@headlessui/react": "^1.0.0",Yay, I've been waiting for this 1.0 release. I had been using material-UI which I'd like to stop doing.
I'm using "vs-dark" theme for the editor, only because I think a dark theme make sense since it's the general preference for most devs when it comes to editors at least, happy to load a nicer theme, but for now any dark theme will do. The following are some colors to match this theme for the console. Not crucial but also not hard to do.
maybe should have added this as variable like the others to denote its to match the vs-dark theme. The grays in tailwind are very cool/blue and clash a little IMO, (Actually I think tailwind 2.0 has much more grays but anyway).
@@ -35,3 +28,3 @@if (key === 's' && (ctrlKey || metaKey)) {event.preventDefault()dispatch({ type: 'render', payload: { code: state.code } })thunkDispatch((dispatch, getState) => {Hash logic has been moved to the toolbar.
@@ -49,2 +66,4 @@defaultLanguage={ideTypeToLanguageMap[state.ideType] || 'cpp'}language={ideTypeToLanguageMap[state.ideType] || 'cpp'}onChange={handleCodeChange}/>I wanted this loading message to be light text on dark background to match roughly the theme of the editor, but I there must be very specific styles that force it to be white, I didn't bother digging into it too much.
This is where the stl is loaded in for CadQuery.
@@ -0,0 +1,48 @@import { Link, routes } from '@redwoodjs/router'import Svg from 'src/components/Svg/Svg'import { Popover } from '@headlessui/react'I think the
<Menu />component would have made more sense from headlessui, but I got it working with Popover first and when I tried swapping to Menu, I was just fighting to get the styles to not do weird things 🤷Sorry. My fault.
The controller needing to be call more than once with different settings (first the camera, and the viewport size) was confusing, and I can imagine think WTF down the road, I just put these details in the store as well as you originally did @franknoirot. much more straight forward.
@@ -5,0 +7,4 @@? actionOrThunk(dispatch, getState): dispatch(actionOrThunk)}I think redux thunks might be a little more complex than this, but not by much. Basically you can use this like a normal dispatch, but if you want to something async you just pass it a function instead, you would have already scrolled passed examples.
This is the one hacky thing I did in regards to the thunks. I'm okay with it since now all the new thunks can use the getState function() and shouldn't need to implement more hacks.
@Irev-Dev This looks great. I did try to copy the CadQuery braille example into the editor, but every time I click
RenderI get "network error" in the CadHub console. I'm not sure if it's related the the lambda result size limitations you mentioned above, or if there is something in my script that's causing a problem. I've posted the error from Firefox's developer console below.@jmwright No this seems like a different issue. Seems like it might be a edge case specific this braille example.
The following at least renders something
But obviously I've messed up your script.
I get
SyntaxError: Unexpected token in JSON at position XXXso an issues with serialising and deserialising.it seems it doesn't like the lines
text_lines = [u'⠠ ⠉ ⠁ ⠙ ⠠ ⠟ ⠥ ⠻ ⠽']and I thinkblank = u'⠀'as well.Edit: looks like it's a problem with base64 and utf-8
https://stackoverflow.com/questions/30106476/using-javascripts-atob-to-decode-base64-doesnt-properly-decode-utf-8-strings
Edit2: I've asked some friends who know a bit more about aws infra, and they've got a suggestion for how to overcome the 10mb limit by using s3 signed urls or something. I'm yet to look into it but it sounds promising, but I think it might fix this issue as a side effect as the base64 encoding has to do with this line and is because I was/am to returning the 3d mesh (or image for openscad) directly which will not be needed if I use the s3 option.
@@ -6,0 +10,4 @@element.scrollTop = element.scrollHeight - element.clientHeight}}, [state.consoleMessages])This effect scrolls the console to the bottom whenever there is a new message. Users can still scroll up to look at history, it just snaps back down next message. We might want to add a checkbox to turn off/on this functionality, but I think this is a good default and unless someone complains about it, might as well stay as is.
@@ -0,0 +1,48 @@import { Link, routes } from '@redwoodjs/router'import Svg from 'src/components/Svg/Svg'import { Popover } from '@headlessui/react'I'll try to make a note of this for future UI work! To check out the Menu component.
All good all good!
Just left some comments in to flag for myself for future UI work, but this is looking great!
@@ -33,3 +31,3 @@const tempFile = await makeFile(file)const tempFile = await makeFile(file, '.scad', nanoid)try {You've managed to make this backend code really readable even without me having run it before, cheers.
@@ -37,3 +37,3 @@<Router><Route path="/dev-ide" page={DevIdePage} name="devIde" /><Route path="/dev-ide/{cadPackage}" page={DevIdePage} name="devIde" /><Route path="/policies/privacy-policy" page={PrivacyPolicyPage} name="privacyPolicy" />Question about this @Irev-Dev : is this inclusion of the CAD package in the URL only for this Dev stage, or are you envisioning the package being encoded into people's project URLs? I think it can definitely work just checking your vision.
@@ -6,0 +10,4 @@element.scrollTop = element.scrollHeight - element.clientHeight}}, [state.consoleMessages])Hey nice! So few lines of code. Yeah that should be configurable in future: that's one of those less-technical bits I can deal with for you coming up, so you don't have to waste time on it.
Similar to with the IdeConsole? I can make a note of it if you like.
@@ -42,0 +45,4 @@<divclassName="text-gray-700 font-ropa-sans relative"style={{ backgroundColor: 'red' }}>I had missed you added this, what a great addition! And for it to be agnostic of the CAD package; this is the kind of unifying stuff that's gonna make it so nice to switch between packages.
@@ -49,2 +66,4 @@defaultLanguage={ideTypeToLanguageMap[state.ideType] || 'cpp'}language={ideTypeToLanguageMap[state.ideType] || 'cpp'}onChange={handleCodeChange}/>Is there somewhere we can gather up these low-priority frontend things for me to go through and clean up for you? I think that might be a good way for me to be useful.
Tiny thing for future, this key might want to be package-agnostic at some point.
@@ -49,2 +66,4 @@defaultLanguage={ideTypeToLanguageMap[state.ideType] || 'cpp'}language={ideTypeToLanguageMap[state.ideType] || 'cpp'}onChange={handleCodeChange}/>Not real sure, might be worth having a chat about where to put what. my intuition says there's no problem with lots of little issues for things you want to get to.
@@ -37,3 +37,3 @@<Router><Route path="/dev-ide" page={DevIdePage} name="devIde" /><Route path="/dev-ide/{cadPackage}" page={DevIdePage} name="devIde" /><Route path="/policies/privacy-policy" page={PrivacyPolicyPage} name="privacyPolicy" />Good question, I think there's no harm in having cad-package in the url for new/draft parts, (I'm thinking we'll keep the swap over to the draft url that CascadeStudio currently uses at some point!?). But for saved parts, we'll be pulling information about what cad-package from the db along with the code so I think for that the URL will be the same as what is now for CascadeStudio
userName/partName.I don't think we've talked about it, but I think for parts that are hosted on github, in order for users to make the integration work they will need to include a
cadhub.jsonin the root of the project (I'm leaning towards json, but could be yml or toml). It will be a place for us to get some meta information, the project title, the cad-package, and probably the entry/main file i.e"main": "./src/cool.scad"is what I can think of the top of my head (We'll need docs for these details). Maybe a Cadhub version too, incase we change the way the github integration works we might still be able to support the old integration style anyway getting ahead of myself. I was just trying to say for projects like this where they are not stored in our db but on github we can put insist on the cad-package info being in the repo (we could store meta-data in our db about projects but I think that defeats the purpose, better to have the repo to contain all the config).Sorry I've already written too much, considerations for what's in this PR and the cad-package in the URL, If I wanted to instead put that info in the data-store. I would have had to add the context provider much higher in the app hierarchy. This is because the nav-bar where the plus button is, is higher than the ide right. That would be a fine thing to do and honestly I think it's only a matter of time before we do, but for the sake of not having to do that for this change I put it in the URL, and I like I said I don't see any harm for it staying there, unless you can think of one? but I wouldn't say I have a vision for it though haha.
@@ -0,0 +1,48 @@import { Link, routes } from '@redwoodjs/router'import Svg from 'src/components/Svg/Svg'import { Popover } from '@headlessui/react'I'm not sure what we're missing out on by using the popover instead, probably some good accessibility defaults. I say I think menu would be better just from the description of when menu and popover should be used from the docs.
Good point, I centralised these things a bit more in
924de4cWe could put new colors into the tailwind config, but I wasn't sure it was worth it without properly picking a theme.
Yup fixed this up.
@@ -37,3 +37,3 @@<Router><Route path="/dev-ide" page={DevIdePage} name="devIde" /><Route path="/dev-ide/{cadPackage}" page={DevIdePage} name="devIde" /><Route path="/policies/privacy-policy" page={PrivacyPolicyPage} name="privacyPolicy" />Maybe in the future it could also have an array of files/directories that are dependencies so they can be collected by CadHub before execution?
In the future for performance reasons, would it make sense to cache the CodeCAD from GitHub on your side and only update that when a change is pushed to the main branch?
@@ -37,3 +37,3 @@<Router><Route path="/dev-ide" page={DevIdePage} name="devIde" /><Route path="/dev-ide/{cadPackage}" page={DevIdePage} name="devIde" /><Route path="/policies/privacy-policy" page={PrivacyPolicyPage} name="privacyPolicy" />Maybe, I know that it's possible to do a shallow clone, so maybe that will be fast enough that won't need an array of files but I guess performance might be the decider. In an ideal world I would prefer not to as that feels like an implementation leak to me, but we'll see.
I think long term some kind of caching makes sense. A friend of mine suggested "you can make the lambda post a SQS message and then use the docker container to process an SQS queue" so if I stick with AWS that might be an option that's more cache friendly than the current docker-lamda setup.