Help getting started: UI for network optimisation application

Learn
1

I am not a professional dev, let alone a professional UI dev. I do know some programming.

I’ve used the last several weeks of lock-down time to build a logistics network optimization application in Rust. The application can read inputs as CSV files or from a database. It is currently written as a CLI application.

However, as the application becomes more mature, I’d like to make it accessible via a web-UI. I’d like to write this in Elm, as it seems not as overwhelming in terms of getting started for a newcomer (learn a few hard things is preferable to me, hence I chose Rust)

Here is what I seek to achieve with the UI, in sequence of priority.

  1. Expose the CSV files and/or tables on the UI (a tabular format would be sufficient), then invoke the Rust application to solve the dataset

  2. Add data validations, highlighting incorrect entries and allowing corrections in the UI; perhaps a spreadsheet interface.

  3. Interactive and graphical UI to visualize the network.

I’d like to check if there are any “hello world” code bases that have a bare-bones implementation of for item 1 (essentially a database browser).

Additionally, pointers to useful libraries would be appreciated.

many thanks!

2

Here some thoughts:

  1. This sounds like a nice program to start learning Elm. I’m guessing you want a Text input and a submit button, once the button is clicked the content of the text input gets pushed to rust and the result gets displayed. I’d gladly guide you through writing that app.

    • I always recommend using mdgriffith/elm-ui instead of elm/html in your first project. It might feel like an overkill at first, but it will definitely help you down the line.

  2. I’m guessing you would have some validation function in the form of String -> Result Error Entry. That might be a bit tricky for a beginners project (depending on the complexity of that validation function). The displaying of the incorrect entries and the correction is a bit advanced, but if you have done step 1, you’ll figure that one out as well.

    • For the validation function I’d recommend using arowM/elm-form-decoder.
    • If you’re using elm-ui, then the displaying of the table (and highlighting of incorrect entries) will be a delight to implement :wink:

  3. Here I point you towards gampleman/elm-visualization. The complexity of that step mostly depends on whether the library has some nice build-in functions for your needs or not.

And now a quick plug: If you need some nice looking UI, I’d like to point you towards by very own package: Orasund/elm-ui-framework. I feel like your project would be a perfect use-case for my package. I’d glady help you with your project, if in return you give me feedback on my package. Deal?

3

Thanks for all the pointers, will take a look.

Do you know of any existing code-bases that do a grid of data – that I can start based off?

5

Here you are: https://ellie-app.com/8VqgR2Q3G4Va1

I’ve used two packages: Elm-ui and Elm-ui-Framework.
To install them locally on your computer, type the following into a command line:

elm install mdgriffith/elm-ui
elm install Orasund/elm-ui-framework

I’ve thrown in a few things that may not be very beginner-friendly. I’m hoping you can tackle one unknown thing at a time.

  • You might want to check out the Guide for the elm basics.
  • You can also check out the Elm Syntax if you have syntactical problems.
  • The documentation for Dict can be found here.
  • The documentation for Element can be found here.
  • The documentation for Framework can be found here
1 Like
6

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.