Add icons to completions

[blink1073]

Add icons to the the completions based on type (a la pycharm).

We would return a list of (completion, type) tuples for a completion, and display the icon in the completion list.

[blink1073]

I don't mind doing this one, if someone else provides me with the icons to use.

[blink1073]

ping @goanpeca, @SylvainCorlay

[SylvainCorlay]

This is interesting. Regarding the icons to use, if you don't find what you like in font-awesome, I am creating a font with the missing icons for #2260 (things like the Python logo, debug action icons etc)

Let me know if there is something to be added there.

Meanwhile, you can also check out the icons of the outline explorer: (see function.png bellow)

If you use existing spyder icons, it will be easier for me to rebind to the relevant font face that I use to replace them elsewhere.

I am currently travelling, and will come back and try to complete this work next week.

[blink1073]

It looks like we have everything covered except for attribute:

• method
• function
• class

[SylvainCorlay]

I guess that anything in the form of a circled letter should be covered with qtawesome, so don't hesitate to add one if you need it for this feature!

[goanpeca]

@blink1073, @SylvainCorlay yes I was thinking of using the outline explorer icons in the meantime, we can make one for attributes but should not be an issue.

[goanpeca]

Sorry... wrong button

[Nodd]

The icons in the completion widget should be the same as the outline explorer anyway, even if we change them later.
The attribute icons could be used in the outline explorer to mark properties (methods with the @Property decorator). It's an idea for another PR though.

[goanpeca]

Yes, I had opened an issue on that ... #1904

[ccordoba12]

@Nodd is always reading our minds. That was exactly what I was about to say, that the icons on the Outline Explorer should be the same as those added to the completion widget.

Another thing is that I would prefer using encircled letters for those icons instead of the classic ones (like cubes or things like that). For example

• (M) -> For Method
• (F) -> For Function
• (C) -> For Class
• (A) -> For Attribute

I think this will make far more easier to visually filter among completions.

I mention it because I've never been able to visually associate the classic icons with their counterparts on the programming language. Besides, this is the approach followed by RStudio too ;-)

[goanpeca]

We could also play with colors (or think of something) to highlight the privacy of the type in question.... private _private, __more _private and python special methods... __init__, __repr__.. etc

[ccordoba12]

@goanpeca, that depends on the info exposed by Jedi and Rope.

[Nodd]

👍 for letters in icons. Different symbol show the type difference but are bad to give what type it is.

The privacy do no depend on jedi/rope. Since the name is given it is easy to check the number of leading underscores.
On the other hand apart from building a hard-coded list, I don't know how to find all python special methods. The easier way would be to match __*__, it would also highight numpy special methods (like __array_finalize__) for example.

[blink1073]

I think the less icons the better, so as not to be confusing. Also, anyone have a quick way to make a 12x12 "A" icon?

[SylvainCorlay]

Inkscape? Don't put too much love into it!

[blink1073]

I tried and failed.

[blink1073]

How's this?

[blink1073]

Or capitalized:

[SylvainCorlay]

By the way, why 12x12?

[blink1073]

The other ones in that folder are 12x12.

[SylvainCorlay]

Ok - thanks. I think it is fine! I would vote for capitalized.

[Nodd]

When I tried to make an icon for cells in the outline explorer I created a background icon from the other icons. it's https://github.com/spyder-ide/spyder/blob/master/img_src/outline.png
There are other base icons in https://github.com/spyder-ide/spyder/blob/master/img_src/ to create new icons, you could have a look in there.

Now on the icon itself, the black is not very visible, all I see is a color disk with a darker center.

[ccordoba12]

+1 for capitalized too :-)

[blink1073]

Better, @Nodd?

[blink1073]

How you like me now?

[goanpeca]

Looking great @blink1073

[Nodd]

Great ! One more suggestion (maybe for another PR ?): add parenthesis () after function names. Maybe it would make sense only if they are autocompleted too.

The A is now clearly visible so it's better, but the background is still flat, as opposed to the other icons.

[blink1073]

Alternate icons welcome, @Nodd. 😄

[SylvainCorlay]

I don't think it is worth putting too much effort in polishing bitmap icons since it is going to be replaced with glyphs quite soon. Besides the appearance for circled letters will probably be close to

http://fortawesome.github.io/Font-Awesome/icon/question-circle/

[SylvainCorlay]

Regarding devising icons, I will write a wiki page or so on how to edit and add glyphs in the Spyder font.
Then all Spyder devs should be able to make new ones. Font design is a rabbit hole but making reasonably simple icons is reasonably easy.

[ccordoba12]

@blink1073, really great!! It's so cool ;-)

@Nodd, there's an issue about adding parentheses. I don't remember which one but I think @blink1073 said he'd take a look at it.

@SylvainCorlay, remember that the current icon set is still going to be supported, and updated a bit for 3.0 (by me :-). So @blink1073's effort is not wasted time at all ;-)

[Nodd]

Looking at the screenshot: np.add is a class ? That's confusing...

>>> import numpy as np
>>> np.abs
<ufunc 'absolute'>
>>> type(np.abs)
<class 'numpy.ufunc'>

Should we special-case ufuncs ? That could be confusing too.

[ccordoba12]

@Nodd has a really good point! I think we should give a special treatment to ufunc's and make the completion widget to declare them as functions instead of classes.

@blink1073, what do you think?

[Nodd]

I think that gufunc is a thing too, but I don't know what exactly. Maybe it should be treated the same.

[blink1073]

The problem is we don't have enough information to detect if it is a ufunc. We can't just match on the name of the function, because there could be another function with the same name.