[UI] Terminal

[fionataeyang]

@todo

• implement first iteration of component
  • create repository
  • set up local dev environment with pnpm
    • pnpm link the modules locally
      • pnpm link --global (to make them available)
      • pnpm link --global <./package.json#name>
  • @output 📦 repository
• refactor component for last Fiona's commit and tag it with v0.0.0-alpha
  • @input 📦 repository
  • refactor commit with latest terminal/log to use versions
  • move terminal/logs to dev dependencies
  • rebase main branch on top of taged version
  • update package.json (new path for the dependencies)
  • @output 📦 v0.0.0-alpha
• refactor component latest commit with new comm protocol and tag with v0.0.1.-alpha
  • @input 📦 v0.0.0-alpha
  • refactor latest commit with latest terminal/log to use versions
  • refactor communication protocol to use latest message standard
  • move terminal/logs to dev dependencies
  • rebase main branch on top of taged version
  • update package.json (new path for the dependencies)
  • update github page links
  • build new bundle.js to include changes in demo page
  • @output 📦 v0.0.1-alpha
• implement next component version v0.0.2-alpha
  • @input 📦 v0.0.1-alpha
  • fix bugs & add features for v0.0.2- [ ] support single select (Support a filter for search swarm key and terminal messages using)
    • finish design
    • start implementing
    • Refactor codes(protocol, receive, recipients)
    • refactor all messages and status and update documentation
  • set up github page using demo maker component dev dependency
  • document component api in readme or whatever needs to show in the readme
    • document apis for each screen and return available actions
      • @input ❓ wireframes action bars
  • document component api in readme
    • list all opts
    • list all roles
    • list all incoming message types
    • list all outgoing message types
    • list all possible status the component instance can be in
  • install latest dev dependencies
    • budo
    • browserify
    • datdot-terminal
  • install latest specific version of dependencies
    • [UI] Logs #230
  • update github page links
  • build new bundle.js to include changes in demo page
  • update package.json (new path for the dependencies)
  • @output ❓ repository#v0.0.2-alpha

---

@info

Repo 📂

https://github.com/datdotorg/datdot-terminal

[fionataeyang]

Terminal

latest

v2

Compact

Expanded off

Expanded on

Comfortable

Expanded off

Expanded on

Adjust type to fit longest width that it would be easier to trace and align into same vertical line for view.

---

Previous design

v1

One row message(have any good name for it)

Two rows message (have any good name for it)

v0

Demo A

The types will be automatically changed colors. Thus, I don't apply any colors into it. Help me confirm A & B.

Demo B

The idea for B is make two lines that there is unnecessary manually to collapse on/off, and directly to check all information quickly.

[fionataeyang]

@serapath
The footer information needs your help to check. I've checked console of Chrome, there are displayed the different levels. also what the information would you like to display for STATUS? I just copied it from old one and pasted in, so nothing changed, only make it to one line, it could be able to scroll right when the content is overflow.

For types, I make one line and counts for them, it is able to scroll when the content is overflow as same as STATUS.
And what is levels doing? I have no clue, just put there to see there is a levels selector(dropdown).

[serapath]

cool. i like both.

1.
maybe we really should thinkg about the feature from gmail.
gmail allows compact or comfortable to make it dense or give more whitespace (maybe even multiple lines for a single log item)

2.
maybe we can start easy and just try to have a counter that shows the number of messages? ... just for a start

3.
i thought about levels again and they are about "importance" of a log message, but what is important and what is not is sometimes subjective... so i am thinking that maybe levels will be something that we will do a bit later and we won't use it in the code when we log messages, but instead we will allow people in the devtools to define a small test and then the devtools run the test for each log message and if a log message matches (or passes) the test it is marked as "important" ...and maybe we give it a special .important class to highlight the log... and a user can maybe change those tests depending on what is important to them when they use our "datdot terminal" :D

4.
yes - colors should be derived automatically.
here is a snippet that helps you to deterministically derive colors for types automatically:

function str2hashint (str) {
  var hash = 0
  for (var i = 0; i < str.length; i++) hash = str.charCodeAt(i) + ((hash << 5) - hash)
  return hash
}
function int2hsla (i) { return `hsla(${i % 360}, 100%, 70%, 1)` }

// ------------------------------------------------
// TEST
// ------------------------------------------------
// 1. some example message types:
const types = ['foo', 'bar', 'baz', 'info', 'data', 'fail', 'request', 'response']

// 2. generate colors and compare them:
for (var i = types.length; i--;) {
  const type = types[i] // string
  const integer1 = str2hashint(type)
  const integer2 = str2hashint(type)
  const color1 = int2hsla(integer1)
  const color2 = int2hsla(integer2)
  const same = color1 === color2
  if (same) console.log({ color: color1 })
  else console.error({ color1, color2 })
}

[fionataeyang]

1. I made one row message and two rows messages to selectable. Maybe I should change it to rename compact and comfortable, I wasn't recognized these two words.
2. I've checking Gmail and to see it has an option for layout, I think it should be called layout instead of compact message, becoz it is only effect space of message, not for layout. One row and two rows are a bit different layout.
3. Um...I have no idea for this, but yeah we could do it later, and I still keep it in design.
4. Will try later when refactor terminal

[serapath]

I think we definitely should do one compact layout mode, where we focus on putting as much lines and information into the screen as possible

And then comfort mode, which could be 2 lines or maybe more or whatever, the focus is to make it human friendly (maybe like datdot-ui-logs) ...so feel free to make it as nice as you want.

...but yeah, generally, i think your demos above, A and B are ok i think.

[fionataeyang]

I think we definitely should do one compact layout mode, where we focus on putting as much lines and information into the screen as possible

And then comfort mode, which could be 2 lines or maybe more or whatever, the focus is to make it human friendly (maybe like datdot-ui-logs) ...so feel free to make it as nice as you want.

...but yeah, generally, i think your demos above, A and B are ok i think.

Becoz you was asking me to reference Gmail, there is a timestamp. XD
Basically they are still same design, just add timestamp, and adjust footer, not much change there.

[fionataeyang]

@serapath
It's difficult to me to store types via protocol, even there was a log via recipients'logs' without protocol. How do I store them in demo.js and send an array back to logs?

function str2hashint (str) {
  var hash = 0
  for (var i = 0; i < str.length; i++) hash = str.charCodeAt(i) + ((hash << 5) - hash)
  return hash
}
function int2hsla (i) { return `hsla(${i % 360}, 100%, 70%, 1)` }

// ------------------------------------------------
// TEST
// ------------------------------------------------
// 1. some example message types:
const types = ['foo', 'bar', 'baz', 'info', 'data', 'fail', 'request', 'response']

// 2. generate colors and compare them:
for (var i = types.length; i--;) {
  const type = types[i] // string
  const integer1 = str2hashint(type)
  const integer2 = str2hashint(type)
  const color1 = int2hsla(integer1)
  const color2 = int2hsla(integer2)
  const same = color1 === color2
  if (same) console.log({ color: color1 })
  else console.error({ color1, color2 })
}

[serapath]

not sure what you mean, but maybe something like this?

const statusbar = document.querySelector('#statusbar')

const types = { }

socket.on(message => { store_types(message.type) })

function store_types (type) {
  if (types[type]) types[type].count += 1
  else types[type] = { count: 1, color: int2hsla(str2hashint(type)) }
  updateStatusBar(types[type])
}

function update_statusbar (type, { count, color }) {
  var el = statusbar.querySelector(`[data-type="${type}"]`)
  if (!el) {
    el = document.createElement('div')
    statusbar.append(el)
  }
  el.setAttribute('data-type', type)
  el.style = `background-color: ${color}`
  el.innerHTML = `${type}:${count}`
  console.log(list_types())
}

[fionataeyang]

Where's socket form?

socket.on(message => { store_types(message.type) })