Code example generation for search page #381

moradology · 2023-10-18T00:19:05Z

This PR aims to enable example code generation for searches.

m-mohr · 2023-10-18T12:49:27Z

src/StacBrowser.vue

 Vue.use(CardPlugin);
+Vue.use(BadgePlugin)
+Vue.use(VueHighlightJS);


Can this be registered so that it doesn't import into the global bundle? Ideally this would only be loaded if needed.

Maybe you could say a bit more - I'm new to Vue, so some of the concepts here require me to squint a bit more than others might

This should only be imported in the CodeBox component and not use Vue.use. I'm not sure whether this library supports this though.

Similarly, the Bootstrap Badges should also be imported individually where the are used. I think there should be examples around in the code if you search for the BBadge component.

I'm a bit busy right now so can't elaborate further at this point.

I think I follow you - just been using python and jvm lingo for long enough that 'global bundle' tripped me up. Also, I think the badge plugin is from prior work and I accidentally shifted its order to the diff's confusion

Global Bundle is probably also not the right terminology. I think better is "app bundle" or "initially loaded files". I pretty much just want that it is lazily loaded when needed, not everytime the page loads. :-)

m-mohr · 2023-10-18T12:50:53Z

src/views/Search.vue

@@ -237,13 +260,90 @@ export default {
      }
      return false;
    },
+    filterString() {


Ideally all the code related to the code generation etc. should be in a separate component, not in the Search component.

Actually, even better would be to have model classes for code generation. One method per use case and one class per language. Similarly to what I did here for another project: https://github.com/Open-EO/openeo-web-editor/tree/master/src/export

All UI related stuff should still be in the Vue Component, of course. So really just the code generation in classes.

m-mohr · 2023-10-18T12:53:46Z

Thanks for the PR. I left some general comments about the code structure, haven't had a lot of time yet to do a deeper review.

I think I'd like to not show the code by default next to the map. Maybe can we add a button somewhere (next to the Submit / Reset button?) that only shows the code on demand?

As a second idea, it would be great if we could show the generated CQL2 Text & JSON code.

moradology · 2023-10-18T18:59:37Z

RE placement next to the map: How about a tab above the map/item returns which allows users to look at code examples instead of results?

m-mohr · 2023-10-18T19:59:54Z

Thematically that doesn't quite match for me. The left side is the search parameters, which is what the generated code shows. So it should be on the left side. The right side are results and the code isn't really that.

Thinking about this longer-term (see #114), I'd also like to generate code for pretty much every page at some point. So I'm wondering whether it should move into the toolbar in the top right of the page (where API, Source, Share, ... are). We could add a general "Open In" or "Export to" button...

moradology · 2023-10-18T20:05:15Z

Your views about the location sound right to me. I appreciate the push back, as I'm no designer and my notions here might not be fully baked

m-mohr · 2023-10-18T20:09:00Z

I'm not a designer either, so if there is any UI/UX expert that wants to chime in.... ;-)

m-mohr · 2023-10-18T20:09:47Z

package.json

@@ -41,8 +41,10 @@
    "bootstrap-vue": "^2.21.2",
    "bs58": "^4.0.1",
    "chart.js": "^4.3.0",
+    "clipboard": "^2.0.11",


We already use v-clipboard, can you re-use that instead of a new/this dependency?

stephenkilbourn · 2023-10-20T20:22:36Z

I'm not a designer either, so if there is any UI/UX expert that wants to chime in.... ;-)

@m-mohr - I'm also not a design expert, but an option that we looked at was making this a modal and a button to open it next the the submit/reset buttons. I've updated the PR with this change

m-mohr · 2023-10-30T16:31:59Z

A Modal should work, indeed. We've used popovers until now, but that doesn't works better for less information.

I don't have the time right now to give a deep review, sorry.

Why was R removed? Ideally, we'd include even more (e.g. C#, R, Java, Rust, ...)

moradology · 2023-10-30T16:35:43Z

R was removed just because the API doesn't have a similar, simple translation from JSON to request. I have some example code that I stashed which uses rstac, but am a bit busy at the moment else I'd have finished it up and included it

j08lue · 2024-01-10T14:28:36Z

Just for the record, this is similar to the Python code snippet generator of Microsoft Planetary Computer:

I think the choice of modal for exposing the code snippet is good, since viewing and copying the code is a UI function otherwise separate from the main user flow, so it is adequate that it appears and disappears without otherwise affecting the UI, IMO.

m-mohr

Thanks again, I think we need a bit more polishing here. A couple of small change requests.

Also, STAC Browser in the meantime got Collection Search support and I'm not sure whether the PR caters for that correctly?

m-mohr · 2024-03-15T14:22:31Z

src/components/SearchCode.vue

+      },
+      data() {
+        return {
+          componentId: `${this.language}Content`,


Seems unsused

m-mohr · 2024-03-15T14:23:39Z

src/components/SearchCode.vue

+        this.updateCode();
+      },
+      methods: {
+        dedent(str) {


This dedents a bit too much, the JS code is not indented at all, which looks rather weird.

m-mohr · 2024-03-15T14:24:32Z

src/components/SearchCode.vue

+            console.error("Error fetching STAC data:", error);
+          });`);
+        },
+        updateCode() {


It might be a bit better to only generate what's shown, not everything upfront, especially if we extend this.

m-mohr · 2024-03-15T14:24:54Z

src/components/SearchCode.vue

+          componentId: `${this.language}Content`,
+          pythonCode: null,
+          javascriptCode: null,
+          rCode: null


Seems unsused

m-mohr · 2024-03-15T14:25:55Z

src/components/CodeBox.vue

+    components: {
+      CopyButton: () => import("./CopyButton.vue")
+    },
+    props: {


Both props should probably be required.

m-mohr · 2024-03-15T14:26:32Z

src/components/SearchFilter.vue

      </b-card-footer>
    </b-card>
+    <b-modal id="code" :title="$t('exampleCode')" size="lg">


The model shows a Cancel and OK button, it seems one Close button is enough?

Working syntax highlighting

b973c18

m-mohr reviewed Oct 18, 2023

View reviewed changes

Break searchbox out into its own component

36e86dc

moradology changed the title ~~Working syntax highlighting~~ Code example generation for search page Oct 18, 2023

m-mohr reviewed Oct 18, 2023

View reviewed changes

moradology and others added 5 commits October 20, 2023 09:26

Move example code to modal

d1cdb0a

implement CopyButton in modal

2598ae2

remove stray console.log

904cb09

remove unused highlight.js import

7942f01

remove extra space in python query

9f02d73

Remove R tab

33d7c2c

moradology marked this pull request as ready for review October 30, 2023 15:27

m-mohr force-pushed the main branch from 4d15e18 to 9561db7 Compare March 7, 2024 22:09

j08lue mentioned this pull request Mar 14, 2024

Enable "Open in Notebook" for datasets on VEDA NASA-IMPACT/veda-jupyterhub#3

Open

m-mohr requested changes Mar 15, 2024

View reviewed changes

m-mohr added this to the 3.5.0 milestone Sep 11, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Code example generation for search page #381

Code example generation for search page #381

moradology commented Oct 18, 2023

m-mohr Oct 18, 2023

moradology Oct 18, 2023

m-mohr Oct 18, 2023 •

edited

Loading

moradology Oct 18, 2023 •

edited

Loading

m-mohr Oct 18, 2023 •

edited

Loading

m-mohr Oct 18, 2023

m-mohr Oct 18, 2023 •

edited

Loading

m-mohr commented Oct 18, 2023 •

edited

Loading

moradology commented Oct 18, 2023

m-mohr commented Oct 18, 2023 •

edited

Loading

moradology commented Oct 18, 2023

m-mohr commented Oct 18, 2023

m-mohr Oct 18, 2023

stephenkilbourn commented Oct 20, 2023 •

edited

Loading

m-mohr commented Oct 30, 2023 •

edited

Loading

moradology commented Oct 30, 2023

j08lue commented Jan 10, 2024

m-mohr left a comment

m-mohr Mar 15, 2024

m-mohr Mar 15, 2024

m-mohr Mar 15, 2024

m-mohr Mar 15, 2024

m-mohr Mar 15, 2024

m-mohr Mar 15, 2024

Code example generation for search page #381

Are you sure you want to change the base?

Code example generation for search page #381

Conversation

moradology commented Oct 18, 2023

Choose a reason for hiding this comment

Choose a reason for hiding this comment

m-mohr Oct 18, 2023 • edited Loading

Choose a reason for hiding this comment

moradology Oct 18, 2023 • edited Loading

Choose a reason for hiding this comment

m-mohr Oct 18, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

m-mohr Oct 18, 2023 • edited Loading

Choose a reason for hiding this comment

m-mohr commented Oct 18, 2023 • edited Loading

moradology commented Oct 18, 2023

m-mohr commented Oct 18, 2023 • edited Loading

moradology commented Oct 18, 2023

m-mohr commented Oct 18, 2023

Choose a reason for hiding this comment

stephenkilbourn commented Oct 20, 2023 • edited Loading

m-mohr commented Oct 30, 2023 • edited Loading

moradology commented Oct 30, 2023

j08lue commented Jan 10, 2024

m-mohr left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

m-mohr Oct 18, 2023 •

edited

Loading

moradology Oct 18, 2023 •

edited

Loading

m-mohr Oct 18, 2023 •

edited

Loading

m-mohr Oct 18, 2023 •

edited

Loading

m-mohr commented Oct 18, 2023 •

edited

Loading

m-mohr commented Oct 18, 2023 •

edited

Loading

stephenkilbourn commented Oct 20, 2023 •

edited

Loading

m-mohr commented Oct 30, 2023 •

edited

Loading